譯者序:這個系列原文共8篇文章,從普及Web Standards 入手,講述如何用Dreamweaver 8 來建構符合標準的Web ,由於原作者的此篇文章是對《Build Your Own Standards Compliant Website Using Dreamweaver 8 》 (這篇文章是收費的)的摘錄,所以我對內容進行了適當的刪改,順序與原文是一致的,但篇幅會有調整,特此告知。翻譯水平有限,請諒解。
如果您正在閱讀這篇文章,您很可能已經對Web 標準有了一定的興趣,並且對用DW ( Dreamweaver 的簡稱)來構建的網站中標準的應用非常好奇。
或許您已經對WS (Web Standards的簡稱)有了一定的了解,但是您並不知道如何用DW 來編寫可相容的程式碼。或者您是DW 用戶,您很想遵從WS ,更廣泛的使用CSS ,並且可以製作出更有親和力的文檔。無論您是哪一種類型,這篇文章都會給您想要的答案:告訴您如何用DW 來搞定WS。
Web 標準的定義
就我們在整篇文章所關心的WS 來說,讓我們先花一點時間來明確一下我們究竟在談論些什麼:
WS 是一些指導Web 開發語言的規範,是由W3C 所製定的。這些規範包含了多種語言,例如,HTML、XHTML 和CSS 還有一些其他的相關語言,例如MathML,用來表示數學中的方程,當你有這種特殊的需要的時候,或許會用得上。 W3C 也頒布了「Web 內容親和力指南」(Web Content Accessibility Guidelines —— WCAG)——推廣網頁的可訪問性(透過WAI )
提示:直接取得這些規範
你可以在W3C 的網站上閱讀這些規範,儘管他們有時讀起來還是有些困難的:
HTML 4.01
XHTML 1.0
CSS 1
CSS 2.1
WCAG 1.0
在本文中,我們將會用到XHTML1.0、CSS1 和2.1、WCAG 1.0 等規範和建議,但是你一定很高興知道我們其實不必過多的閱讀W3C 文件。
誰需要WS ?
您可能只有一個含糊的概念:WS 是個好東西,但是許多網站——包括許多知名的網站——並不遵從WS ,並且他們看起來的確管理得很好。所以,為什麼我們要盡力去遵從WS 呢?這麼做會有什麼真正的收益嗎?誰需要WS ?誰需要去關注W3C 的規範與建議?
Web 開發者與設計者
需要關注WS 的首類人群就是我們:網站建置的開發者與設計者。花時間去學習如何用WS 開發對於我們來說值得嗎?
整潔的標記使BUG 的修復速度加快。
如果您透過W3C 校驗您的頁面,至少您會了解到不規範的標記並不是引起您曾經遇到過的錯誤的原因。有時,校驗一個頁面和修復已發現錯誤的過程,可以清除顯示中遇到一些問題,這些問題是由標記(element)沒有結束或標籤(tag)拼寫錯誤引起的。
即使校驗您的文件並沒有修正這些問題,至少你會知道這些問題存在於規範的文檔中。既然你已經知道這個問題不是一個錯誤,那麼你可以開始關注其他的問題了,例如在不同的瀏覽器中CSS 處理差異問題。
遵從可訪問性的需求很容易
如果你編寫一個規範的XHTML 標記,那麼你就可以保證文檔在語義上是無誤的,並且您可以把文檔中的內容與表現相分離,您將可以把大量的工作放在許多WCAG1.0 中所列的可訪問性的問題上。認識到可訪問性並不是僅僅為殘疾人設計的這一點也很重要。一個親和力好的站點是可以被許多不同的設備訪問的,例如移動電話和PDA ,他們是不具備強大的處理能力去對付那些散亂而非標準的標記的。
向前兼容
如果您僅考慮到自己新開發的頁面在當前的幾個瀏覽器中的表現,那麼你怎麼才能保證它在未來的新瀏覽器中的表現呢?新瀏覽器或許會把您的頁面顯示的很糟糕,此時你只能去費力的尋找和修正那些惱人的問題。
遵從WS 並不會完全根除這個問題;然而,標準的兼容使你的設計失敗的風險大大減少,同樣,如今的瀏覽器軟體公司也開始支援標準。他們也許會偶然的錯誤解釋了某部分規範,他們不可能完全不支持它。如果最壞的事情發生了,並且一個新的瀏覽器在你的標準化網站上產生了奇怪的效果,那麼修復它要比修復一個不相容的網站容易的多。如果你遇到一個問題,它同樣會影響其他的標準可相容網站。 Web 社群的群體智慧會指出這個問題,並會寫文章來解決這個問題。所以,大家集體討論,在可相容的文檔裡修正這個BUG 也比在不相容的文檔裡修正更加的容易。
更方便的重構
你曾經不得不從一個站點中剝離文字而對他進行重構過嗎?而且一切都得從頭開始。你曾經看過那些被字體標籤和微小的表格單元(它使我們只能從頭開始)弄得混亂不堪的標籤嗎?我只知道我曾經看過,這是一個漫長的過程,大量的時間和金錢都被這個站點的重構燒掉了。
分離文檔的內容與表現將會使你體會到標準化兼容帶來美妙:這意味著下次某個人想重構這個站點的時候,他們不必把Web 文檔中的拷貝出去。所有網站中的文字都會被具有語意的(X)HTML 所標記,所有的表現資訊——這部分才是站長想更改的——都將儲存在一個可輕易替換的CSS 檔案中。
有些客戶在開始要求你做一些改變之前是不會等待它去重構的,他們只會等到遊覽完猛獁象化石坑,然後就要求你說“把左邊欄挪到右邊就可以了。”對於一個標準化可相容網站來說,全部頁面都是由CSS 控制的,你可以很方便地移動頁面中的標記,而不用在許多以複雜表格為結構的頁面中想歪招了。這使得改變頁面佈局更加簡單。
結構從表現中分離同樣可以使增加新的元素變得更加容易,就像一個高對比、小圖片版本的網站或許對某些瀏覽者更有吸引力。當您可以輕鬆的更換樣式表時,為什麼建立單獨的純文字版的頁面呢?
瀏覽器軟體公司
瀏覽器的軟體公司開始對WS 關注了。過去,瀏覽器軟體公司將他們私有的專屬標籤和屬性新增到基本的語言中。但現在,前所未有的,他們都開始遵從標準了,並且一些最新的瀏覽器已經可以確定,正在努力按照規範中所定義的(X)HTML 和CSS 來顯示它們。
在可遇見的未來中,瀏覽器都將能夠顯示大多數的不規範標記、程式碼,因為如果它們不這麼做,成千上萬的不規範網站都將無法正常顯示——那麼大眾就很可能開始責備瀏覽器了,而不是責備Web 設計者。然而,其他的設備(那些沒有桌上型電腦強大處理功能的設備)將會更加依賴那些他們所遇到程式碼的標準化相容性了。
創作工具軟體廠商
創作工具軟體廠商-例如Macromedia , 它製作了Dreamweaver -也像Web設計者一樣,開始遵從WS 了,例如,它們越來越多的客戶要求這些創作工具可以輸出規範的標記。原本這些視覺化的開發環境都沒有太好的口碑,因為它們會產生混亂、不規範的標記;然而,最新的主要視覺化開發環境都援引了標準化的兼容性和可訪問性的元素,這也成為了主要的賣點。軟體廠商一定要聆聽,並回應市場的需求。
Web 用戶
我們設計的網站的用戶也從我們採用WS 中獲益,即使他們並沒有認識到這一點!或許他們正無意識的使用那些專門針對當今流行瀏覽器而開發的站點。如果這些用戶轉用其他的瀏覽器,他們或許會發現這個線上的體驗就不再令人享受了,因為那些專屬的標記是不會被新瀏覽器所接受的。一個標準化可相容的網站在不同的瀏覽器中都有很好的表現,不論是在現有的,還是在未來的瀏覽器中都同樣優秀。
此外,一個遵照可訪問性建議的網站對那些發現瀏覽網頁不如意的使用者也是很有親和力的。 Web 應該給那些視覺有缺陷或其他的殘疾人更方便的購物、閱讀、搜尋的條件。不應該因為用專屬標記或其他排它(指瀏覽器)技術的站點,使他們無法瀏覽。
使用WS
我們怎麼能確保正確使用WS呢?怎麼做才能遵從標準呢?
首先,我們應該遵守規範。這意味著我們應該只使用那些規格中定義的元素與屬性,避免使用某種瀏覽器的專有屬性,例如IE 的marquee 標籤和Netscape 的blink 標籤。同樣也不要使用在早期規範中出現的元素(例如HTML3.2)和被後來的規範所移除的元素。
建立一個規範的XHTML 文件
在本文中,我們將使用XHTML,所以,我們都會遵照W3C 的XHTML 1.0 的建議[按照W3C 的意思,建議( Recommendation )就是規範( Specification )的意思]。 XHTML 基本上就是HTML的最新版本,它設計的目的是用來取代HTML 這個網頁標記語言的。儘管它是XML 的一種HTML 變形,但XHTML 與HTML 幾乎是完全一樣的,在我們後面將討論的《 XHTML 和語義》中有細微的差別。
你可以透過Dreamweaver 中的新建文件對話方塊產生一個XHTML 文件(檔案>新建...)。確保基本頁在類別清單裡是被選取的,然後從基本頁的清單中選擇HTML ,就像圖2.1所示,「在Dreamweaver 中建立一個新的XHTML 文件」。然後你可以從文檔類型的下拉清單中任意選擇一項。
圖2.1:在Dreamweaver中建立一個新的XHTML 文檔
圖2.2:在code視圖中顯示新的XHTML 文檔
點擊「建立」來產生一個新的文件。點擊文檔視窗頂部的code 按鈕,轉到“ code 視圖”,就可以清楚的看到在一個簡單的XHTML 文件中都包含了哪些程式碼。如圖2.2所示,「在code 視圖中顯示新的XHTML 文件」
文件的第一行將顯示下面的內容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
這叫做文檔類型聲明,或DOCTYPE 。顧名思義,DOCTYPE 聲明了你的文件究竟是什麼——你正在遵從是哪一個(X)HTML 規範。在這個例子中,我們遵照的是XHTML 1.0 Transitional,這是DW 8 的預設值。 Transitional 部分將告訴我們關於XHTML 版本的其他一些資訊。 XHTML1.0 有三種「口味」:Strict, Transitional, 和Frameset。 DW 預設使用的是Transitional 類型,而如果你想要在文件中插入框架,那就是Frameset。
XHTML Strict 是最嚴格的XHTML 格式,這個想必你也能猜到。一個Strict 文件類型看起來就是這個樣子:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
如果你使用的是Strict DOCTYPE,那麼你就不能在文件中使用任何聲明不贊成的元素(標籤)或屬性,也不可以使用框架。聲明不贊成的元素將在未來的XHTML 版本中移除。許多這類元素是用來控制頁面的外觀的,這完全可由CSS來取代。 Strict 和Transitional 最大的不同是,在使用Strict DOCTYPE 時,你以為可用作表現的屬性和元素受到了很大的限制。
注意:在DW 中使用Strict DOCTYPE
DW 在遵從標準上,並不是很嚴格。如果你使用Strict DOCTYPE ,要特別注意一下校驗你的文件並修正不規範的屬性。基本上,很容易用CSS 來代替他們。
Frameset DOCTYPE 支援框架的使用,如果你在文件中插入了框架,DW 就會自動使用這種類型。框架頁至少好要跟另外兩個頁面相關聯,相關頁面的文檔類型沒有限制。 Frameset DOCTYPE 的程式碼如下:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
HTML 4.01 同樣也提供了這三種「口味」的文件類型-Transitional, Strict和Frameset——他們的運作與上面提到的XHTML DOCTYPEs 完全一致。如果你使用任何一種類型,都必須在HTML (而不是XHTML )文件中註明。我們將在後面建立網站的部分深入的探討HTML和XHTML 的差異。
原作: Dreamweaver 8 Does Standards ! by Rachel Andrew
編譯: x5