網頁制作中如何精確還原設計稿的幾個步驟_Div+CSS教程

作為一名合格的頁面重構者，“網頁還原設計稿”的能力是非常重要的。頁面是否能與設計稿絲毫不差，是需要重點關注的。有的時候，細節就能決定成敗，可謂失之毫米差之千里。尤其是在打造一個精品項目的時候。

　　一、視覺規范

　　有時候我們從設計師那里拿到的設計稿不一定是精確無誤的，例如：同一類的模塊標題文字，一個地方是13PX，另外一個地方是14PX;一個頁面有多種字體顏色肉眼看起來一樣卻實際取到的色值不一樣;每個段落的行高不一樣;同一類型的彈出框多種尺寸等等…… 這樣的情況，我們不能為了還原設計稿而還原設計稿。

　　為了減少與設計師溝通上的成本，重構師不得不督促設計師做前期整站的視覺規范，把一些公共能約定的內容以文檔的形式寫明，后期嚴格執行起來。

　　設計師最好是在頁面開始制作前定好視覺規范，這樣可以大大減少頁面制作后期聯調的成本。另外頁面制作可以對模板化的東西前期做統一的規范，如字體、ICON、邊框、背景色、間距等做統一的class接口，等后期設計規范固定下來后有變動的地方調起來就很容易了。

　　二、設計稿標注

　　務必要求設計師在設計稿上對各種間距、寬度、特殊字體、特殊字色、特殊行高等等進行標注，這樣在頁面制作的時候不用去重新量取也大大加強了還原設計稿的準確度，更減少了與設計師的溝通成本和后期聯調成本。如下樣例：

　　

　　三、網頁標尺工具(FastStone Capture)

　　航海用的指南針、醫生用的體溫計、木匠用的卷尺……很多職業都有它專用的測量儀器，那么我們在制作頁面的時候勢必也要測量間距、寬度、高度、顏色……等等數據，那么頁面制作是不是也應該有一個專業的頁面精確測量的工具呢?

　　這里介紹一款可以精確測量網頁的軟件FastStone Capture，其可謂是 軟件雖小，卻五臟俱全。

　　四、FastStone Capture 簡單教程

　　1、打開測量工具

　　

　　點擊控制面板最右邊的圖標，打開選擇“屏幕尺”，會在屏幕上顯示如下圖的尺子、為了方便透視測量，可將尺子設置成透明或半透明：

　　

　　2、橫向測量

　　默認尺子是橫放的，可以按鍵盤上、下、左、右鍵單像素移動尺子，鼠標點在尺子的刻度上，屏幕右上角會有一個放大鏡顯示測量的區域，拖動鼠標可以精確測量水平的長度。拖動尺子橫向兩邊緣可將尺子任意拉長或縮短。

　　3、垂直測量

　　點擊尺子上的如圖的按鈕圖標可將尺子垂直：或雙擊尺子可將尺子垂直。

　　垂直測量和橫向測量的方法類似，這里就不重復說了。

　　4、點對點測量

　　點擊尺子上的圖標: ，屏幕右上角放大鏡會顯示線長度。

　　用鼠標拖動從A點到B點的直線，測量兩點間的距離。

　　5、矩形測量

　　可惜該軟件沒有三角板也沒有圓規，難以測量矩形。別急，可以用其他方法代替，這里用到截屏功能。

　　點擊尺子上的圖標關閉尺子，返回軟件控制面板，點第三個圖標 (撲捉矩形區域)：

　　拖動鼠標測量想要測量的網頁矩形模塊吧，屏幕左(或右)上角的放大鏡會顯示w*h=值*值，w是寬度，h是高度。

　　6、網頁取色

　　點擊軟件控制面板右邊的圖標： ，出現下拉框，選擇“屏幕取色器”，出現吸管圖標，移動吸管指示的坐標點擊獲取屏幕任一地方的顏色值。