對(duì)您的 Web 頁(yè)面進(jìn)行簡(jiǎn)單更改是否仍需要花費(fèi)很長(zhǎng)時(shí)間？您是否由于 Web 頁(yè)面的大小而支付了過(guò)高的帶寬費(fèi)用？您是否曾僅為了處理瀏覽器差別而編寫幾百行代碼？假如是這樣，那么您可能過(guò)多地強(qiáng)調(diào)了 Web 頁(yè)面的外觀，而不是其功能。并且，您也可能花費(fèi)了過(guò)多的時(shí)間來(lái)確保對(duì)舊瀏覽器的向后兼容性。

　　本文是質(zhì)量因素 系列文章之一，將向您展示如何轉(zhuǎn)移 Web 站點(diǎn)的重點(diǎn)和優(yōu)先級(jí) [并使用 W3C 標(biāo)準(zhǔn)，如XHTML、級(jí)聯(lián)樣式表（CSS）和文檔對(duì)象模型（DOM）] 來(lái)減少維護(hù)時(shí)間、寬帶費(fèi)用以及所編寫的特定于瀏覽器的代碼量。

維護(hù)夢(mèng)魘

　　SHEEP Web 小組被指派去增強(qiáng) SHEEP 客戶銷售應(yīng)用程序 —— 一個(gè)典型的電子商務(wù)站點(diǎn)，此站點(diǎn)主要包含產(chǎn)品目錄和購(gòu)物車。該小組注重到的第一件事情是這個(gè)站點(diǎn)非常有吸引力。它以生動(dòng)有趣的方式來(lái)展示公司的產(chǎn)品。但是用戶滿足度調(diào)查卻反復(fù)表明用戶對(duì)于大量的產(chǎn)品描述和產(chǎn)品細(xì)節(jié)以及對(duì)產(chǎn)品進(jìn)行比較的能力都不滿足。

　　Web 小組的任務(wù)是向該商務(wù)站點(diǎn)添加更多內(nèi)容，并增加產(chǎn)品比較功能。在小組進(jìn)行修改時(shí)，他們至少碰到了兩個(gè)主要的難題：

　　代碼是和表及小的間隔圖片一起裝入的，目的是得到所需布局。當(dāng)添加新行或列來(lái)顯示新的內(nèi)容時(shí)，很輕易出現(xiàn)排版錯(cuò)誤。在很多瀏覽器上對(duì)每個(gè)更改進(jìn)行測(cè)試后，該小組才發(fā)現(xiàn)了此類錯(cuò)誤。復(fù)雜的表布局還增加了確定在何處做更改或添加內(nèi)容所需的時(shí)間。

　　應(yīng)用程序有幾百行 JavaScript 代碼專門用來(lái)補(bǔ)償瀏覽器差異和非凡效果。遺憾的是，對(duì)該代碼進(jìn)行的最后一次維護(hù)是在引入流行的瀏覽器（例如 Firefox?）之前。結(jié)果，小組投入了大量的時(shí)間來(lái)修改 JavaScript 代碼，以便應(yīng)對(duì)較新的瀏覽器。

重新考慮優(yōu)先級(jí)

　　鑒于目前所面臨的問(wèn)題，SHEEP 小組的架構(gòu)師告知項(xiàng)目經(jīng)理該站點(diǎn)的代碼很難進(jìn)行修改，并且該項(xiàng)目所需時(shí)間將遠(yuǎn)遠(yuǎn)超出當(dāng)初所估計(jì)的。出于好奇，項(xiàng)目經(jīng)理查看了 Web 站點(diǎn)的歷史，以便查明是否有非凡原因?qū)е略撜军c(diǎn)難于進(jìn)行維護(hù)。結(jié)果表明影響該站點(diǎn)的兩個(gè)主要因素是兼容性和外觀。

　　該站點(diǎn)的第一個(gè)決定因素是對(duì)舊瀏覽器的向后兼容性。該站點(diǎn)是在 Web 早期發(fā)布的。隨著站點(diǎn)的發(fā)展以及 Web 技術(shù)的提高，公司添加了新功能。為了確保受眾盡可能地大，該站點(diǎn)被設(shè)計(jì)為可用于當(dāng)時(shí)所有的流行瀏覽器。為了將瀏覽器市場(chǎng)快速變化的影響降至最低，公司決定將站點(diǎn)的 HTML 標(biāo)記鎖定在通常會(huì)被 Microsoft? Internet Explorer? 5 和 Netscape? 4 所支持的層面上。正是這個(gè)層面的兼容性導(dǎo)致了頁(yè)面布局中額外的復(fù)雜性，并且需要使用 JavaScript 代碼來(lái)添加新功能。

　　第二個(gè)決定因素是頁(yè)面外觀在不同瀏覽器中的一致性。頁(yè)面經(jīng)過(guò)了精心布置，因此無(wú)論是在 Internet Explorer、Netscape、 Opera 還是其他圖形化瀏覽器中進(jìn)行顯示時(shí)，頁(yè)面的外觀幾乎是相同的。為了實(shí)現(xiàn)這個(gè)目的，頁(yè)面使用了大量嵌套的表和小的間隔圖片，用來(lái)強(qiáng)制表單元格寬度。

　　帶著這項(xiàng)調(diào)查結(jié)果，項(xiàng)目經(jīng)理找到了站點(diǎn)主辦方，然后問(wèn)道：“假如只有不到 0.5% 的用戶使用這些舊瀏覽器，那么這種兼容性是必需的嗎？并且，假如可以用其他方式來(lái)樹立品牌形象，那么不同瀏覽器中的相同外觀是必需的嗎？”

遷移到 Web 標(biāo)準(zhǔn)

　　銷售應(yīng)用程序示例說(shuō)明了由不適當(dāng)?shù)膫?cè)重點(diǎn)所引起的質(zhì)量問(wèn)題，比如為了支持舊瀏覽器版本所增加的維護(hù)時(shí)間，以及為了包含特定于瀏覽器的標(biāo)記和代碼的大型 Web 頁(yè)面所增加的帶寬開銷。幸運(yùn)的是，假如使用萬(wàn)維網(wǎng)聯(lián)盟（W3C）Web 標(biāo)準(zhǔn)，就能夠很輕易地解決此類問(wèn)題。

　　在 2003 年之前，Web 頁(yè)設(shè)計(jì)的復(fù)雜性是由于缺少標(biāo)準(zhǔn)的或一致的 HTML 實(shí)現(xiàn)而導(dǎo)致的。瀏覽器通過(guò)添加對(duì) HTML 語(yǔ)言的擴(kuò)展來(lái)相互競(jìng)爭(zhēng)。它們對(duì) JavaScript 代碼和文檔對(duì)象模型（DOM）的支持情況也各有不同。因此，開發(fā)人員不得不創(chuàng)建方法以確保 Web 頁(yè)面在不同瀏覽器中的外觀是相同的。所用的技術(shù)包括使用表格對(duì)圖片文本進(jìn)行像素級(jí)定位、特定于瀏覽器的客戶機(jī)和服務(wù)器代碼、利用了瀏覽器代碼中的特性或 bug 的編程等。

　　2003 年左右，開始出現(xiàn)標(biāo)準(zhǔn)的融合和支持這些標(biāo)準(zhǔn)的瀏覽器。1998 年開始，W3C 發(fā)布了 Web 標(biāo)準(zhǔn)以便提供規(guī)范和準(zhǔn)則，使開發(fā)人員與瀏覽器實(shí)現(xiàn)能夠相互協(xié)調(diào)。很多瀏覽器（例如 Netscape 4 和 Internet Explorer 5）開始實(shí)行部分 W3C Web 標(biāo)準(zhǔn)。但是，直到 2003 年，隨著 Mozilla?、Netscape 6、Internet Explorer 6、Opera 7 和 Firefox 的發(fā)布，瀏覽器的兼容程度才達(dá)到現(xiàn)在的水平。雖然這些瀏覽器中沒(méi)有一個(gè)是完全支持 W3C 標(biāo)準(zhǔn)的，但每一個(gè)又都非常接近標(biāo)準(zhǔn)，從而使開發(fā)人員可以基于主要的標(biāo)準(zhǔn)來(lái)編寫代碼，而不是基于特定于瀏覽器的實(shí)現(xiàn)。

　　現(xiàn)在所使用的 Web 標(biāo)準(zhǔn)致力于 Web 頁(yè)面的三個(gè)方面：結(jié)構(gòu)、表現(xiàn)形式和行為。新的準(zhǔn)則和法律要求也觸及了質(zhì)量方面的問(wèn)題，即可訪問(wèn)性。我將在下面各節(jié)中討論這些內(nèi)容。

結(jié)構(gòu)：XHTML

　　HTML 是最初的 Web 頁(yè)面標(biāo)記語(yǔ)言。現(xiàn)在的 Web 標(biāo)準(zhǔn)中，HTML 已經(jīng)由 XHTML 代替。隨著 XML 被廣泛采納，W3C 將 HTML 重構(gòu)為與 XML 兼容。得到的結(jié)果是基于 HTML 4.0 的 XHTML 1.0。使用 XHTML 的一個(gè)優(yōu)點(diǎn)在于支持 HTML 文檔的舊瀏覽器可以讀取并正確處理 XHTML 文檔。此外，由于 XHTML 是與 XML 兼容的，所以 XHTML 文檔不能出現(xiàn)缺失的標(biāo)記或不正確關(guān)閉的元素 —— 而這正是很多 HTML 文檔中普遍存在的一個(gè)問(wèn)題。

　　XHTML 的 Web 標(biāo)準(zhǔn)為 Web 頁(yè)面標(biāo)記語(yǔ)言定義了新的使命。在 XHTML 中，標(biāo)記語(yǔ)言將僅傳遞內(nèi)容和結(jié)構(gòu) —— 標(biāo)題、段落、編號(hào)列表和定義列表等。而表現(xiàn)形式則更改為 CSS。從對(duì) HTML <FONT> 標(biāo)記及其他基于表現(xiàn)形式的標(biāo)記的反對(duì)中就可以看出這種轉(zhuǎn)變。

表現(xiàn)形式：CSS

　　W3C Web 標(biāo)準(zhǔn)定義了兩級(jí)級(jí)聯(lián)樣式表（CSS）標(biāo)準(zhǔn) —— CSS1 和 CSS2。撰寫本文時(shí)，CSS3 標(biāo)準(zhǔn)還在開發(fā)中。CSS 標(biāo)準(zhǔn)定義了表示語(yǔ)言，用于指定 Web 頁(yè)面的格式 —— 版式、布置、布局和顏色等。

　　CSS 答應(yīng)站點(diǎn)的設(shè)計(jì)人員將表現(xiàn)形式和格式的具體說(shuō)明放置在獨(dú)立于 Web 頁(yè)面 XHTML 文檔的單獨(dú)文檔中。這樣將答應(yīng)重新使用，并且減少了必須隨每個(gè) Web 頁(yè)面下載的文本數(shù)量。大多數(shù)與標(biāo)準(zhǔn)兼容的瀏覽器都提供了一定程度的對(duì) CSS 文檔的緩存支持。這也提供了靈活性，對(duì)一個(gè)文檔進(jìn)行更改不會(huì)影響另一個(gè)文檔。例如，假如一些 Web 頁(yè)面共享相同的 CSS 文檔，則對(duì)該 CSS 文檔所作的更改將反映在使用該樣式表的所有頁(yè)面上。

行為：ECMAScript 和 DOM

　　Web 標(biāo)準(zhǔn)關(guān)注的第三個(gè)方面是行為，使用 DOM 和 ECMAScript 指定。文檔對(duì)象模型 (DOM) 指定了 Web 頁(yè)面的表示方法和相關(guān)的瀏覽器對(duì)象，因此可以通過(guò) ECMAScript 程序進(jìn)行訪問(wèn)和操作。ECMAScript 是 JavaScript 語(yǔ)言的標(biāo)準(zhǔn)化版本，減少了舊瀏覽器腳本語(yǔ)言（例如 Netscape 的 JavaScript 和 Microsoft 的 Jscript）的不兼容性。使用 DOM 和 ECMAScript，Web 開發(fā)人員可以添加高級(jí)行為和操作，改善用戶的 Web 體驗(yàn)。例如，您可以在瀏覽器（而不是服務(wù)器）的 Web 表單上執(zhí)行字段驗(yàn)證。

可訪問(wèn)性：WAI 和 Section 508

　　Web 頁(yè)面的質(zhì)量方面也通過(guò)一套準(zhǔn)則和規(guī)定進(jìn)行了標(biāo)準(zhǔn)化。W3C 建立了一套準(zhǔn)則，利用 Web Accessibility Initiative（WAI）來(lái)改善 Web 站點(diǎn)的可訪問(wèn)性。美國(guó)政府通過(guò) US Code 的 Section 508 建立了用于 Web 站點(diǎn)可訪問(wèn)性的一套規(guī)定。其他很多國(guó)家也在相應(yīng)的法律中考慮了類似的可訪問(wèn)性規(guī)定和準(zhǔn)則。

　　可訪問(wèn)性準(zhǔn)則的目的在于確保殘疾人可以使用 Web 頁(yè)面。設(shè)計(jì)可訪問(wèn)頁(yè)面的一個(gè)有趣的副作用是它更適用于移動(dòng)設(shè)備（例如 PDA、移動(dòng)電話等）。

寬松的外觀要求

　　除了向后兼容性要求外，SHEEP 小組的架構(gòu)師注重到該站點(diǎn)陷入了這樣的困境即過(guò)多使用代碼來(lái)加強(qiáng)其在不同瀏覽器中的外觀。這是引起問(wèn)題的 Web 站點(diǎn)設(shè)計(jì)的諸多舊思路之一。

　　出于多種原因，早期的 Web 設(shè)計(jì)人員和站點(diǎn)主辦方堅(jiān)持認(rèn)為其站點(diǎn)在所有瀏覽器中的外觀應(yīng)該是相同的。這種主張超出了對(duì)相似外觀和頁(yè)面可讀性的要求。它要求在每個(gè)瀏覽器的每個(gè)頁(yè)面上，都具有相同像素定位的元素和相同的字體大小。開發(fā)人員將大量時(shí)間花費(fèi)在裝飾 Web 頁(yè)面上以確保相同的外觀。

　　現(xiàn)在您應(yīng)該探究一下其原因。Web 站點(diǎn)在不同瀏覽器中具有相同像素的外觀有什么優(yōu)勢(shì)？

　　用戶從相同的外觀得到好處了嗎？并非如此。大多數(shù)用戶只使用單一的瀏覽器，因此他們僅采用一種方式來(lái)查看站點(diǎn)。他們并不在意站點(diǎn)在其他瀏覽器中的外觀。

　　相同的外觀能更好地維護(hù)公司的品牌形象嗎？不見(jiàn)得。公司的品牌是通過(guò)樣式、顏色、所使用的商標(biāo)和徽標(biāo)以及表現(xiàn)形式來(lái)共同建立的。公司經(jīng)常改變其商標(biāo)或徽標(biāo)的外觀以適應(yīng)產(chǎn)品的需要。例如，大家熟知的 IBM 徽標(biāo)就有各種形式 —— 單色八條線、單色十三條線、三色八條線（如很多 Thinkpad 上所示）、圖標(biāo)符號(hào)（眼睛和蜜蜂圖標(biāo)）等等。

　　在各瀏覽器中獲得接近一致的外觀就足夠了。使用 W3C Web 標(biāo)準(zhǔn)的一個(gè)優(yōu)勢(shì)在于與標(biāo)準(zhǔn)兼容的瀏覽器將以相當(dāng)一致的方式來(lái)顯示頁(yè)面。使用這些標(biāo)準(zhǔn)，能夠以最少數(shù)量的編碼獲得最為接近的外觀，因此，可以大大減少需要維護(hù)的代碼數(shù)量。

Web 標(biāo)準(zhǔn)的好處

　　由于篇幅所限，不能具體演示 SHEEP 小組使用 W3C Web 標(biāo)準(zhǔn)來(lái)重構(gòu)該銷售網(wǎng)站的所有必需操作。可以在 參考資料 中找到一些關(guān)于 Web 標(biāo)準(zhǔn)遷移的文章和書籍。只考慮 Web 站點(diǎn)的質(zhì)量方面，遷移到 Web 標(biāo)準(zhǔn)和放寬對(duì)站點(diǎn)外觀的要求將得到至少三個(gè)方面的改良，如下所述。

易于維護(hù)

　　清單 1 是一個(gè)基于表的導(dǎo)航菜單的簡(jiǎn)化的 HTML 示例。
　　清單 1. 基于表的導(dǎo)航菜單的簡(jiǎn)單 HTML


　　現(xiàn)在看一下 清單 2，它演示了采用 XHTML 編寫的相同導(dǎo)航菜單，并將表現(xiàn)形式移入獨(dú)立的 CSS 文檔（我沒(méi)有展示 CSS）。
　　清單 2. 采用 XHTML Web 標(biāo)準(zhǔn)的導(dǎo)航菜單


　　顯然，采用 Web 標(biāo)準(zhǔn)的版本包含更少的代碼。還注重到，使用 XHTML 將減少對(duì)大塊語(yǔ)句進(jìn)行復(fù)制-粘貼編輯時(shí)所引起的問(wèn)題，例如復(fù)制整個(gè) <td></td> 子句。

　　Web 標(biāo)準(zhǔn)對(duì)使用了模板（由應(yīng)用程序處理的 HTML 片斷，用于構(gòu)建發(fā)送給瀏覽器的最終的 HTML）的應(yīng)用程序肯定有好處。當(dāng) HTML 語(yǔ)句分散于多個(gè)模板片斷時(shí)，較簡(jiǎn)單的語(yǔ)句使您不會(huì)再忘記更改模板。

降低帶寬開銷

　　清單 1 和 清單 2 展示了 Web 標(biāo)準(zhǔn)解決方案中的文本更少。下面所列的參考資料表明，將傳統(tǒng)的 HTML 遷移到 Web 標(biāo)準(zhǔn)實(shí)現(xiàn)后，Web 大小和所傳輸?shù)淖止?jié)減少了 50% 到 60%。減少的原因是：


　　假定某公司使用主機(jī)服務(wù)，該站點(diǎn)每月每 1 GB 傳輸量需支付 1 美元。使用傳統(tǒng)的 Web 頁(yè)面編碼，該公司每月的傳輸量是 100 GB，則每月應(yīng)支付 100 美元。遷移到 Web 標(biāo)準(zhǔn)后，該公司的 Web 站點(diǎn)大小減小了 50%。對(duì)于相同用戶流量，該公司每月僅有 50 GB 的傳輸量，即節(jié)省了 50 美元。

沒(méi)有用戶被拒之門外

　　遷移到 Web 標(biāo)準(zhǔn)的另一個(gè)好處是，消除了依靠于瀏覽器的代碼及用戶阻塞。現(xiàn)在一些 Web 站點(diǎn)仍只支持單一的瀏覽器，通常是 Internet Explorer。糟糕的是，這些站點(diǎn)阻擋了 10% 到 20% 的潛在用戶。

　　使用 Web 標(biāo)準(zhǔn)進(jìn)行編碼的站點(diǎn)可以在舊瀏覽器和新瀏覽器中進(jìn)行瀏覽。只是在舊瀏覽器中，站點(diǎn)看起來(lái)不夠漂亮 —— 更像是 90 年代的早期的基于文本的站點(diǎn) —— 但內(nèi)容是可用的、可讀的、可訪問(wèn)的。讓想使用站點(diǎn)的任何用戶都可以訪問(wèn)站點(diǎn)會(huì)很有益處，非凡是對(duì)于那些提供產(chǎn)品銷售的電子商務(wù)站點(diǎn)（這一點(diǎn)就更重要了）！

結(jié)束語(yǔ)

　　通過(guò)利用 Web 標(biāo)準(zhǔn)以及放寬某些外觀要求來(lái)改進(jìn) Web 站點(diǎn)，可以大大縮減維護(hù)時(shí)間、增強(qiáng)時(shí)間和帶寬使用。在兼容 Web 標(biāo)準(zhǔn)的站點(diǎn)中，傳遞到瀏覽器的數(shù)據(jù)量更少，因而帶寬占用也更少。新式站點(diǎn)還將表現(xiàn)形式與頁(yè)面內(nèi)容分離開來(lái)，通過(guò)減少與內(nèi)容傳遞相關(guān)聯(lián)的操作來(lái)簡(jiǎn)化服務(wù)器編程。使用 Web 標(biāo)準(zhǔn)（如 DOM 和 ECMAScript）將減少您必須編寫和維護(hù)的特定于瀏覽器的代碼數(shù)量。并且，尋求不同瀏覽器間的足夠接近的外觀而不是完全相同的外觀有助于簡(jiǎn)化 Web 站點(diǎn)的格式復(fù)雜性。

　　作為 Web 站點(diǎn)的開發(fā)人員，您應(yīng)該和站點(diǎn)的投資者一起來(lái)確定哪一個(gè)更重要：站點(diǎn)的外觀還是站點(diǎn)的功能。換個(gè)角度來(lái)說(shuō)，就是要了解一下站點(diǎn)的格式布局和根據(jù)需要進(jìn)行更改的方便性這兩者之間孰重孰輕。大多數(shù)情況下，您將發(fā)現(xiàn)這些問(wèn)題的答案會(huì)把您引向使用 Web 標(biāo)準(zhǔn)并放寬對(duì)站點(diǎn)外觀的要求。