基于XHTML+CSS布局網頁技術的探討

鄭林宗 張慧

【摘要】本文首先介紹了XHTML設計標準與HTML、XML語言之間的關系，分析了CSS技術和DIV技術的特點，將傳統的HTML標準下的TABLE布局的特點與CSS+DIV布局方式進行了對比，通過一個互動社區網頁講解使用CSS+DIV布局網頁的方法。

【關鍵詞】XHTML;DIV;CSS;布局

一、HTML與XHTML的區別

HTML是一種用來制作超文本文檔的標記語言。用HTML編寫的超文本文檔稱為HTML文檔，它能獨立于各種操作系統平臺。使用HTML語言描述的文件需要通過WWW瀏覽器顯示出效果。HTML是一種純文本語言，HTML代碼在運行時不用事先編譯為二進制代碼，而是直接通過網頁瀏覽器逐行解釋執行。

XHTML是The Extensible HyperText Markup Language（可擴展超文本標記語言）的縮寫。HTML是一種基本的Web網頁設計語言，XHTML是一個基于XML的置標語言，XHTML是一個扮演著類似HTML角色的XML，從本質上說，XHTML是一個過渡技術，結合了部分XML的強大功能及大多數HTML的簡單特性。

二、CSS的介紹

CSS是用來進行網頁樣式設計的標識語言，與HTML一樣屬于解釋性語言。通過設計樣式表，可以統一控制HTML中各個標簽的顯示屬性。CSS樣式表可以使用戶更有效地控制網頁外觀，精確指定網頁元素位置，創建以及觀察特殊效果。

使用CSS，可以將網頁結構和內容與表現形式分離開來，網頁結構和內容被存放在HTML文檔中，而用于定義表現形式的CSS規則則被存放在另一個CSS樣式表文件中。

三、Table和CSS+DIV布局頁面的優缺點

使用表格進行頁面布局會帶來很多問題：

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

（2）這使得重新設計現有的站點和內容極為消耗勞力;

（3）這還使保持整個站點的視覺的一致性極難，花費也極高;

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

而使用CSS+DIV進行網頁布局，它會：

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

（2）降低你的流量費用;

（3）讓你在修改設計時更有效率而代價更低;

（4）幫助你的整個站點保持視覺的一致性;

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

（6）使你的站點對瀏覽者和瀏覽器更具親和力;

其優點如下：

（1）內容和形式分離

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

（2）改版網站更簡單容易了

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

（3）搜索引擎更友好，確實能夠對SEO起到一定的幫助。

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

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

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

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

圖1 網頁結構

這樣HTML就很容易寫出來了

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

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