鄭林宗 張慧

【摘要】本文首先介紹了XHTML設(shè)計(jì)標(biāo)準(zhǔn)與HTML、XML語(yǔ)言之間的關(guān)系，分析了CSS技術(shù)和DIV技術(shù)的特點(diǎn)，將傳統(tǒng)的HTML標(biāo)準(zhǔn)下的TABLE布局的特點(diǎn)與CSS+DIV布局方式進(jìn)行了對(duì)比，通過(guò)一個(gè)互動(dòng)社區(qū)網(wǎng)頁(yè)講解使用CSS+DIV布局網(wǎng)頁(yè)的方法。

【關(guān)鍵詞】XHTML;DIV;CSS;布局

一、HTML與XHTML的區(qū)別

HTML是一種用來(lái)制作超文本文檔的標(biāo)記語(yǔ)言。用HTML編寫(xiě)的超文本文檔稱為HTML文檔，它能獨(dú)立于各種操作系統(tǒng)平臺(tái)。使用HTML語(yǔ)言描述的文件需要通過(guò)WWW瀏覽器顯示出效果。HTML是一種純文本語(yǔ)言，HTML代碼在運(yùn)行時(shí)不用事先編譯為二進(jìn)制代碼，而是直接通過(guò)網(wǎng)頁(yè)瀏覽器逐行解釋執(zhí)行。

XHTML是The Extensible HyperText Markup Language（可擴(kuò)展超文本標(biāo)記語(yǔ)言）的縮寫(xiě)。HTML是一種基本的Web網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言，XHTML是一個(gè)基于XML的置標(biāo)語(yǔ)言，XHTML是一個(gè)扮演著類似HTML角色的XML，從本質(zhì)上說(shuō)，XHTML是一個(gè)過(guò)渡技術(shù)，結(jié)合了部分XML的強(qiáng)大功能及大多數(shù)HTML的簡(jiǎn)單特性。

二、CSS的介紹

CSS是用來(lái)進(jìn)行網(wǎng)頁(yè)樣式設(shè)計(jì)的標(biāo)識(shí)語(yǔ)言，與HTML一樣屬于解釋性語(yǔ)言。通過(guò)設(shè)計(jì)樣式表，可以統(tǒng)一控制HTML中各個(gè)標(biāo)簽的顯示屬性。CSS樣式表可以使用戶更有效地控制網(wǎng)頁(yè)外觀，精確指定網(wǎng)頁(yè)元素位置，創(chuàng)建以及觀察特殊效果。

使用CSS，可以將網(wǎng)頁(yè)結(jié)構(gòu)和內(nèi)容與表現(xiàn)形式分離開(kāi)來(lái)，網(wǎng)頁(yè)結(jié)構(gòu)和內(nèi)容被存放在HTML文檔中，而用于定義表現(xiàn)形式的CSS規(guī)則則被存放在另一個(gè)CSS樣式表文件中。

三、Table和CSS+DIV布局頁(yè)面的優(yōu)缺點(diǎn)

使用表格進(jìn)行頁(yè)面布局會(huì)帶來(lái)很多問(wèn)題：

（1）把格式數(shù)據(jù)混入你的內(nèi)容中。這使得文件的大小無(wú)謂地變大，而用戶訪問(wèn)每個(gè)頁(yè)面時(shí)都必須下載一次這樣的格式信息，帶寬并非免費(fèi);

（2）這使得重新設(shè)計(jì)現(xiàn)有的站點(diǎn)和內(nèi)容極為消耗勞力;

（3）這還使保持整個(gè)站點(diǎn)的視覺(jué)的一致性極難，花費(fèi)也極高;

（4）基于表格的頁(yè)面還大大降低了它對(duì)殘疾人和用手機(jī)或 PDA 瀏覽者的親和力。

而使用CSS+DIV進(jìn)行網(wǎng)頁(yè)布局，它會(huì)：

（1）使你的頁(yè)面載入得更快;

（2）降低你的流量費(fèi)用;

（3）讓你在修改設(shè)計(jì)時(shí)更有效率而代價(jià)更低;

（4）幫助你的整個(gè)站點(diǎn)保持視覺(jué)的一致性;

（5）讓你的站點(diǎn)可以更好地被搜索引擎找到;

（6）使你的站點(diǎn)對(duì)瀏覽者和瀏覽器更具親和力;

其優(yōu)點(diǎn)如下：

（1）內(nèi)容和形式分離

網(wǎng)頁(yè)前臺(tái)只需要顯示內(nèi)容就行，形式上的美工交給CSS來(lái)處理。生成的HTML文件代碼精簡(jiǎn)，更小打開(kāi)更快。

（2）改版網(wǎng)站更簡(jiǎn)單容易了

不用重新設(shè)計(jì)排版網(wǎng)頁(yè)，甚至于不用動(dòng)原網(wǎng)站的任何HTML和程序頁(yè)面，只需要改動(dòng)CSS文件就完成了所有改版。

（3）搜索引擎更友好，確實(shí)能夠?qū)EO起到一定的幫助。

通過(guò)DIV+CSS對(duì)網(wǎng)頁(yè)的布局，可以讓一些重要的鏈接、文字信息，優(yōu)先讓搜索引擎蜘蛛爬取。這對(duì)于SEO也有幫助。

四、通過(guò)實(shí)例講解TABLE+DIV+CSS布局頁(yè)面的使用

（1）整體布局與公共CSS定義

通過(guò)分析頁(yè)面布局可得頁(yè)面主要分5大塊，頂部Logo、導(dǎo)航條Nav、Banner、Content、Footer，如圖1所示。

圖1 網(wǎng)頁(yè)結(jié)構(gòu)

這樣HTML就很容易寫(xiě)出來(lái)了

這5塊的寬度都是900像素，并且都是水平居中的，其相應(yīng)CSS代碼如下：

body，div，a，img，p，form，h1，h2