譯者序:這個系列原文一共8篇文章，從普及 web standards 入手，講述如何用 dreamweaver 8 來構(gòu)建符合標(biāo)準(zhǔn)的 web ，由于原作者的此篇文章是對《build your own standards compliant website using dreamweaver 8 》(這篇文章是收費(fèi)的)的摘錄，所以我對內(nèi)容進(jìn)行了適當(dāng)?shù)膭h改，順序與原文是一致的，但篇幅會有調(diào)整，特此告知。翻譯水平有限，敬請諒解。

　　假如您正在讀這篇文章，您很可能是已經(jīng)對 web 標(biāo)準(zhǔn)有了一定的愛好，并且對用 dw ( dreamweaver 的簡稱)來構(gòu)建的站點(diǎn)中標(biāo)準(zhǔn)的應(yīng)用非常好奇。

　　或許您已經(jīng)對 ws (web standards的簡稱)有了一定的了解，但是您并不知道如何用 dw 來編寫可兼容的代碼。或者您是一個 dw 用戶，您很想遵從 ws ，更廣泛的使用 css ，并且可以制作出更有親和力的文檔。無論您是哪一種類型，這篇文章都會給您想要的答案:告訴您如何用 dw 來搞定 ws。

　　web 標(biāo)準(zhǔn)的定義

　　就我們在整篇文章所關(guān)心的 ws 來說，讓我們首先花一點(diǎn)時間來明確一下我們究竟在談?wù)撔┦裁?

　　ws 是一些指導(dǎo) web 開發(fā)語言的規(guī)范，是由 w3c 所制定的。這些規(guī)范包含了多種語言，例如，html、xhtml 和 css 還有一些其他的相關(guān)語言，例如 mathml，用來表示數(shù)學(xué)中的方程，當(dāng)你有這種非凡的需要的時候，或許會用得上。w3c 也頒布了“web 內(nèi)容親和力指南”(web content accessibility guidelines —— wcag)——推廣網(wǎng)頁的可訪問性(通過 wai )

　　提示:直接獲取這些規(guī)范

　　你可以在 w3c 的網(wǎng)站上閱讀這些規(guī)范，盡管他們有時讀起來還是有些困難的:

　　html 4.01

　　xhtml 1.0

　　css 1

　　css 2.1

　　wcag 1.0

　　在本文中，我們將會用到 xhtml1.0、css1 和 2.1、wcag 1.0 等規(guī)范和建議，但是你一定很興奮知道我們其實(shí)不必過多的閱讀 w3c 文檔。

　　誰需要 ws ?

　　您可能只有一個含糊的概念:ws 是個好東西，但是許多網(wǎng)站——包括許多知名的站點(diǎn)——并不遵從 ws ，并且他們看起來的確治理得很好。所以，為什么我們要盡力去遵從 ws 呢?這么做會有什么真正的收益嗎?誰需要 ws ?誰需要去關(guān)注 w3c 的規(guī)范與建議?

　　web 開發(fā)者與設(shè)計(jì)者

　　需要關(guān)注 ws 的首類人群就是我們:網(wǎng)站建設(shè)的開發(fā)者與設(shè)計(jì)者。花費(fèi)時間去學(xué)習(xí)如何用 ws 開發(fā)對于我們來說值得嗎?

　　整潔的標(biāo)記使 bug 的修復(fù)速度加快。

　　假如您通過 w3c 校驗(yàn)?zāi)捻撁妫辽倌鷷私獾讲灰?guī)范的標(biāo)記并不是引起您曾經(jīng)碰到過的錯誤的原因。有時，校驗(yàn)一個頁面和修復(fù)已發(fā)現(xiàn)錯誤的過程，可以清除顯示中碰到一些問題，這些問題是由標(biāo)記(element)沒有結(jié)束或標(biāo)簽(tag)拼寫錯誤引起的。

　　即使校驗(yàn)?zāi)奈臋n并沒有修正這些問題，至少你會知道這些問題存在于規(guī)范的文檔中。既然你已經(jīng)知道這個問題不是一個錯誤，那么你可以開始關(guān)注其他的問題了，例如在不同的瀏覽器中 css 處理差異問題。

　　遵從可訪問性的需求很輕易|||

　　假如你編寫一個規(guī)范的 xhtml 標(biāo)記，那么你就可以保證文檔在語義上是無誤的，并且您可以把文檔中的內(nèi)容與表現(xiàn)相分離，您將可以把大量的工作放在許多 wcag1.0 中所列的可訪問性的問題上。熟悉到可訪問性并不是僅僅為殘疾人設(shè)計(jì)的這一點(diǎn)也很重要。一個親和力好的站點(diǎn)是可以被許多不同的設(shè)備訪問的，例如移動電話和 pda ，他們是不具備強(qiáng)大的處理能力去對付那些散亂而非標(biāo)準(zhǔn)的標(biāo)記的。

　　向前兼容

　　假如您僅僅考慮到自己新開發(fā)的頁面在當(dāng)前的幾個瀏覽器中的表現(xiàn)，那么你怎么才能保證它在未來的新瀏覽器中的表現(xiàn)呢?新瀏覽器或許會把您的頁面顯示的很糟糕，此時你只能去費(fèi)力的尋找和修正那些惱人的問題。

　　遵從 ws 并不會完全根除這個問題;然而，標(biāo)準(zhǔn)的兼容使你的設(shè)計(jì)失敗的風(fēng)險大大減少，同樣，如今的瀏覽器軟件公司也開始支持標(biāo)準(zhǔn)。他們也許會偶然的錯誤解釋了某部分規(guī)范，他們不可能完全不支持它。假如最壞的事情發(fā)生了，并且一個新的瀏覽器在你的標(biāo)準(zhǔn)化網(wǎng)站上產(chǎn)生了希奇的效果，那么修復(fù)它要比修復(fù)一個不兼容的站點(diǎn)輕易的多。假如你碰到一個問題，它同樣會影響其他的標(biāo)準(zhǔn)可兼容網(wǎng)站。web 社區(qū)的群體聰明會指出這個問題，并會寫文章來解決這個問題。所以，大家集體討論，在可兼容的文檔里修正這個 bug 也比在不兼容的文檔里修正更加的輕易。

　　更方便的重構(gòu)

　　你曾經(jīng)不得不從一個站點(diǎn)中剝離文字而對他進(jìn)行重構(gòu)過嗎?而且一切都得從頭開始。你曾經(jīng)見過那些被字體標(biāo)簽和微小的表格單元(它使我們只能從頭開始)弄得混亂不堪的標(biāo)簽嗎?我只知道我曾經(jīng)看過，這是一個漫長的過程，大量的時間和金錢都被這個站點(diǎn)的重構(gòu)燒掉了。

　　分離文檔的內(nèi)容與表現(xiàn)將會使你體會到標(biāo)準(zhǔn)化兼容帶來美妙:這意味著下次某個人想重構(gòu)這個站點(diǎn)的時候，他們不必把 web 文檔中的拷貝出去。所有站點(diǎn)中的文本都將會被具有語義的 (x)html 所標(biāo)記，所有的表現(xiàn)信息——這部分才是站長想更改的——都將被儲存在一個可輕易替換的 css 文件中。

　　一些客戶在開始要求你做一些改變之前是不會等待它去重構(gòu)的，他們只會等到游覽完猛犸象化石坑，然后就要求你說“把左邊欄挪到右邊就可以了。”對于一個標(biāo)準(zhǔn)化可兼容站點(diǎn)來說，全部頁面都是由 css 控制的，你可以很方便移動頁面中的標(biāo)記，而不用在許多以復(fù)雜表格為結(jié)構(gòu)的頁面中想歪招了。這使得改變頁面布局更加簡單。

　　結(jié)構(gòu)從表現(xiàn)中分離同樣可以使增加新的元素變得更加輕易，就像一個高對比度、小圖片版本的站點(diǎn)或許對于某些瀏覽者更有吸引力。當(dāng)您可以輕松的更換樣式表時，為什么建立單獨(dú)的純文本版的頁面呢?

　　瀏覽器軟件公司

　　瀏覽器的軟件公司開始對 ws 關(guān)注了。過去，瀏覽器軟件公司添加他們私有的專屬標(biāo)簽和屬性到基本的語言中。但是現(xiàn)在，前所未有的，他們都開始遵從標(biāo)準(zhǔn)了，并且一些最新的瀏覽器已經(jīng)可以確定，正在努力按照規(guī)范中所定義的(x)html 和 css 來顯示它們。

　　在可遇見的未來中，瀏覽器都將能夠顯示大多數(shù)的不規(guī)范標(biāo)記、代碼，因?yàn)榧偃缢鼈儾贿@么做，成千上萬的不規(guī)范站點(diǎn)都將無法正常顯示——那么大眾就很可能開始責(zé)備瀏覽器了，而不是責(zé)備 web 設(shè)計(jì)者。然而，其他的設(shè)備(那些沒有臺式機(jī)強(qiáng)大處理功能的設(shè)備)將會更加依靠那些他們所碰到代碼的標(biāo)準(zhǔn)化兼容性了。

　　創(chuàng)作工具軟件廠商

　　創(chuàng)作工具軟件廠商——例如 macromedia , 它制作了 dreamweaver ——也像web設(shè)計(jì)者一樣，開始遵從 ws 了，比如，它們越來越多的客戶要求這些創(chuàng)作工具可以輸出規(guī)范的標(biāo)記。原本這些可視化的開發(fā)環(huán)境都沒有太好的口碑，因?yàn)樗鼈儠苫靵y、不規(guī)范的標(biāo)記;然而，最新的主要可視化開發(fā)環(huán)境都援引了標(biāo)準(zhǔn)化的兼容性和可訪問性的元素，這也成為了主要的賣點(diǎn)。軟件廠商一定要聆聽，并回應(yīng)市場的需求。|||

　　web 用戶

　　我們設(shè)計(jì)的網(wǎng)站的用戶也從我們采用 ws 中獲益，即使他們并沒有熟悉到這一點(diǎn)!或許他們正無意識的使用那些專門針對當(dāng)今流行瀏覽器而開發(fā)的站點(diǎn)。假如這些用戶轉(zhuǎn)用其他的瀏覽器，他們或許就會發(fā)現(xiàn)這個在線的體驗(yàn)就不再令人享受了，因?yàn)槟切俚臉?biāo)記是不會被新瀏覽器所接受的。一個標(biāo)準(zhǔn)化可兼容的站點(diǎn)在不同的瀏覽器中都有很好的表現(xiàn)，不論是在現(xiàn)有的，還是在未來的瀏覽器中都同樣優(yōu)秀。

　　此外，一個遵照可訪問性建議的網(wǎng)站對那些發(fā)現(xiàn)瀏覽網(wǎng)頁不如意的用戶也是很有親和力的。web 應(yīng)該給那些視覺有缺陷或其他的殘疾人提供更方便的購物、閱讀、搜索的條件。不應(yīng)該因?yàn)橛脤贅?biāo)記或者其他排它(指瀏覽器)技術(shù)的站點(diǎn)，使他們無法瀏覽。

　　使用 ws

　　我們怎么能確保正確使用ws呢?怎么做才能遵從標(biāo)準(zhǔn)呢?

　　首先，我們應(yīng)該遵守規(guī)范。這意味著我們應(yīng)該只使用那些規(guī)范中定義的元素與屬性，避免使用某種瀏覽器的專有屬性，例如 ie 的 marquee 標(biāo)簽和 netscape 的blink 標(biāo)簽。同樣也不要使用在早期規(guī)范中出現(xiàn)的元素(例如 html3.2)和被后來的規(guī)范所移除的元素。

　　創(chuàng)建一個規(guī)范的 xhtml 文檔

　　在本文中，我們將使用 xhtml，所以，我們都將遵照 w3c 的 xhtml 1.0 的建議[按照 w3c 的意思，建議( recommendation )就是規(guī)范( specification )的意思]。xhtml 基本上就是html的最新版本，它設(shè)計(jì)的目的是用來代替 html 這個網(wǎng)頁標(biāo)記語言的。盡管它是 xml 的一種 html 變形，但是 xhtml 與 html 幾乎是完全一樣的，在我們后面將討論的《 xhtml 和語義》中有細(xì)微的差別。

　　你可以通過 dreamweaver 中的新建文檔對話框生成一個 xhtml 文檔(文件>新建...)。確保基本頁在類別列表里是被選中的，然后從基本頁的列表中選擇 html ，就像圖2.1所示，“在 dreamweaver 中創(chuàng)建一個新的 xhtml 文檔”。然后你可以從文檔類型的下拉列表中任意選擇一項(xiàng)。

　　圖2.1:在dreamweaver中創(chuàng)建一個新的 xhtml 文檔

　　圖2.2:在code視圖中顯示新的 xhtml 文檔

　　點(diǎn)擊“創(chuàng)建”來生成一個新的文檔。點(diǎn)擊文檔窗口頂部的 code 按鈕，轉(zhuǎn)到“ code 視圖”，就可以清楚的看到在一個簡單的 xhtml 文檔中都包含了哪些代碼。正如圖2.2所示，“在 code 視圖中顯示新的 xhtml 文檔”

　　文檔的第一行將顯示下面的內(nèi)容

　　<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

　　這叫做文檔類型聲明，或者 doctype 。顧名思義，doctype 聲明了你的文檔究竟是什么——你正在遵從是哪一個 (x)html 規(guī)范。在這個例子中，我們遵照的是 xhtml 1.0 transitional，這是 dw 8 的默認(rèn)設(shè)置。 transitional 部分將告訴我們關(guān)于 xhtml 版本的其他一些信息。xhtml1.0 擁有三種“口味”:strict, transitional, 和 frameset。dw 默認(rèn)使用的是 transitional 類型，而假如你想在文檔插入框架，那就是 frameset。

　　xhtml strict 是最嚴(yán)格的 xhtml 格式，這個想必你也能猜到。一個 strict 文檔類型看起來就是這個樣子:

　　"http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">

　　假如你使用的是 strict doctype，那么你就不能在文檔中使用任何聲明不贊成的元素(標(biāo)簽)或者是屬性，也不可以使用框架。聲明不贊成的元素將在未來的 xhtml 版本中被移除。許多這類元素是用來控制頁面的外觀的，這完全可由css來代替。strict 和 transitional 最大的不同是，在使用 strict doctype 時，你本以為可用作表現(xiàn)的屬性和元素受到了很大的限制。|||

　　注重:在 dw 中使用 strict doctype

　　dw 在遵從標(biāo)準(zhǔn)上，并不是很嚴(yán)格。假如你使用 strict doctype ，要非凡注重一下校驗(yàn)?zāi)愕奈臋n并修正不規(guī)范的屬性。基本上，很輕易用 css 來代替他們。

　　frameset doctype 支持對框架的使用，假如你在文檔中插入了框架，dw 就會自動使用這種類型。框架頁至少好要跟另外兩個頁面相關(guān)聯(lián)，相關(guān)頁面的文檔類型沒有限制。frameset doctype 的代碼如下:

　　"http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd">

　　html 4.01 同樣也提供了這三種“口味”的文檔類型——transitional, strict 和 frameset——他們的運(yùn)作與上面提到的 xhtml doctypes 完全一致。假如你使用任何一種類型，都必須在 html (而不是 xhtml )文檔中注明。我們將在后面創(chuàng)建網(wǎng)站的部分深入的探討一下 html和 xhtml 的區(qū)別。

　　原作:dreamweaver 8 does standards! by rachel andrew

　　編譯:x5