譯者序:這個系列原文一共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
新聞熱點
疑難解答