首頁(yè)技術(shù)文章正文

Web靜態(tài)頁(yè)面開(kāi)發(fā)：網(wǎng)頁(yè)設(shè)計(jì)效果圖分析

更新時(shí)間:2019年07月16日17時(shí)00分來(lái)源:傳智播客瀏覽次數(shù):

搭建靜態(tài)頁(yè)面是指將設(shè)計(jì)的網(wǎng)頁(yè)效果圖轉(zhuǎn)換為能夠在瀏覽器瀏覽的頁(yè)面。這就需要對(duì)頁(yè)面設(shè)計(jì)規(guī)范有一個(gè)整體的認(rèn)識(shí)并掌握一些基本的網(wǎng)頁(yè)腳本語(yǔ)言，例如HTML、CSs等。需要注意的是，在拿到網(wǎng)頁(yè)設(shè)計(jì)效果圖后，切忌直接切圖、搭建結(jié)構(gòu)。應(yīng)該先仔細(xì)觀察并分析效果圖，對(duì)頁(yè)面的配色和布局有一個(gè)整體的認(rèn)識(shí)，主要包括顏色、尺寸、輔助圖片等，具體介紹如下。

頁(yè)面效果圖分析

(1)顏色:觀察網(wǎng)頁(yè)效果圖的主題色、輔助色、點(diǎn)睛色，了解頁(yè)面的配色方案。

(2)尺寸:觀察網(wǎng)頁(yè)效果圖的尺寸，確定頁(yè)面的寬度和模塊的分布。

(3)輔助圖片:觀察網(wǎng)頁(yè)效果圖，看哪些地方使用了素材圖片。確定需要單獨(dú)保留的圖片。例如，重復(fù)的背景圖、小圖標(biāo)、文本內(nèi)容配圖等。對(duì)頁(yè)面效果圖有了一個(gè)基本的分析之后，就能夠“切圖”了。“切圖”就是對(duì)效果圖進(jìn)行分割，將無(wú)法用代碼實(shí)現(xiàn)的部分保存為圖片。當(dāng)切完圖之后，就可以使用Html、css搭建靜態(tài)頁(yè)面。搭建靜態(tài)頁(yè)面就是將效果圖轉(zhuǎn)換為瀏覽器能夠識(shí)別的標(biāo)記語(yǔ)言的過(guò)程。

以上我們介紹了“web前端頁(yè)面開(kāi)發(fā)需要注意的問(wèn)題”，如果還有其他問(wèn)題，可以點(diǎn)擊頁(yè)面的咨詢按鈕獲得幫助。

推薦了解熱門(mén)學(xué)科

java培訓(xùn)	python人工智能	web前端	UI設(shè)計(jì)培訓(xùn)	軟件測(cè)試培訓(xùn)
PHP+H5	C++	新媒體培訓(xùn)	大數(shù)據(jù)培訓(xùn)	區(qū)塊鏈培訓(xùn)
產(chǎn)品經(jīng)理培訓(xùn)	Linux運(yùn)維培訓(xùn)	影視制作培訓(xùn)	智能機(jī)器人軟件開(kāi)發(fā)