網(wǎng)頁(yè)表格布局方式和DIV+CSS布局方式的比較研究

【摘 要】本文對(duì)網(wǎng)頁(yè)表格布局方式和DIV+CSS布局方式進(jìn)行了比較，并舉出實(shí)例進(jìn)行對(duì)比。DIV+CSS區(qū)別于傳統(tǒng)的表格定位的形式，用最簡(jiǎn)潔的代碼實(shí)現(xiàn)精準(zhǔn)的定位，也方便維護(hù)人員的修改和維護(hù)。DIV+CSS這種網(wǎng)頁(yè)布局方式已經(jīng)逐步替代傳統(tǒng)的表格布局方式。

【關(guān)鍵詞】網(wǎng)頁(yè)；布局方式；表格；DIV+CSS

隨著網(wǎng)絡(luò)技術(shù)的迅速發(fā)展，網(wǎng)絡(luò)也逐漸地融入到了人們的日常生活、工作和學(xué)習(xí)中?；ヂ?lián)網(wǎng)上各種網(wǎng)站和基于Web的應(yīng)用大量涌現(xiàn)，這些都需要用最基本的網(wǎng)頁(yè)進(jìn)行呈現(xiàn)。網(wǎng)頁(yè)布局設(shè)計(jì)指的是根據(jù)網(wǎng)站內(nèi)容和建站目的等基本要素，運(yùn)用版面設(shè)計(jì)原理，將網(wǎng)頁(yè)上的視覺元素進(jìn)行合理配置與表現(xiàn)的過程。[1]在網(wǎng)站規(guī)劃建設(shè)中，網(wǎng)頁(yè)布局設(shè)計(jì)是其至關(guān)重要的一環(huán)，它關(guān)系到網(wǎng)站能否吸引更多人的眼球，直接反映網(wǎng)站的點(diǎn)擊率，而點(diǎn)擊率正是網(wǎng)站的生命所在。所以網(wǎng)頁(yè)布局設(shè)計(jì)是否美觀、規(guī)范、合理越來越受到網(wǎng)頁(yè)設(shè)計(jì)師的重視。

一、表格布局方式和DIV+CSS布局方式的比較

目前，常用網(wǎng)頁(yè)布局的方式主要為表格布局方式和DIV+CSS布局方式，這兩種方式各有優(yōu)缺點(diǎn)，下面對(duì)這兩種布局方式做一比較。

1.表格布局

表格布局容易掌握，布局方便。但表格布局需要通過表格的間距或者使用透明的gif圖片來填充布局板塊間的間距，這樣布局的網(wǎng)頁(yè)中表格會(huì)生成大量難以閱讀和維護(hù)的代碼，而且表格布局的網(wǎng)頁(yè)要等整個(gè)表格下載完畢后才能顯示所有內(nèi)容，所以表格布局方式導(dǎo)致網(wǎng)頁(yè)的瀏覽速度較慢[2]。

2.CSS+DIV布局

通常要實(shí)現(xiàn)比較精確和自適應(yīng)的層布局需要設(shè)置層的樣式，即用CSS控制層的位置。CSS+DIV布局采用Div來定位，通過Div的border（邊框）、padding（填充）、margin（邊界）和Float（浮動(dòng)）等屬性來控制板塊的間距，具體實(shí)施是通過創(chuàng)建Div標(biāo)簽并對(duì)其應(yīng)用CSS定位及浮動(dòng)屬性來實(shí)現(xiàn)[3]。

CSS+DIV布局需要編寫大量CSS樣式代碼來控制各布局DIV層，因此要掌握它相對(duì)表格布局會(huì)困難一些。但CSS+DIV布局較表格布局更加靈活實(shí)用，網(wǎng)站布局后很容易就能調(diào)整網(wǎng)站的布局結(jié)構(gòu)，而且CSS+DIV布局的各布局DIV層可以依次下載顯示，因此其訪問速度較表格布局要快。

二、表格布局網(wǎng)頁(yè)實(shí)例

以下為用表格布局的一個(gè)網(wǎng)頁(yè)的代碼：

網(wǎng)頁(yè)布局如圖1所示：

圖1 表格布局效果

如果以后網(wǎng)頁(yè)設(shè)計(jì)者想調(diào)整表格布局，比如將中間的文字新聞和最右邊的圖片新聞?wù){(diào)換位置，這時(shí)只能重新設(shè)計(jì)表格，這相當(dāng)于重新設(shè)計(jì)一個(gè)主頁(yè)，其工作量是很大的。

三、CSS+DIV布局網(wǎng)頁(yè)實(shí)例

以下為用CSS+DIV布局一個(gè)網(wǎng)頁(yè)的部分代碼，在網(wǎng)頁(yè)中的預(yù)覽效果如圖2所示。

代碼說明：

（1）代碼中共包含11個(gè)div標(biāo)簽，分別代表11個(gè)層。其中最外層的id為container的div起到一個(gè)容器的作用，用于容納其它10個(gè)層。

（2）選擇器body和#container的樣式用于將最外層id為container的div（容器層）水平居中顯示。

（3）其它幾個(gè)選擇器樣式如#header，#links，#left，#main，#main1，#main2，#right，#right1，#right2和#footer分別用來控制容器內(nèi)10個(gè)層的顯示。

（4）選擇器#main和#right中有一個(gè)重要CSS屬性float。其中在選擇器#main中設(shè)置為float：right；而選擇器#right中設(shè)置為float：left。該屬性設(shè)定了id為right層居左顯示，id為main的層則居右顯示。在網(wǎng)頁(yè)中預(yù)覽和圖1一樣。

（5）如果想將id為main和right的層交換位置，只需要在選擇器#main中設(shè)置float：left；同時(shí)在選擇器#right中設(shè)置float：right即可。在網(wǎng)頁(yè)中的預(yù)覽效果如圖2所示。

圖2 CSS+DIV布局效果

從圖2可以看出，使用CSS+DIV布局的網(wǎng)頁(yè)，要調(diào)整各模塊之間的相對(duì)位置是很簡(jiǎn)單的。而且各DIV塊間相對(duì)比較獨(dú)立，不受其他塊的影響。在訪問該頁(yè)面時(shí)各DIV塊可以分別下載，因此訪問速度要優(yōu)于如圖1表格布局的網(wǎng)頁(yè)。

四、總結(jié)

網(wǎng)頁(yè)DIV+CSS布局方式較表格布局方式有顯著的優(yōu)勢(shì)，它將網(wǎng)頁(yè)的表現(xiàn)和內(nèi)容相分離，HTML中只存放文本信息，設(shè)計(jì)的部分獨(dú)立得存放在樣式文件中，另外，采用DIV+CSS布局的頁(yè)面文件較小，并且易于維護(hù)和改版。目前，一些知名的網(wǎng)站已均采用DIV+CSS的布局方式來布局網(wǎng)頁(yè)，已成為一種網(wǎng)頁(yè)設(shè)計(jì)標(biāo)準(zhǔn)。[4]

參考文獻(xiàn)：

[1]隋涌.網(wǎng)頁(yè)布局之形式原理與設(shè)計(jì)要素[J].北京印刷學(xué)院學(xué)報(bào)，2007，6：70-73.

[2]李艷梅，楊俊.DIV+CSS網(wǎng)頁(yè)布局方法探析[J].辦公自動(dòng)化，2010，3：43-45.

[3]吳代文.網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)與實(shí)訓(xùn)[M].北京：清華大學(xué)出版社，2011，6.

[4]鞏建學(xué).巧用DIV和CSS進(jìn)行網(wǎng)頁(yè)布局[J].電腦開發(fā)與應(yīng)用，2010，3：77-79.