一:了解web標(biāo)準(zhǔn)
1.什么是web標(biāo)準(zhǔn)?
首先要明確一個(gè)概念。我們本書講的web標(biāo)準(zhǔn),不是指XML,而是指為了實(shí)現(xiàn)大量HTML信息向XML標(biāo)準(zhǔn)的過(guò)渡,W3C和ECMA制定的一系列的技術(shù)規(guī)范,目前主要包括XHTML1.0、CSS2.0、DOM1.0和ECMA JavaScrit。web標(biāo)準(zhǔn)不僅僅是一個(gè)規(guī)范,而是一系列規(guī)范的總稱。
按這些規(guī)范制作的網(wǎng)頁(yè),符合XML格式規(guī)范,內(nèi)容與表現(xiàn)相分離,將使你的頁(yè)面數(shù)據(jù)在以后可以被分享、交換和重用。
下面,讓我們一起了解一些重要的基礎(chǔ)知識(shí)。如果你已經(jīng)掌握,可以跳過(guò)直接閱讀第二節(jié)
。2. 什么是w3c?
W3C是“World Wide Web Consortium”的縮寫,中文稱萬(wàn)維網(wǎng)組織。是一個(gè)專注于“領(lǐng)導(dǎo)和發(fā)展web技術(shù)”的國(guó)際工業(yè)行業(yè)協(xié)會(huì)。它由萬(wàn)維網(wǎng)發(fā)明者Time Berners-Lee領(lǐng)導(dǎo),成立與1994年。W3C已經(jīng)有超過(guò)500家的會(huì)員--包括微軟、美國(guó)在線(Netscape的母公司)、蘋果電腦、Adobe、Macromedia、SUN 以及各類主流硬件、軟件制造商和電信公司。學(xué)會(huì)主要研究由三家學(xué)術(shù)機(jī)構(gòu)主理--美國(guó)麻省理工學(xué)院(MIT)、法國(guó)的歐洲信息與數(shù)學(xué)研究論壇(ERCIM)、日本的應(yīng)慶大學(xué)(KEIO)。
W3C主要工作是研究和制定開(kāi)放的規(guī)范(事實(shí)上的標(biāo)準(zhǔn)),以便提高web相關(guān)產(chǎn)品的互用性。W3C的推薦規(guī)范的制定都是由來(lái)自于會(huì)員和特別邀請(qǐng)的專家組成的工作組完成。工作組的草案(Drafts)在通過(guò)多數(shù)相關(guān)公司和組織同意后提交給W3C理事會(huì)討論,正式批準(zhǔn)后才成為“推薦規(guī)范(Recommendations)”發(fā)布。更多的信息您可以訪問(wèn)W3C的網(wǎng)站:www.w3.org
3.W3C發(fā)布的標(biāo)準(zhǔn)
3.1 HTML4.0
HyperText Markup Language(HTML,超文本標(biāo)識(shí)語(yǔ)言)廣泛用于現(xiàn)在的網(wǎng)頁(yè),HTML目的是為文檔增加結(jié)構(gòu)信息,例如表示標(biāo)題,
表示段落;瀏覽器可以解析這些文檔的結(jié)構(gòu),并用相應(yīng)的表現(xiàn)形式表現(xiàn)出來(lái)。例如:瀏覽器會(huì)將...之間的內(nèi)容用粗體顯示。
設(shè)計(jì)師也可以通過(guò)CSS(Cascading Style Sheets)來(lái)定義某種結(jié)構(gòu)以什么形式表現(xiàn)出來(lái)。
3.2 XML1.0
XML是Extensible Markup Language(可擴(kuò)展標(biāo)識(shí)語(yǔ)言)的簡(jiǎn)寫。XML類似HTML也是標(biāo)識(shí)語(yǔ)言,不同的地方是:HTML有固定的標(biāo)簽,而XML允許你自己定義自己的標(biāo)簽,甚至允許你通過(guò)XML namespaces為一個(gè)文檔定義多套設(shè)定。看一個(gè)XML例子:
<addressbook>
<entry>
<name>AJIE</name><email>ajie33@hotmail.com</email>
</entry>
<entry><name>ALLAN</name><email>neo_n@21cn.com</email>
</entry>
<entry><name>YAHOO</name><email>tingpeng@msn.com</email>
</entry>
</addressbook>
一些XML的應(yīng)用,例如XHTML和MathML,已經(jīng)成為W3C推薦規(guī)范。你同樣可以通過(guò)樣式規(guī)范(CSS和XSL),來(lái)定義XML標(biāo)簽的表現(xiàn)形式。XML文檔目前還不能直接用瀏覽器顯示,頁(yè)面展現(xiàn)依然采用HTML或者XHTML,XML現(xiàn)在大多用于服務(wù)器與服務(wù)器(系統(tǒng)與系統(tǒng))之間的數(shù)據(jù)交換。
3.3 CSS2.0
CSS是Cascading Style Sheets層疊樣式表的縮寫。通過(guò)CSS可以控制HTML或者XML標(biāo)簽的表現(xiàn)形式。W3C推薦使用CSS布局方法,使得web更加簡(jiǎn)單,結(jié)構(gòu)更加清晰。
3.4 XHTML1.0
XHTML實(shí)際上就是將HTML根據(jù)XML規(guī)范重新定義一遍。它的標(biāo)簽與HTML4.0一致,而格式嚴(yán)格遵循XML規(guī)范。因此,雖然XHTML與HTML在瀏覽器中一樣顯示,但如果你要轉(zhuǎn)換成PDF,那么XHTML會(huì)容易的多。
XHTML有三種DTD定義:嚴(yán)格的(strict),過(guò)渡的(Transitional),框架的(Frameset)。 DTD是Document Type Definition文檔類型定義的縮寫。它寫在XHTML文件的最開(kāi)始,告訴瀏覽器這個(gè)文檔符合什么規(guī)范,用什么規(guī)范來(lái)解析。
3.5 DOM1.0
DOM是Document Object Model文檔對(duì)象模型的縮寫。DOM給了腳本語(yǔ)言(類似ECMAScript)無(wú)限發(fā)揮的能力。它使腳本語(yǔ)言很容易訪問(wèn)到整個(gè)文檔的結(jié)構(gòu)、內(nèi)容和表現(xiàn)。
4 什么是ECMA?
是“European Computer Manufactures Association”的縮寫,中文稱歐洲計(jì)算機(jī)制造聯(lián)合會(huì)。是1961年成立的旨在建立統(tǒng)一的電腦操作格式標(biāo)準(zhǔn)--包括程序語(yǔ)言和輸入輸出的組織。
ECMA位于日內(nèi)瓦,和ISO(國(guó)際標(biāo)準(zhǔn)組織)以及IEC(國(guó)際電工標(biāo)準(zhǔn)化機(jī)構(gòu))總部相鄰,主要任務(wù)是研究信息和通訊技術(shù)方面的標(biāo)準(zhǔn)并發(fā)布有關(guān)技術(shù)報(bào)告。ECMA并不是官方機(jī)構(gòu),而是由主流廠商組成的,他們經(jīng)常與其他國(guó)際組織進(jìn)行合作。
4.1 ECMA發(fā)布的標(biāo)準(zhǔn) ECMAscript
ECMAscript是基于Netscape javaScript的一種標(biāo)準(zhǔn)腳本語(yǔ)言。它也是一種基于對(duì)象的語(yǔ)言,通過(guò)DOM可以操作網(wǎng)頁(yè)上的任何對(duì)象。可以增加、刪除、移動(dòng)或者改變對(duì)象。使得網(wǎng)頁(yè)的交互性大大提高。
上述標(biāo)準(zhǔn)是我們目前從HTML向XML過(guò)渡時(shí)期用到的主要標(biāo)準(zhǔn),也是本書主要討論的范疇。
5.web標(biāo)準(zhǔn)的優(yōu)勢(shì)
5.1 易用性
用web標(biāo)準(zhǔn)制作的頁(yè)面,對(duì)搜索引擎更加“透明”,因?yàn)榱己们逦慕Y(jié)構(gòu)使得搜索引擎能夠方便的判斷與評(píng)估信息,從而建立更精確的索引。按web標(biāo)準(zhǔn)制作的頁(yè)面也可以在更老版本的瀏覽器中正常顯示基本結(jié)構(gòu),即使CSS/XSL樣式無(wú)法解析,它也能顯示出完整的信息和結(jié)構(gòu)。
符合web標(biāo)準(zhǔn)的頁(yè)面也很容易被轉(zhuǎn)換成其他格式文檔,例如數(shù)據(jù)庫(kù)或者word格式,也容易被移植到新的系統(tǒng)--硬件或者軟件系統(tǒng),比如網(wǎng)絡(luò)電視、PDA等等。這是XML天生具有的優(yōu)勢(shì)。
符合web標(biāo)準(zhǔn)的頁(yè)面也具有天生的“易用性(accessibility)”,不僅僅是普通瀏覽器可以閱讀,那些有殘疾的人們也可以通過(guò)盲人瀏覽器、聲音閱讀器正常使用。
5.2 向后兼容性
使用web標(biāo)準(zhǔn)建立的頁(yè)面,將在未來(lái)的新瀏覽器或者新網(wǎng)絡(luò)設(shè)備中很好的工作。我們只要修改CSS或者XSL定制相應(yīng)的表現(xiàn)形式就可以了。
二:web標(biāo)準(zhǔn)的思考與爭(zhēng)論
通過(guò)上文的介紹,我們已經(jīng)初步了解為什么W3C要建立XML標(biāo)準(zhǔn),為什么各大廠商都愿意支持XML。也了解到為了向XML標(biāo)準(zhǔn)過(guò)渡,我們目前階段需要學(xué)習(xí)和掌握的web標(biāo)準(zhǔn)有那些,接下來(lái)就是具體應(yīng)用了。但我們發(fā)現(xiàn)應(yīng)用也并不如想像中那樣順利,依然有一堆的困難擺在我們面前:
- 有99%采用HTML4.0或者更老規(guī)范建立的網(wǎng)頁(yè)需要轉(zhuǎn)換到XHTML;
- 每天依然有大量的新的頁(yè)面采用不符合web標(biāo)準(zhǔn)的技術(shù)在發(fā)布;
- 缺乏易用的、強(qiáng)大的支持web標(biāo)準(zhǔn)的頁(yè)面開(kāi)發(fā)軟件;
- 主流瀏覽器IE對(duì)web標(biāo)準(zhǔn)的支持不完善;
- 大批的設(shè)計(jì)師需要了解web標(biāo)準(zhǔn),轉(zhuǎn)變觀念;
其中“轉(zhuǎn)變觀念”是最重要、也是最難的。許多設(shè)計(jì)師還不理解web標(biāo)準(zhǔn),依然在觀望甚至反對(duì)。這里我們來(lái)分析web標(biāo)準(zhǔn)推廣過(guò)程中遇到的典型問(wèn)題與爭(zhēng)論:
(一)關(guān)于web標(biāo)準(zhǔn)
1.web標(biāo)準(zhǔn)并不是“標(biāo)準(zhǔn)”,我為什么要遵守?
的確,web標(biāo)準(zhǔn)并不是標(biāo)準(zhǔn),它只是W3C制定的推薦規(guī)范,W3C并沒(méi)有強(qiáng)制要求和監(jiān)督業(yè)界去執(zhí)行。web標(biāo)準(zhǔn)組織(webstandards.org)為了便于這些規(guī)范的推廣,才把它們統(tǒng)稱為“web標(biāo)準(zhǔn)”。雖然W3C制定的只是“推薦規(guī)范”,但它已經(jīng)是事實(shí)上的標(biāo)準(zhǔn),世界前500家大IT企業(yè)會(huì)員都認(rèn)可的規(guī)范,你沒(méi)有理由懷疑它的廣泛性和可行性。微軟也是W3C的主要會(huì)員,它自己通過(guò)的規(guī)范一定會(huì)支持,但出于商業(yè)競(jìng)爭(zhēng)的考慮,微軟通常都會(huì)做一些細(xì)節(jié)調(diào)整來(lái)綁定用戶,但這并不影響W3C規(guī)范的方向性和權(quán)威性。2.DIV+CSS就是web標(biāo)準(zhǔn)嗎?
DIV+CSS只是具體的實(shí)現(xiàn)技術(shù)手段,并不能涵蓋web標(biāo)準(zhǔn)。web標(biāo)準(zhǔn)不僅僅是HTML向XHTML的轉(zhuǎn)換,更重要的是信息結(jié)構(gòu)清晰、內(nèi)容與表現(xiàn)相分離,而DIV+CSS技術(shù)能較好的實(shí)現(xiàn)這種思想。因此,我們看到的多數(shù)符合標(biāo)準(zhǔn)的頁(yè)面都是采用DIV+CSS制作。(二).關(guān)于web標(biāo)準(zhǔn)的好處
1.科技在進(jìn)步,網(wǎng)絡(luò)帶寬越來(lái)越大,速度越來(lái)也快,節(jié)省那點(diǎn)字節(jié)有意義嗎?
web標(biāo)準(zhǔn)的好處之一是:用web標(biāo)準(zhǔn)制作的頁(yè)面代碼量小,可以節(jié)省帶寬。這只是web標(biāo)準(zhǔn)附帶的好處,因?yàn)镈IV的結(jié)構(gòu)本身就比TABLE簡(jiǎn)單,TABLE布局的層層嵌套造成代碼臃腫,文件尺寸膨脹。通常情況下,相同表現(xiàn)的頁(yè)面用DIV+CSS比用TABLE布局的節(jié)省2/3的代碼。這是web標(biāo)準(zhǔn)天生的好處。 至于節(jié)省帶寬的意義并不主要針對(duì)普通用戶,而主要針對(duì)網(wǎng)站經(jīng)營(yíng)者,特別是中大型網(wǎng)站,類似新浪、網(wǎng)易這樣的站點(diǎn)。一個(gè)新聞首頁(yè)從500K縮小到170k,假設(shè)一天的pageview是3000萬(wàn)(保守?cái)?shù)字),那么節(jié)省的服務(wù)器流量就是330k*30000000=9440G,這個(gè)成本的節(jié)約是可觀的。2.我需要考慮殘障人士(盲人和弱視)嗎?
為殘障人士提供網(wǎng)絡(luò)瀏覽方便是美國(guó)及歐洲一些國(guó)家的法律規(guī)定,由于web標(biāo)準(zhǔn)頁(yè)面的清晰結(jié)構(gòu)、語(yǔ)義完整,一些相關(guān)設(shè)備能很容易的正確提取信息給殘障人士。因此,方便盲人閱讀信息也成為web標(biāo)準(zhǔn)的天生好處之一。至于有人說(shuō)中國(guó)目前還有很多人為解決溫飽發(fā)愁,哪有時(shí)間考慮殘障人士。這是社會(huì)文明和社會(huì)道德問(wèn)題,不在本書討論范疇。但如果你頁(yè)面按web標(biāo)準(zhǔn)制作了,就能達(dá)到這個(gè)效果,何樂(lè)而不為呢?(三).關(guān)于布局
1.web標(biāo)準(zhǔn)就不能用表格了嗎?
首先要澄清一個(gè)概念:web標(biāo)準(zhǔn)并不是不允許用TABLE標(biāo)簽,TABLE也是XHTML1.0中的標(biāo)準(zhǔn)標(biāo)簽。我們只是提倡用DIV+CSS布局來(lái)替代傳統(tǒng)的table布局。原因是:原來(lái)的TABLE布局將表現(xiàn)和內(nèi)容混雜在一起,結(jié)構(gòu)不清晰、內(nèi)容不完整,不利于內(nèi)容的重用。而且從語(yǔ)義上講,W3C制定TABLE標(biāo)簽時(shí)候只是用它來(lái)做表格結(jié)構(gòu)定義的,文檔中如果有表格,那么就應(yīng)該用TABLE。而排版、定位這些表現(xiàn)的東西應(yīng)該由CSS來(lái)控制。2.我用table布局改版也很方便,你用CSS不一定就比我效率高。
個(gè)別情況或者個(gè)別項(xiàng)目,有可能象你說(shuō)的,用table布局改版也很快。但這不是長(zhǎng)遠(yuǎn)之計(jì),我們需要透過(guò)現(xiàn)象看本質(zhì),web標(biāo)準(zhǔn)將內(nèi)容與表現(xiàn)相剝離,所有樣式、風(fēng)格、布局等等表現(xiàn)的東西獨(dú)立出來(lái),由CSS或者XSLT來(lái)單獨(dú)控制,這樣的剝離后,改版才是真正的方便。而且“改版”并不僅僅是瀏覽器上的改版,同樣的頁(yè)面如果我需要發(fā)布到手機(jī)上,符合web標(biāo)準(zhǔn)的頁(yè)面就只需要修改樣式文件,而table布局的則需要完全重做,未來(lái)如果還需要再發(fā)布到網(wǎng)絡(luò)電視上或者其它新設(shè)備上呢?CSS的效率一定比table高。3.用web標(biāo)準(zhǔn)能制作出漂亮的頁(yè)面嗎?
由于一開(kāi)始研究和推廣web標(biāo)準(zhǔn)的人士做得頁(yè)面都比較“樸素”,因此引起大家的誤解,以為web標(biāo)準(zhǔn)的頁(yè)面就是簡(jiǎn)潔、輕圖形、輕視覺(jué)效果的。實(shí)際上,用TABLE布局能夠?qū)崿F(xiàn)的頁(yè)面效果,用CSS也基本上能實(shí)現(xiàn)。這個(gè)問(wèn)題不需要多解釋,看看國(guó)內(nèi)外新建立的web標(biāo)準(zhǔn)站點(diǎn)就清楚了。例如:www.macromedia.com,www.mp3.com(四).關(guān)于瀏覽器兼容
1.我不需要關(guān)心web標(biāo)準(zhǔn),IE占有99%的市場(chǎng),我做的頁(yè)面只要IE能看就可以了。
“以用戶為核心”通常都是反對(duì)web標(biāo)準(zhǔn)者的檔箭牌,實(shí)際上這是虛偽的“以用戶為核心”。你不能保證IE永遠(yuǎn)是壟斷瀏覽器市場(chǎng),你也不能保證IE不做任何改變(事實(shí)上,微軟的IE7已經(jīng)開(kāi)始改善對(duì)web標(biāo)準(zhǔn)的支持)。堅(jiān)持用html+table布局制作的頁(yè)面將是“死”的信息,不方便搜索,無(wú)法重用與共享,從長(zhǎng)遠(yuǎn)來(lái)講,這才是對(duì)用戶最大的傷害。2.為什么web標(biāo)準(zhǔn)的頁(yè)面兼容性并不好?
我們說(shuō)web標(biāo)準(zhǔn)的優(yōu)勢(shì)是兼容性好,這個(gè)兼容是指向后兼容,向新瀏覽器、新設(shè)備兼容。對(duì)已有的瀏覽器來(lái)說(shuō),因?yàn)樗鼈儗?duì)web標(biāo)準(zhǔn)的支持程度不一樣,因此會(huì)出現(xiàn)不同瀏覽器下頁(yè)面變形的情況。我們必須采用一些"hack"技巧來(lái)實(shí)現(xiàn)不同瀏覽器的兼容。這是無(wú)奈、也是不可避免的,是web技術(shù)發(fā)展必然要經(jīng)歷的一個(gè)過(guò)程,是我們向XML過(guò)渡必須克服的一個(gè)困難。(五).其它
1.沒(méi)有好用的開(kāi)發(fā)工具,難道要我手寫代碼?
是的。我們建議你手寫代碼,可以促進(jìn)你更加深刻理解web標(biāo)準(zhǔn)。事實(shí)上,很多開(kāi)發(fā)軟件已經(jīng)開(kāi)始支持web標(biāo)準(zhǔn)。你可以看看最新版的Dreamweaver 8,還有Adobe的Golive,微軟的Visual Studio.NET 2005,這些工具都已經(jīng)很好的支持web標(biāo)準(zhǔn)頁(yè)面的開(kāi)發(fā)。當(dāng)新技術(shù)出現(xiàn)時(shí),我們的態(tài)度應(yīng)該是去了解、實(shí)踐和評(píng)估,而不是盲目反對(duì)或者坐等其成,那樣你永遠(yuǎn)都是落后者。2.老板不懂,客戶也沒(méi)有要求,我為什么要用web標(biāo)準(zhǔn)?
在自己或者開(kāi)發(fā)團(tuán)隊(duì)都不熟悉web標(biāo)準(zhǔn)技術(shù)的情況下,新項(xiàng)目采用web標(biāo)準(zhǔn)的確有風(fēng)險(xiǎn)(技術(shù)和成本風(fēng)險(xiǎn)),可以評(píng)估后再?zèng)Q定是否采用web標(biāo)準(zhǔn)。但是如果有能力采用標(biāo)準(zhǔn)依然蒙混老板和客戶,這就屬于職業(yè)道德和敬業(yè)精神的問(wèn)題。三:未來(lái)與方向
我想你和我一樣,都關(guān)心WEB的未來(lái)會(huì)是怎么樣的,下一輪的新技術(shù)熱點(diǎn)在什么方向。其實(shí),要回答這個(gè)問(wèn)題,沒(méi)有誰(shuí)比W3C更有權(quán)威了。只要看看W3C在做什么,正在研究什么規(guī)范就知道WEB的走向和趨勢(shì)了。
W3C明確地告訴我們:XML是未來(lái)的趨勢(shì)毋庸置疑,開(kāi)放和共享是互聯(lián)網(wǎng)的精神和根本動(dòng)力。
蒂姆.貝納斯-李(Tim Berners-Lee) ,W3C領(lǐng)導(dǎo)人,萬(wàn)維網(wǎng)之父,說(shuō)到:XML提供了信息交換的手段,但這僅僅只是開(kāi)始。我們的目標(biāo)是web的語(yǔ)義化,即:使得web上的信息內(nèi)容更加容易理解、更便于交換和共享,RDF和OWL語(yǔ)言將在這方面提供更強(qiáng)大的支持。
web技術(shù)即將迎接新一輪的變革和發(fā)展,如果你還在猶豫是不是需要學(xué)習(xí)web標(biāo)準(zhǔn),那么你將失去這次機(jī)會(huì)。