1.8 靜態頁面的制作流程

在大部分情況下，網頁設計與制作人員需要實現的是靜態頁面，靜態頁面的制作看似簡單，似乎只是把設計圖轉變成可在瀏覽器中瀏覽的頁面即可。但是如何讓頁面和設計圖保持一致且符合網絡瀏覽的規格，如何讓頁面既像圖紙中那樣美觀又有較快的加載速度和用戶友好性，都是需要重點考慮的問題，決定了網站能否留住更多的瀏覽者。

1.8.1 觀察設計稿

拿到一張設計圖，不要立即就用軟件來拆分和輸出圖片，首先觀察一下圖紙，對頁面的布局、配色有一個整體的認識，在對設計圖有了初步的了解之后，就需要對如何在HTML頁面里布局有一個大體的規劃，然后根據這個規劃對設計圖進行拆分、輸出，以免匆匆拆分之后又發現在HTML里面無法實現效果或效果不好而不得不返工。

1.8.2 拆分設計稿

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

1．分離顏色

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

2．提取尺寸

雖然說按照設計圖的尺寸來搭建網頁才符合圖紙上的設計，但也不是說必須嚴格按照設計圖紙來做，有些時候可以靈活掌握。

3．分離背景圖

背景圖可能是大面積重復的圖案，也可能是一張圖片，一般和內容沒有關系的裝飾性圖片都可以考慮制作成背景圖。

4．分離圖標及特殊邊框

小圖標及花邊可以給網頁添加細節和亮點。從理論上講，邊框的使用方法和背景圖片的類似，不過根據情況往往需要單獨輸出。

5．分離圖片

與內容相關的圖片需要單獨輸出。

1.8.3 網頁設計實現

網頁設計的實現可以通過兩種方式：一種是傳統的表格布局方式；另一種是CSS布局方式。但是由于表格布局比較復雜，現在大多數的設計師都是使用Div+CSS的方式來實現網頁的，所以本書就不介紹表格布局方式了。

在使用Div時不需要像在表格中一樣通過其內部的單元格來組織版式，通過CSS強大的樣式定義功能可以更簡單、更自由地控制頁面版式及樣式。

基于Web標準的網站設計的核心在于如何使用眾多Web標準中的各項技術來達到表現與內容的分離，即網站的結構、表現、行為三者的分離，只有真正實現了三者分離的網頁設計，才是真正意義上符合Web標準的網頁設計。推薦使用XHTML（可擴展超文本標記語言）以更嚴謹的語言編寫結構，并使用CSS來完成網頁的布局表現，因此掌握基于CSS的網頁布局方式，是實現Web標準的基礎環節。

復雜的表格設計使得布局極為困難，修改更加煩瑣，最后生成的網頁代碼除了表格本身的代碼，還有許多沒有意義的圖像占位符及其他元素，文件量龐大，最終導致瀏覽器下載解析速度變慢。

而使用CSS布局則可以從根本上改變這種情況。CSS布局的重點不再是表格元素的設計，取而代之的是HTML中的另一個元素“Div”，Div可以理解為“圖層”或一個“塊”，Div是一種比表格簡單的元素，語法上只有從<div>開始和到</div>結束，Div的功能僅是將一段信息標記出來用于后期的樣式定義。

提示

這里的要標記的“一段信息”，就是網頁的“結構”部分，通過Div的使用，可以將網頁中的各個元素劃分到各個Div中，成為網頁中的結構主體，而樣式表現則由CSS來完成。