手工編寫(xiě)網(wǎng)頁(yè)樣式實(shí)例（建立頁(yè)面基本框架）
在前面章節(jié)，讀者已經(jīng)初步接觸了使用Dreamweaver軟件創(chuàng)建網(wǎng)頁(yè)文件，也學(xué)習(xí)了如何使用CSS來(lái)控制網(wǎng)頁(yè)內(nèi)容的顯示方式，這些只是網(wǎng)頁(yè)制作的初步知識(shí)，更深入的內(nèi)容將從本章開(kāi)始慢慢地介紹?，F(xiàn)在從零開(kāi)始，手工編寫(xiě)HTML文件，逐漸加深熟悉編輯網(wǎng)頁(yè)文件的基本流程。
建立基本框架的步驟：
（1）新建文件。在所在目錄下單擊鼠標(biāo)右鍵，在菜單中選擇【新建】＞【文本文檔】菜單命令，如下圖所示：
（2）重命名文檔為03-01.html，如下圖所示
（3）在03-01.html文件上單擊鼠標(biāo)右鍵，選擇【打開(kāi)方式】＞【記事本】選項(xiàng)，使用記事本打開(kāi)新建的頁(yè)面文件，如下圖所示：
（4）在打開(kāi)的記事本中，輸入html的基本框架代碼，如下所示：
<html>
<head>
<title>手工使用CSS技術(shù)制作網(wǎng)頁(yè)實(shí)例過(guò)程</title>
</head>
<body>
</body>
</html>
（5）在<body>標(biāo)簽中加入內(nèi)容信息標(biāo)題，代碼如下：
<h1>智慧與美貌并重 青年人最?lèi)?ài)的手機(jī)推薦</h1>
（6）使用<img>標(biāo)記插入一幅圖片，代碼如下：
<img src="phone.gif" width="207" height="128"/>
（7）使用<p>標(biāo)記輸入正文內(nèi)容，代碼如下：
<手機(jī)產(chǎn)業(yè)的發(fā)展越來(lái)越快，手機(jī)的智能化已經(jīng)成為當(dāng)今市場(chǎng)上的主流趨勢(shì)。對(duì)一部智能手機(jī)來(lái)說(shuō)，高配置固然重要，但是漂亮的外觀和時(shí)尚的工業(yè)設(shè)計(jì)也是吸引消費(fèi)者購(gòu)買(mǎi)欲望的重要因素，尤其是對(duì)于愛(ài)美的女性消費(fèi)者來(lái)說(shuō)，手機(jī)出眾的外觀更是有著不小的吸引力。</p>
<p>一款漂亮的手機(jī)對(duì)于女性朋友而言，不僅僅是一個(gè)常用的工具，更是一個(gè)像飾品一樣的點(diǎn)綴，為氣質(zhì)增添光彩。今天，小編就給各位青年人推薦幾款智慧與美貌并重的手機(jī)吧。</p>
用瀏覽器查看此時(shí)的頁(yè)面文件，由于頁(yè)面文件沒(méi)有經(jīng)過(guò)CSS控制，排版布局比較混亂，如下圖所示：
設(shè)置標(biāo)題
接下來(lái)開(kāi)始使用CSS樣式對(duì)網(wǎng)頁(yè)中的標(biāo)簽元素逐個(gè)進(jìn)行控制，首先處理標(biāo)題。為了讓標(biāo)題更加醒目，給它加一個(gè)綠色背景，使用紅色字體居中，并與正文保持一定的間距。
在<head>標(biāo)簽中加入<style>標(biāo)簽，并書(shū)寫(xiě)h1的CSS應(yīng)用原則，主要代碼如下：
用瀏覽器打開(kāi)查看，標(biāo)題已經(jīng)非常清晰和突出了，效果如下圖所示：
控制圖片
接著開(kāi)始處理圖片，使圖片與文字的排列更加協(xié)調(diào)。
在<style>中加入如下代碼
用瀏覽器打開(kāi)查看，效果如下圖所示：
設(shè)置正文：
在上一小節(jié)中正文文字排列過(guò)于緊密，需要調(diào)整，同時(shí)改變字體大小。代碼如下：
用瀏覽器打開(kāi)查看，效果如下圖所示：
設(shè)置整體頁(yè)面
設(shè)置完標(biāo)題、圖片和正文之后，是不是就意味著工作已經(jīng)做完了呢？當(dāng)然不是的，接下來(lái)還有兩項(xiàng)工作要做，就是設(shè)置整體頁(yè)面和對(duì)段落的控制。下面先介紹怎么設(shè)置整體頁(yè)面。
我們?cè)诰W(wǎng)絡(luò)上經(jīng)?？吹揭恍┚W(wǎng)站有一個(gè)紅色、藍(lán)色等背景色，就是通過(guò)設(shè)置頁(yè)面的<body>標(biāo)簽樣式體現(xiàn)的。
在<style>標(biāo)簽中加入如下代碼：
對(duì)段落進(jìn)行分別設(shè)置
對(duì)段落的設(shè)置就是調(diào)整段落文字效果和段落的表現(xiàn)，比如給第一段文字加上上下劃線，為第二段文字加上分割線。代碼如下：
完整代碼
至此，通過(guò)手工完成一個(gè)內(nèi)容頁(yè)的CSS樣式實(shí)現(xiàn)。完整代碼如下：
更多建議：