網(wǎng)頁制作中如何精確還原設(shè)計(jì)稿的幾個(gè)步驟_Div+CSS教程
作為一名合格的頁面重構(gòu)者,“網(wǎng)頁還原設(shè)計(jì)稿”的能力是非常重要的。頁面是否能與設(shè)計(jì)稿絲毫不差,是需要重點(diǎn)關(guān)注的。有的時(shí)候,細(xì)節(jié)就能決定成敗,可謂失之毫米差之千里。尤其是在打造一個(gè)精品項(xiàng)目的時(shí)候。
一、視覺規(guī)范
有時(shí)候我們從設(shè)計(jì)師那里拿到的設(shè)計(jì)稿不一定是精確無誤的,例如:同一類的模塊標(biāo)題文字,一個(gè)地方是13PX,另外一個(gè)地方是14PX;一個(gè)頁面有多種字體顏色肉眼看起來一樣卻實(shí)際取到的色值不一樣;每個(gè)段落的行高不一樣;同一類型的彈出框多種尺寸等等…… 這樣的情況,我們不能為了還原設(shè)計(jì)稿而還原設(shè)計(jì)稿。
為了減少與設(shè)計(jì)師溝通上的成本,重構(gòu)師不得不督促設(shè)計(jì)師做前期整站的視覺規(guī)范,把一些公共能約定的內(nèi)容以文檔的形式寫明,后期嚴(yán)格執(zhí)行起來。
設(shè)計(jì)師最好是在頁面開始制作前定好視覺規(guī)范,這樣可以大大減少頁面制作后期聯(lián)調(diào)的成本。另外頁面制作可以對模板化的東西前期做統(tǒng)一的規(guī)范,如字體、ICON、邊框、背景色、間距等做統(tǒng)一的class接口,等后期設(shè)計(jì)規(guī)范固定下來后有變動(dòng)的地方調(diào)起來就很容易了。
二、設(shè)計(jì)稿標(biāo)注
務(wù)必要求設(shè)計(jì)師在設(shè)計(jì)稿上對各種間距、寬度、特殊字體、特殊字色、特殊行高等等進(jìn)行標(biāo)注,這樣在頁面制作的時(shí)候不用去重新量取也大大加強(qiáng)了還原設(shè)計(jì)稿的準(zhǔn)確度,更減少了與設(shè)計(jì)師的溝通成本和后期聯(lián)調(diào)成本。如下樣例:
三、網(wǎng)頁標(biāo)尺工具(FastStone Capture)
航海用的指南針、醫(yī)生用的體溫計(jì)、木匠用的卷尺……很多職業(yè)都有它專用的測量儀器,那么我們在制作頁面的時(shí)候勢必也要測量間距、寬度、高度、顏色……等等數(shù)據(jù),那么頁面制作是不是也應(yīng)該有一個(gè)專業(yè)的頁面精確測量的工具呢?
這里介紹一款可以精確測量網(wǎng)頁的軟件FastStone Capture,其可謂是 軟件雖小,卻五臟俱全。
四、FastStone Capture 簡單教程
1、打開測量工具
點(diǎn)擊控制面板最右邊的圖標(biāo),打開選擇“屏幕尺”,會(huì)在屏幕上顯示如下圖的尺子、為了方便透視測量,可將尺子設(shè)置成透明或半透明:
2、橫向測量
默認(rèn)尺子是橫放的,可以按鍵盤上、下、左、右鍵單像素移動(dòng)尺子,鼠標(biāo)點(diǎn)在尺子的刻度上,屏幕右上角會(huì)有一個(gè)放大鏡顯示測量的區(qū)域,拖動(dòng)鼠標(biāo)可以精確測量水平的長度。拖動(dòng)尺子橫向兩邊緣可將尺子任意拉長或縮短。
3、垂直測量
點(diǎn)擊尺子上的如圖的按鈕圖標(biāo)可將尺子垂直:或雙擊尺子可將尺子垂直。
垂直測量和橫向測量的方法類似,這里就不重復(fù)說了。
4、點(diǎn)對點(diǎn)測量
點(diǎn)擊尺子上的圖標(biāo): ,屏幕右上角放大鏡會(huì)顯示線長度。
用鼠標(biāo)拖動(dòng)從A點(diǎn)到B點(diǎn)的直線,測量兩點(diǎn)間的距離。
5、矩形測量
可惜該軟件沒有三角板也沒有圓規(guī),難以測量矩形。別急,可以用其他方法代替,這里用到截屏功能。
點(diǎn)擊尺子上的圖標(biāo)關(guān)閉尺子,返回軟件控制面板,點(diǎn)第三個(gè)圖標(biāo) (撲捉矩形區(qū)域):
拖動(dòng)鼠標(biāo)測量想要測量的網(wǎng)頁矩形模塊吧,屏幕左(或右)上角的放大鏡會(huì)顯示w*h=值*值,w是寬度,h是高度。
6、網(wǎng)頁取色
點(diǎn)擊軟件控制面板右邊的圖標(biāo): ,出現(xiàn)下拉框,選擇“屏幕取色器”,出現(xiàn)吸管圖標(biāo),移動(dòng)吸管指示的坐標(biāo)點(diǎn)擊獲取屏幕任一地方的顏色值。
- DIV+CSS設(shè)計(jì)的誤區(qū)
- CSS基礎(chǔ):常用CSS英文字體介紹
- IE6和IE7中border邊框斷線現(xiàn)象
- border:none;與border:0;的有什么不同?
- div+css下js對聯(lián)廣告不隨屏幕滾動(dòng)的解決方法
- HTML元素的ID和Name屬性的區(qū)別
- divcss教程:深入了解css的行高Line Height屬性
- CSS文檔流,塊級元素和內(nèi)聯(lián)元素
- 5個(gè)你該知道的CSS3新技術(shù)
- 用正則表達(dá)式替換a標(biāo)記href值
- 30個(gè)優(yōu)秀的CSS導(dǎo)航和按鈕設(shè)計(jì)教程
- css中px和em有什么區(qū)別
Div+CSS教程Rss訂閱Div+Css教程搜索
Div+CSS教程推薦
猜你也喜歡看這些
- DIVCSS布局實(shí)例:各種2欄3欄布局實(shí)例(附下載)
- DivCSS布局實(shí)例用dldtdd來制作列表
- CSS技巧:text-indent隱藏文字(以圖換字)
- CSS實(shí)例:無懈可擊的CSS圓角技術(shù)!
- 用背景圖片實(shí)現(xiàn)CSS柱狀圖表一例
- DIVCSS菜單實(shí)例:紅與黑具有立體質(zhì)感的CSS菜單
- DivCSS實(shí)例:符合web標(biāo)準(zhǔn)的嵌入Flash的方法-JS調(diào)用
- Web標(biāo)準(zhǔn)實(shí)戰(zhàn)CSS網(wǎng)頁布局Google首頁
- CSS布局中常用的CSS圖像置換、圖片替代的方法舉例
- 仿谷歌google的搜索框下拉提示列表效果
- 相關(guān)鏈接:
- 教程說明:
Div+CSS教程-網(wǎng)頁制作中如何精確還原設(shè)計(jì)稿的幾個(gè)步驟。