關于網頁設計與制作技術的探討

摘要:網頁設計與制作有自身的原理和方法，該文根據網頁設計的特殊性，結合實際的建網經驗，引出了網頁界面設計原則。并從網頁界面的體系結構、頁面布局介紹了網頁制作技術，最后深入分析了網站的統一版面技術、頁面元素定位技術及交互操作技術。

關鍵詞:網頁設計;網頁制作;網頁設計原則;網頁體系結構

中圖分類號:TP393文獻標識碼:A文章編號:1009-3044(2009)26-7376-03

Disscussion on the Website Design and Production Technology

ZHOU Qi

(Computer Network Management Center of Chinese People's Armed Police Force， Beijing 100089， China)

Abstract: The web design and production have their own principle and methods.According to the Specificity of web design and the actual experience of building network， this article draw forthes a web interface design principles.Besides，this article introduces the Website production technology from the Web interface architecture and page layout.At last，this article analyzes the Unified layout techniques of website， page element positioning technology and technology interoperability.

Key words: website design; website production; web design principles; page architecture

網頁設計與制作的用戶界面作為與用戶打交道的門面，它在網站開發平臺中占有非常重要的地位，因為它直接面對的是廣大瀏覽用戶。由于網頁設計是計算機科學的一個專門研究方向，有其自身的原則、標準和方法，本章從簡要介紹網頁的一般設計原則和方法出發，結合網頁開發的特殊性，系統闡述網頁開發平臺界面的開發和實現。

1 網頁的設計原則

網頁的設計除了要掌握頁面設計的一般原則外，還要把握其特殊性，因為網頁的主要功能是向瀏覽者提供信息，所以網頁設計和其它應用軟件設計存在一定的差異。總的來說，網頁設計是一項既簡單又復雜的工作。說其簡單，是因為設計者只要遵守一項原則就行，那就是:設計者的設計應該增強而不是減弱網頁所要提供的信息，不可喧賓奪主。說其復雜，是因為網頁設計要考慮到很多問題的方方面面，需要有許多靈感和技巧在其中。

下面根據頁面設計的一般原則，結合網頁開發平臺的實際情況，認為網頁開發設計應遵循以下基本原則:

1) 統一的風格

風格有三大特點:抽象性、獨特性、人性化。

抽象性指網頁的整體形象給瀏覽者的綜合感受。這個“整體形象”包括站點的CI(標志，色彩，字體，標語)、版面布局、瀏覽方式、交互性、文字、語氣、內容價值、存在意義和站點榮譽等等諸多因素。

獨特性指本網頁不同與其他網頁的地方。或者色彩，或者技術，或者是交互方式，能讓瀏覽者明確分辨出這是你的網頁所獨有的。例如新世紀網絡的網頁是黑白色的，網易壁紙站的特有框架，即使你只看到其中一頁，也可以分辨出是哪個網站的網頁。

人性化是通過網頁的外表、內容、文字、交流可以概括出一個站點的個性、情操，可以用人的性格來比喻網頁。

2) 良好的交互

在網頁設計中，用戶通常根據所提供的交互方式進行瀏覽或操作，設計者在設計網頁的頁面時，應始終考慮如何提供良好的交互性:如主頁的界面設計對瀏覽者來說是否具有吸引力;是否可以更好地引導瀏覽者訪問站點;是否能保證用戶簡便、快捷、準確地操作網頁;是否能為用戶提供有效的幫助和出錯信息;所創建的網頁是否更加符合瀏覽者的需要。網頁的交互操作主要集中在網頁的多維超鏈接空間和網頁的提交操作中。

3) 視覺效果

視覺效果指用戶在開始打開網頁時的第一印象，好的網頁能讓瀏覽者產生強烈的視覺沖擊，給瀏覽者留下深刻的印象。所以對于網頁來說視覺效果是相當重要的，它主要體現在網頁的色彩搭配、字體設置和排版結構上。

第一，網頁的色彩具有精神價值，對人的心理影晌有時是直接刺激，有時是間接聯想。設計者做到有針對性合理的用色，來體現網站適應人的心理需求和特色十分重要。那么如何搭配色彩來表達網站的內涵?色彩總的應用原則應該是“總體協調，局部對比”。也就是說網頁的整體色彩效果應該是和諧的，只的局部小范圍可以有一些強烈色彩對比，它包括網頁的背景、文字、圖標、邊框、超鏈接等。首先，網頁要有主色調，以確定網站的總體基調，充分利用色彩的象征性、職業的標志色、冷暖的感覺和時退的效果來展示網站的藝術內涵和文化品位。其次，網頁的顏色搭配最好不要超過3-5種，網頁的前文和背景的色彩對比要盡量大，特別不要采用花紋繁雜的圖案作背景以便突出主要文字的內容。

第二，網頁的字體設置包括字體的樣式、效果和大小。選擇貼切的字體有助于表達網頁的內涵。對于網頁的字體設置通常歸納以下幾點內容:一是不要使用超過3種以上的字體。字體太多則顯得雜亂，沒有主題。二是不要用太大的字。因為版面是寶貴有限的，粗陋的大字體不能帶給訪問者更多信息。三是不要使用不停閃爍的文字。四是原則上標題的字體較正文大，顏色也應有所區別。

第三，網頁的排版結構即網頁的版面布局。版面是瀏覽器看到的完整頁面，而布局指以最適合瀏覽的方式將圖片和文字等內容排放在頁面的不同位置。目前網頁版面布局主要有:“T”結構布局、“口” 型布局、“三”型布局、對稱對比布局和POP布局。經分析、比較這些布局，得出在除了網頁標題部分和結尾部分，網頁中間的主體部分一般采用1: 2、2: 1或1: 2: 1的結構，這些結構都方便地、有條理地組織了網頁的信息。當然，這并不意味著一定要采取這些組織結構，只要能夠合理地組織信息、便于交流，采用其他更為靈活的結構方式也是可以的。

2 網頁體系結構的設計

網頁設計平臺可以運行于任何的瀏覽器。相應的用戶界面需要同時考慮微軟的IE瀏覽器和網景的Netscape瀏覽器，同時用戶界面也需要符合這些瀏覽器的標準。從設計的角度，把網頁開發平臺用戶界面劃分為兩個層次:用戶界面元素的設計和交互操作的設計。

2.1 用戶界面元素的設計

用戶界面元素是指一些具有特定功能和操作方式的可視化圖形對象。在不同的應用系統中，有不同的用戶界面元素。在瀏覽器中，用戶界面元素包括:瀏覽窗口、圖形圖像、表格、鏈接、框架、表單、按鈕、對話框等。用戶界面元素設計的內容包括采用哪些界面元素、界面元素的定制、界面元素的如何布局以及界面元素的管理等。

2.2 交互操作的設計

交互操作設計是指用戶如何通過輸入設備和各種界面元素，實現人機交流信息的目的。由于網頁開發平臺是在WWW瀏覽器下運行的，交互的過程是通過表單塊提交操作或鏈接方式來完成的，即用戶通過鼠標和鍵盤在界面元素上觸發相應的事件，軟件接收到事件后，作相應的處理，然后將結果通過界面元素或其他途徑反饋給用戶。交互設計的關鍵在于如何利用各種界面元素，定義自己的交互操作規范并進行管理。

2.3 網頁布局的設計

網頁開發平臺的頁面布局總體上遵循了上面所介紹的設計原則。通常情況下，根據網頁開發平臺的整體組織結構，可以分四類頁面:首頁的頁面布局、后臺管理頁面布局、導航主題頁面布局和一般消息頁面布局。下面以個人網站為例，分析各類頁面的布局設計:

1) 首頁布局

首頁的整個布局可以采用“三型”結構，而中間的主體部分可以考慮采用比較清晰簡潔的結構。網頁主色調則根據網站的內容，選擇合適的顏色，不易采用太過于鮮艷的色調。此外，任何網頁均有標志圖片log，可放在左上角，右上角則放置整個網站的導航欄，版權信息通常放置在首頁的底部。

2) 后臺管理布局

后臺管理的頁面布局可以采用“T型”結構，用框架把整個瀏覽窗口分割成三部分，上面是后臺管理的標題及標志圖片，下面的左邊是后臺管理的集中菜單，采用outLook風格，右面顯示的是各菜單要完成的任務。

3) 導航主題布局

導航主題頁面的布局可以采用與后臺管理頁面類似的“T型”布局，用框架把整個瀏覽窗口分割成三個部分，上面為導航欄和網站登錄模塊，下面左邊為所選擇導航主題的第二層主題或內容列表，右邊為相應的網頁內容。導航主題頁面的結構可以采用樹型的分層次結構模型，不但有利于動態管理，而且也有利于瀏覽者對各種主題內容的訪問。

4) 消息頁面布局

消息頁面布局通常比較簡法，由上、中、下三部分組成，即采用“三型”結構，首部是網站的標志圖，中部是消息的主體，包括導航條、標題和內容，標題的顏色可以選擇采用棕紅色的大字體，起到醒目作用，正文采用默認的黑色小字體，尾部是版權。

3 網頁的制作技術

3.1 網頁統一版面技術

由于網站中的網頁要求有統一的風格和良好的視覺效果，即要求網頁有統一的版面，由于級聯格式頁(CSS)技術能集中管理WEB站點的格式元素(字體、背景、文本、邊界和清單)和定義全局的版面格式，所以在我們的網站設計中大量地應用了該種技術。

為使網頁開發平臺利用CSS技術統一風格，實現版面設計，在頁面套用CSS技術不是用直接法或導入法，而是用了鏈接CSS文件法。其方法如下:當多個網頁頁面采用統一的風格需要套用CSS文件時，首先需要建立CSS格式頁。CSS格式頁文件的內容與普通的HTML文件相同，都是一般的文本文件，只是擴展名為CSS，在CSS格式文件中，不需要用