網頁設計基本步驟
設計源于靈感，靈感源于借鑒,這是每個網頁設計師都應該牢記的“成功法則”。以下是百分網小編介紹的網頁設計基本步驟，歡迎學習!
一、用“原型法”細化網站設計需求
用DW在最短的時間內搭出一個可以瀏覽、跳轉的網站，然后與客戶一起體驗并評估這個網站原形的架構、流程、布局、配色、文字等不同層面。
二、網頁鏈接的深度、廣度和耦合程度
超級鏈接是網頁設計中最重要的信息組織方式，也是整個Web世界的精髓所在。但糟糕的鏈接設計——比如過于泛濫和隨意的超級鏈接——很可能會讓沖浪者迷失在充斥著信息碎片的海洋里。
如果將網站首頁視為鏈接層次中的第一級，那么，由首頁中的超級鏈接得到的，在信息內容上具有從屬關系的站內頁面就是網頁鏈接層次中的第二級;從每個第二級頁面又可以繼續得出第三級網頁;依此類推，我們多半可以得到一個完整的樹形鏈接結構。在這個樹形鏈接結構中，整棵樹的層數可以被稱為(站內)網頁鏈接的深度，頁面最多的一層中包含的頁面總數可以被稱為(站內)網頁鏈接的廣度。一般說來，一個網站的鏈接深度和廣度最好有一個合適的均衡關系，深度過大的網站不利于沖浪者快速獲取相關信息，廣度過大的網站則容易讓沖浪者在無數并列的超級鏈接面前不知所措。
當網頁中的某個鏈接既沒有指向下一級網頁，也沒有指向上一級網頁時，它必然構成了由當前頁面向跨層級網頁或站外URL的“跳轉”，這種跳轉的出現頻率可以被稱為網頁鏈接的泛耦合程度。泛耦合程度過低的網站無法有效發揮Web沖浪的價值，由此得到的網站過于死板;另一方面，泛耦合程度較高的網站又有可能造成信息內容的支離破碎，影響沖浪者的正常閱讀。因此，網頁鏈接的泛耦合程度應該與網站的設計需求相適應——兒童或動漫類的網站應鼓勵那些代表跳躍式思維的泛耦合鏈接，而一個學術類的網站則應該對泛耦合鏈接持相對謹慎的態度。
幾乎每個網頁都有導航欄。對同一個網站內的所有網頁來說，導航欄必須在設計風格上力求統一。否則，沖浪者就需要分別適應每個頁面的導航界面風格，這不但會浪費不少時間，也會嚴重影響整個網站的使用美感。
但這里所說的統一并不是要求我們為每個網頁設計出一模一樣的導航欄。完全相同的導航欄會讓沖浪者在瀏覽過程中由疲憊而麻木、由麻木而喪失對網站的瀏覽興趣。也就是說，我們應該在統一的整體風格下，在每一個或每一組網頁的導航欄中尋求細節上的變化。
比方說，我們可以在確保所有導航欄形狀、布局、字體一致性的基礎上，變換不同導航欄的背景顏色;或者，我們可以在統一了色彩、形狀、字體的情況下，變換不同導航欄的相對位置;再或者，我們還可以變換不同頁面中導航欄的背景圖片——當然，所有背景圖片應當從屬于某種統一的風格——同時保持其他設計元素不變。
“在統一的基礎上尋求變化”——除了導航欄以外，網頁設計師在處理同一頁面或同一網站內的其他設計問題時，這句話也同樣有效。
三、網頁基本布局
要尋找網頁布局方面的靈感并不難。我建議大家沒事兒時多做些折紙練習：隨手拿起一張A4復印紙，然后根據自己的心情好壞，或平行、或斜向、或選擇任意角度將紙片折疊幾次，再把紙平攤在面前，紙上呈現出來的折痕沒準兒就是一種相當不錯的網頁布局呢!
當然，網頁設計師還是要盡量熟悉那些典型網頁的基本布局方式，以根據客戶的需要選擇使用。比如，門戶類網頁為了盡可能多地展現信息內容，通常都會設計成三欄甚至四欄的縱向布局;公司首頁為了展現強大的企業實力，往往會選擇“視野”更寬闊的橫向布局;個人主頁為了展示網站主人的個性，其網頁布局方式也會千差萬別，像軸向布局、網格布局、斜角布局、放射布局、多中心布局、離散布局、對比布局等等都是常見的個人主頁布局方式。
四、網頁空間中的視覺導向
每個網頁都是一個神奇的視覺空間。像我們熟悉的四維時空一樣，網頁空間也有深度、廣度和時間流逝的感覺，甚至還會在設計元素引發的“力”的作用下產生運動或扭曲。
每當我們打開一個新的網頁后，我們的視線首先會聚焦在網頁中最引人注意的那一點上——我們通常稱其為視覺焦點。隨后，我們的思路會受到視覺焦點周邊設計元素的形狀和分布方式的影響，并在不知不覺中把視線轉移到另一個值得停留的地方(例如，一段醒目的線條，一種色彩到其近似色的漸變，它們都會讓我們的視線按照設計師預先安排的軌跡移動)。如此繼續下去，視線經過的所有關注點可以連接成一條完整的視覺路徑。
使用視覺路徑引導沖浪者按某種內在的邏輯順序瀏覽網頁信息的過程可以被稱為網頁空間中的視覺導向。是否能自發、自覺地使用視覺導向的設計方法并根據視覺路徑的走向排列關鍵信息，這是區別專業網頁設計師和業余網頁設計師的一個重要依據。
五、網頁空間的秩序及運動趨勢
網頁空間的秩序是網頁中所有視覺元素相互作用的結果。分析某個特定網頁空間的秩序時，最好把視覺元素抽象為“點”、“線”、“面”三大類，然后分別考察每一類元素之間以及不同類型元素之間的相互作用。
在設計師眼中，每一個視覺元素都可以被看成是“力”的源泉。不同視覺元素釋放出來的“力”的方向和大小不同。一個向右傾斜的三角形可以同時釋放出類似“重力”的垂直作用力和向右的水平作用力。視覺元素和視覺元素通過“力”相互作用，共同影響著整個網頁的空間秩序。
當網頁空間中所有作用力處于平衡狀態時，空間秩序最為穩定，整個網頁看起來比較和諧、均衡;反之，當所有作用力可以在某個方向上形成合力時，空間秩序就會處于不穩定的狀態，整個網頁看起來則會充滿動感和活力。
六、網頁中的留白
網頁中的留白就像情感小說中的心理描寫或是動作電影中的抒情段落一樣，可以讓網頁的視覺效果更加自由、流暢。很遺憾，許多網頁設計師都不懂得這個淺顯的道理，他們或是在客戶需求的壓力下，或是在不良設計習慣的驅使下，將整個頁面塞滿了圖片、文字、鏈接或是廣告，以至于所有視覺元素都不得不在擁擠的空間內茍延殘喘、痛苦掙扎。
留白并不特指網頁中的白色區域。事實上，網頁中凡是沒有前景元素干擾的視覺區域都可以被稱為留白。橫向通欄的留白可以讓網頁擁有一種水平的流動感;縱向的留白可以平衡文字、導航欄等視覺元素在水平方向的作用力;標題區域的大面積留白可以突出公司名稱或網頁標題信息;正文區域內的大面積留白既可以豐富頁面布局的內涵，也可以緩解沖浪者在閱讀時可能產生的視覺疲勞。
七、文字信息的設計和編排
編排網頁上的文字信息時需要考慮字體、字號、字符間距和行間距、段落版式、段間距等許多要素。從美學觀點看，既保證網頁整體視覺效果的和諧、統一，又保證所有文字信息的醒目和易于識別，這是評價此類工作的最高標準。從技術方面來說，今天的網頁設計師大多使用CSS樣式來控制和編排文字信息，但在使用某種客戶端未必安裝的特殊字體時，設計師通常會將文字信息保存為圖片或Flash對象，以確保所有設計元素在客戶端瀏覽器中的正確展現。
“對比”是另一個設計和編排文字信息時必須考慮的問題。不同的字體、不同的字號、不同的文字顏色、不同的字符間距在視覺效果上都可以形成強烈的對比。精心設計的文字對比可以為網頁空間增添活力，而過于泛濫的對比因素也會讓整個網頁混亂不堪。
八、圖片和動畫
在網頁中使用圖片時，同樣需要考慮美學和技術兩方面的問題。首先，圖片的色彩、形狀、風格等一定要與網頁的整體風格相適應，圖片所要傳達的理念或信息內容應當盡可能清晰、準確——這是美學方面的考量。其次，網頁設計師必須知道二值、灰度、256色及真彩色圖片之間的差異，懂得矢量圖片和點陣圖片各自的優缺點，并盡量優化圖片的比特大小以減少網頁的傳輸時間——這是技術方面的考量。只有在美學和技術兩方面都讓人滿意的圖片才有資格出現在網頁的整體設計中。
動畫元素通常可以很自然地成為網頁上最吸引人的視覺焦點，因為運動的東西總是比靜止的東西更容易抓住人們的眼球。也正是基于這樣的原因，我們需要用更為慎重的態度來決定在何時或何地使用動畫元素。我見過太多被動畫元素搞“砸”的網頁，那些網頁的設計師無一例外地犯了濫用動畫的錯誤。其實，要判斷一個動畫元素是否有存在的必要，大家可以使用下面這個簡單的法則：如果某個動畫元素只具有裝飾網頁的作用，而無法讓信息的展示更清晰或更生動，那么，你應該毫不猶豫地刪掉它。
九、網頁空間中的運動趨勢線
許多網頁的視覺空間中都隱藏了一條富有活力的運動趨勢線。當你觀察某個頁面時，如果你的直覺不斷告訴你，頁面中的某些設計元素(比如某些連接在一起的色塊，某些相互影響的圖片，特別是某些具有強烈暗示作用的線條)構成了一個隱約可見的、朝某個方向運動的元素集合，那么，你不妨直接用畫筆勾出一條能夠反映該元素集合運動趨勢的線條，就像畫家在做人體寫生時通常要先畫出一條反映人體運動趨勢的線條一樣——我們可以把這條線叫做網頁空間中的運動趨勢線。
從運動趨勢線的方向和形狀出發，我們可以很容易地找出每一個視覺元素與整體視覺空間的交互關系。一旦我們發現，某個視覺元素并沒有為運動趨勢線做出任何貢獻，反而有可能阻礙運動趨勢線的流暢延伸，那么，這個視覺元素多半就沒有任何存在的必要。
此外，在開始一個新的網頁設計前，如果設計師能根據靈感的暗示，在紙上首先畫出一條運動趨勢線，然后根據運動趨勢線的延伸規律設計所有視覺元素的形狀、色彩和位置，如此得到的網頁設計就更有可能表現出非同一般的視覺效果來。
十、使用Web標準設計網頁
很多網頁設計師只考慮網頁的視覺效果，卻從不關心網頁的具體實現技術。結果，現在的Web世界里有太多太多足夠漂亮但卻不符合技術標準的網頁，它們要么無法支持Firefox、Safari等非IE瀏覽器，要么不能在用戶改變缺省字體大小時保持原貌。更可怕的是，這些不符合技術標準的網頁內部多半是一堆充斥著 、標簽的“意大利面條”，沒有哪個瀏覽器會喜歡這些下載和顯示效率都異常低下的代碼，也沒有哪個程序員會愿意維護這些毫無頭緒可言的數字垃圾。
【網頁設計基本步驟】相關文章：
網頁設計的基本步驟及技巧11-16
網頁設計的基本步驟及設計方法02-18
網頁平面設計基本步驟03-17
Dreamweaver制作網頁的基本步驟12-14
DW制作網頁的基本步驟11-08
網頁設計的制作步驟11-14
網頁設計教程 :設計步驟及思考08-15