遵循Web標準的網頁設計工作流程

1、遵循Web標準的網頁設計工作流程（一）經常有讀者來信詢問在實際開發(fā)一個網站的時候，具體是按照什么工作流程進行工作的，-個網站到底是如何從零開始一點點做出來的呢？今天我們來就這個問題作一些說明。我們今天介紹的是關于從零開始設計一個頁面的過程， 我們可以把一個頁面的完整設計過程分為7個步驟，如下圖所示。步驟內畧分斯*結構設咅卜十旅型設任 H 汚案設計布脯詮計I觀宣設任|交互設計HTMLAjujre RPFtrewocks在圖中，這個過程分為了Fireworks| photoshop:CSSHTMLFireworkaPtuotoshop7個步驟，并且說明了這7個步驟相應使用的工具。CSSHTMLFi

2、newertsPhotofthcQ這7個步驟依次為:1. 內容分析：仔細研究需要在網頁中的展現的內容，梳理其中的邏輯關系，分清層次，以 及重要程度。2. 結構設計：根據內容分析的成果，搭建出合理的HTML結構，保證在沒有任何 CSS樣式的情況下，在瀏覽器保持高可讀性。3. 原型設計：根據網頁的結構，繪制出原型線框圖，對頁面進行合理的分區(qū)的布局，原型 線框圖是設計負責人與客戶交流的最佳媒介。4. 方案設計：在確定的原型線框圖基礎上，使用美工軟件，設計出具有良好視覺效果的頁 面設計方法。5. 布局設計：使用 HTML和CSS對頁面進行布局。6. 視覺設計：使用 CSS并配合美工設計元素，完成由設計

3、方法到網頁的轉化。7. 交互設計：為網頁增添交互效果，如鼠標指針經過時的一些特效等。下面具體解說一下，例如要設計出一個如下圖所示的頁面。這是為一個假想的名為“BabyHous ing”的兒童用品網上商店制作的一個網站首頁。請讀者思考一下要設計出這樣的一個頁面，根據上面描述的工作流程， 應該在每一步驟中完成什么工作呢？遵循Web標準的網頁設計工作流程（二）昨天介紹了網頁設計的工作流程概述，今天開始來看一看具體是如何進行的。第1步要先想清楚這個網站的內容是什么？通過一個網頁要傳達給訪問者什么信息？這些信息中哪些是最重要的？哪些是相對比較重要的？以及哪些是次要的。這些信息應該如何組織呢？ 我們可以參

4、考一些網上商店的網站，比如下圖所示的是卓越沿馬遜網上商店的首頁，讀者在研究一些成功網站的時候，不要僅僅關注這些網站的設計風格和技術細節(jié)，更要從更深的角度觀察它們， 這樣才能更好地掌握核心的東西。例如從圖中可以看到， 這個頁面盡管內容非常多，但簡單來說，就分為兩大類一一“分類鏈接”和“推薦商品鏈接”。這樣回到我們自己的網站，比如說，可以確定出需要在首頁展示如下一些信息：網站標題網站標志主導航欄自身介紹和用戶幫助的鏈接賬號登錄與購物車今日推薦商品（1種）最受歡迎商品（1種）分類推薦商品（3種）搜索框類別菜單特別提示信息版權信息在理解了網站的基礎上，我們開始構建網站的內容結構?，F在完全不要管CSS而

5、是完全從網頁的內容出發(fā)，根據上面列出的要點，通過HTML搭建出網頁的內容結構。如下圖所示的是搭建的 HTML在沒有使用任何 CSS設置的情況下，使用瀏覽器觀察的效果。 在圖中，左側使用線條表示了各個項目的構成。 實際上圖中顯示的就是前面的圖在不使用任 何CSS樣式時的表現。精選范本Iffl I2 I卞f qFUthy HrmihU令H畀rMtlMSrTMXB, Filiif 利帀怕 Wl , fWf w J FfiflMWC-T m 4AM, :Ku干粗kMUM n *IMMp MMuUKK9w W.櫛 fif4-sm|rwBn尸軸攜tM I 示IMkflf#kA mMVfMMI I 尸* I

6、 U I WlPFlfMlHP wiA提示讀者一點，任何一個頁面，應該進可能保證在不使用 CSS的情況下，依然保持良好結構 和可讀性。這不僅僅對訪問者很有幫助，而且可以有助于你的網站被Google、百度這樣的搜索引擎了解和收錄，這樣對于網站提升訪問量可是至關重要的。遵循Web標準的網頁設計工作流程（三）在設計任何一個網頁之前， 都應該先有一個構思的過程， 對網站的完整功能和內容作一個全 面的分析。如果有條件，應該制作出線框圖，這個過程專業(yè)上稱為“原型設計”，例如，在具體制作頁面之前，我們就可以先設計一個如下圖所示的網頁原型線框圖。T*ir If HT* H 賣見収Baby HQUSing對oc

7、wxqx蟲鬣oKagucsraxKsoooWMCWOW0WWCMCKKJCftCCWcfaSrXX介昆抱If戶品臭劇 xxxxxxxxxx xxxxxxxxxx図XXXXMXXXXX図XXXXXXXXXXf-J XXXXXKXKXX因XXKXXXXXDCX0sft*if tt*lOmamcKWHouwx；網頁原型設計也是分步驟實現的，先把一個頁面分為若干個大部分，然后分別逐步細化。如果是為客戶設計的網頁，那么使用原型線框圖與客戶交流溝通是最合適的方式，既可以清晰地表明設計思路，又不用花費大量的繪制時間，因為原型設計階段，往往要經過反復修改，如果每次都使用完成以后的設計圖交流，則反復修改需要大量

8、的時間和工作量，而且在設計的開始階段，往往交流溝通的中心并不是涉及的細節(jié)，而是功能、結構等策略性的問題，因此使用這種線框圖示非常合適的。這里向讀者推薦一種繪制圓形線框圖非常方便的軟件一一“Axure RP,這個軟件是專門用來作原型設計的，而且可以方便地設計動態(tài)過程的原型，讀者有興趣可以實踐一下。這個軟件的網址是： 。這個軟件目前沒有中文版。如果沒有 Axure RP這樣的軟件，普通的繪圖軟件，例如微軟公司的Visio, Adobe公司的Fireworks、甚至Photoshop等軟件，都可以勝任。在與客戶討論，確定了原型以后，可以進行實際的頁面方案設計了，這一步通常使用Photoshop或者F

9、ireworks等軟件完成。如下圖所示的是在Fireworks中的效果。的細1* m -aXi遵循Web標準的網頁設計工作流程（四）昨天介紹了原型原型設計和網頁方案設計這兩個步驟，今天進行下一步工作。下面應該進行的步驟是頁面布局這一步驟，任務是把各種元素放到適當的位置，暫時不用涉及非常細節(jié)的因素。具體來說，首先應該對頁面的整體進行一些設置，把個各種瀏覽器中默認值不同的元素屬性都設置為統(tǒng)一的值等等，以保證這些內容在各個瀏覽器中有相同表現。接下來就依次對網頁的各個部分進行布局設置，入頁頭、中間部分、頁腳等等，此時的主要任務是把位置定好，例如下圖中，可以看到，網頁中間的內容已經實現了兩列布局的效果，

10、 而具體的樣式細節(jié)還沒有設置。在各個部分布局完成以后，就開始對每個部分依次設置視覺細節(jié)效果，例如在頁面的頁頭部分，就可以如圖下所示地在Fireworks中進行切片，把需要的圖像切出來。在例如，在網頁右側的圓角框，也是在這一步中實現的，如下圖所示。此外還有很多細節(jié)都需要仔細設置，例如圓角框中的目錄列表、 搜索表單等等，這些設置就都是只涉及局部的樣式了。從圖中可以看到，到這里已經接近勝利了。遵循Web標準的網頁設計工作流程（五）昨天介紹了布局設計和視覺細節(jié)設計這兩個步驟，今天進行下一步工作， 也是這個系列的最后一次內容了。接下來我們進行一些交互性的動態(tài)設計，這里主要是為網頁元素增加鼠標經過時的效果

11、。如下圖所示，在鼠標指針經過主導航欄和次導航欄的時候，相應的菜單項會發(fā)生變化，鼠標經過“登錄帳號”或者“購物車”圖像時，顏色也會變淺，這都是為了提示用戶所進行的選擇。 此外，當鼠標經過圖像時，圖像周圍的邊框也會發(fā)變化。到這里，這個頁面的靜態(tài)設計就算完成了，接下來還需要進行相應程序的開發(fā)，無論是由程序員進行開發(fā)，還是使用 CMS系統(tǒng)，都應該相關的開發(fā)人員來繼續(xù)工作了，設計師的工作到這里基本就結束了。希望讀者可以通過 5天來的講解，對網頁設計從無到有，從策劃構思到設計實施，有一個比 較完整的概念了！最后，談一談使用這種方法設計出來頁面具有哪些優(yōu)點。做到這里，讀者可能還沒有完全意識到使用這種css進行布局的優(yōu)點。這種布局方式的最大優(yōu)點是非常靈活，可以方便地擴展和調整。例如，當網站隨著業(yè)務的發(fā)展，需要在頁面中增加一些內容，那么不需要修改CSS樣式，只需要簡單地在 HTML中增加相應的模塊就可以了。如下圖所示的就是對頁面擴展了內容以后的效果，在“主要內容”部分，增加了 “特色促銷”和“優(yōu)中選優(yōu)”兩個模塊，再右側欄中增加了“送貨服務”和“熱門信息”兩個模塊，在前 面的頁面基礎上，增加這些內容之需要幾分鐘的時間就可以完成。不但如此，充分設計合理的頁面，可以非常靈活地修改樣式， 例如，只需要將兩列