網頁設計的基本原則

　

網頁的功能

　

網頁 (Web page) 在全球資訊網 (WWW) 系統中可以有各種不同的功能：

1. 多媒體資訊傳遞：簡單的網頁可以用平面或是 3D 的方式來傳達聲音、影像、動畫、視訊、虛擬時境的多媒體資訊。
   
2. 互動的佈告欄：網際網路上來觀看網頁的人可以在網頁上留言，藉以和其他來觀看的人或是網頁的製作人溝通。
   
3. 資訊系統之介面：網頁本身可以是一個資料庫、GIS 系統、或是應用資訊系統的人機介面，允許使用者在遠端透過網路來操作該系統。

不論其功能為何，網頁是一個網路資訊系統的人機介面，一個網頁的基本目的是給使用者瀏覽，它負有讓使用者清楚瞭解系統所呈現資訊的任務，它也要讓使用者產生對資訊系統所提供資訊的興趣，並且提供適當的互動管道，讓使用者與資訊系統維持適當的互動。

設計一個電腦系統的人機介面所需要遵循的一般通則在設計網頁時都需要注意到，就人機互動的功能面來說，網頁受限於瀏覽器的特性，所提供的平面或是 3D 的表現方式都有固定的框架，不能做太多的變化，而且資訊的來源都是遠端的機器，必須考慮資料傳遞的時間延遲，在這樣子的框架下要有效率地達成傳遞資訊給使用者的目的，必須要特別考慮下面這些增加整體系統可用性 (usability) 的設計原則：

1. 全方位地規劃一個網頁
   
2. 在網頁上提供製作者及維護者的基本資訊
   
3. 用有效的方式和網頁的瀏覽者溝通
   
4. 幫助使用者迅速地找到他要的資訊
   
5. 清楚地讓使用者知道系統將如何反應他的每一個動作
   
6. 時時考慮使用者操作及資訊傳遞的效率
   
7. 考慮網際網路上使用者使用各種不同的硬體與軟體
   
8. 讓你的網頁看起來更舒服
   
9. 強調互動性
   
10. 維護你的網頁
    
11. 注意一些 HTML 的小細節

　

　

全方位地規劃一個網頁

網頁的目的是為了和使用者溝通 (單向或雙向地傳遞資訊) ，在製作一個網頁時請無時無刻牢記此點，來看你的網頁的人通常不是像逛街一樣毫無目標，而是為了尋找一些特定的資訊而來，使用者不是為了崇拜你製作的一些很炫的媒體效果而來，所以就像設計一般電腦系統的人機介面一樣，你必須瞭解系統的使用者：

1. 是哪些人會來看你的網頁 (他們共同的特質是什麼? 年齡? 專業? 教育程度? )
   
2. 他們會在哪裡 (在區域網路內呢? 還是廣佈全世界? )
   
3. 他們的目的是什麼?
   
4. 你想要呈現給他們什麼樣子的資訊?
   
5. 你想要如何來呈現這些資訊?

你需要由使用者的角度來看 "我到底在這個網頁上要得到什麼資訊?" 這樣的問題，如此在設計的過程中你所做的決定才能夠滿足潛在的使用者。

　

訂定網頁的目標

1. 告知瀏覽者資訊
   
2. 教育瀏覽者
   
3. 娛樂
   
4. 獲得瀏覽者的回饋
   
5. 提供瀏覽者討論的空間與基本內容

不管怎樣，每一個網頁一定要有一個目標。

網頁是一個溝通的工具，如果你沒辦法替它找到一個有意義的目標，或是目標分歧的話，那你應該要考慮放棄製作這個網頁或是使用多個網頁來達到不同的目標。

網頁內容與網頁頁面的設計互為表裡

就像一般的平面媒體一樣，撰稿和美術編輯是有不同責任的，資訊的內容是網頁的內涵，是網頁的精髓，美工藝術設計有畫龍點睛之效，是網頁的外表，缺一不可，但是內涵必須為主，其它的設計方能依附其上，加強資訊傳遞的效果，加快資訊傳遞的速度。

網頁中各種媒體的運用千萬不要喧賓奪主，讓網頁的主題為之失色，同樣地其它附帶的資訊，例如廣告，或是其它的連結，不要蓋過網頁的主題。

如何呈現網頁的主題

就像一般電腦系統的人機界面一樣，製作網頁在一開始時需要由瀏覽者熟悉的領域中構思一個隱喻 (metaphor) 來介紹你的主題，以便瀏覽者迅速地建立正確的心智模型，如此能夠加快使用者接受你所要呈現的資訊，加深此資訊在瀏覽者腦中的印象，各種媒體的運用之基本目的是為了引導瀏覽者的注意力專注在你所要表達的主題上，不是要分散瀏覽者注意力在各個相關的內容上。

　

在網頁上提供製作者及維護者的基本資訊

網頁這種新興的資訊傳播媒體是不經過任何人審核的 (moderated) ，所要展現的內容是完全自由的，完全由網頁的製作者自己決定，內容的正確性與適當性也完全由網頁的製作者自己負責，當我們閱讀一網頁時，是否相信它的內容必須由我們自己根據網頁的內容來判斷，一般情況下瀏覽者首先根據網頁製作者的身份與其所屬機構來做第一層的篩揀判斷此資訊的可靠度，然後瀏覽者會根據網頁本身的邏輯性來判斷資訊的可信性，再與瀏覽者自己的知識相互印證來判斷資訊的正確性，最後瀏覽者會根據網頁維護的狀況與網頁中提供的互動性來判斷所提供資訊的即時性。

在設計一個網頁的時候設計者除了盡力維護資訊的正確性與即時性之外，必須想辦法來加強與瀏覽者相互間的溝通，加強瀏覽者之間的溝通，建立瀏覽者的信心，例如：

1. 列出作者或是連絡人：包括作者或是連絡人的名字、所屬機構、電子郵件信箱、網頁位址、或是其它的聯絡方式。
   
2. 列出公司或是組織名稱：如果此網頁是某一個組織或是公司資助來建立的，請清楚地表明該組織之企業識別符號或是其名稱。
   
3. 列出網頁之 URL：一般的瀏覽器在列印網頁是會將網頁之 URL 列於首頁，以便瀏覽者日後可以知道此網頁文件之來源，不過這個功能大部份都是瀏覽器的選項，因此也有可能不自動印 URL，此時設計者最好是自己在網頁上列出 URL。
   
4. 列出網頁修改或是維護的時間：讓瀏覽者知道網頁最後修改的時間或是修改的過程，可以幫助瀏覽者判斷資訊相對之可用性。
   
5. 考慮使用較多互動的網頁元件：給予瀏覽者更多表達意見以及得到更多資訊的管道。

　

用有效的方式和網頁的瀏覽者溝通

在確定好網頁目的、主題、瀏覽對象之後，切記網頁是溝通的工具，任何溝通都要盡力使得溝通有效，以免浪費時間，瀏覽者在全球資訊網的大海中好不容易走到你這一個網頁上，你用細心的設計與美觀調和的畫面來顯示真誠的態度之外，也要用簡捷有條理的方式展現你的主題，確保你的目的能在瀏覽者的耐心用完之前完全達到，以下是幾個該注意的重點：

1. 降低文字的篇幅：
   
   大多數人線上閱讀文章時的速度要比閱讀印出來的文章要慢，網頁上大部份的文章是希望瀏覽者線上閱讀，並且讓瀏覽者隨時保持互動性，可以決定是否要讀下去或是跳到更適當的地方去閱讀，因此內容要儘量縮減。
   
2. 儘量以標題摘要文章內容：
   
   這是瀏覽者決定是否要閱讀此段文章的關鍵，如果可以的話，儘量以條列式的方法分層表達，將重點一一標出，在適當的地方再輔以較詳細的說明。
   
3. 斜體字、粗體字、不同顏色的字要小心使用：
   
   雖然這是在文字段落中提醒瀏覽者注意某些文字的好方法，可是這也常常使得頁面零亂，使得文字的篇幅不自覺地增加，如果可以的話應該儘量用條列式的方法，替瀏覽者把大綱整理出來。
   
4. 超連結 (hyperlink) 文字常常也就是關鍵詞：
   
   關鍵詞的詳細說明應該放另一個頁面上，如此可以階層式地化解篇幅的壓力，同時關鍵詞的本身和其所在的句子，也說明了該連結將引導瀏覽者到什麼樣子的畫面上去。
   
5. 網頁中的文章請使用固定的風格：
   
   例如：人稱、相關名詞及其翻譯、字詞的用色、同義字，如果是英文的話，其大小寫、拼法、連線等等在網頁中都需要用固定的表示方法，不要任意轉變。
   
6. 使用瀏覽者熟悉的名詞：
   
   依據你所定義的使用族群，選用適當的詞語，不要不經意地使用專業的詞語或是你個人所熟悉的詞語。
   
7. 使用互動式元件時必須選用能夠清楚地代表該選項或是動作的詞語：
   
   所謂互動式元件是指瀏覽者可以操作的螢幕上顯示物件，例如：表單中的 Radio Buttons、Push Buttons 等等，這通常是很困難的，在一個按鈕上所保留的空間通常是很有限的 (例如：確定按鈕) ，如何選用簡單的詞語代表將會進行的動作? 在 select 中的每一個選項所代表的特性也可能很難用一個減捷的名詞來說明，但是無論多困難，不可以為了頁面空間配置而犧牲掉清晰度，如此可用度 (usability) 會急速降低。
   
8. 在設計互動式界面時必須使用清楚、建設性的訊息：
   
   在設計一個使用者可以輸入資料或是回答問題的網頁時，通常會使用 CGI 或是 JAVA、JAVA Script 等等技術，因為使用者不單單只是接受資訊，還要提供資訊，常常可能發生一些系統無法處理的狀況，必須提供一些訊息給使用者。
   
   任何錯誤訊息或是狀態訊息的目的都是希望使用者能夠瞭解目前的狀況，做出系統所希望的反應，例如：常常看到的瀏覽器錯誤訊息 "Error 404：File not found" 就是一個使用者很難瞭解的訊息，使用的詞語完全是電腦專業領域內的名詞，也沒有告訴使用者該如何反應，下面這樣子的訊息會好一些： "The page you requested is no longer at this location,  please click the Back Button of the browers to go back to the refering page and inform the page owner!"
   
9. 注意網頁中標題、圖片與文字段落讀序的安排：
   
   就像一般的平面媒體一樣，標題與圖片引導瀏覽者視線及注意力，必須小心有系統地由使用者的角度來設計。

　

幫助使用者迅速地找到他要的資訊

在瀏覽超文件或是超媒體時大多數的瀏覽者很快地就在錯綜複雜的連結中迷失了，也許方才看到某一個資訊覺得很重要，但是跟著某一個連結下去卻再也回不來了，甚至由最上層網頁重新走一遍也不一定找得到同樣的那一頁。在瀏覽超文件時像是一腳踏進濃密的叢林，沒有任何指標、任何方向，這時比較有用的是你的短期記憶，而不是組織能力，有時很多實際世界中的路癡，到了網上多維的世界中反而神勇異常呢?

不管怎樣，在頁面的設計上一定要想辦法幫助使用者認識網頁的架構，希望瀏覽者能夠自由自在的瀏覽而不會迷失，由於全球資訊網透過網路傳輸的架構，每一次跟隨一個連結都需要一定的時間，因此一個簡單的檢驗原則是不管瀏覽者目前身在何處，如果要尋找某一個特殊的資訊的話，最好能在三個連結之內找到，這個要求成為網頁設計者在設計頁面及組織資訊時一個很基本的原則，以下我們討論一些輔助瀏覽者的頁面設計原則：

1. 使用一致的關鍵字：
   
   在網頁中使用一致的關鍵字，不管是英文還是中文，都盡量用一致的名詞來闡釋或描述一個概念，這個理由很簡單，因為大多數的搜尋引擎 (Search Engine) 都是藉由關鍵字出現的次數來比較某一網頁的內容是否與查詢的內容相關，因此如果你使用一致的關鍵字的話，當使用者以該關鍵字查詢時這個網頁出現的機率就高得多了。
   
2. 建立超連結目錄表：
   
   如果網站上不只一頁網頁，替所有的網頁做一個超連結目錄表能夠幫助瀏覽者快速地掌握資訊的組織。
   
3. 顯示瀏覽者目前瀏覽的位置：
   
   超連結連在一起的網頁很可能不是一度空間或是二度空間的關係圖可以清楚表示出來的，可是一般情況下我們在組織資料時會根據某一兩個主軸來準備呈現資料，因此我們可以用這些主軸來描述網頁之間的架構，可以用樹狀圖或是階層圖來繪製這個結果，然後在圖上 (不見得是圖片，也可以是文字) 標示瀏覽者目前的位置，如此有助於瀏覽者在實際瀏覽過程中組織整體的資訊。
   
4. 盡量避免讓瀏覽者使用捲動軸和調整視窗大小：
   
   使用者常常希望看到全貌以便瞭解資訊呈現的順序與架構，但是一個大的網頁常常要讓瀏覽者使用捲動軸，大的表格和圖片常常強迫使用者調整視窗的大小，甚至太大的圖片在某些環境下只能用捲動軸來觀看其全貌，這些動作都需要時間，也影響使用者的專注力，更讓瀏覽者產生一種無法掌握的感覺，讓瀏覽者必須多花一份心力去組織、重新建構這一頁內資訊的心智模型 (mental model) 。
   
5. 使用清楚的標題 (TITLE) 標注 (tag) ：
   
   HTML 中< TITLE> 的標注是各個瀏覽器在記錄書籤 (bookmark) 時所記下相對的文字說明，如果你的 TITLE 標注能夠清楚的描述你的網頁內容的話，使用者記下書籤後，可以很輕鬆地再找到你的網頁。
   
   請注意：很多標題在你整體瀏覽你的網頁時可能具有明確的意義，但是單獨看這個標題就可能會變得毫無意義，瀏覽者過一段時間後光看標題可能完全無法回憶當初看到的頁面是關於哪方面的，因此在設計的時候你應該考慮將標題和內容分開來單獨思考一遍，是不是完整，例如：有時副標題前需要主標題以釐清其關係，有時甚至需要公司名稱、計畫名稱、作者姓名等等。
   
6. 在網站的深度和廣度之間做一個適當的選擇：
   
   網頁的縱向連結愈深，表示資訊分層整理的愈詳細，表示資訊的深度夠，不是膚淺的文字組合，但也可能表示瀏覽者可能無法理解太深入的資訊；網頁橫向的連結愈多，表示相關輔助資訊蒐集的很齊全，但是也可能表示網站主題定訂的太廣，資訊範疇擴展得太大，可能會超過瀏覽者所能重建的心智模型，因此對不同的瀏覽族群而言，必須以適當的深度與廣度來呈現網站上的資訊。
   
7. 使用適當的導覽按鍵 (影像或文字之超連結) ：
   
   如前面所述，設計者常常會依照幾個主軸來安排資訊，例如在一個虛擬的藝術館的網頁中，作品除了依照畫風與畫派來排列之外，也可以依照年代來排列，或是依照畫家來排列，針對某一種特殊的排列方法可以獨立設計一個超連結目錄頁，在所有的頁面上置入連結連回此目錄頁，甚至可以在所有的頁面上置入依此主軸之前進及後退按鈕，讓瀏覽者輕鬆地挑選喜歡的資訊瀏覽方式。
   
8. 避免瀏覽者無法離開某一頁的窘境：
   
   不要讓瀏覽者發現他除了鍵入 URL 或是使用瀏覽器提供的 GOTO (至) 或是 BACK (後退) 按鈕才能離開得了某一網頁，進入這樣子的網頁中，好像走進一個陷阱一樣。如果你的網頁本身沒有提供瀏覽者適當的操作選項，瀏覽者需要藉由瀏覽器提供的功能來瀏覽你的網站時，瀏覽者需要很熟悉瀏覽器所提供的功能，而且當瀏覽者使用不同的瀏覽器時所見到的操作介面就不一致了。
   
9. 使用 HTML 的內部連結：
   
   如果某一個網頁的資料內容很多 (一整個螢幕放不下的話) ，請整理一個超連結目錄頁連結到每一個子題上，每一段結束時也應該讓使用者可以重新回到超連結目錄頁上。
   
10. 如果你的網站有很多網頁的話，請你考慮在每一頁內提供連結來連結到下列重要的網頁上：
    
        a. 你的首頁 (home page)
    
        b. 內容連結頁 (TOC, Table Of Content)
    
        c. 索引頁 (index page)
    
        d. 搜尋頁 (local search page)
    
11. 不管使用者在瀏覽任何資訊時，上面這些連結最好能夠都一致地呈現出來：
    
    這些導覽性的連結是幫助使用者在你的網站中尋找資料的，最好能夠一致地呈現在畫面中固定的地方，不要讓瀏覽者四處去尋找這些導覽性的連結，當然你在設計時也要注意考慮畫面的大小，不要放太多的導覽連結進去。
    
12. 提供相關資訊的連結：
    
    我們製作一個網頁通常都會有參考資料或是相關資料，大部份的使用者對於相關的資料通常也會有興趣的，提供相關網頁的連結對瀏覽者是一大幫助，應該儘量提供相關的連結，不過也不要為了湊數而隨便連結，同時應該對所提供的連結做簡單的解釋以及整理。

　

清楚地讓使用者知道系統將如何反應他的動作

瀏覽者每次按下一個連結按鍵以後，瀏覽器必須去遠端伺服器取得相關的文字、圖片或是聲音檔案，這些都很花時間，而且會打斷瀏覽者的思考，如果瀏覽者能夠在按下按鍵 (連結) 之前瞭解這個動作是什麼的話，可以讓使用者省掉一些冤枉路。

1. 網頁的內容必須用標題、簡介、重點提示等等來分層次地介紹給瀏覽者；別一股腦地拼命講下去。
   
2. 任何一個連結應該要清楚地說明它的目的：是到一個新的網頁，還是下載檔案，檔案的內容是什麼，大小有多大，網頁的內容與性質大概是什麼等等。

　

時時考慮使用者操作及資訊傳遞的效率

在網際網路上每一個使用者所能使用的頻寬差異很大，如果是透過電話線連上網路的話，很可能每秒只能傳遞數十K位元組，如果連線到國外的話很可能只有每秒數百個位元組，因此設計網頁時要時時想到如何讓使用者很有效率地瀏覽網頁的內容。

1. 別把重要的資訊藏起來：
   
   一個網頁並不是在炫耀它擁有那些資訊，而是要把這些資訊分享給瀏覽者，要仔細地設計瀏覽者目光及注意力的動線，讓重要的資訊自然地出現瀏覽者眼前，要讓他躲不掉，才能達到網頁傳遞資訊的目的。
   
2. 讓每一個網頁儘量縮短：
   
   短的網頁所需要的傳遞時間少，反應給瀏覽者的速度快，如果你有很多的文字資料要展現，儘量考慮階層式的網頁架構，影像檔案及 3D檔案也是很花時間來傳送的，可能的話用小一點、解析度較低的影像來取代，影像中不相干的景物可以將它裁切掉。
   
3. 使用小縮圖影像來取代大的影像：
   
   但是提供連結連到較細緻、解析度較高的影像上，讓使用者自己決定要不要看。
   
4. 重複使用影像：
   
   同一網站中重覆使用多次的影像通常只下載一次，所以可以重覆使用的影像儘量提昇其利用率。
   
5. 在 HTML 中設定影像標注中的 width、height、以及 alt 參數，例如：
   
   <img src=http://foo.com.tw/foo.jpg
            width=200 height=150"  alt="foo.jpg">
   
   設定這兩個參數的話，可以使得瀏覽器在還沒有透過網路得到影像之前先編排文字資料，可以讓瀏覽者先看到文字的內容；如果設定 alt 之替代文字的話，也可以在影像還沒下傳之前先看到影像的替代描述。
   
6. 使用交錯格式影像：
   
   使用交錯 (interlaced) 格式儲存的影像在下載時會分為多個階段下載，每一階段下載後其影像會變得比較清晰，瀏覽者可以在影像還沒完全下載之前就看到部分的影像，感覺起來會比一般的影像下載的快一些。
   
7. 使用 GIF 格式影像與 JPEG 格式影像的差別：
   
   對於照片影像而言 JPG 格式壓縮得比較好，檔案比較小，下載的速度也比較快，但是對於表格、文字、線條、圖形等等色彩較少，邊緣銳利的圖片來說 JPG 壓縮因為是一種全彩、有失真的壓縮，會使得圖片看起來模糊、色彩不均勻，反之 GIF 檔是沒有失真的壓縮檔案，對於這類的圖片就比較適合。

　

考慮網際網路上使用者使用不同的硬體與軟體

1. 網路上瀏覽者可能用不同廠牌不相容的各型電腦，大家雖然都有統一的全球資訊網界面，但是各自的檔案系統、編輯排版系統、影像處理系統都是不一樣的。如果考慮檔案資料、文件資料，或是執行檔下載的話，最好是提供各家廠牌電腦共通的版本，例如：文件檔可以用 PDF 檔，否則至少應該標明所下載的檔案適合在什麼樣子的機器與作業系統上使用。
   
2. 網路上有的機器是只能看英文的，有的機器是能夠看到中文的。因此最好能夠準備英文和中文的兩個版本，否則至少要有英文的基本說明。
   
3. 有的使用者的網路連線頻寬很大，有的使用者頻寬很小，在頻寬很小的網路上的使用者很可能會藉由瀏覽器所提供的功能選擇不自動下傳影像，但是沒有影像圖片的網頁有時是很無味的，如果連一些導覽按鈕都看不到的話甚至是完全無法操作的，所以如果可以的話設計者可以考慮提供幾個版本的網頁：一個有正常解析度的圖片、另一個則有低解析度的圖片、一個只有文字界面的網頁，讓使用者自己根據自己的配備來選擇。
   
4. 不同的電腦系統上可能安裝不同的字型，不同的瀏覽器上可以設定不同的字體大小，瀏覽器視窗的大小也可以由瀏覽者自己設定，這些都使得相同的網頁在不同的電腦上顯示的樣子不同。
   
   HTML 是一種動態的文件排版格式，不管瀏覽器使用多大的字體，瀏覽器的視窗有多大，文字都可以重新在視窗內編排，因此設計網頁的人不能夠假設某一段文字應該出現在視窗內的什麼地方，設計者也不應該使用絕對的字體大小、某一種特殊的字體、或是假設視窗該有多大，在設計時網頁內字體的大小可以用相對的，例如 normal size, H1, H2, …, H6, size=+1, size=-1 等等，避免用 size=4 這種絕對的方式來指定字體的大小。
   
   另外某些 HTML 編輯器讓你很方便地修改字型的種類，例如楷書，於是變相地鼓勵設計者運用不同的字型來表現網頁的內容，可是真正顯示在瀏覽者頁面上的字型是瀏覽者系統上安裝的字型，如果該系統上沒有裝你指定的字型的話就用預設的字型，如果你使用字型表現什麼效果的話使用者完全看不到，所以請避免用特殊字型。
   
   在運用表格及圖片時 HTML 可以讓你用百分比的方式指定元件的大小，這是相對於瀏覽器頁面大小的，如果你使用絕對的點數來指定大小的話，使用者視窗太小時就無法看到整個頁面，必須以捲動軸來操作。當然實際的效果也必須看頁面中要表現的內容而定，不過儘量不要假設使用者的瀏覽器視窗超過 640×480 個像點。

　

讓你的頁面看起來更舒服

1. 不要隨便更改超連結的顏色：
   
   HTML 允許網頁設計者更改頁面中超連結的顏色，包括未檢視過的連結及已檢查過的連結，有時網頁設計者更改背景顏色或是背景影像時必須一併更改連結的顏色，以便瀏覽者可以清楚地檢驗頁面上所有的連結，但是一般來說色彩視覺效果的設計常常需要一些美工的專業知識才能勝任，隨便調整的話不見得能夠達到你想要的效果，反而是對使用者造成一種負擔，使用者切換到你的網頁時所有連結的顏色都不一樣了，需要花時間嘗試錯誤、重新適應，如果一定要更改的話，至少也要讓整個網站上所有的顏色運用一致，使用者才不會無所適從。
   
2. 換列字元：
   
   HTML中換列字元是當成空白 (white space) 字元來處理的，由上二節的討論，你知道HTML是一種動態的排版語言，使用者看到的網頁內文字編排方式和設計者在檔案內看到的文字編排方式是不一樣的，尤其是換列的地方更是不一樣，因此一般為了避免換列的地方多出一個空白，造成頁面中字元間隔不均勻的現象，在 HTML 的文件中我們常常會一段話一直打到底，完全不換列，或是在每一個標點符號後面換列，來避免這個問題。
   
3. 使你的網站中各個網頁的外觀一致 (顏色及配置) ：
   
   通常我們會用 Table 或是 Frame 來配置頁面，不同的網頁中資訊的內容當然是不一樣的，但是頁面的架構是一樣的，瀏覽者可以在相同的地方找到標題、導覽的元件，而不會每到一個網頁就好像外地人，完全不知如何操作。
   
   在顏色的選用上不要太極端，黑色、暗紅色的背景給瀏覽者的感覺和明亮的粉彩色系當然是不一樣的，在你的網站上的各個網頁在色系的選取上也需要有整體性，不要變成一個大雜燴，像是一堆摔爛了的顏料罐，很多顏色雖然有刺激感官的效果，但是看久了就會麻痺，甚至會緊張，找個專家談談，別隨便使用。
   
4. 圖片和文字整體編排的方式最好一致：
   
   如果你將圖片夾雜在文字當中，那就一律如此，如是你讓文字將圖片包圍起來，在整個網頁中也要維持一致，如果你在頁面上讓圖文分離，各佔一行的話，那也需要維持整體的一貫性。
   
5. 文字對齊的方式要一致：
   
   各個段落向左對齊、置中對齊、或是向右對齊的方式必須一致。

　

強調互動性

全球資訊網的架構中雖然最主要強調的是單向資訊的傳遞，但是它也提供了雙向互動的方式，包括即時性的互動：像 CGI 與表單、JAVA 界面、以及非即時性的互動：像 e-mail 的連結，讓瀏覽者不只單方面的閱讀網頁上提供的資訊，也能夠提供一些他所知道的資訊，讓瀏覽者能夠回饋、參與網頁內資料的更新，讓瀏覽者能夠有再回來看看的動機。

1. 提供意見討論的佈告欄或是留言板：讓眾多瀏覽者可以針對網頁的內容或是論點來抒發自己的看法，眾多瀏覽者可以藉由此一網頁相互溝通心得，可以由各種不同的角度來探討同一件事，這是瀏覽者所以喜歡常常光顧你的網頁的一大動機。
   
2. 如果可能的話，可以請一些相關的專業人士評論你的網頁，做為網頁的序言，甚至邀請他們定時在留言板上提供看法，或是主持意見專欄。
   
3. 提供電子郵件地址，鼓勵使用者提出意見。
   
4. 提供簡單的評量表格，針對網頁的編排、資訊內容的合適度、深度與廣度請瀏覽者做一評論，並提供目前的統計資料。
   
5. 可以根據使用者的意見，整理所謂的 FAQ (Frequently Asked Questions) 來提供使用者參考一些綜合的問題與解答。

　

維護你的網頁

網頁是資訊傳播的工具，但是資訊是需要小心去維護、更新的，大家都知道去瀏覽一個維護得很好的網頁就像是去參觀一個乾淨整齊、百花齊放的花園一樣，是很賞心悅目的，同時你在引用此網頁提供的資訊時也比較能夠放心，因此一個網頁設計出來以後必須經常性的去維護它、去灌溉它，網頁是活的，是會慢慢成長的，眾多瀏覽者的意見與互動會激發出智慧的火花，能夠讓網頁的內容茁壯，也能吸引更多的使用者前來。

1. 謹慎地檢查打字：
   
   不要有打字的錯誤或是語法和詞語的誤用，最好請一個人仔細地閱讀過一遍
   
2. 測試網頁呈現的效果：
   
   在不同的網路連線情況下表現如何?  (反應時間如何? ) 在多人同時使用的情形下表現如何? 如果瀏覽者使用不同的瀏覽器，甚至純文字的瀏覽器效果如何? 使用者視窗的大小會不會影響到資訊的呈現? 在不同的作業平台下表現如何?  (在純英文的 UNIX 系統上表現如何?
   
3. 不要濫用 "建構中 (Under Construction) " 的標示：
   
   很多人在建構網頁的時候只要覺得還有一些資訊沒有補齊的時候，或是怕別人覺得網頁的內容很空洞，就乾脆放一張會動或是不會動的圖畫寫著 "施工中" 或是 "建構中"，瀏覽者現在如果在網頁上看到這樣子的標示，通常都有一種危險不要擅闖的意念浮現出來，可能會意識到這個網頁的資訊內容也許不完全正確，也許網頁的主人是新手，也許網頁是空洞的連結雜燴而已。別再這樣用了，大方地說你預定何時完成嘛，現在所有的公共工程都有這樣子的標示喔! 或者乾脆就說短期內不打算進行建置，需要相關資料者請 email 或電洽 ×××。
   
4. 定期檢查網頁中的連結：
   
   全球資訊網是一個變動很大的資料庫，很多連結一小段時間後都會改變，最主要是因為網站的資源可能在持續的擴充下無法應付而必須將某些網頁分家，或者也可能是網路負荷、伺服器負荷的問題，也可能是由小而大，成立新的公司了…，不管怎樣，請用一些軟體來檢查這些連結，例如FrontPage，或是某些網站也提供這樣子的服務，或是乾脆你自己一個一個的檢查。
   
5. 定期更新你的網頁：
   
   在你的網頁上留下最近更新的時間，已更新的次數，下一次預定更新的日期甚至保留過去變動的資料，在一個獨立的回顧網頁中讓瀏覽者比對，在定期更新的過程中你可以在更新的資料前後做一些醒目的提示，例如： "New" 圖示，來提醒瀏覽者注意。
   
6. 如果你運用一個網頁來宣布事項的話，請務必將刪除過期無效的資訊。
   
7. 如果你在網頁上放置一些讓使用者下載的執行程式或是含有巨集的文件時，請注意定時掃毒：
   
   不要讓你的網頁成為電腦病毒寄居的場所。

　

注意一些 HTML 的小細節

1. 如果你自己編寫 HTML 文件的話，請在適當的地方加上註解：
   
   HTML 的語法很簡單，可是在複雜多層的頁面設計下，HTML 文件是很難看懂也是很不容易維護的，請在適當的地方加入註解，例如：
   
   </UL><!-- end of level 2 list>
   
   </TABLE><!-- end of outer table>
   
2. 請考慮不同的瀏覽器功能的差異：
   
   HTML 是一個不斷在演進的標注語言，有些瀏覽器可能上市一兩年後就看不懂新的 HTML 的語法了，例如 Cascaded Style Sheet，有些瀏覽器可能不支援 JAVA Script 或是 Active X 元件，請在適當的地方加上保護的措施，例如：
   
   <SCRIPT LANGUAGE="javascript">
   
   <!---
   .....
   //-->
   </SCRIPT>
   
   對於 HTML 的瀏覽器而言，一個看不懂 TAG，例如：<SCRIPT…> 對於不支援 SCRIPT 的瀏覽器而言，是完全沒有意義的東西，也不會影響到文件的編排；同樣地一個看不懂的參數，例如：<IMG SRC=…WIDE=20 HIGH=40>中的 WIDE 及 HIGH 就是沒有意義的參數，Cascade Style Sheet 就是以這種方式來擴充 HTML，因此有用到 JAVASCRIPT 或是 CSS 的網頁在沒有支援JAVASCRIPT 或是 CSS 的瀏覽器上可能只是失色，也可能根本失去了基本功能，在設計時請務必考慮此項差異。
   
   
3. 當連結 <A> TAG 和別的 TAG 巢狀地使用時，<A>TAG 請放在最內層。
   
4. 請用相對的字體大小。
   
5. 請用一般的字型。
   
6. 請用相對的方式來指定表格的寬度及高度。
   
7. 請在圖片內指定 width 及 height 參數。