[網頁設計] 網頁親和力不具強制性

前言

最近碰上 Firefox 跑網頁跟別人不同的情況（後述），順手寫個筆記好了。

另外 Jedi 推廣的網頁親和力，跟我國政府在推的無障礙網頁，基本上是差不多的東西，只是網頁親和力這名稱可以延伸的範圍會更廣而已。

另外請注意一下，這篇文是整理我的經驗寫成的，跟大家在說的可能會有很大差異，請當作參考看過就好。

還有，這篇後面的部分不是給初學者看的，前半部分隨便看看就好。

網頁親和力的目的（個人解釋）

網頁丟上網路，當然是為了給更多人看，所以想辦法「讓每一個人都能看到內容」是最低要求。

不過只靠一個人當然不可能達成這目的，所以才需要「維護網頁公開規格的組織」，還有「遵行這份公開規格的程式製作者」，沒有這些人建立起網頁規格的話，現在大家還是會像古早以前裝電腦一樣，不同廠牌的零件完全不相容，甚至同廠牌的也會每新出一款就不相容。（扯遠了）

而這些持續在維護進化的網頁規格，有個共同的目標，這目標不是為了製作多漂亮、功能多強大的網頁，而是為了「讓大家都能看到內容」，也就是今天要談的網頁親和力。

網頁親和力為何不具強制性

雖然網頁親和力的目標非常偉大，然而並不是每個網頁都必須要投注無數精力時間，來達成這非常偉大的目標。所以退求其次，先想辦法「讓更多人可以看到」。（註：這裡不是指打廣告讓人進來，而是讓進來的人看得到你的網頁內容。）

基本上來說，網頁親和力分成兩大部分：一個是給「圖形化瀏覽器使用者」看的，另一個則是給「身心障礙人士」看的。不過各位只要能滿足「圖形化瀏覽器使用者」就夠了，因為這樣還是可以給「身心障礙人士」基本的網頁內容，雖然他們「看」起來會有點不順暢就是了。

工具介紹

這裡介紹的是比較初步的工具，一些要花時間的工具就不談了（反正我也不知道那種玩意）。

• 圖形化介面瀏覽器 -- IE(5.5/6.0/7.0/8.0), Fx(1.0.*/1.5.*/2.0.*/3.0), Opera(9.*), Safari(3.*), Konqueror(4.0.*) ※註：上述說的是同排版引擎中比較多人在用的，各分支或社群版本在此不提。
• 網頁編輯器 -- Microsoft Office Publisher 2007, Adobe Dreamweaver CS3, NewsGator TopStyle 3.5, Emurasoft EmEditor, MadEdit, Notepad++ ※註：上述編輯器的共通特色，主要是著重在可以檢視原始碼。
• 檢測器 -- W3C Validator ※註：一些網頁編輯器也有內附檢測器(Validator)
• 純文字瀏覽器 -- Lynx, w3m, Links2 ※註：拿來玩玩就好，除非你覺得圖形化瀏覽器慢到無法忍受，不然沒必要用這些。

製作更有親和力網頁的步驟

1. 依照基本的網頁規格來撰寫文件。（後述）
2. 將寫好的網頁，分別用三款以上的瀏覽器跑跑看有沒有問題。（瀏覽器在上面我有提供）
3. 看過覺得沒問題的話，可以丟給 W3C Validator 檢查看看。
4. W3C Validator 有說明錯誤的話，請先檢查一下是不是每個元素跟註解都有寫好結束標籤。
5. 還是通不過 W3C Validator 的話，請再檢查使用的元素名稱是否有誤、圖片或多媒體物件是否有寫好替代文字。
6. 使用 Firefox 或 Opera 一類的瀏覽器，依序將網頁樣式表關閉檢查、將圖片顯示關閉檢查、將 JavaScript 關閉檢查、將外掛程式(Plugins)關閉檢查。基本上弄到你覺得沒問題，拿給別人看也覺得沒問題就好了。
7. [CSS] 關於文字大小、螢幕解析度，一般內容的中文文字大小設在 16px(12pt) 比較適當，而螢幕解析度則是先以 1024 寬度為主， 1280 次之， 800 有空再調整這樣。（螢幕解析度會一點 JavaScript 的話可能會輕鬆點，當然用全版面 Flash 也可以啦……）
8. [CSS] 字型集方面，記得要設「通用字體集」，也就是 serif,sans-serif,cursive,monospace 這些字型類別名稱，這可以讓瀏覽器自行搜尋系統中屬於這類別的字型來用。

基本的網頁規格所用的元素

1. DOCTYPE -- 宣告這份網頁文件採用何種規格來排版
2. html -- 表明這是一份網頁文件的內容
3. head -- 給瀏覽器事先處理的一些資訊
4. meta -- 包含在 head 元素範圍裡，用途很廣，比較常使用的情況是要宣告網頁文件的字元編碼，建議 head 起始標籤後立刻接上這個。另外網頁描述(description)跟搜尋關鍵字(keywords)也會用到這元素。
5. title -- 包含在 head 元素範圍裡，網頁文件的標題，會顯示在瀏覽器標題列上。
6. link -- 包含在 head 元素範圍裡，要與外部文件建立連結時用的，比較常用在載入 CSS 檔案，或是連結電子郵件、上一頁或下一頁文件這類的用途。
7. style 跟 script -- style 是宣告 CSS 語法定義區用的， script 則是 JavaScript ，基本上想要載入文件內容(body)前先行處理好的才需要寫在 head 元素範圍內，不然可以隨喜歡加在 body 內任一處，注意先後關係就好。
8. body -- 要顯示給人看的文件內容全會寫成這裡，把 CSS 跟 JavaScript 全關掉後，還能看到的東西也是在這裡面。
9. (其它) -- h1 到 h6 是文件內容的標題， p 是段落， a 是超連結， img 是圖片， ul 跟 ol 是列表， table 是表格，剩下的不重要。

基本的網頁規格所用的元素屬性

1. href -- hyper reference 。給 a 元素用的，會指示要連結的錨點(anchor)位置在哪。（可以用絕對位置、相對位置、內文書籤三種方式指定）
2. src -- source 。給 img 等連結外部檔案的元素用的，會指示要插入的圖片(image)等檔案的位置在哪。（可以用絕對位置、相對位置兩種方式指定）
3. alt -- 給 img 等的多媒體檔案元素用的，會在無法顯示時，以替代文字表示在畫面上。（意思是說，這是在看不見多媒體內容時，要你想辦法用純文字解釋內容用的，也可以完全不填入任何字，這樣就不會跑出替代文字，但是不寫 alt 屬性則是會用檔名代替顯示，要注意一下。）
4. title -- 提示文字，幾乎任何元素都可以用，比如說你弄了一個超連結，但是超連結文字說明得還不夠清楚，就可以在 a 元素裡加上 title 屬性說明。（用在圖片上時，不管圖有沒有顯示，都會在你滑鼠鼠標移上去時顯示，所以到底想要拿來說明這圖片的什麼，要自己注意一下。基本上用在 a 元素上就夠你煩了。）
5. id 、 class 跟 name -- id 可以用來建立一份網頁文件中，唯一的名稱，也可以拿來當內文錨點的目標。總之 id 跟 class 都是在使用 CSS 很常碰到的東西，然後 name 則是 JavaScript 跟表單(form)工作會用到的。

其它

要用 Unicode 還是 ANSI 編碼？

Unicode 是指 UTF-8 那類的，多國語言環境會用到的東東； ANSI 則是指 Big5 那類的，各國國內自己在用的玩意。如果你的文件要塞很多語言、很多符號的話，用 Unicode 類的編碼就好，雖然有些純文字瀏覽器目前還不太能支援 Unicode ，但是有硬體輔助器材的話，身障人士也還是可以用圖形化瀏覽器的，不勞各位擔心。

這篇文章前言裡說的「Firefox 跑網頁跟別人不同的情況」的指什麼？

單純是註解標籤的處理方式有點不同而已。以「<!-- (一些內容) <!-- 註解 -->」這段原始碼為例， Fx 會把很後面的部分也一起註解掉，但是 IE 跟 Opera 卻只會停在上面註解那行的結束標籤，不過這也只是我的猜想而已，實際上問題出在哪裡還不確定，但是跟使用了「HTML 4.01 Transitional」的規格應該有所關連，有沒有用這規格會讓同樣的原始碼處理出不同結果來，在這則是因為前面點的註解標籤需要一個結束標籤，所以才會停在某個前面有 -- 兩個符號的標籤處。