鄭林宗 張慧

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

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

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

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

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

二、CSS的介紹

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

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

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

使用表格進(jìn)行頁面布局會帶來很多問題：

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

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

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

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

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

（1）使你的頁面載入得更快;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

這樣HTML就很容易寫出來了

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

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