4/09/2007

談Web標準 (Web Standard)

Web標準是W3C和一些團體組織共同制定的製作網頁的技術, 目的是讓網頁內容在不同的瀏覽器和不同的平台都能閱讀, 這樣的目的就仰賴建立”結構化的文件”和”能自文件中抽離的網頁呈現”方式.

早期的瀏覽器多半是支援標準不一致的瀏覽器, 造成網頁設計或開發人員必需爲各家瀏覽器製作不同版本的網頁, 很耗費成本和資源. 但是從2000年開始, 各家瀏覽器開始向web標準靠攏, 支援所謂標準的文件結構和樣式呈現(使用Html /Xhtml與CSS建構網頁). 現在大部份瀏覽器已經支援web標準, 但仍有很多設計和開發人員繼續使用過去的方法做出不合語法, 難以使用的網頁, 例如結構上沒有意義的標記、肥大的影像地圖(image map)、過度使用巢狀表格等都是.

這裡要介紹一下W3C. W3C成立於1994年, 由美國的麻省理工學院, 歐洲的INRIA, 和日本的 Keio大學三個公共調查協會組成. 成員包括Microsoft, AOL(Netscape), Apple, Adobe, Sun, 其他軟體硬體公司, 研究所和電信公司. 這個由協會成員和專家組成的工作小組制定的規範會提交給W3C的公司成員並一同參與製作支援標準的網路應用軟體.

使用web標準建立的網頁有哪些好處:

1. 結構化的網頁能讓別人更容易理解所編寫的文件, 更容易新增或修改, 讓網頁的開發維護更簡易.
2. 使用web標準的網頁就表示能與未來的瀏覽器相容, 不需擔心將來可能不相容的問題.
3. 去除不合語法和難用的網頁結構之後將讓網頁下載讀取速度更快, 可節省頻寬; 網頁的使用性將提升, 也會有更高的造訪率.
4. 語義化/結構化的標記會提升網頁在搜索引擎中的排名.
5. 語義化/結構化的網頁可以適用在列印或其他設備(像PDA, 手機, 數位電視, 投影機等), 而這些只是透過連接不同的CSS檔案就可以完成, 不需要另外製作不同的版本.

目前被廣泛使用的網頁標準技術為Html, Xhtml和CSS. 而Html 4.01是最後final版本,以後不會再有新版本的發展. 由於Html語言格式不嚴謹以及爲了走向Xml的過渡時期, 建議的標準網頁語言為Xhtml 1.0 Transitional.

Xhtml技術的實行包括下列幾項:

1. 聲明正確的文件類型(Doctype)
2. 聲明文件類型定義(DTD, Transitional過渡的, Strict嚴格的, Frameset框架的)
3. 用meta 聲明使用的編碼, 例如utf-8或big5
4. 所有屬性值均爲英文小寫字
5. 所有屬性值都要加引號, 屬性值之間以空格分開
6. 關閉所有的標籤, 例如 p, li
7. 空標籤(例如 br, hr, img) 要在標籤尾部使用”/”關閉(<br />, <hr />, <img />)

如果用的是Dreamweaver 8的版本, 開啟Html新檔的話, 上述所說的項目都會由程式正確產生出來(Dreamweaver 8 已經支援web標準), DTD預設為Transitional. 如果用的是8以下版本(如MX), 設計人員就要自己注意. 也或者使用轉換功能選項(Convert)將Html轉換成Xhtml語言格式.


以上是關於Xhtml的使用技術, 至於建立結構化標記的文件請參考先前已經談過的”支援各種平台的網站製作方式”一文, 這裡想再加強說明的是關於CSS的應用. 大家熟知的”避免使用巢狀表格排版”有很多網站提供應用範例, 利用Google查詢"CSS Layout"可以找到很多, 就不多做說明. 要說的是“能自文件中抽離的網頁呈現”方式.

CSS (Cascading Style Sheets)是網頁外觀呈現的樣式. 目前的瀏覽器多半支援CSS2.1所定義的樣式. 將來的CSS3在W3C網站也已經有草案公佈, 但尚未定案, 目前的瀏覽器也不支援. “能自文件中抽離的網頁呈現”表示CSS的使用必須是採”外部連結”的方式加入網頁結構中, 例如:

在 < head> 中加上
< link rel="stylesheet" type="text/css" href="styles.css" />

所以, 將CSS樣式寫在標籤中或< head>中的方式應該盡量避免,因為這種方式會把結構和外觀呈現混在一起, 無法分開. 這二種方式舉例如下:

寫在標籤中
< h5 style="font-weight:normal;" > Test< /h5>

寫在< head>中
< style type="text/css">
h5 { font-weight: normal;}
< /style>

運用CSS時很容易犯的錯誤就是: 使用多餘的div和class(或id), 這雖然不違反標準, 卻悖離希望維持網頁”簡潔”的原則. 例如:

< div id="content">
< div class="headline>
< p class="text"> CSS測試網頁< /p>
< /div>
< /div>

可以簡化成

< div id="content">
< div>
< p> CSS測試網頁< /p>
< /div>
< /div>

也或者第二個div是不必要的, 可以去除.

CSS可以寫成

#content {……}
#content div {……}
#content p {……}

當然我們也可以反過來看, 如果是用web標準技術建立的網頁, 表示該網頁包括以下的特性:

1. 用符合標準的Xhtml語言所建構
2. 用可抽離的CSS樣式來佈局(非表格)及呈現外觀
3. 使用結構化的標記建立網頁文件
4. 能在任何瀏覽器或平台正常顯示

Web標準的技術除了Xhtml和CSS, 在Web Standard Project還介紹了DOM (Document Object Model) and ECMAScript (standard Javascript), 這兩部份屬於網頁行為, 非我可以理解的範圍, 有興趣的人可連結到該網站閱讀.

最後是驗證的部份. 使用web標準技術建構網頁, 對沒有經驗的人來說, 很難確認寫的是對或錯, 所以有htmlCSS驗證工具可以參考使用, 通過驗證的話還可以在你的網頁中掛上該項驗證的標章. 關於網頁驗證在”IE Developer Toolbar”有談到一部份, 以後會再詳細介紹各項驗證工具.


後記: 爲了寫這篇介紹, 閱讀一些相關文章, 再用比較簡要的方式說明, 參考的網址如下:

沒有留言: