1.7 網站的制作流程

在開始建設網站之前應該有一個整體的規劃和目標，規劃好網頁的大概結構后即可著手設計，下面介紹網站建設的基本流程。

1.7.1 前期策劃

網站的前期策劃對于網站的運作至關重要，規劃一個網站時，可以先用樹狀結構把每個頁面的內容大綱列出來，網站規劃結構如圖1-21所示。尤其是當要制作一個很大的網站時，更需要規劃好，還要考慮到以后的擴展性，以免制作好后再更改整個網站的結構。

1．確立目標和需求

制作網站必須有明確的目標。要明確網頁使用的語言與網站的主題，運用各種手段充分表現出網站的特點和個性，這樣才能給訪問者留下深刻的印象。

2．收集素材

明確了網站的主題之后，就要圍繞主題收集素材。如果想要網站內容生動，能夠吸引更多的訪問者，就要收集精美的素材，包括圖片、文字、音頻、視頻及動畫等。

3．規劃站點

一個網站設計得成功與否，在很大程度上取決于設計者的規劃水平。網站的規劃包括的內容很多，如網站的結構、顏色的搭配、版面的布局、文字及圖片的運用等。只有在制作網頁之前把這些方面都考慮到了，制作出的網頁才能夠具有特點和吸引力。

4．網頁設計總體方案主題鮮明

在目標明確的基礎上，完成網站的構思創意即總體設計方案。對網站的整體風格和特色做出定位，規劃網站的組織結構。

5．導向清晰

網頁設計中的導航使用超文本鏈接或圖片鏈接，使瀏覽者能夠在網站中自由前進或后退，而不用使用瀏覽器上的前進或后退按鈕。在所有的圖片上使用“ALT”標識符注明圖片名稱或解釋，以便那些不愿意自動加載圖片的觀眾能夠了解圖片的含義。

6．較短的加載時間

進入網站時等待的時間過長，會使瀏覽者對網站失去興趣，在互聯網上等待30s與我們在日常生活中等待10min的感覺相同。因此，建議在網頁設計中盡量避免使用過多的圖片及過大的圖片，將主要頁面的容量控制在50KB以內，確保普通瀏覽者的頁面等待時間不超過10s。

7．網站測試和改進

網站測試實際上是模擬用戶訪問網站的過程，用以發現問題并改進網站設計。

8．內容更新

網站建立完成后，需要不斷更新網頁內容。站點信息的不斷更新，可以讓瀏覽者了解到即時的信息，同時可以保持網站的更新速度。

1.7.2 原型設計

通過前期策劃確認了網站的大致方向之后，原型設計師就可以利用前期策劃的內容，設計出一款符合用戶客觀需求的原型設計頁面。

原型必須在先啟階段的初期或在精化階段開始時建立。整個系統（包括它的“實際”用戶界面）的分析、設計和實施必須在原型建立后進行。

創建用戶界面原型的主要目的是在實際設計與開始開發之前揭示和測試系統的功能與可用性。這樣，就可以在將太多時間與資源投入開發活動之前，確保所構建的系統是正確的。

為了成功進行初期測試，開發原型的開支必須遠遠低于開發實際系統的開支，同時這個原型應具備足夠的功能，可以進行有意義的使用測試。

原型是交互設計師與PD（產品負責人）、產品經理、網站開發工程師溝通的最好工具。而該塊的設計在原則上必須是交互設計師的產物，交互設計以用戶為中心的理念會貫穿整個產品。利用交互設計師專業的眼光與經驗保證該產品的可用性。

可建立3種基本原型：①圖紙，即在圖紙上繪制產品原型圖，如圖1-22所示。②位圖，即在繪圖工具中繪制產品原型圖，如圖1-23所示。軟件Axure RP、Sketch和PPT都可以繪制產品原型圖。③可執行文件（Executable File），即交互式產品原型圖。在很多項目中，需要按上述順序使用3種原型。

說明：

可執行文件指的是可以由操作系統進行加載執行的文件。在不同的操作系統環境下，可執行程序的呈現方式不一樣。在Windows操作系統下，可執行程序可以是“ .exe”“ .sys”“ .com”等類型的文件。

任何一款成功的網頁都需要以堅實的產品概念為基礎，因為概念決定了產品最終完成的潛力。

在一般情況下，交到網頁設計師手里的都是網頁的產品原型圖。當然這是產品經理反復斟酌并且與參與研發的人員開會討論之后定下來的一個交互式產品原型圖。

1.7.3 頁面美化

網頁設計制作是一個復雜而細致的過程，一定要按照先大后小、先簡單后復雜的順序來進行。先大后小是指，在制作網頁時，先把大的結構設計好，再把小的部分逐漸設計出來并進行完善。先簡單后復雜是指，先設計出簡單的內容，再將復雜的內容設計出來并進行完善，這樣在出現問題時方便進行修改。如果有一個好的網站策劃與分工，后臺程序制作可以和美工設計同時開始。

1．網頁美工設計

美工設計人員應該在網站策劃階段就與用戶充分接觸，了解用戶的需求，以便在設計過程中有一個基調，從而提高設計稿的被認可率。

美工設計人員首先要對網站有一個整體的定位，然后根據此定位分別設計出首頁、二級欄目及內容頁的設計稿。

一般要設計1～3套不同風格的設計稿交由用戶評論，再按用戶的需求設計出頁面的設計圖。

2．靜態頁面的制作

美工設計人員在設計好各個頁面的效果圖后，就需要制作成HTML頁面，以供后臺人員將程序整合。靜態頁面的制作可分為以下兩步。

1）觀察

首先要對設計圖頁面的布局、配色有一個整體的認識，在對設計圖進行了初步的了解之后，就對如何在HTML頁面里布局有了規劃。然后根據規劃對設計圖進行拆分、輸出，以免匆匆拆分后又發現在HTML里面無法實現效果或效果不好而不得不返工。

2）拆分

當對于如何拆分設計圖和組成HTML頁面有了規劃后，就可以將圖紙拆分成多塊，以便在組裝頁面時使用，一般要從設計圖中拆分、提取的內容主要有以下4點。

（1）分離顏色。其中一般包括3部分配色：頁面主輔顏色搭配的基本配色、普通超鏈接的配色和導航欄超鏈接的配色。

（2）提取尺寸。按照設計圖的尺寸來搭建網頁。

（3）分離背景圖片及特殊邊框。背景圖可能是大面積重復的圖案，也可能是一張圖片，一般和內容沒有關系的裝飾性圖片都可以考慮制作成背景圖。邊框的使用方法和背景圖片類似，不過根據情況往往需要單獨輸出。

（4）分離圖片。分離出與內容相關的圖片。

3．組裝

組裝就是把分離出來的元素，按照一定的方法組合成與設計圖效果類似的頁面。使用CSS布局方式制作網頁一般分為以下幾步。

· 構建層結構

· 插入內容

· 樣式表美化

· 細節處理

· 優化樣式表

提示

很多時候設計圖的實際情況會和之前的規劃有較小的差別，應多注意尺寸的設定。

1.7.4 頁面開發

程序開發人員可以先開發功能模塊，然后再將其整合到HTML頁面內，也可以用制作好的頁面進行程序開發，但是為了使程序有很好的一致性和親和力，推薦采用第一種方法。

1.7.5 后期維護

每一個網站都應該由專業人員定期進行更新和維護。網絡的最大優勢就是信息的實時性，只有快速的反映、準確的報道，才能吸引更多的瀏覽者。

后期維護的內容主要有以下幾點。

（1）服務器及相關軟件、硬件的維護，對可能出現的問題進行評估，制定相應的措施。

（2）數據庫維護，有效地利用數據是網站維護的重要內容，因此數據庫的維護要受到重視。

（3）內容的更新、調整等。

（4）制定網站維護的相關規定，將網站維護制度化、規范化。

很多網站的人氣很高，肯定和網站內容的定期更新是分不開的。也有很多網站由于種種原因，數月才更新一次，這樣就違背了網站最基本的商業目的。網站不同于購買的一件商品，會隨著時間的推移而貶值、陳舊，只有不斷地融入新的內容、推陳出新，才會具有創造力，才能發揮網站的商業潛能。