DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 前端技巧 >> 關於div+css及Web標准網頁的好處
關於div+css及Web標准網頁的好處
編輯:前端技巧     
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.

作者:羅晶
來源:巴黎愛薇
(歡迎轉載,轉載請注明出處並做好鏈接,否則作者將保留追究責任的權利。)

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved