http://www.piece2ec.com.tw/News.asp?Id=72

什麼是網頁設計

網頁設計是指使用標識語言（markup language)，通過一系列設計、建模、和執行的過程將電子格式的信息通過網際網路傳輸，最終以圖形用戶界面（GUI）的形式被用戶所瀏覽。

簡單來說，網頁設計的目的就是產生網站，什麼是網站呢，就是伺服器內的一系列網頁的組合，終端用戶發出請求後，伺服器通過傳輸特定的網頁向用戶傳輸所需的信息。簡單的信息如文字，圖片（GIFs， JPEGs，PNGs）和表格，都可以通過使用HTML/XHTML/XML放置到網站頁面上。而更複雜的信息如vector graphics,動畫，視頻，聲頻則需要外掛程式程序例如Flash, QuickTime, Java run-time environment,等等，這些外掛程式程序也是通過HTML/XHTML/XML植入網頁的。

隨著瀏覽器和W3C標準一致性的改善，XHTML/XML（可擴展標識語言）與CSS（層疊樣式表）共同用作網頁內容的設計已經被廣泛的接受和使用。最新的標準和建議則是朝著瀏覽器的能力擴充和改善發展，使之能夠不需要外掛程式程序也能夠給用戶傳輸多媒體信息和更多的選擇。

通常，網頁可以分為靜態網頁和動態網頁。

靜態網頁頁面上的內容和格式一般不會改變，只有網管可根據需要更新頁面。

動態網頁的內容隨著用戶的輸入和互動而有所不同，或者隨著用戶、時間、數據修正等而改變。網頁上的內容也可以由用戶通過使用客戶端描述語言(JavaScript、JScript、Actionscript）來改變。當然更普遍的是由伺服器端的描述語言（Perl、PHP、ASP、JSP、ColdFusion等)進行編譯，從而對動態網頁的內容進行改變。無論是客戶端還是伺服器端的改變都需要使用較為複雜的應用軟體。

隨著信息技術的更加專業化，越來越明顯的傾向表明，網頁設計和網站的發展會逐漸成為兩個不同的領域。

網頁是藉助於美術構圖與程序互動、動畫等方式向大眾推廣相關信息的媒體，所以網頁設計包括了幾大部分：

版面構圖（見平面設計）
程序開發（見網頁應用程式）
網站內容管理（見內容管理系統、資訊架構學）
下面將會介紹網頁的版面構圖的技術為主

1.HTML
超文本標記語言（Hypertext Markup Language） 網路的資訊越來越多，網站須有引人注意的外觀，才能增加人次，達到宣傳的目的。人們開始注意網頁的外觀，HTML亦因此變得更複雜、更具彈性。表格，原本是更整齊展現資料的工具，變成了排版工具。CSS的出現令以表格為基礎的外觀設計被視為過時。伺服器方面的技術亦改變了網路的構造，使用者可以選擇其瀏覽方式、外觀。Flash的出現為設計師和媒體創作人開創了新路。除了引人的外觀之外，亦有一個重要的考慮點：網路無障礙，即使用者能否容易讀取資訊。

2.XHTML
由於XML的可構造性，XHTML 1.0在2000年1月26日成為W3C的推薦標準，即HTML將會隨著時間而淘汰。

3.流動性 對 固定排版
大部分網站設計師原本是每處地方都有絕對限界的平面設計師。可是在網頁瀏覽器，卻不能控制某些因素，特別是瀏覽器的闊度。

有些設計師將其網頁定義在固定大小的表格中，每部分的寬度都有精確的數據，一般使用確定的值，這就是固定排版了。然而有人認為這不好，因為這種設計罔顧使用者的設定，他們使用流動性排版，網頁的寬度使用百分比定義寬度，因此網頁會依瀏覽器的螢幕解析度而改變。 但是流動性的排版對於日益增大的螢幕就不一定合適，因為人的眼睛進行橫向閱讀時，過長的文字會增加閱讀的困難度，反之大約在十幾個字即換行的文章，瀏覽者會更好吸收其內容。

4.Flash
Adobe Flash這套軟體能夠很輕易做到一些華麗的圖像效果，亦可以進行編程，因此近年來出現在不少網站上。有些網站更以Flash完全代替HTML。

可是Flash帶來的問題不少：

搜索引擎不能記錄Flash的內容
盲人不能透過螢幕閱讀機來取得其內容
所以大部分人都不會以Flash為主要設計，Flash通常成了首頁的開場畫面或網站內的小遊戲。

5.兩種設計模式
從前一般網頁都使用表格進行排版設計，這樣作的優點在於設計製作速度快，尤其在可視化網頁編輯器，如Microsoft FrontPage中，這樣設計顯得直觀而方便，然而這讓越來越複雜的版面需要許多不斷嵌套的表格設計，致使網頁代碼變得冗長複雜，使文件體積增大，且不容易被搜索引擎查找。同時，這樣做也不利於大型網站的改版工作。

於是隨著主流網頁瀏覽器對CSS的支援度提高，近年來興起了一種新的網頁設計模式。被業界稱為「網頁重構」的革命，其核心在於分隔網頁的風格和內容(en:Separation of style and content)，指標記語言(如HTML,XML)負責定義頁面的內容，但不可以定義任何涉及網站外觀(風格)的東西。而網站風格就由另外的CSS檔案負責。在排版方面，新的模式提倡使用由CSS定義的DIV進行頁面排版，而將表格還原為排列數據的最初功能。這種模式有很多好處，例如可以協助搜尋引擎查找網頁的情況，減小文件提及提高瀏覽速度，且由於一個CSS檔案可以控制多個頁面，這也給改版帶來了很大方便。

由於W3C是該模式極力的倡導者，於是業界鑒定網頁是否符合W3C標準，就可以在W3C網站自動檢測該網站的情況。

這種模式也有缺點，其中一個弱點就是，在不同瀏覽器出來的效果會有分別，但這種情況主要是由於微軟的Internet Explorer對CSS文檔的支持有眾多缺陷造成的。另一方面，開始設計CSS時，並不能清楚看到目標，因此顯得不直觀。

來源：維基百科，自由的百科全書
 

參考文獻：

李俊宏（1995）。網頁設計原則的研究一以大專院校首頁設計為例。雲林技術學院程設計研究所碩士論文，未出版，雲林。

邱柏清.(2004).網頁介面愉悅行之研究，國立台灣科技大學設計研究所碩士論文。

許峻誠、張恬君、莊明振.(2001).網頁風格認知與設計要素之探討-以企業網站首頁為例，第六屆設計學術研究果研討會論文集。

Davis, F. D.; Bagozzi, R. P.; Waarshaw, P. R. (1989), User Acceptance of Computer Technology: A Comparison of Two Theoretical Models, Management Science, 35(8), 982-1003.

Dou, W. (2004), Will Internet Users Pay for Online Content, Journal of Advertising Research, 44(December), 349-359.

相關文章

如何提升網站的瀏覽率（四）網路行銷及網站規劃的持續改進
如何提升網站的瀏覽率（三）網站內容規劃及應用
認識 ActionScript 3.0 的優點
淺談搜尋引擎行銷
2010網頁設計趨勢解剖

最新文章

網路開店結合Google關鍵字搶佔電子商務市場
網站的意義與網站設計的架構方式
SEO關鍵字-什麼是網站排名
SEO關鍵字常用術語〈三〉
SEO關鍵字常用術語〈二〉