1.2 網頁設計知識

在網頁設計中，網頁創意設計是非常重要的環節，它可以表達網站主題，展現優美的視覺效果，與平面設計類似，屬于視覺藝術設計的范疇。網頁設計要具有一定的獨創性，符合用戶的審美情趣，同時還要兼顧突出主題，滿足表達內容和使用便捷的要求。

色彩、網頁設計元素和頁面布局是網頁創意設計的三個重要組成部分。

1.2.1 色彩

1. 認識色彩

自然界中有很多色彩，色彩可以分為非彩色和彩色兩大類。非彩色包括黑、白、灰三種顏色，其他色彩都屬于彩色。任何色彩都具有色相、明度和純度三種屬性。

色相是色彩的名稱，是一個色彩區別于另一個色彩的主要因素。通常用色環來表示色彩系列，基本色相為紅、橙、黃、綠、青、藍、紫，如黃、綠表示不同的色相。如果對同一色相調整不同的亮度或純度，就會產生搭配效果良好的色彩。

明度也稱為亮度，表示了色彩的明暗程度，明度越大，色彩越亮。如果頁面采用鮮亮的顏色，就會使人感覺絢麗多姿，生機勃勃，如兒童類、購物類網站；反之，明度越低，色彩越暗，如一些游戲類網站，充滿神秘感。

純度是指色彩的鮮艷程度，又稱飽和度。色彩純度越高的顏色越鮮艷，純度越低的顏色越灰暗。

2. RGB色彩模式和網頁安全色

自然界色彩繽紛，但每種色彩都可以用紅（R）、綠（G）、藍（B）3種色彩按一定的比例調和而成，這三種色彩被稱為光的三原色，如圖1-2所示。在Dreamweaver中，可以在顏色對話框中，通過設定紅（R）、綠（G）、藍（B）三種色彩值，得到任何其他顏色，如圖1-3所示。

圖形圖像軟件可以處理高達上千萬種顏色，但有些顏色會由于環境條件的變化而變化，在不同操作系統和瀏覽器中，同一種顏色也許會顯示出不同的明度或者色相效果。

為此，將在不同操作系統和瀏覽器中具有一致顯示效果的顏色定義為網絡安全色，網絡安全色有216種。在網頁設計軟件中，任何顏色都有一個六位的十六進制編號，如#D6D6D6，任何由00、33、66、99、CC或者FF組合而成的顏色值，都表示一個Web安全色，如圖1-4所示。

3. 利用圖像配色

在網頁設計中，可以根據頁面創意的需要，選擇一個色彩效果好的彩色圖片作為色彩源，從圖片中選取顏色作為網站設計的主題顏色，具體方法如下。

首先，利用圖像軟件的吸管工具選取一個或若干個色彩，取得色彩數值；然后，在網絡安全色中匹配相同或相近的顏色數值，作為網頁的主題顏色；最后可將這些顏色應用于網頁設計中，完成色彩的搭配。如在金色俱樂部網站中，可以選取藍天、草地和白云的顏色作為主題色，進行網站設計，如圖1-5所示。

1.2.2 網頁設計元素

盡管網頁千差萬別，但網頁的基本構成元素是固定的，包括網站logo、網站banner、導航條、圖像、動畫和背景等。

1. 網站logo

網站logo也稱為網站標識，由文字、符號、圖案等元素按照一定的設計理念組合設計而成，它是整個網站獨有的形象標識。在一些企業網站中，企業標識可以作為網站標識。在正規的網站中，網站logo是必備元素。

一般地，將網站logo置于頁面比較醒目的位置，如左上角。在網站的推廣和宣傳中，可以突出網站特色，樹立良好的網站形象，表達網站內容精粹和文化內涵，如圖1-6、圖1-7所示。

2. 網站banner

網絡banner有各種規格和形式，可以稱為旗幟廣告，橫幅廣告和條幅廣告等。網站banner一般位于頁面的頂部，既可以表達和突出網站創意和形象，也可以傳達某種特定信息。在商業網站中，網站banner是一種網絡廣告形式，向用戶傳達了特定的產品和服務信息。

網絡banner通常是由GIF動畫、JPEG圖像或Flash動畫完成的，如圖1-8所示。

3. 導航條

導航條是網站設計中最重要的元素之一，既表現了網站的結構和內容分類，又方便了用戶對網站的瀏覽。

一般地，導航條在網站中各個頁面中的位置相對固定，通常位于頁面的左側、上部或下部，如圖1-9、圖1-10所示。

在一些較大型的網站中，可能會有多個導航條，方便用戶瀏覽。

導航條在設計風格上既要與其他設計元素保持一致，還要凸顯出在頁面中的重要地位。同時，不同頁面中的導航條或一個頁面中不同位置的導航條也要相互協調。

4. 圖像

圖像是網頁設計中最常用的設計元素之一，具有直觀和色彩豐富的特點，可以傳達豐富信息，凸顯創意風格。在網頁設計中，通常使用GIF、JPEG和PNG等三種圖像格式。GIF用于畫面簡單、細節信息少的圖像，如背景圖片，可以減少圖像文件的大小；JPEG用于畫面較為復雜、細部信息多的圖像；PNG用于有透明背景的圖像。

在網頁中的圖像有兩種來源，一種是獨立完整的圖像，另一種是在Firework或Photoshop中使用切片功能處理后的分割圖像。

5. 動畫

網頁設計中常用的動畫有GIF動畫和Flash動畫。GIF是圖像動畫，一般用于對動畫效果要求比較簡單的場合，可以由Firework/Photoshop制作完成；Flash是圖形圖像動畫，一般用于對動畫效果要求較高的場合，由Flash專業軟件制作完成，如圖1-11所示。

6. 背景

在網頁設計中，背景處于從屬地位，起到輔助作用。背景既可以是純色背景，也可以是圖像背景，GIF格式和JPEG格式均可。使用不當可能喧賓奪主，使用合理能夠增強頁面的整體創意效果，如圖1-12所示。

1.2.3 頁面布局

網頁設計元素是組成網頁的基本要素，將這些網頁元素在頁面中進行組合和排列稱為頁面布局，頁面布局既要滿足頁面的結構布局需要，還要符合大眾藝術審美情趣。

1. 結構布局

在網頁設計中，結構布局是根據設計元素在網頁中位置分布特點進行分類的，常用結構布局包括“國”字型、拐角型、上下框架型和左右框架型等類型。

“國”字型布局的突出特征為中間部分為主題內容，左右兩側有小側欄，上部為網站logo、網站banner和導航條等，下部為頁腳導航條和版權信息等，這種方式在大型網站中應用較多，頁面布局稍顯復雜，如圖1-13所示。

拐角型布局與“國”字型布局相比有所簡化，上部為網站logo、網站banner和導航條，主題內容在一側，另一側有小側欄，下部為版權或其他信息等，如圖1-14所示。

上下框架型布局較為簡單，上部為網站logo和導航條等，中間部分為主題內容，底部為版權信息及頁腳導航條，一般用于小型網站，如圖1-15所示。

左右框架型布局也較為簡單，一般左側為導航條，右側為主題內容，如圖1-16所示。

2. 藝術布局

在網頁設計中，不僅要考慮內容欄目和結構布局，還要從審美的角度進行頁面設計，使網頁更具有藝術感染力。常用的平面藝術設計原則包括分割、對稱和平衡等。

分割是把整體分割成部分，可以使頁面效果生動活潑，如圖1-17所示。對稱則較易理解，不再舉例。

在網頁設計中，有些造型沒有明顯的布局結構，頁面中設計元素呈現不規則分布狀態。利用平衡原則，使各設計元素達到一種視覺平衡效果，產生藝術美感，如圖1-18所示。

總之，頁面設計不要拘泥于固定的結構布局和藝術設計原則，而是根據內容和欄目編排要求以及客戶審美需求，將各種典型結構靈活運用，將藝術設計原則融會貫通，銳意創新，創作出結構布局合理、頁面精美的網頁。