CSS+DIV布局技術(shù)在網(wǎng)頁(yè)制作中的應(yīng)用

呂潁潁

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A

摘要：傳統(tǒng)Table布局方式只是利用了HTML的table標(biāo)簽所具有的零邊框特性，設(shè)計(jì)了一個(gè)復(fù)雜表格結(jié)構(gòu)，但不利于設(shè)計(jì)和修改。而Web標(biāo)準(zhǔn)的網(wǎng)站設(shè)計(jì)要求網(wǎng)頁(yè)的表現(xiàn)與內(nèi)容分離，使得CSS+DIV布局技術(shù)廣泛應(yīng)用，通過(guò)具體實(shí)例闡述運(yùn)用CSS+DIV布局技術(shù)進(jìn)行網(wǎng)頁(yè)制作的流程和方法。

關(guān)鍵詞：CSS；DIV；網(wǎng)頁(yè)制作

傳統(tǒng)Table布局方式設(shè)計(jì)復(fù)雜，改版時(shí)工作量巨大；表現(xiàn)代碼與內(nèi)容混合，可讀性差，不利于數(shù)據(jù)調(diào)用分析；網(wǎng)頁(yè)文件量大，瀏覽器解析速度慢如蝸牛。而web標(biāo)準(zhǔn)作為新理論和技術(shù)實(shí)現(xiàn)的新一代互聯(lián)網(wǎng)模式，使得CSS+DIV的盒子模型技術(shù)逐漸成為主流的網(wǎng)頁(yè)布局方式。

1 CSS+DIV 布局

1.1使用CSS+DIV進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)的優(yōu)點(diǎn)如下：

（1）結(jié)構(gòu)清晰，對(duì)搜索引擎更加友好。更容易被搜索引擎收錄，具備搜索引擎SEO的先天條件，配合優(yōu)秀的內(nèi)容和一些SEO處理，可以獲得更好的網(wǎng)站排名。

（2）支持各種瀏覽器，兼容性好。符合web標(biāo)準(zhǔn)規(guī)范的發(fā)展趨勢(shì)，可以在幾乎所有的瀏覽器上都可以使用，不會(huì)出現(xiàn)在不同的瀏覽器中效果差距很大的情況。

（3）簡(jiǎn)單的修改，縮短改版時(shí)間。因?yàn)榫W(wǎng)站的布局都是通過(guò)外部的css文件來(lái)控制，只要簡(jiǎn)單的修改幾個(gè)CSS文件就可以將許多網(wǎng)頁(yè)的風(fēng)格格式同時(shí)更新，不用再一頁(yè)一頁(yè)地更新了。你可以將站點(diǎn)上所有的網(wǎng)頁(yè)風(fēng)格都使用一個(gè)CSS文件進(jìn)行控制，只要修改這個(gè)CSS文件中相應(yīng)的行，那么整個(gè)站點(diǎn)的所有頁(yè)面都會(huì)隨之發(fā)生變動(dòng)。

1.2 CSS+DIV 布局示意

真正的表現(xiàn)與內(nèi)容完全分離，代碼可讀性強(qiáng)，樣式可重復(fù)應(yīng)用。

用DIV+CSS設(shè)計(jì)思路：

（1）用div來(lái)定義語(yǔ)義結(jié)構(gòu)。

（2）然后用CSS來(lái)美化網(wǎng)頁(yè)，如加入背景、線條邊框、對(duì)齊屬性等。

（3）最后在這個(gè)CSS定義的盒子內(nèi)加上內(nèi)容，如文字、圖片等。

2.CSS規(guī)則

CSS是Cascading style Sheets的簡(jiǎn)稱，中文譯作“層疊樣式表單”，它是一種用來(lái)表現(xiàn) HTML 或 XML 等文件式樣的計(jì)算機(jī)語(yǔ)言。在主頁(yè)制作時(shí)采用CSS技術(shù)，可以有效地對(duì)頁(yè)面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制。只要對(duì)相應(yīng)的代碼做一些簡(jiǎn)單的修改，就可以改變同一頁(yè)面的不同部分，或者頁(yè)數(shù)不同的網(wǎng)頁(yè)的外觀和格式。網(wǎng)上沖浪無(wú)論你用Internet Explorer還是Netscape Navigator，幾乎隨時(shí)都在與CSS打交道，無(wú)論用什么工具軟件制作網(wǎng)頁(yè)，都有在有意無(wú)意地使用CSS。

2.1 CSS選擇器類型：

（1）標(biāo)簽選擇器：指以網(wǎng)頁(yè)中已有的標(biāo)簽名作為名稱的選擇器，幾乎所有的html標(biāo)簽均可用作該類選擇器（如：body{ } p{ } h1{ } 等等...）。

（2）類別選擇器：屬用戶自定義名稱的選擇器，可以在XHTML標(biāo)簽中用class=“”為相應(yīng)標(biāo)簽指派樣式?？衫斫鉃橐活?。特點(diǎn)是在文檔中允許被重復(fù)使用。

（3）Id 選擇器：屬用戶自定義名稱選擇器，基于DOM文檔對(duì)象模型原理出現(xiàn)的選擇器，可以在XHTML標(biāo)簽中用id=“”為相應(yīng)標(biāo)簽指派樣式，可理解為一個(gè)標(biāo)識(shí)。特點(diǎn)是在網(wǎng)頁(yè)中，每個(gè)id名稱只能使用一次。

2.2 CSS語(yǔ)法結(jié)構(gòu)：

選擇符{ 屬性1：值1； 屬性2：值2…… }

例：body { font-size：12px； text-align：center；}

參數(shù)說(shuō)明：屬性和屬性值之間用冒號(hào)（：）隔開，定義多個(gè)屬性時(shí)，屬性之間用分號(hào)（；）隔開。

3.DIV標(biāo)簽

DIV標(biāo)簽是用來(lái)為HTML文檔內(nèi)大塊（block-level）的內(nèi)容提供結(jié)構(gòu)和背景的元素。DIV的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來(lái)構(gòu)成這個(gè)塊的，其中所包含元素的特性由DIV標(biāo)簽的屬性來(lái)控制，或者是通過(guò)使用樣式表格式化這個(gè)塊來(lái)進(jìn)行控制。

4.使用CSS+DIV布局網(wǎng)頁(yè)

采用了CSS樣式+DIV標(biāo)簽制作實(shí)例：

（1）分析構(gòu)架：畫出構(gòu)架圖。頭部+2列固定寬度右窄左寬型。（2）模塊拆分：分別定義DIV的CSS樣式。（3）在網(wǎng)頁(yè)中插入DIV標(biāo)簽，在DIV中填充網(wǎng)頁(yè)內(nèi)容。（4）總體調(diào)整：色彩及內(nèi)容調(diào)整，適當(dāng)修改CSS樣式。

4.1 創(chuàng)建html文檔

程序代碼：

其中DIV用到了嵌套關(guān)系。用頁(yè)面層容器“container”包含頭部“header”和主題內(nèi)容“mainContent”，主題內(nèi)容“mainContent”又包含了右欄“sidebar”和左欄“content”。在標(biāo)簽內(nèi)分別輸入“網(wǎng)頁(yè)頭部”、“右欄”和“左欄”文字。

4.2創(chuàng)建CSS文檔

程序代碼如下：

body { font-family：Verdana； font-size：14px； margin：0；}

#container {margin：0 auto； width：550px；}

#header { height：100px； background：#6af； margin-bottom：5px；}

#mainContent { height：300px； margin-bottom：5px；}

#sidebar { float：right； width：150px； height：300px； background：#8af；}

#content { float：left； width：395px； height：300px； background：#cff；}

（1）基本信息“body” body是一個(gè)HTML元素，頁(yè)面中所有的內(nèi)容都應(yīng)該寫在這標(biāo)簽對(duì)之內(nèi)，設(shè)置字體，大小和邊界距離。

（2）頁(yè)面層容器“container” 代碼保存后可以看到，整個(gè)頁(yè)面是居中顯示的，是因?yàn)樵凇癱ontainer”中使用了以下屬性：margin：0 auto；表示上下邊距為0，左右為自動(dòng)，因此該層自動(dòng)居中。頁(yè)面寬度為550像素。

（3）頭部“header” 設(shè)置頭部的背景顏色和高度，同時(shí)設(shè)置下邊距5像素。

（4）主題內(nèi)容“mainContent” 主體內(nèi)容可以同時(shí)控制右欄“sidebar”和左欄“content”的顯示效果。主要是高度和下邊距的設(shè)置。

（5）右欄“sidebar” 本部分在頁(yè)面中主要是在主題部分靠右側(cè)第二列固定列寬顯示，定義寬度和背景顏色。

（6）左欄“content” 本部分在頁(yè)面中主要是在主題部分靠右側(cè)第二列固定列寬顯示，定義寬度和背景顏色。

參考文獻(xiàn)

[1]鄭俊生，姜敏.使用DIV+CSS進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)應(yīng)用研究[J]電腦開發(fā)與應(yīng)用，2008.09.

[2]梁靜琳DIV+CSS布局技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用[J]武漢工程職業(yè)技術(shù)學(xué)院學(xué)報(bào)200906