關於div+css及Web標準網頁的好處

所謂“div+css”是網站標準（或稱“Web標準”）中常用的術語之一，通常為了說明與html網頁設計語言中的表格（table）定位方式的區別，因為xhtml網站設計標準中，不再使用表格定位技術，而是採用div+css的方式實現各種定位。

div元素是用來為html文檔內大塊（block-level）的內容提供結構和背景的元素。div的起始標籤和結束標籤之間的所有內容都是用來構成這個塊的，其中所包含元素的特性由div標籤的屬性來控制，或者是通過使用樣式表格式化這個塊來進行控制。

css是英語Cascading Style Sheets（層疊樣式表單）的縮寫，它是一種用來表現 html 或 xml 等檔案式樣的電腦語言。

 

[1]Web標準網頁的好處

事實上，在使用各種網頁設計與製作工具進行網頁設計製作時，就已經開始使用Web標準。在Dreamweaver或其他網頁編輯器的環境中進行網頁設計，實際上是由這個網頁編輯器在為我們自動編寫著Web標準中的各個程式碼片段。然而我們一直在使用編輯器或其他手段進行Web標準的書寫，但並不意味著作出的網頁是符合設計標準的。真正符合標準的網頁設計是指能夠靈活使用Web標準對Web內容進行結構、表現與行為的分離——即表現與內容分離的設計。

表現與內容分離技術是目前Web標準指定的核心目的：
“內容是指具體的資訊，僅僅表示資訊本文，本文通過xhtml結構化語言被標記為各個獨立部分，比如左分欄、右分欄、資訊列表（文章列表）等。
表現是指資訊的展示形式，如字型大小、字型、排版的設計稱之為表現。” [2]

1 高效率的設計、規劃與簡單維護

在網站的設計過程中，對於設計與規劃人員來講最希望的就是高效設計與規劃與簡單維護，也就是網站在設計、規劃與運營成本的關鍵所在。由表現與內容分離所帶來的高效設計與規劃是指通過內容與表現的分離設計，可以使具體內容與樣式設計分類開來，並使得同一個設計可以重複使用，當定義介面上某一個元素的設計樣式後，通過設計與內容分離，可以將這段設計樣式代碼重用於另一個資訊內容之中，直接應用或繼承這段代碼進行擴充，做到重用的目的，可以減少重複代碼，加快設計與規劃效率。而這種重用的手段在維護中同樣可以起到事半功倍的作用，通過修改同一個程式碼片段，可以使得重用這段代碼的所有地區同時改變樣式設計，使得維護簡單高效，更值得注意的是，由於內容與表現分離，使得樣式設計人員可以專註於樣式的表現而不用重複定義樣式內容，在可讀性和維護性上都得到極大的提高。

2 資訊跨平台的可用性

通過將內容與設計進行分離，我們可以使得資訊實現跨平台訪問，由於內容與設計已經分離，我們可以針對其他裝置進行樣式上的替換設計，如針對掌上型電腦或遊戲機終端，我們只需要替換一個樣式設計檔案即可另一種裝置上擁有不同樣式表現，以適應不同裝置的螢幕，而我們的內容本身是不需要改變的。

3 降低伺服器成本

通過樣式的重用、整個網站的檔案量可以成倍減小，使得降低伺服器頻寬成本成為可能。特別是對於大型門戶網站，網頁的數量越大，意味著重用的代碼數量越多，從而使得同一時間伺服器的資料訪問量降低，降低頻寬使用。
（在國外眾多網站已經從符合Web標準的設計中嘗到了甜頭，包含mp3.com 在內的許多知名網站，通過使用Web標準的網站設計，從伺服器成本中省下了大筆金錢投入到了其他服務中。對於大型網站而言，網頁代碼量減小一半則意味著其所需要的伺服器網路頻寬可以縮減一半，一個日訪問量上千萬的網站，這筆費用是不可小視的，國內的眾多門戶網站往往安置了數百台伺服器用於檔案鏡象及各種服務以滿足數以億計的網民的需求，但如果頻寬能減少一半或是三分之一，也能減少近一半的伺服器數量即可滿足網民的需求，從經濟角度上看是不忽視的，帶給大型網站的將是數以百萬元的流量費用的節省。現在國內大型門戶網站如網易 163.com 雅虎中國 cn.yahoo.com 都已經採用Web標準進行網頁設計）

4 便於改版

對於經常改版的網站來說，使內容與設計進行分離使得改版的成本大幅降低，每次改版只需改動樣式檔案即可，而不需要改變資訊內容。使得改版技術難度與實施周期都得到降低。

5 加快網頁解析速度

一些測試表明目前通過內容與設計分離的結構進行網頁設計，使得瀏覽器對網頁解析速度大幅提高，相對於老式內容與設計混合編碼而言，瀏覽器在解析中可以以更好的解析方式分析結構元素與設計項目，良好的網頁瀏覽速度使得使用者的瀏覽體驗得以提升。

6 與未來相容

已經將內容與設計分開，不用再擔心未來的技術變革，無論是結構或是設計，都可以隨時替換與修改，不需要再在混雜著資訊與設計的代碼中進行修改。

7 更良好的使用者體驗

表現與內容分類的設計要求我們充分理解網站資訊的具體構成以及如何設計好的樣式可以重用，使我們在設計與製作網站時能夠充分地對網站的內容、設計統一性、可用性進行思考與設計，從而提高網站的可用性，改善使用者體驗。

結語

符合Web標準的網站設計還有更多優勢，在使用Web標準進行設計與規劃的過程中，將能夠逐步感受到，眾多網頁設計師在選擇Web標準進行設計與規劃的事實更加證明了其價值。

目前Web標準已開始普及成為一種趨勢，符合Web標準的網站設計正在潛移默化地改變著我們的瀏覽體驗，也改變著我們在日益增廠的互連網上的表現形式。

參考資料：
[1] 什麼是div+css[DB/OL]
http://www.emct.cn/Knowledge/webmarket/2006-08-16/73.html
[2] 李超. CSS網站布局實錄[M]. 北京：科學出版社 北京希望電子出版社，2006-9：76-216.

作者：羅晶
來源：巴黎愛薇
（歡迎轉載，轉載請註明出處並做好連結，否則作者將保留追究責任的權利。）