一、安裝dreamweaver
一、建立站點(diǎn)文件夾
在電腦硬盤上e:新建一個(gè)文件夾作為網(wǎng)站的根目錄，里面包含四個(gè)文件夾 ，分別為images（放圖片），flash（放flash），css（樣式表），js（javascript）。
打開dreamweaver，設(shè)置站點(diǎn)
站點(diǎn)—新建站點(diǎn)—選擇高級(jí)
點(diǎn) 確定，這樣站點(diǎn)就建立好了
四、新建HTML文檔，保存首頁(yè)為index.htm
五、HTML基礎(chǔ)知識(shí)
1、文檔類型
當(dāng)我們用dreamweaver新建一下html格式文檔時(shí)，查看源代碼，會(huì)發(fā)現(xiàn)代碼最上部有如下這句話：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://xintu.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
這句話標(biāo)明本文檔是過(guò)渡類型，另外還有框架和嚴(yán)格類型，目前一般都采用過(guò)渡類型，因?yàn)闉g覽器對(duì)XHTML的解析比較寬松，允許使用HTML4.01中的標(biāo)簽，但必須符合XHTML的語(yǔ)法。許多朋友在制作頁(yè)面時(shí)，往往喜歡把這句刪除掉，在這里建議大家一定要保留這句話，刪除它后可能引起某些樣式表失效或其它意想不到的問(wèn)題。
2、語(yǔ)言編碼
接下來(lái)我們還會(huì)發(fā)現(xiàn)這樣一句話：
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
它標(biāo)示文檔的語(yǔ)言編碼。就像我們平時(shí)所說(shuō)的漢語(yǔ)、英語(yǔ)一樣。這里的gb2312告訴瀏覽器，本文檔采用簡(jiǎn)體中文編碼；還有一種常用的編碼是UTF-8編碼，它是國(guó)際通用的編碼。不管我們采用哪種編碼，有一點(diǎn)就是包含的css樣式表和其它文件也必須和本文檔的編碼一樣，要不就會(huì)出現(xiàn)亂碼。
3、html標(biāo)簽
html標(biāo)簽在頁(yè)面中都必須結(jié)束。成對(duì)的標(biāo)簽以“/標(biāo)簽名”結(jié)束，有些單一的標(biāo)簽在本身的結(jié)尾打上/來(lái)結(jié)束，這是xhtml代碼編寫的規(guī)范
成對(duì)的標(biāo)簽：
<head>{...}</head>
<body>{...}</body>
<div>{...}</div>
<span>{...}</span>
<p>{...}</p>
......
單一的標(biāo)簽：
<img src="" />
<br />
.......
3.1 分段 <p>…… </p>
<p>黃石文化宮</p>
<p>起源培訓(xùn)學(xué)校 </p>
3.2 換行 <br />
黃石文化宮起<br />
源培訓(xùn)學(xué)校
3.3 標(biāo)題
標(biāo)題1：<h1>黃石文化宮起源培訓(xùn)學(xué)校</h1>
標(biāo)題2：<h2>黃石文化宮起源培訓(xùn)學(xué)校</h2>
標(biāo)題3：<h3>黃石文化宮起源培訓(xùn)學(xué)校</h3>
標(biāo)題4：<h4>黃石文化宮起源培訓(xùn)學(xué)校</h4>
標(biāo)題5：<h5>黃石文化宮起源培訓(xùn)學(xué)校</h5>
標(biāo)題6：<h6>黃石文化宮起源培訓(xùn)學(xué)校</h6>
3.4 span標(biāo)簽
<html xmlns="http://xintu.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<style type="text/css">
<!--
.STYLE1 {
font-family: Verdana, Arial, Helvetica, sans-serif; //字體
font-size: 14px; //字體大小
color: #FF0000; //字體顏色
font-weight: bold; //字體加粗
font-style: italic; //字體傾斜
}
-->
</style>
</head>
<body>
<div><span>黃石文化宮起源培訓(xùn)學(xué)校</span> // align 字體對(duì)齊（left center right）
</div>
</body>
</html>
3.5 DIV標(biāo)簽
<div align="left"><span>黃石文化宮起源培訓(xùn)學(xué)校</span></div>
3.6 項(xiàng)目列表 UL和LI
<div>
<ul>
<li><span>黃石文化宮起源培訓(xùn)學(xué)校</span></li>
<li><span>黃石文化宮起源培訓(xùn)學(xué)校</span></li>
<li><span>黃石文化宮起源培訓(xùn)學(xué)校</span></li>
<li><span>黃石文化宮起源培訓(xùn)學(xué)校</span></li>
<li><span>黃石文化宮起源培訓(xùn)學(xué)校</span></li>
<li><span>黃石文化宮起源培訓(xùn)學(xué)校</span></li>
</ul>
</div>
3.7 編號(hào)列表 OL 和 LI
<div>
<ol>
<li><span>黃石文化宮起源培訓(xùn)學(xué)校</span></li>
<li><span>黃石文化宮起源培訓(xùn)學(xué)校</span></li>
<li><span>黃石文化宮起源培訓(xùn)學(xué)校</span></li>
<li><span>黃石文化宮起源培訓(xùn)學(xué)校</span></li>
<li><span>黃石文化宮起源培訓(xùn)學(xué)校</span></li>
<li><span>黃石文化宮起源培訓(xùn)學(xué)校</span></li>
</ol>
</div>
3.8 鏈接
<a target="_parent" >黃石文化宮起源培訓(xùn)學(xué)校</a></span></li>
鏈接<a> …… </a>
Herf=“鏈接的網(wǎng)址”
Target="_blank” 這里可以是blank 新打開一個(gè)空白頁(yè)
Target="_parent” 這里可以是parent 直接在當(dāng)前頁(yè)面打開
3.9 圖片 <img src="images/11.gif" width="242" height="250" />
<div><a href="#"><img src="images/11.gif" alt="黃石平面設(shè)計(jì)培訓(xùn)" width="242" height="250" border="0" /></a></div>
3.10 表格
<table width="600" border="0" cellpadding="0" cellspacing="0" bordercolor="#FF0000" background="images/11.gif" bgcolor="#FFFF00">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
3.11 單元格
<td width="200" height="40" valign="middle" bordercolor="#3399FF" background="images/11.gif" bgcolor="#FF6600">黃石起源培訓(xùn) </td>
六、CSS內(nèi)部樣式
這里要知道什么是內(nèi)容，什么是填充 什么是邊框 什么是邊界
<div id="header">此處顯示 id "header" 的內(nèi)容</div>
#header {
height: 300px;
width: 400px;
padding: 20px; //填充
border: 5px solid #FF0000; //邊框?qū)挾葹?，solid是實(shí)線，#FF0000邊框的顏色
margin: 20px; //邊界
}
掃描二維碼推送至手機(jī)訪問(wèn)。
版權(quán)聲明：本文由信途科技轉(zhuǎn)載于網(wǎng)絡(luò)，如有侵權(quán)聯(lián)系站長(zhǎng)刪除。
轉(zhuǎn)載請(qǐng)注明出處http://macbookprostickers.com/xintu/17073.html
