經常有讀者來信詢問在實際開發乙個**的時候，具體是按照什麼工作流程進行工作的，乙個**到底是如何從零開始一點點做出來的呢?
今天我們來就這個問題作一些說明。我們今天介紹的是關於從零開始設計乙個頁面的過程，我們可以把乙個頁面的完整設計過程分為7個步驟，如下圖所示。
在圖中，這個過程分為了7個步驟，並且說明了這7個步驟相應使用的工具。這7個步驟依次為：
1. 內容分析：仔細研究需要在網頁中的展現的內容，梳理其中的邏輯關係，分清層次，以及重要程度。
2. 結構設計：根據內容分析的成果，搭建出合理的html結構，保證在沒有任何css樣式的情況下，在瀏覽器保持高可讀性。
3. 原型設計：根據網頁的結構，繪製出原型線框圖，對頁面進行合理的分割槽的布局，原型線框圖是設計負責人與客戶交流的最佳媒介。
4. 方案設計：在確定的原型線框圖基礎上，使用美工軟體，設計出具有良好視覺效果的頁面設計方法。
5. 布局設計：使用html和css對頁面進行布局。
6. 視覺設計：使用css並配合美工設計元素，完成由設計方法到網頁的轉化。
7. 互動設計：為網頁增添互動效果，如滑鼠指標經過時的一些特效等。
下面具體解說一下，例如要設計出乙個如下圖所示的頁面。這是為乙個假想的名為「baby housing」的兒童用品網上商店製作的乙個**首頁。
今天開始來看一看具體是如何進行的。
第1步要先想清楚這個**的內容是什麼？通過乙個網頁要傳達給訪問者什麼資訊？這些資訊中哪些是最重要的？哪些是相對比較重要的？以及哪些是次要的。這些資訊應該如何組織呢？ 我們可以參考一些網上商店的**，比如下圖所示的是卓越沿馬遜網上商店的首頁，讀者在研究一些成功**的時候，不要僅僅關注這些**的設計風格和技術細節，更要從更深的角度觀察它們，這樣才能更好地掌握核心的東西。例如從圖中可以看到，這個頁面儘管內容非常多，但簡單來說，就分為兩大類——「分類鏈結」和「推薦商品鏈結」。
在理解了**的基礎上，我們開始構建**的內容結構。現在完全不要管css，而是完全從網頁的內容出發，根據上面列出的要點，通過html搭建出網頁的內容結構。
如下圖所示的是搭建的html在沒有使用任何css設定的情況下，使用瀏覽器觀察的效果。在圖中，左側使用線條表示了各個專案的構成。實際上圖中顯示的就是前面的圖在不使用任何css樣式時的表現。
在設計任何乙個網頁之前，都應該先有乙個構思的過程，對**的完整功能和內容作乙個全面的分析。如果有條件，應該製作出線框圖，這個過程專業上稱為「原型設計」，例如，在具體製作頁面之前，我們就可以先設計乙個如下圖所示的網頁原型線框圖。
網頁原型設計也是分步驟實現的，先把乙個頁面分為若干個大部分，然後分別逐步細化。
如果是為客戶設計的網頁，那麼使用原型線框圖與客戶交流溝通是最合適的方式，既可以清晰地表明設計思路，又不用花費大量的繪製時間，因為原型設計階段，往往要經過反覆修改，如果每次都使用完成以後的設計圖交流，則反覆修改需要大量的時間和工作量，而且在設計的開始階段，往往交流溝通的中心並不是涉及的細節，而是功能、結構等策略性的問題，因此使用這種線框圖示非常合適的。
這裡向讀者推薦一種繪製圓形線框圖非常方便的軟體——「axure rp」，這個軟體是專門用來作原型設計的，而且可以方便地設計動態過程的原型，讀者有興趣可以實踐一下。這個軟體的**是：這個軟體目前沒有中文版。
如果沒有axure rp這樣的軟體，普通的繪圖軟體，例如微軟公司的visio，adobe公司的fireworks、甚至photoshop等軟體，都可以勝任。
在與客戶討論，確定了原型以後，可以進行實際的頁面方案設計了，這一步通常使用photoshop或者fireworks等軟體完成。如下圖所示的是在fireworks中的效果。
進行下一步工作。
下面應該進行的步驟是頁面布局這一步驟，任務是把各種元素放到適當的位置，暫時不用涉及非常細節的因素。
具體來說，首先應該對頁面的整體進行一些設定，把個各種瀏覽器中預設值不同的元素屬性都設定為統一的值等等，以保證這些內容在各個瀏覽器中有相同表現。
接下來就依次對網頁的各個部分進行布局設定，入頁頭、中間部分、頁尾等等，此時的主要任務是把位置定好，例如下圖中，可以看到，網頁中間的內容已經實現了兩列布局的效果，而具體的樣式細節還沒有設定。
在各個部分布局完成以後，就開始對每個部分依次設定視覺細節效果，例如在頁面的頁頭部分，就可以如圖下所示地在fireworks中進行切片，把需要的影象切出來。
在例如，在網頁右側的圓角框，也是在這一步中實現的，如下圖所示。
此外還有很多細節都需要仔細設定，例如圓角框中的目錄列表、搜尋表單等等，這些設定就都是只涉及區域性的樣式了。從圖中可以看到，到這裡已經接近勝利了。
進行下一步工作，也是這個系列的最後一次內容了。
接下來我們進行一些互動性的動態設計，這裡主要是為網頁元素增加滑鼠經過時的效果。如下圖所示，在滑鼠指標經過主導航欄和次導航欄的時候，相應的選單項會發生變化，滑鼠經過「登入帳號」或者「購物車」影象時，顏色也會變淺，這都是為了提示使用者所進行的選擇。此外，當滑鼠經過影象時，影象周圍的邊框也會發變化。
到這裡，這個頁面的靜態設計就算完成了，接下來還需要進行相應程式的開發，無論是由程式設計師進行開發，還是使用cms系統，都應該相關的開發人員來繼續工作了，設計師的工作到這裡基本就結束了。
希望讀者可以通過5天來的講解，對網頁設計從無到有，從策劃構思到設計實施，有乙個比較完整的概念了！
最後，談一談使用這種方法設計出來頁面具有哪些優點。做到這裡，讀者可能還沒有完全意識到使用這種css進行布局的優點。這種布局方式的最大優點是非常靈活，可以方便地擴充套件和調整。例如，當**隨著業務的發展，需要在頁面中增加一些內容，那麼不需要修改css樣式，只需要簡單地在html中增加相應的模組就可以了。
如下圖所示的就是對頁面擴充套件了內容以後的效果，在「主要內容」部分，增加了「特色**」和「優中選優」兩個模組，再右側欄中增加了「送貨服務」和「熱門資訊」兩個模組，在前面的頁面基礎上，增加這些內容之需要幾分鐘的時間就可以完成。
不但如此，充分設計合理的頁面，可以非常靈活地修改樣式，例如，只需要將兩列布局的浮動方向交換，就可以立即得到乙個新的頁面，如下圖所示，可以看到，左右兩列交換了位置。
試想如果沒有從一開始就有良好的結構設計，那麼稍微修改一下內容都是非常複雜的事情。如果讀者曾經使用**進行頁面布局，就會發現這裡列出的優點了，對於**布局的網頁，這些都是不可想象的。
好了，5天的講解到這這裡就全部完成了，希望通過以上的介紹，能夠給讀者在設計思路上有一些幫助！
如何設計工作流引擎？
設計工作流就象設計一部汽車 設計乙個好的工作流引擎，就象設計一部汽車，它必須有發動機，提供動力，輪子提供行走，燈提供照明，喇叭提供提示。剎車提供停止，倒擋提供後退出。車門提供鑰匙進入系統，也可以說是安全驗證，導航器提供方向。現在試想一下，我們拿著鑰匙 使用者名稱與密碼 進入汽車 工作流引擎前台操作 ...
WF4 0 2 設計工作流
自從做了程式設計師，發現自己長胖了，而且自己的身體抵抗力也出了問題，最近身體不適，公司工作任務最近也很趕，上次寫了wf4.0的簡介，這次就工作中工作流設計的幾種方式稍微總結一下。設計工作流包括四種方式 流程圖工作流，程式工作流，狀態機工作流，自定義命令性 建立工作流.工作流設計中最常用的就是flow...
WF4 0 2 設計工作流
自從做了程式設計師，發現自己長胖了，而且自己的身體抵抗力也出了問題，最近身體不適，公司工作任務最近也很趕，上次寫了wf4.0的簡介，這次就工作中工作流設計的幾種方式稍微總結一下。設計工作流包括四種方式 流程圖工作流，程式工作流，狀態機工作流，自定義命令性 建立工作流.工作流設計中最常用的就是flow...