1.1 客戶需要我們提供什么

一個成功抓住用戶“眼球”并且能夠帶來經濟效益的網站，必須以優秀的設計理念為前提，然后輔之優秀的制作來完成。好的設計是網站的核心和靈魂，是經過感性思考與理性分析相結合的產物，設計任務決定設計方向，設計的實現依賴于網頁的制作。

網頁設計中最重要的部分，并非體現在軟件的應用上，而是通過對網頁設計的理解提取出精華的部分，再運用豐富的技術體現出來，最終達到客戶需求的效果。見圖1-1和圖1-2。

網頁設計原則是設計師設計網站時必須遵循的，它可以保證網站設計的合理化、人性化、統一性和心靈共鳴，從而達到市場的需求。網頁設計原則包括“設計任務”“思路實現”“色彩運用”“靈活布局”“造型組合”“設計原則”和“網頁優化”7大類，符合這7種原則的網站才是好的網站。見圖1-3。

1.1.1 不同網頁用不同設計

設計是一種美的升級與提煉，成功的設計作品一般都極具藝術感，但藝術感并不符合普通大眾的視覺審美感受，屬于一種看不懂或不易理解的范疇，所以藝術感僅是設計體現的手段，并不符合大部分設計任務的需求。設計的任務是要實現設計師的意圖，達到設計師的最終目的，而并非僅僅是創造美，見圖1-4。

網頁設計的任務是設計師根據客戶要求表現出網頁的主題和實現網頁的功能。根據站點的性質和用戶群體的差異，設計的任務也不同，網站總體類別包括“資訊類網站”“資訊和形象相結合的網站”和“形象類網站”。

資訊類網站

資訊類網站為訪問群體提供大量的信息，而且訪問量較大，如搜狐、新浪、網易等網站。這類網站需要注意頁面的分區和結構的合理性，要快速有效地引導訪問者進行瀏覽，同時注意頁面的優化與界面的親和等問題，為訪問者提供人性化的舒適瀏覽感受。

舉一反三

因為資訊類網站的特點就是內容繁雜，因此為了節省版面以及整理分區，我們可以使用“國字型”網頁布局，以規整和扎實為主，靠內容吸引訪問者，這類網站美觀度通常很低。因此一些設計感很強的布局并不適合資訊類網站，設計者不要一味追求創意和美觀而忽視資訊類網站的特點，否則會導致用戶瀏覽混亂。

形象類網站

形象類網站一般較小，保持在幾頁的信息量，需要實現的功能也比較簡單，例如一些中小型的公司或單位，網頁的設計任務主要是突出企業形象。這類網站總體上對設計者的設計水平要求較高，需要根據不同的公司或企業的具體情況進行具體分析，最重要的一點就是客戶需求的實現，它也屬于設計的任務。

資訊和形象相結合的網站

資訊和形象相結合的網站對于設計方面要求較高，既要保證網站資訊的傳達要求，同時又要突出企業或公司的形象，例如一些較大的公司網站和國內的高校網站等。

1.1.2 拓展設計思路

明確了設計的任務之后，接下來要做的就是完成這個任務。

設計的實現可以分為兩部分，第1部分是需要為網站做前期的規劃及效果草圖的繪制，這部分可以在紙上完成，將設計者的想法以最快捷的方式呈現出來，為后期的制作提供參考；第2部分是利用相關軟件進行網頁的制作，這一過程是在計算機上完成的，將設計的藍圖變為現實，最終的集成一般是在Dreamweaver里完成。經過設計的作品一定要有創意，這是最基本的要求，沒有創意的設計是失敗的。

1.1.3 色彩的吸引力

漂亮豐富的色彩能喚起人們的心靈感知，不同的顏色搭配會產生不同的視覺感受，所引起的心靈共鳴也是不同的，例如，紅色是火的顏色，充滿熱情與奔放，同時也是血的顏色，可以象征生命與暴力，見圖1-5～圖1-7。

不同色彩代表了不同的情感和不同的象征含義，這些象征含義是人們思想交流中相當復雜的部分，它因人的年齡、地域、時代、民族、階層、經濟地區、工作能力、教育水平、風俗習慣、生活環境和性別差異而有所不同。單純的顏色并沒有實際的意義，但是和不同的顏色搭配后，它所表現出來的效果就會不同。如綠色和金黃色或與淡白色搭配，可以產生優雅、舒適的氣氛；藍色和白色混合，能體現柔順、淡雅、浪漫的氣氛。設計的任務不同，配色方案也隨之不同，如圖1-8～圖1-13所示?？紤]到網頁的適應性，應盡量使用網頁安全色。

舉一反三

所謂網頁安全色是指無論在任何瀏覽器或計算機上都可以無損無偏差地輸出色彩，我們大部分計算機可以支持256色（8位）的顏色輸出，但是僅有216種顏色在網頁上可以無偏差顯示，因此為了保證制作效果與呈現效果統一，我們應該使用網頁安全色，如圖1-14所示。

眾所周知，顏色是光的折射產生的，紅、黃、藍是調和其他色彩的三原色，換一種思路，我們可以用顏色的變化來表現光影效果，這無疑將使我們的作品更貼近現實。顏色的使用并沒有一定的法則，如果一定要用某個法則去套，那么效果只會適得其反。首先我們可先確定一種能表現主題的主體色，然后根據具體的需要，應用當前色的近似色和對比色來完成整個頁面的配色方案，這樣整個頁面在視覺上是一個整體，以達到和諧、悅目的視覺效果。

1.1.4 靈活的布局

符合訪問者瀏覽順序和視覺順序的合理布局會為網站加分，人性化的布局首先需要一個舒適的頁面尺寸，清晰明確的區域劃分，然后統一頁面風格，舒適清晰地文本閱讀模式，最后將設計感與布局完美地結合，如圖1-15～圖1-18所示。

1.1.5 造型的組合

設計者主要通過視覺傳達來表現主題，在視覺傳達中，造型是很重要的一個元素，畫面上的所有元素都可以統一作為畫面的基本構成點、線、面來進行處理，在一幅成功的作品里，需要點、線、面的共同組合與搭配來構造整個頁面。常用的組合手法包括秩序、比例、均衡、對稱、連續、間隔、重疊、反復、交叉、節奏、韻律、歸納、變異、特寫、反射等，它們都有各自的特點，設計者在設計中應根據具體情況，選擇最適合表現主題的手法，提升網站的美感，同時將網頁上的各種元素有機地組織起來，較好地突出企業形象，從而引導訪問者的視線，如圖1-19～圖1-21所示。

1.1.6 靈活組合網頁元素

設計不是隨意胡亂的創作，而是要遵循一定原則的，無論使用何種手法對畫面中的元素進行組合，都一定要遵循5個大的原則，即“統一”“連貫”“分割”“對比”及“和諧”。

統一

統一是指設計作品的整體性和一致性，如圖1-22所示。在網站設計中整體效果是至關重要的，切勿將各個組成部分孤立分散，那樣會使畫面呈現出一種枝蔓紛雜的凌亂效果。

連貫

連貫是指頁面之間的相互聯系。在網站設計中可以利用每個組成區域在內容上的聯系，也可以在各部分表現形式上的相互呼應來建立連貫性，在制作過程中注意整個頁面設計風格的一致性，實現視覺和心理上的連貫，使整個頁面設計的各個部分融洽。

分割

分割是指將頁面區分為多個小塊，小塊之間具備視覺上的不同，使訪問者對內容一目了然。在信息量過多時合理有效地分割能為訪問者整理信息，如圖1-23所示。因此分割不僅是表現形式的需要，換個角度來講，分割也可以被視為對頁面內容的一種分類和歸納。

對比

對比是指通過視覺矛盾和沖突，使設計更加富有生氣，如圖1-24所示。對比手法有很多，例如，多與少、曲與直、強與弱、長與短、粗與細、疏與密、虛與實、主與次、黑與白、動與靜、美與丑、聚與散等。在使用對比的時候應慎重，對比過強容易破壞美感，影響統一。

和諧

和諧是指整個頁面符合美的法則，渾然一體，如圖1-25所示。設計者如果僅是將色彩、形狀、線條等元素隨意組合，那么作品就沒有“生命感”，與訪問者達不成審美共鳴。注重作品所形成的視覺效果能否與人的視覺感受形成一種溝通，產生心靈的共鳴，這是設計成功的關鍵。

1.1.7 優化網頁

在網頁設計中，網頁的優化是很重要的一個環節，它的成功與否會影響頁面的瀏覽速度和頁面的適應性，影響訪問者對網站的印象。優化項目包括“文字”“圖片”“DIV與表格”和“網頁的適應性”。

文字

文字是頁面中最大的構成元素，因此字體的視覺優化顯得尤為重要。通常設計者使用CSS樣式表指定文字的樣式為宋體，大小指定為12px，顏色要視背景色而定，這樣訪問者能夠看清并且與整個頁面搭配和諧。在白色的背景上，我們一般使用黑色的文字，這樣不易產生視覺疲勞，能保證訪問者較長時間地瀏覽網頁，如圖1-26和圖1-27所示。

圖片

圖片是網頁中的重要元素，也是呈現美感的媒介。圖片的優化可以在保證瀏覽質量的前提下將其尺寸大小降至最低，以便提高網頁的速度。設計者可以利用Photoshop或Fireworks將圖片切成小塊，再分別進行優化。輸出的格式可以為GIF或JPEG，要視具體情況而定。

一般我們將顏色變化較為復雜的小塊優化為JPEG，而把那種只有單純色塊的卡通畫式的小塊優化為GIF，這是由這兩種格式的特點決定的，如圖1-28和圖1-29所示。

DIV與表格

DIV與表格（table）是頁面中的重要元素，是頁面排版的主要手段。我們可以設定DIV與表格的寬度、高度、邊框、背景色和對齊方式等參數。通常我們將表格的邊框設為0，以此來定位頁面中的元素，或者借此確定頁面中各元素的相對位置。

設計者在設計頁面表格時，應該盡量避免將所有元素嵌套在一個表格里，而且表格嵌套層次盡量要少。因此可以采用DIV套表格的方式來減少嵌套，提高網頁的速度。

網頁的適應性

網頁的適應性是很重要的，在不同的系統、分辨率、瀏覽器上，我們將會看到不同的結果，因此設計時要統籌考慮。一般情況下，用戶在800×600規格下制作網頁，最佳瀏覽效果也是在800×600分辨率下，在其他情況下只要保證基本一致，不出現較大問題即可。