1.3　網頁制作中的技巧

在制作網頁的過程中，需遵循一定的原則和技巧，以提高網頁的質量，使網頁在一定程度上有更好的視覺和體驗效果，這也是一位網頁設計師所必須具備的相關知識和技能。

1.3.1　網頁基本元素的標準及使用技巧

大部分的網頁都有Logo、導航欄、Banner、按鈕、文本和圖像等網頁元素，這些元素又稱為網頁的基本元素。下面對其中幾個主要元素的相關標準及使用技巧分別進行介紹。

1．Logo

Logo（網站標識）一般由圖案和文字組合而成，用于宣傳和各站點間交換鏈接。它是整個網站的商標，傳達著網站的理念和內涵。Logo的創意通常來源于網站的名稱，當然有的企業原本就有自己的Logo，只要照搬就可以了。Logo有多種表現形式：簡潔的字符、圖形，復雜的文樣圖案，又或是卡通形象，不拘一格。如圖1-17、圖1-18所示。

2．導航欄

導航欄從本質上講是一組超級鏈接， 目的是幫助訪問者快速、準確地瀏覽網站，因此在設計時務必要使導航欄簡潔、容易上手。在通常情況下，導航欄都會放置在網頁的頂部或者是左側，對于信息量較大的網站，還可以添加一個擴展導航欄。導航欄的形式也是多樣的，當然出現的方式可以由設計師來決定，可以是光標懸停式導航欄，也可以是動態的，如用腳本編寫的導航欄或Flash導航欄。圖1-19所示為橫向導航網頁，圖1-20所示為縱向導航網頁。

圖　1-19

　圖　1-20

3．Banner

廣告Banner是指網站中的橫幅廣告，Banner的文字應該簡潔明了，用來搭配文字的圖片不能太復雜，這樣才能夠突出主題。盡量使用筆畫粗壯的文字，以避免造成凌亂的感覺。較少的顏色可以減少圖片所占的空間，同時注意要將靜態圖片都存為JPG格式的。現在的廣告Banner大部分是由Flash制作的，這樣不僅增強了視覺效果，同時也節省了大量的存儲空間。

（1）全尺寸帶導航欄Banner。在最早（1997年）公布的標準中，這種類型Banner的尺寸是392×72像素。現在它已經隨著頁面的變化出現了更多的尺寸，比如734×305像素、1002×266像素等。但無論尺寸如何改變，只要是在網頁中橫向所占位置和整個頁面寬度相同，就被稱為全尺寸。如圖1-21所示。

（2）全尺寸的Banner。全尺寸Banner是最為常見的一類Banner，通常出現在網站的中間部分。這一類Banner可以用來分割大面積的文字，有調整、修飾頁面的作用，它的標準尺寸為468×60像素。當然這一尺寸也可以由設計師進行改變。如圖1-22所示。

（3）半尺寸Banner。半尺寸Banner又叫做半欄廣告，標準尺寸為234×60像素。它們的長度一般情況下相當于頁面寬度的一半左右，彈出廣告也多采用這種尺寸。如圖1-23所示。

1.3.2　頁面風格技巧

任何一個網站都應該具有自己的特色，都要根據主題和內容決定其風格與形式，因為只有形式與內容的完美統一，才能達到理想的宣傳效果。網站的風格主要是從版式設計、色調處理、圖片與文字的組合形式等方面體現出來的。要學會根據不同的主題，設計出不同的風格。

1．平面風格

這是網頁設計中最常見的一種風格，大多數的網頁都采用這種樣式。它以二維設計為范本，側重于構圖和色彩。如圖1-24所示。

　

圖　1-24

2．矢量風格

矢量圖片通常體積較小，而且無論是放大還是縮小，圖像都不會失真，因此用這種圖片制作出來的頁面瀏覽和刷新的速度都比較快。但是矢最圖片也有缺點，就是不能逼真地表現事物的真實效果。如圖1-25所示。

3．像素風格

這一類的網站比較少見，國內的網站中很少有應用這一技術的。 目前像素畫制作技術以日本和韓國較為成熟，它的特點是輪廓清晰、色彩明快。應該說像素風格的網站為互聯網增添了一道靚麗的風景線。

4．三維風格

利用折疊、凹凸的處理手法，使頁面產生浮雕等三維效果，可以使頁面顯得更豐富、更有深度，多層次、全方位地將整個頁面的內容展現給訪問者，給人以強烈的視覺沖擊。這種設計風格通常用于游戲、音樂、影視，以及部分個人網站的頁面。如圖1-26所示。

5．大膽留白

版面留白，是為版面注入生機的一種有效手段。大膽地留出大片空自，是良好網頁版式設計意識的體現。恰當、合理地留出空白，能傳達出設計者高雅的審美趣味，打破死板呆滯的常規慣例，使版面通透、開朗、跳躍、清新，給訪問者在視覺上造成輕快、愉悅的刺激，也因此得到松弛、小憩。當然，大片空白不可亂用，一旦出現空白，必須有呼應、有過渡，以免造成版面空泛。如圖1-27所示。

6．頁面缺損

頁面缺損同頁面留白的原理是相同的，也是力求在不平衡中展現視覺平衡。它們的不同點在于，缺損并不是為了引起人的遐想，它只是一種表現手法，通過這種手法可以在過于豐滿的頁面中留出空隙，給頁面一個喘息的空間。

1.3.3　網頁構圖技巧

1．點構圖

點具有可以使視覺集中的特性，具有強烈的視覺吸引力。它經常以各種形象出現在我們的視線中。它的位置、聚集、發散、重疊、交錯……能夠給人帶來不同的感受。通常沒有單獨的點構圖，它總是和面密不可分的。如圖1-28所示。

圖1-28的構圖方式是一個散點構圖。幾個點看似無序而實則有序的排列，給人一種隨意的順序感。點的不同形態會給人造成不同的視覺感受，位于頁面正中的點集中了瀏覽者的全部視線，幾乎沒有偏轉的余地。

2．線構圖

線在空間中具有方向性和運動性。直線給人的感覺工整、堅定、直爽；曲線給人的感覺則柔和、流暢、溫婉。將不同形式的線應用到頁面中時，要注意它們之間的關系。另外，線也很少單獨構圖，因為線粗到一定程度也會形成面。如圖1-29、圖1-30所示。

　

圖　1-29

3．面構圖

面是點的放大、集合，或是由線的運動產生的。與點和線相比，面具有更強的視覺效果和表現力。面無處不在，無論它是以何種形狀出現的，而且面也是所有網頁中使用最多的一種表達方式。無論是直面，還是曲面，在視覺沖擊力方面，它們都強于點和線。如圖1-31所示。

　

圖　1-31

4．綜合構圖

點、線、面是視覺的最基本元素，三者具有不同藝術特征。單獨運用其中之一都會顯得比較單調、乏味，因此在頁面中它們通常是共同出現的。上面的例子并不是單獨使用這三種元素中的一種，只是某一種元素更為明顯。但在設計時要注意，千萬不能將這些元素隨意擺放，否則會讓訪問者感覺一團糟。如圖1-32所示為綜合構圖網頁。

1.3.4　色彩使用技巧

色彩能夠直接給人強烈的視覺沖擊，要很好地表現一個網頁，色彩搭配非常重要。色彩應用原則是：總體協調，局部對比，在同一頁面中可以使用相近色來設置頁面中的各種元素。制作網頁時可使用如下用色技巧。

① 在制作網頁時，應首先確定整個站點的主色調。確定主色調需從網站的類型以及網站所服務的對象出發。如創建校園類站點可以選用綠色；政府類站點可以選用紅色。

② 在同一頁面中，要在兩種截然不同的色調之間過渡時，需在它們中間搭配灰色、白色、黑色，使其能夠自然過渡。

③ 網頁中的文字與背景要求較高的對比度，通常用白底黑字，淡色背景、深色字體。

④ 如果有一些需要突出顯示的內容，則可以采用一些鮮艷的顏色來吸引瀏覽者的視線。