鄭林宗 張慧
【摘要】本文首先介紹了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