胡濱

摘要：傳統(tǒng)的網(wǎng)頁布局設(shè)計(jì)方法多采用表格嵌套內(nèi)容的方式來實(shí)現(xiàn)，而采用DIV+CSS與 TABLE相比有很多的優(yōu)勢，實(shí)現(xiàn)了樣式與內(nèi)容的分離，更有益于網(wǎng)站的優(yōu)化，也更符合W3C的標(biāo)準(zhǔn)，當(dāng)然其也有自身的不足，我們在網(wǎng)頁設(shè)計(jì)中要適當(dāng)?shù)丶右苑治龊瓦\(yùn)用，有利于對網(wǎng)站的管理和維護(hù)。

關(guān)鍵詞：DIV+CSS；TABLE；網(wǎng)頁設(shè)計(jì)

DIV+CSS是網(wǎng)站標(biāo)準(zhǔn)（或稱“WEB標(biāo)準(zhǔn)”）中常用的術(shù)語之一，通常為了說明與HTML網(wǎng)頁設(shè)計(jì)語言中的表格（TABLE）定位方式的區(qū)別。目前主流的網(wǎng)頁設(shè)計(jì)架構(gòu)大多為DIV+CSS結(jié)構(gòu)，DIV+CSS區(qū)別于傳統(tǒng)的表格定位的形式，采用以“塊”為結(jié)構(gòu)的定位形式，DIV本身就是容器性質(zhì)的，不但可以內(nèi)嵌TABLE還可以內(nèi)嵌文本和其它的HTML代碼。DIV的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來構(gòu)成這個(gè)塊的，其中所包含元素的特性由DIV標(biāo)簽的屬性來控制，或者是通過使用樣式表格式化這個(gè)塊來進(jìn)行控制。CSS是（Cascading Style Sheets）的簡稱，中文譯作“層疊樣式表單”，在網(wǎng)頁制作時(shí)采用CSS技術(shù)，可以有效地對頁面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制。只要對相應(yīng)的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者所有頁面的外觀和格式。

DIV+CSS與TABLE方式在設(shè)計(jì)時(shí)差別很大，網(wǎng)頁開始設(shè)計(jì)前需要仔細(xì)規(guī)劃，比如對組成網(wǎng)頁的各部分元素命名，方便在CSS中進(jìn)行樣式定義，公共屬性部分最好用類名定義。整個(gè)網(wǎng)站通用的樣式可以放到單獨(dú)的一個(gè)CSS文件中，常有的公共屬性有：網(wǎng)頁寬度、背景顏色、背景圖片、字體默認(rèn)大小、顏色、鏈接樣式等。

具體來說DIV+CSS布局主要有以下幾種優(yōu)勢：

一、網(wǎng)頁代碼標(biāo)準(zhǔn)化

網(wǎng)頁設(shè)計(jì)采用DIV+CSS，最大的優(yōu)勢是實(shí)現(xiàn)網(wǎng)頁代碼的標(biāo)準(zhǔn)化，摒棄過時(shí)的表格布局方式，實(shí)現(xiàn)了樣式與內(nèi)容的分離，HTML代碼結(jié)構(gòu)性更好，更易閱讀和維護(hù)。當(dāng)需要進(jìn)行網(wǎng)頁外觀修改時(shí)，只需要修改CSS文件即可，完全不用修改網(wǎng)頁的結(jié)構(gòu)部分代碼，也不會(huì)破壞頁面其他部分的布局樣式。

二、提高頁面加載速度

使用表格布局的網(wǎng)頁必須將整個(gè)表格加載完成后才能顯示出網(wǎng)頁的內(nèi)容，而DIV+CSS布局的網(wǎng)頁則因DIV是一個(gè)松散的盒子而使其可以邊加載邊顯示出網(wǎng)頁內(nèi)容，由于將大部分頁面代碼寫在了CSS當(dāng)中，使得頁面體積容量變得更小，相對于表格嵌套的方式，DIV+CSS將頁面獨(dú)立成更多的區(qū)域，在打開頁面的時(shí)候，逐層加載。

三、靈活控制頁面布局

頁面的下載通常是按照代碼的排列順序，比如表格布局代碼的排列是從上向下，從左到右，無法改變。而通過CSS控制，可以任意改變代碼的排列順序，比如將重要的內(nèi)容先加載出來。

四、利于搜索引擎的搜索

使用DIV+CSS布局，結(jié)構(gòu)清晰，用只包含結(jié)構(gòu)化內(nèi)容的HTML代替嵌套的標(biāo)簽，主次分明，對搜索引擎更加友好，更容易被搜索引擎收錄，易于檢索。

五、簡化頁面，保持站點(diǎn)一致性

使用DIV+CSS對外觀進(jìn)行控制時(shí)，由于CSS可以一處定義多處使用，因此除了減少工作量外，也起到了統(tǒng)一站點(diǎn)視覺效果的功能并大大縮減了頁面代碼。將所有頁面或所有區(qū)域統(tǒng)一用CSS文件控制，就避免了不同頁面或不同區(qū)域所體現(xiàn)出的效果偏差。

六、良好的兼容多種設(shè)備

使用DIV+CSS布局時(shí)，可使站點(diǎn)更容易被多種瀏覽器和用戶訪問，同時(shí)能夠兼容多種設(shè)備，如手機(jī)、平板電腦等。

雖然DIV+CSS在網(wǎng)站建設(shè)中有很多的優(yōu)勢，但是在實(shí)際使用中也難免存在不足：

（1）DIV+CSS在網(wǎng)站建設(shè)中比傳統(tǒng)的TABLE定位要復(fù)雜的多，這就要求設(shè)計(jì)者一定要事先對網(wǎng)站的整體結(jié)構(gòu)有一個(gè)清晰的規(guī)劃和設(shè)計(jì)，合理應(yīng)用塊結(jié)構(gòu)，否則極易出現(xiàn)混亂。

（2）DIV+CSS網(wǎng)站建設(shè)的樣式元素通常會(huì)放在一個(gè)或多個(gè)外部文件中，有可能相當(dāng)?shù)膹?fù)雜，甚至比較龐大，如果在網(wǎng)站建設(shè)中CSS文件調(diào)用出現(xiàn)異常，那么整個(gè)網(wǎng)站的外觀就會(huì)面目全非。

（3）雖然說DIV+CSS解決了大部分瀏覽器兼容的問題，但是也有在部分瀏覽器中使用出現(xiàn)異常的情況，比如火狐瀏覽器，在IE中顯示正常的頁面，到了火狐瀏覽器中就可能會(huì)有異常，這樣的情況經(jīng)常發(fā)生，DIV+CSS還沒有實(shí)現(xiàn)所有瀏覽器的統(tǒng)一兼容，因此在頁面設(shè)計(jì)的同時(shí)，一定要注意調(diào)試瀏覽器的兼容性。

基于DIV+CSS的以上特點(diǎn)，我們在實(shí)際的網(wǎng)頁設(shè)計(jì)中，要注意以下幾個(gè)方面的應(yīng)用：

（1）FLOAT屬性：DIV（層）默認(rèn)是占據(jù)一整行，對于常見的兩列或多列布局的設(shè)計(jì)，需要能夠正確設(shè)置FLOAT及WIDTH屬性來實(shí)現(xiàn)效果。許多瀏覽器在顯示未指定WIDTH的FLOAT元素時(shí)會(huì)有BUG，所以不管FLOAT元素的內(nèi)容如何，一定要為其指定WIDTH屬性。

（2）盒模式：層具有寬度WIDTH、高度HEIGHT、邊框BORDER、內(nèi)間距PADDING和外間距MARGIN等屬性，而層實(shí)際占據(jù)的空間是上述屬性值相加的大小，合理運(yùn)用這些屬性能實(shí)現(xiàn)緊湊而又美觀的網(wǎng)頁布局。

（3）層嵌套：在進(jìn)行頁面設(shè)計(jì)時(shí)層不宜嵌套過多，嵌套過多會(huì)導(dǎo)致代碼復(fù)雜冗余、維護(hù)困難及運(yùn)行變慢的問題，在多列布局時(shí)完全可以用層浮動(dòng)來實(shí)現(xiàn)。

（4）兼容性： DIV+CSS相比TABLE布局，更容易出現(xiàn)多種瀏覽器不兼容的問題，主要原因是不同的瀏覽器對WEB標(biāo)準(zhǔn)默認(rèn)值不同。在兼容性測試方面，由于國內(nèi)使用IE瀏覽器的用戶居多，特別要保證在IE多版本下的兼容問題，針對具體情況可以采用不同的解決辦法，也可以使用HACK方法為IE瀏覽器指定特別的參數(shù)。

基于以上的分析，我們在進(jìn)行網(wǎng)站建設(shè)的時(shí)候，要不斷地加以學(xué)習(xí)，總結(jié)經(jīng)驗(yàn)，根據(jù)實(shí)際情況有的放矢，才能更有效、更合理地運(yùn)用好DIV+CSS技術(shù)。

參考文獻(xiàn)：

[1]趙清華、林學(xué)華 《基于DIV+CSS的網(wǎng)頁布局技術(shù)應(yīng)用研究》現(xiàn)代計(jì)算機(jī)（專業(yè)版）2010年05期

[2]張麗姿 《DIV+CSS技術(shù)在網(wǎng)頁中的應(yīng)用》電腦開發(fā)與應(yīng)用 2010年05期