WEB標準不是某一個標準,而是一系列標準的集合。網頁主要由三部分組成:結構(Structure)、表現(Presentation)和行為(Behavior)。對應的標準也分三方面:結構化標準語言主要包括XHTML和XML,表現標準語言主要包括CSS,行為標準主要包括對象模型(如 W3C DOM)、ECMAScript等。這些標準大部分由W3C起草和發布,也有一些是其他標準組織制訂的標準,比如ECMA(European Computer Manufacturers Association)的ECMAScript標準。我們來簡單了解一下這些標準:
1.結構標準語言
(1)XML
XML是The Extensible Markup Language(可擴展標識語言)的簡寫。目前推薦遵循的是W3C于2000年10月6日發布的XML1.0,參考(www.w3.org/TR/2000/REC-XML-20001006)。和HTML一樣,XML同樣來源于SGML,但XML是一種能定義其他語言的語。XML最初設計的目的是彌補HTML的不足,以強大的擴展性滿足網絡信息發布的需要,后來逐漸用于網絡數據的轉換和描述。關于XML的好處和技術規范細節這里就不多說了,網上有很多資料,也有很多書籍可以參考。
(2)XHTML
XHTML是The Extensible HyperText Markup Language可擴展標識語言的縮寫。目前推薦遵循的是W3C于2000年1月26日推薦XML1.0(參考http: //www.w3.org/TR/xhtml1)。XML雖然數據轉換能力強大,完全可以替代HTML,但面對成千上萬已有的站點,直接采用XML還為時過早。因此,我們在HTML4.0的基礎上,用XML的規則對其進行擴展,得到了XHTML。簡單的說,建立XHTML的目的就是實現HTML向XML的過渡。
2. 表現標準語言
CSS是Cascading Style Sheets層疊樣式表的縮寫。目前推薦遵循的是W3C于1998年5月12日推薦CSS2(參考http://www.w3.org/TR/CSS2/)。W3C創建CSS標準的目的是以CSS取代HTML表格式布局、幀和其他表現的語言。純CSS布局與結構式XHTML相結合能幫助設計師分離外觀與結構,使站點的訪問及維護更加容易。
3.行為標準
(1)DOM
DOM是Document Object Model文檔對象模型的縮寫。根據W3C DOM規范(http://www.w3.org/DOM/), DOM是一種與瀏覽器,平臺,語言的接口,使得你可以訪問頁面其他的標準組件。簡單理解,DOM解決了Netscaped的Javascript和 Microsoft的Jscript之間的沖突,給予web設計師和開發者一個標準的方法,讓他們來訪問他們站點中的數據、腳本和表現層對像。
(2) ECMAScript
ECMAScript是ECMA(European Computer Manufacturers Association)制定的標準腳本語言(JAVAScript)。目前推薦遵循的是ECMAScript 262(http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM)。
web標準在中國推廣有一段時間了,在這段時間大家進行了激烈而精彩的討論,也提出了很多疑問,產生了很多誤解,我整理了一些常見的問題和對web標準的誤解進行解答,有不對的地方,還請大家指出進行討論。
1.web標準是一個標準嗎?
回答:WEB標準不是某一個標準,而是一系列標準的集合。網頁主要由三部分組成:結構(Structure)、表現(Presentation)和行為(Behavior)。對應的標準也分三方面:結構化標準語言主要包括XHTML和XML,表現標準語言主要包括CSS,行為標準主要包括對象模型(如 W3C DOM)、ECMAScript等。這些標準大部分由W3C起草和發布,也有一些是其他標準組織制訂的標準,比如ECMA(European Computer Manufacturers Association)的ECMAScript標準。
2.Design with web standard(應用web標準進行設計)就是div+css替代table布局嗎?
回答:肯定不是,上面一個問題里提過了,他是很多標準的集合,怎么能一個div+css就概括了呢?確切的說,我們常見的設計應該是xhtml+css+DOM,結構標準+表現標準+行為標準。
xhtml是網頁的結構,CSS格式化網頁、控制字體、布局、顏色等等。DOM創建交互行為和效果。而每一個部分都要遵循相應標準。
<div>是一個xhtml的標簽(tag),沒有語義,他被作為一個裝載信息的容器(box)來使用,目的是為了CSS能更好的控制網頁的視覺效果,為設計師提供更廣闊的發揮空間。
<table>是指定所含內容要組織成行列的表格,傳統的table布局就是一種誤用,而且不具備標準所擁有的優點,所以在應用web標準設計網頁時,table布局當然被拋棄了。
3.應用web標準設計的網頁瀏覽器兼容性為什么不理想?
回答:這個問題的提出我想是因為網頁的表現效果在各種瀏覽器下不是很一致。這個問題的產生主要是由于CSS和DOM,你看到的兼容性不好,是因為web標準中的表現(CSS)標準沒有得到現代的瀏覽器(古老的瀏覽器肯定不能很好的支持)很好的支持,有很多的CSS解析bug,如盒bug、IE浮動 3pxbug等,這些都是瀏覽器自身的問題。web標準是為了消除瀏覽器之爭,打破他們的私有代碼,讓web標準體系里的代碼在所有的瀏覽器上都正常解析,實現web的跨平臺性,而不是你的代碼符合web標準就能帶來很好像兼容性,那些古老的瀏覽器也沒有支持web標準嘛,而且Firefox, Opera新版本不是很快就支持標準了嗎?IE7.0的泄漏版本也在向標準靠近。
雖然CSS布局比較困難,布局中的問題也挺多,但是比起table布局了,擴展性確實提高了,就像blog的功能欄可以放到左邊頁可以放到右邊,table布局能實現的div配合CSS也全部都實現了,而且還做到了table布局不能做到的。
4.web標準能做出漂亮的網頁嗎?
回答:藝術效果和web標準無關,藝術效果取決于設計師的能力,web標準不能提供為設計提供設計靈感。這是一個老掉牙的誤解的,但是與CSS的應用有一定的關系,看看CSSbeauty,CSSimport等網站收錄的通過W3C校檢的網站,他們告訴你合理的使用CSS同樣能將你優秀的設計效果展現在網頁界面上。而且CSS的誕生就是為了讓網頁有更豐富更完美的視覺效果,只要是表現就沒有CSS做不到的。還有作為視覺修飾的圖片一律在CSS中使用(如:background:url (yourpic.jpg);),作為信息的圖片才能用于<img>。
在web標準推廣的過程中,這個問題一直是熱點,CSS也被人作為標準的重點來學習,原因很簡單,因為網頁不只是是信息,還有表現、視覺效果,沒有漂亮的用戶界面,客戶是不會選中你的作品的。
5.W3C校檢通過就是符合web標準嗎?
回答:W3C校檢只是從語法的角度來校檢你的網頁里的代碼的使用是否正確,比如<br/>沒有閉合,span中嵌套div等等。而有些table布局的網頁也能通過W3C校檢,比如table布局的一個實例, 因為語義不符合,table布局就是結構和表現混雜。符合web標準!=通過校檢,通過校檢!=符合web標準,迄今沒有那個指標可以確定你的網站是符合標準的,W3C校檢只是讓你xhtml,css,DOM等在語法上正確的應用。你能做的只是應用web標準進行設計(Design with web standard)。
6.為什么要應用web標準設計網頁?
回答:好處很多,最基本的是:
1)對網站瀏覽者的好處:
[list]
[*]文件下載與頁面顯示速度更快;
[*]內容能被更多的用戶所訪問(包括失明、視弱、色盲等殘障人士);
[*]內容能被更廣泛的設備所訪問(包括屏幕閱讀機、手持設備、搜索機器人、打印機、電冰箱等等);
[*]用戶能夠通過樣式選擇定制自己的表現界面 ;
[*]所有頁面都能提供適于打印的版本;
[/list]
2)對網站所有者的好處:
[list]
[*]更少的代碼和組件,容易維護 ;
[*]帶寬要求降低(代碼更簡潔),成本降低。舉個例子:當 ESPN.com 使用 CSS改版后,每天節約超過兩兆字節(terabytes)的帶寬;
[*]更容易被搜尋引擎搜索到 ;
[*]改版方便,不需要變動頁面內容;
[*]提供打印版本而不需要復制內容 ;
[*]提高網站易用性。在美國,有嚴格的法律條款(Section 508)來約束政府網站必須達到一定的易用性,其他國家也有類似的要求。
[/list]
<a href="/XHTML/standard/XHTML_16.html target=_blank>想了解更多?
7.什么是好的結構?
回答:好的結構這里所說的是xhtml的結構,首先聲明<Doctype>和<head>部分采用標準推薦寫法,其次就是標簽的語義化,無語義的標簽(<div>,<span>)作容器,<Hx>作標題,<p>作段落,<ul,ol,dl>作列表,<acronym>標明縮寫詞,<table>指定所含內容要組織成行列的表格等等。再次是div容器的合理使用,層層嵌套也不好,代碼冗余,太少也不好,表現的擴展性太差,這個需要具體分析解決。比如csszengarden的結構就很不錯,語法應用合理,也為設計師提供了廣闊的發揮空間。
8.table什么時候使用?
回答:<table>有組織的所含內容成行列的表格,比如成績單,學生花名冊,排行榜等數據,想了解更多?
9.Web設計必須要符合Web標準嗎?
回答:沒有人規定你必須設計符合標準的網頁,Web標準也不是非常完美,他還沒有支持多媒體(如flash)。而且Web標準推廣書名是Design with web standard,中文翻譯版本也是《網站重構——應用web標準進行設計》,不是遵循web標準進行設計。應用web標準進行設計我的觀點是為我所用,利用web標準化的一些優點來設計和規劃你的網站,帶來一些你期望的利益。
10.web標準化中CSS能做多少事情?
回答:去看看小毅的CSS不是萬能藥膏,CSS是負責表現的,也就是你的視覺感受都可以用CSS來實現,還有一些動態效果:hover(鼠標滑過)效果。
11.做div+css的人都是什么人?
回答:這個問題首先是對web標準的一個誤解,提問者的意思可能是xhtml+ css設計網頁由什么人來負責,xhtml是結構網頁設計師需要學習程序員也需要學習,CSS 是表現設計師的事情,但是有的設計師對編碼不夠擅長,但是一個網頁設計師是綜合性的web UI(web用戶界面)設計師,不能只會設計圖紙,但是在過渡階段可以有一個擅長xhtml+css設計師來銜接界面設計師和程序員。想了解更多去看看什么人適合學習WEB標準。
12.web標準體系中CSS最重要嗎?
回答:引用小毅的話“結構是戰略的高度,表現和行為是戰術的高度”,具體說說就是web是一個裝載信息的空間,他的作用就是傳達信息,表現是為了讓信息更容易的讓瀏覽著接受,為了優化用戶體驗。行為也是用戶體驗的一部份。到了具體的應用,品牌形象展示藝術效果很重要,但是你的信息更重要,瀏覽者不能看見你的logo就能很具體的了解企業的情況。而且你企業的介紹、提供的服務等信息,可以通過web標準的對搜索引擎友好的優點讓更多人了解到。一個良好的結構自然能給設計師廣闊的發揮空間,為之設計出許許多多漂亮的界面,反之則限制設計師的發揮,可以隨著web的發展向后兼容,隨時更改用戶體驗避免網站被淘汰而產生重新開發的成本。
