DIV+CSS和TABLE網(wǎng)頁布局的對比分析

詹 劼

（大連海洋大學(xué)，遼寧 大連 116023）

隨著 Web 2.0標(biāo)準(zhǔn)化設(shè)計理念的普及，DIV+CSS被越來越多的設(shè)計師用于網(wǎng)頁的排版布局。DIV標(biāo)簽取代了傳統(tǒng)的TABLE標(biāo)簽，將頁面分割成一個個浮動的空“盒子”，頁面元素的定位不再需要繁瑣的標(biāo)簽嵌套來實現(xiàn)；CSS樣式將傳統(tǒng) HTML標(biāo)簽中的結(jié)構(gòu)內(nèi)容標(biāo)簽和表現(xiàn)標(biāo)簽分離，將內(nèi)容的表現(xiàn)形式單獨放置在一個與網(wǎng)頁關(guān)聯(lián)的文件內(nèi)，既簡化了頁面代碼又提高了后期維護效率。這二者的結(jié)合變革了傳統(tǒng)的網(wǎng)頁設(shè)計思維方式，為網(wǎng)頁設(shè)計者提供了更加廣闊的設(shè)計空間。在這種浪潮的沖擊下，傳統(tǒng)的 TABLE網(wǎng)頁布局并未就此消失。在一些具有良好視覺效果，個性化較強的網(wǎng)站上仍然能看到 TABLE標(biāo)簽應(yīng)用在頁面布局上。

1 DIV+CSS的技術(shù)實現(xiàn)

1.1 DIV的盒子原理

設(shè)計師將DIV標(biāo)簽看成一個空盒子，網(wǎng)頁內(nèi)容存放于盒子當(dāng)中。每個盒子根據(jù)關(guān)聯(lián)CSS中的屬性展示外觀。每個盒子按照由外到內(nèi)的順序，由外邊距Margin、邊框 Border、內(nèi)邊距 Padding和內(nèi)容構(gòu)成。由此，一個復(fù)雜的頁面可以看成由多個盒子通過不同的排列方式（縱向、橫向、浮動和嵌套）堆積而成[1]。

1.2 CSS的實現(xiàn)

CSS 全稱是Cascading Style Sheets，中文翻譯為層疊樣式表，簡稱樣式表。CSS是由萬維網(wǎng)聯(lián)盟于1996年首次發(fā)布，用于增強或控制網(wǎng)頁內(nèi)容顯示效果，并將樣式與內(nèi)容分離的一種標(biāo)記語言[2]。CSS的實現(xiàn)依賴于兩個方面：選擇器和導(dǎo)入方式。

CSS通過眾多的選擇器來實現(xiàn)對頁面元素的控制。主要的選擇器有以下幾種：

id選擇器由一個“#”號和用戶自定義的字符串構(gòu)成；類選擇器由一個“.”號和用戶自定義的字符串構(gòu)成；標(biāo)簽選擇器使用HTML標(biāo)簽作為選擇器。

定義好CSS選擇器后，需要選擇相應(yīng)的導(dǎo)入方式與網(wǎng)頁進(jìn)行關(guān)聯(lián)。導(dǎo)入方式主要有三種：行內(nèi)樣式表、嵌入樣式表、外聯(lián)樣式表。行內(nèi)樣式表書寫在標(biāo)簽的尖括號內(nèi)。嵌入樣式表書寫在網(wǎng)頁的頭文件內(nèi)。相對行內(nèi)樣式表，嵌入樣式表適用范圍擴展到全網(wǎng)頁。當(dāng)大量定義樣式代碼時，網(wǎng)頁代碼也隨之增加，故其使用頻率也不高。一般用于需要單獨定義樣式的頁面中。

2 對比分析

下面以一個常用的網(wǎng)頁布局為例，分別用傳統(tǒng)的TABLE方式和DIV+CSS方式進(jìn)行設(shè)計，對比代碼的不同，分析各自的優(yōu)缺點。

用TABLE布局的頁面代碼如下：

用DIV+CSS布局的頁面代碼如下：

CSS樣式表內(nèi)容如下：

兩相比較，DIV+CSS的布局方式在頁面代碼上并沒有得到預(yù)期中的減少。從網(wǎng)頁體積上看，前者為1005字節(jié)，后者為953字節(jié)。但是要注意到，該頁面布局中每個區(qū)塊的屬性都不相同。無論是TABLE布局還是DIV+CSS布局均需對每一區(qū)塊進(jìn)行單獨設(shè)置。也就是說，在對具有獨一性的內(nèi)容的屬性設(shè)置上，兩種布局方式不相上下。

然而在實際的網(wǎng)頁設(shè)計中，尤其在具有大量重復(fù)性屬性的內(nèi)容上，DIV+CSS的優(yōu)勢就會體現(xiàn)得非常明顯。以一個擁有10個重復(fù)的1*1的表格的網(wǎng)頁為例，使用 TABLE方式布局的頁面代碼數(shù)量幾乎是單個表格代碼的 10倍；而使用DIV+CSS方式布局的頁面代碼數(shù)量和單個單元格代碼數(shù)量幾乎一致。在后期維護上，DIV+CSS具有無可爭議的優(yōu)勢。當(dāng)一個大型網(wǎng)站更新時，設(shè)計師只需要對獨立的樣式表文件進(jìn)行修改即可。而 TABLE布局的網(wǎng)頁則需要設(shè)計師逐頁逐標(biāo)簽地維護，工作量大且容易出錯。在網(wǎng)站檢索的排名上，DIV+CSS也有很大優(yōu)勢。根據(jù)實際檢測的數(shù)據(jù)，同樣內(nèi)容，同樣布局方式的網(wǎng)站，用DIV+CSS布局的頁面檢索排名比用TABLE布局的頁面高十多位。

3 結(jié)束語

隨著XHTML取代HTML成為W3C的新標(biāo)準(zhǔn)，網(wǎng)頁設(shè)計也跨入了一個新時代。在DIV+CSS強有力的沖擊面前，傳統(tǒng)的 TABLE頁面設(shè)計難以為繼。然而新技術(shù)往往不是完美的，優(yōu)秀的設(shè)計師應(yīng)該合理利用兩種設(shè)計方式的優(yōu)點，以網(wǎng)頁功能的實現(xiàn)為第一目標(biāo)，而不是片面追求代碼的時髦性。

[1]鄒壽春.基于 DIV+CSS技術(shù)的網(wǎng)頁設(shè)計研究[J].綏化學(xué)院學(xué)報.2015(09)：77-79.

[2]李雙遠(yuǎn), 李阿輝.DIV+CSS技術(shù)在網(wǎng)頁布局中的應(yīng)用實現(xiàn)[J].吉林化工學(xué)院學(xué)報.2014(03)：55-58.

[3]劉海霞.DIV+CSS網(wǎng)頁布局技巧研究[J].計算機時代.2015：18-19.