對您的 Web 頁面進行簡單更改是否仍需要花費很長時間？您是否由于 Web 頁面的大小而支付了過高的帶寬費用？您是否曾僅為了處理瀏覽器差別而編寫幾百行代碼？假如是這樣，那么您可能過多地強調了 Web 頁面的外觀，而不是其功能。并且，您也可能花費了過多的時間來確保對舊瀏覽器的向后兼容性。

　　本文是質量因素 系列文章之一，將向您展示如何轉移 Web 站點的重點和優先級 [并使用 W3C 標準，如XHTML、級聯樣式表（CSS）和文檔對象模型（DOM）] 來減少維護時間、寬帶費用以及所編寫的特定于瀏覽器的代碼量。

維護夢魘

　　SHEEP Web 小組被指派去增強 SHEEP 客戶銷售應用程序 —— 一個典型的電子商務站點，此站點主要包含產品目錄和購物車。該小組注重到的第一件事情是這個站點非常有吸引力。它以生動有趣的方式來展示公司的產品。但是用戶滿足度調查卻反復表明用戶對于大量的產品描述和產品細節以及對產品進行比較的能力都不滿足。

　　Web 小組的任務是向該商務站點添加更多內容，并增加產品比較功能。在小組進行修改時，他們至少碰到了兩個主要的難題：

　　代碼是和表及小的間隔圖片一起裝入的，目的是得到所需布局。當添加新行或列來顯示新的內容時，很輕易出現排版錯誤。在很多瀏覽器上對每個更改進行測試后，該小組才發現了此類錯誤。復雜的表布局還增加了確定在何處做更改或添加內容所需的時間。

　　應用程序有幾百行 JavaScript 代碼專門用來補償瀏覽器差異和非凡效果。遺憾的是，對該代碼進行的最后一次維護是在引入流行的瀏覽器（例如 Firefox?）之前。結果，小組投入了大量的時間來修改 JavaScript 代碼，以便應對較新的瀏覽器。

重新考慮優先級

　　鑒于目前所面臨的問題，SHEEP 小組的架構師告知項目經理該站點的代碼很難進行修改，并且該項目所需時間將遠遠超出當初所估計的。出于好奇，項目經理查看了 Web 站點的歷史，以便查明是否有非凡原因導致該站點難于進行維護。結果表明影響該站點的兩個主要因素是兼容性和外觀。

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

　　第二個決定因素是頁面外觀在不同瀏覽器中的一致性。頁面經過了精心布置，因此無論是在 Internet Explorer、Netscape、 Opera 還是其他圖形化瀏覽器中進行顯示時，頁面的外觀幾乎是相同的。為了實現這個目的，頁面使用了大量嵌套的表和小的間隔圖片，用來強制表單元格寬度。

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

遷移到 Web 標準

　　銷售應用程序示例說明了由不適當的側重點所引起的質量問題，比如為了支持舊瀏覽器版本所增加的維護時間，以及為了包含特定于瀏覽器的標記和代碼的大型 Web 頁面所增加的帶寬開銷。幸運的是，假如使用萬維網聯盟（W3C）Web 標準，就能夠很輕易地解決此類問題。

　　在 2003 年之前，Web 頁設計的復雜性是由于缺少標準的或一致的 HTML 實現而導致的。瀏覽器通過添加對 HTML 語言的擴展來相互競爭。它們對 JavaScript 代碼和文檔對象模型（DOM）的支持情況也各有不同。因此，開發人員不得不創建方法以確保 Web 頁面在不同瀏覽器中的外觀是相同的。所用的技術包括使用表格對圖片文本進行像素級定位、特定于瀏覽器的客戶機和服務器代碼、利用了瀏覽器代碼中的特性或 bug 的編程等。

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

　　現在所使用的 Web 標準致力于 Web 頁面的三個方面：結構、表現形式和行為。新的準則和法律要求也觸及了質量方面的問題，即可訪問性。我將在下面各節中討論這些內容。

結構：XHTML

　　HTML 是最初的 Web 頁面標記語言。現在的 Web 標準中，HTML 已經由 XHTML 代替。隨著 XML 被廣泛采納，W3C 將 HTML 重構為與 XML 兼容。得到的結果是基于 HTML 4.0 的 XHTML 1.0。使用 XHTML 的一個優點在于支持 HTML 文檔的舊瀏覽器可以讀取并正確處理 XHTML 文檔。此外，由于 XHTML 是與 XML 兼容的，所以 XHTML 文檔不能出現缺失的標記或不正確關閉的元素 —— 而這正是很多 HTML 文檔中普遍存在的一個問題。

　　XHTML 的 Web 標準為 Web 頁面標記語言定義了新的使命。在 XHTML 中，標記語言將僅傳遞內容和結構 —— 標題、段落、編號列表和定義列表等。而表現形式則更改為 CSS。從對 HTML <FONT> 標記及其他基于表現形式的標記的反對中就可以看出這種轉變。

表現形式：CSS

　　W3C Web 標準定義了兩級級聯樣式表（CSS）標準 —— CSS1 和 CSS2。撰寫本文時，CSS3 標準還在開發中。CSS 標準定義了表示語言，用于指定 Web 頁面的格式 —— 版式、布置、布局和顏色等。

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

行為：ECMAScript 和 DOM

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

可訪問性：WAI 和 Section 508

　　Web 頁面的質量方面也通過一套準則和規定進行了標準化。W3C 建立了一套準則，利用 Web Accessibility Initiative（WAI）來改善 Web 站點的可訪問性。美國政府通過 US Code 的 Section 508 建立了用于 Web 站點可訪問性的一套規定。其他很多國家也在相應的法律中考慮了類似的可訪問性規定和準則。

　　可訪問性準則的目的在于確保殘疾人可以使用 Web 頁面。設計可訪問頁面的一個有趣的副作用是它更適用于移動設備（例如 PDA、移動電話等）。

寬松的外觀要求

　　除了向后兼容性要求外，SHEEP 小組的架構師注重到該站點陷入了這樣的困境即過多使用代碼來加強其在不同瀏覽器中的外觀。這是引起問題的 Web 站點設計的諸多舊思路之一。

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

　　現在您應該探究一下其原因。Web 站點在不同瀏覽器中具有相同像素的外觀有什么優勢？

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

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

　　在各瀏覽器中獲得接近一致的外觀就足夠了。使用 W3C Web 標準的一個優勢在于與標準兼容的瀏覽器將以相當一致的方式來顯示頁面。使用這些標準，能夠以最少數量的編碼獲得最為接近的外觀，因此，可以大大減少需要維護的代碼數量。

Web 標準的好處

　　由于篇幅所限，不能具體演示 SHEEP 小組使用 W3C Web 標準來重構該銷售網站的所有必需操作。可以在 參考資料 中找到一些關于 Web 標準遷移的文章和書籍。只考慮 Web 站點的質量方面，遷移到 Web 標準和放寬對站點外觀的要求將得到至少三個方面的改良，如下所述。

易于維護

　　清單 1 是一個基于表的導航菜單的簡化的 HTML 示例。
　　清單 1. 基于表的導航菜單的簡單 HTML


　　現在看一下 清單 2，它演示了采用 XHTML 編寫的相同導航菜單，并將表現形式移入獨立的 CSS 文檔（我沒有展示 CSS）。
　　清單 2. 采用 XHTML Web 標準的導航菜單


　　顯然，采用 Web 標準的版本包含更少的代碼。還注重到，使用 XHTML 將減少對大塊語句進行復制-粘貼編輯時所引起的問題，例如復制整個 <td></td> 子句。

　　Web 標準對使用了模板（由應用程序處理的 HTML 片斷，用于構建發送給瀏覽器的最終的 HTML）的應用程序肯定有好處。當 HTML 語句分散于多個模板片斷時，較簡單的語句使您不會再忘記更改模板。

降低帶寬開銷

　　清單 1 和 清單 2 展示了 Web 標準解決方案中的文本更少。下面所列的參考資料表明，將傳統的 HTML 遷移到 Web 標準實現后，Web 大小和所傳輸的字節減少了 50% 到 60%。減少的原因是：


　　假定某公司使用主機服務，該站點每月每 1 GB 傳輸量需支付 1 美元。使用傳統的 Web 頁面編碼，該公司每月的傳輸量是 100 GB，則每月應支付 100 美元。遷移到 Web 標準后，該公司的 Web 站點大小減小了 50%。對于相同用戶流量，該公司每月僅有 50 GB 的傳輸量，即節省了 50 美元。

沒有用戶被拒之門外

　　遷移到 Web 標準的另一個好處是，消除了依靠于瀏覽器的代碼及用戶阻塞。現在一些 Web 站點仍只支持單一的瀏覽器，通常是 Internet Explorer。糟糕的是，這些站點阻擋了 10% 到 20% 的潛在用戶。

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

結束語

　　通過利用 Web 標準以及放寬某些外觀要求來改進 Web 站點，可以大大縮減維護時間、增強時間和帶寬使用。在兼容 Web 標準的站點中，傳遞到瀏覽器的數據量更少，因而帶寬占用也更少。新式站點還將表現形式與頁面內容分離開來，通過減少與內容傳遞相關聯的操作來簡化服務器編程。使用 Web 標準（如 DOM 和 ECMAScript）將減少您必須編寫和維護的特定于瀏覽器的代碼數量。并且，尋求不同瀏覽器間的足夠接近的外觀而不是完全相同的外觀有助于簡化 Web 站點的格式復雜性。

　　作為 Web 站點的開發人員，您應該和站點的投資者一起來確定哪一個更重要：站點的外觀還是站點的功能。換個角度來說，就是要了解一下站點的格式布局和根據需要進行更改的方便性這兩者之間孰重孰輕。大多數情況下，您將發現這些問題的答案會把您引向使用 Web 標準并放寬對站點外觀的要求。