DIV+CSS網(wǎng)頁布局方法探討

【摘 要】在網(wǎng)頁設(shè)計中DIV+CSS網(wǎng)頁布局方法被越來越多的應(yīng)用到，論文通過具體的實例分析了DIV+CSS的布局的技術(shù)方法，綜述了在布局當(dāng)中的常用方法，并且結(jié)合Table 布局方式，在此基礎(chǔ)上提出了網(wǎng)頁布局方法的探究。

【關(guān)鍵詞】DIV CSS 網(wǎng)頁布局 方法

1 引言

傳統(tǒng)網(wǎng)頁布局的方法主要包含框架和表格。當(dāng)利用表格的方式進(jìn)行布局的時候快捷方便，但出于對版式的要求，一般需要插入許多的表格， 甚至有時還要對表格進(jìn)行多層嵌套，這不僅延長了頁面打開的時間， 而且降低了網(wǎng)頁中代碼的可讀性， 增加維護(hù)成本，DIV+CSS布局方式使網(wǎng)頁結(jié)構(gòu)和外觀相分離， 不但極大地簡化了代碼，而且使站點加載的速度變得快捷、維護(hù)也更加方便，無疑對傳統(tǒng)布局的網(wǎng)頁方式造成了極大的沖擊。除此之外，DIV+ CSS布局方式的使用，使傳統(tǒng)的網(wǎng)頁布局的不足得到很好的彌補，當(dāng)前國內(nèi)多數(shù)比較著名的網(wǎng)站都利用此類方式方法進(jìn)布局， 給用戶帶來了全新的體驗?zāi)Ｊ健?/p>

2 DIV與CSS的介紹

2.1 DIV

DIV即指區(qū)塊， DIV一般用于定義HTML網(wǎng)頁上的區(qū)塊，將網(wǎng)頁中不同的段落或不同的內(nèi)容封裝進(jìn)區(qū)塊的起始與結(jié)束標(biāo)記當(dāng)中， 經(jīng)過屬性設(shè)置以控制其中元素的特性。

2.2 CSS

CSS意指層疊樣式表，CSS 可以把HTML文件內(nèi)容與樣式的定義相分離，只需制定定義樣式的CSS文件，同時讓所有的HTML文件調(diào)用已經(jīng)定義的樣式，當(dāng)需要更改HTML文件中任何部分的風(fēng)格時，只需要將CSS文件打開進(jìn)行樣式的更改就可以了，即可使相同的HTML內(nèi)容顯現(xiàn)出不同的形式，這樣使網(wǎng)站更新與維護(hù)變得更為簡易。

2.3 DIV+CSS 的優(yōu)點

2.3.1 網(wǎng)站的更新與維護(hù)更簡易

因為CSS文件能夠被多個網(wǎng)頁鏈接或使用，當(dāng)需要重新布局網(wǎng)站頁面時，只要依照區(qū)塊的內(nèi)容標(biāo)記到CSS樣式的文件里，尋找到相應(yīng)的ID，并進(jìn)行簡單的修改即可。不需要在每一個HTML文件中進(jìn)行重復(fù)的設(shè)置，使修改頁面變得更加簡捷，極大地提高了網(wǎng)站更新與維護(hù)的效率，節(jié)約網(wǎng)站的運營成本。

2.3.2 內(nèi)容與表現(xiàn)相分離

即CSS代碼和HTML代碼相分離，CSS可以把樣式的部分單獨的置于獨立的樣式文件中，而在HTML的文件中只放置網(wǎng)頁需要顯示的內(nèi)容，而網(wǎng)頁的內(nèi)容表現(xiàn)的形式則可以完全通過CSS文件來實現(xiàn)，消除了大量的冗余代碼，解決頁面表現(xiàn)和結(jié)構(gòu)混合在一起的問題。

2.3.3 搜索引擎中搜索的簡便

當(dāng)使用DIV + CSS 網(wǎng)頁布局設(shè)計時，結(jié)構(gòu)得到優(yōu)化、代碼的精簡度提高、網(wǎng)頁內(nèi)容更容易被搜索引擎采集到。當(dāng)網(wǎng)頁搜索時，搜索引擎程序不需要去訪問CSS文件，可以直接提取HTML文件中DIV內(nèi)容，這樣在更短時間可以搜索整個頁面。當(dāng)一個頁面中包含許多的標(biāo)記表格來布局，遇到多層的表格嵌套時，整個頁面往往會直接跳過或直接放棄嵌套的內(nèi)容。因而運用DIV+CSS技術(shù)，讓搜索引擎收錄網(wǎng)站變得更加方便，提升搜索引擎的索引效率。

2.3.4 網(wǎng)頁加載迅速

當(dāng)代碼寫在了CSS 文件中時，讓頁面體積變小、代碼簡潔，而且相較于表格嵌套方式而言，DIV+CSS賦予頁面更多的獨立區(qū)域，當(dāng)要打開頁面時，不會在整個頁面局限于一個大表格里，而是逐層加載，提升了頁面加載速率。

2.3.5 維持網(wǎng)站風(fēng)格和視覺的一致性

所有區(qū)域由CSS文件控制，針對分辨率及操作系統(tǒng)發(fā)生更改時，網(wǎng)頁用表格技術(shù)設(shè)計出來時會有變形的現(xiàn)象出現(xiàn)，而使用DIV + CSS技術(shù)可以讓頁面變得更加靈敏，并且不同的瀏覽器可以達(dá)到一致的顯示效果。

2.3.6 瀏覽器兼容性強

DIV + CSS 布局兼容性更強，所有的瀏覽器幾乎都可以運行，符合WEB的標(biāo)準(zhǔn)規(guī)范和發(fā)展趨勢，并且兼容性強大，在新開發(fā)的瀏覽器中也可以很好的運行。

3 網(wǎng)頁布局的發(fā)展

3.1 早期使用的網(wǎng)頁布局方法

早期網(wǎng)頁布局一般采用如下四種方法所示，這些方式都是較為常用的布局方式，一般由其中一種， 或是幾種布局方式的結(jié)合使用：隨著許多新上網(wǎng)設(shè)備的涌現(xiàn)和網(wǎng)絡(luò)技術(shù)的迅速發(fā)展，使以往的網(wǎng)頁布局方式變得不能適應(yīng)新要求。

3.2 新WEB標(biāo)準(zhǔn)

針對表現(xiàn)、行為和結(jié)構(gòu)三個部分，W3C 設(shè)定了大部分的標(biāo)準(zhǔn)，采用了很多新標(biāo)準(zhǔn)的優(yōu)點，具有更少的組件和代碼、帶寬要求低、網(wǎng)站更易于維護(hù)、降低成本等，主要如下三點：

（1）表現(xiàn)標(biāo)準(zhǔn)語言CSS；

（2）結(jié)構(gòu)化標(biāo)準(zhǔn)語言XML和XHTML；

（3）行為標(biāo)準(zhǔn)主要包括對象模型。

4 DIV+ CSS 網(wǎng)頁布局應(yīng)用實例

4.1 三欄式自適應(yīng)寬度布局

使用

設(shè)置的CSS文件代碼如下：

#main { float：right； height：500px； border：1px solid； width：68%； }

#container {margin：0 auto； width：80%；}

#footer { border：1px solid； height：60px； }

#header { margin-bottom：10px； height：100px；border：1px solid；}

#sidebar { float：left； height：500px； width：30%；border：1px solid；}

#content { width： 100%； height：500px； margin-bottom：10px；}

其中，border 屬性為solid，表示實線邊框；container的margin 屬性為0 auto，即指上下邊距為0，auto指左右邊距自動實現(xiàn)居中顯示；width 為設(shè)置屬性百分比的形式，當(dāng)瀏覽器的窗口發(fā)生變化時，頁面的寬度會自動適合窗口的寬度。main 的float 屬性為right，sidebar 的float 屬性為left，實現(xiàn)中間豎欄的顯現(xiàn)效果。

4.2 實例

4.2.1構(gòu)架分析

如一個網(wǎng)站關(guān)于運動用品的主頁，經(jīng)過對分析主頁架構(gòu)，下面將其中的各元素按不同的功能的劃分成以下的模塊：

頂部的部分，header，包含banner 圖片區(qū)、menu和logo；內(nèi)容的部分，pagebody，包含主體內(nèi)容和左右邊欄；底部的部分，包含版權(quán)信息和作者的郵箱地址等。從Div 布局與頁面構(gòu)架來看，可得網(wǎng)頁Div 結(jié)構(gòu)如下所示：

| body{} /* HTML 主體標(biāo)簽*/

∟’#header{} /* 頭部標(biāo)簽*/

∟’#container（） /* 放置整個頁面的div 標(biāo)簽*/

∟’ #banner 、#menu 、#logo/* banner、menu、 logo標(biāo)簽*/

∟ ’#sidebar{} /* 左右邊欄的標(biāo)簽*/

∟ ’#pagebody{} /* 主體標(biāo)簽*/

∟ ’#foot{} /* 頁腳標(biāo)簽*/

∟ ’#main{} /* 主體內(nèi)容標(biāo)簽*/

以上標(biāo)簽的名稱命名盡量做到透明清晰，以便其他人員能夠迅速理解模塊的含義以及標(biāo)簽定義。當(dāng)需要時，子標(biāo)簽還可以父標(biāo)簽的名稱作前綴，例如在main 層詳細(xì)區(qū)分時，可以命名main_right 、main_left等。

4.2.2 拆分模塊

依照Web的標(biāo)準(zhǔn)，將頁面的內(nèi)容和表現(xiàn)分離，主要定義Div 的CSS 樣式。為了使今后的閱讀更簡潔，可考慮添加相關(guān)注釋，新建一個style.css樣式文件，代碼如下所示：

body{font：12px Tahoma； text-align：center； margin：0px；background：#fff；} /* 基本信息*/

#header{ height：219px；margin：0 auto； width：800px；background：#1F86C0；}/* 頁面頭部*/

#container{width：100%}

#banner{ margin：0 auto； height：180px；bwidth：800px； ackground：#1F86C0；}/* 頁面banner*/

#menu{ height：39px；margin：0 auto； width：800px； background：#737172；}/* 導(dǎo)航*/

#sidebar{ float：left； height：400px； width：38%； backgound：#9C4121；}/* 左邊欄*/

#foot{margin：0 auto； width：800px；height：50px；background：#7FA7C1；}/* 頁面的底部*/

#main{ float：right；width：62%； height：400px；background：#00ffff；}/* 主要內(nèi)容*/

#pagebody{ margin：0 auto； width：800px；background：#ccff00；}/* 頁面的主體*/

定義的CSS 樣式中， 元素邊界的屬性值是0，并取消了默認(rèn)的邊界。定container 元素寬度是100%，通過高度、寬度和邊界屬性確定header 的位置，定義了header 元素中的橫向分欄，二者分別為menu元素和banner元素，同樣以高度、寬度和邊界屬性定義了主體pagebody 的位置，而且運用浮動定位的屬性，分別定義main 元素的位置和縱向分欄sidebar ，同樣利用高度、寬度以及邊界屬性的定義確定了footer 元素的顯示位置和大小。

5 結(jié)論

隨著舊的頁面布局的局限性逐漸暴露， 新Web標(biāo)準(zhǔn)的優(yōu)越性逐漸為人們所重視。運用DIV+ CSS 的網(wǎng)頁設(shè)計的流程與方法， 真正做到了行為、表現(xiàn)和結(jié)構(gòu)的分離， 提高頁面加載的速度與網(wǎng)頁開發(fā)的效率，對網(wǎng)站更新和維護(hù)的效率也有很大的提升。傳統(tǒng)的表格布局模式正在被基于DIV+ CSS 的網(wǎng)頁設(shè)計方式逐漸取代， DIV+ CSS 的網(wǎng)頁布局方式正成為WEB開發(fā)的方向。

【參考文獻(xiàn)】

[1]曾順.精通CSS+DIV網(wǎng)頁樣式與布局[M].北京：人民郵電出版社，2007.

[2]王儉敏等.CSS+DIV網(wǎng)頁樣式與布局案例指導(dǎo)[M].北京：電子工業(yè)出版社，2009，4.