域名注冊(cè) 網(wǎng)站制作
您現(xiàn)在的位置:首頁(yè) >> 網(wǎng)站建設(shè) >> 內(nèi)容

DIV CSS布局分析與切圖的實(shí)戰(zhàn)應(yīng)用介紹

時(shí)間:2015/3/18 15:27:16 點(diǎn)擊:235

摘要:DIV CSS布局分析與切圖的實(shí)戰(zhàn)應(yīng)用介紹 從美工圖到DIV CSS到制作成HTML中間必不可少的步驟為對(duì)美工圖的分析和美工圖的切圖。平時(shí)大家說(shuō)切圖也是從這個(gè)步驟撿取的一個(gè)詞語(yǔ)來(lái)代表css完整制作的...

DIV CSS布局分析與切圖的實(shí)戰(zhàn)應(yīng)用介紹

從美工圖到DIV CSS到制作成HTML中間必不可少的步驟為對(duì)美工圖的分析和美工圖的切圖。平時(shí)大家說(shuō)切圖也是從這個(gè)步驟撿取的一個(gè)詞語(yǔ)來(lái)代表css完整制作的代名詞,就像div css制作一樣。

一、美工圖分析

在拿到網(wǎng)頁(yè)美工圖,第一件事不是直接切圖,而是分析美工圖,主要從以下方面分析:

1、網(wǎng)頁(yè)結(jié)構(gòu)分析

從上到下,從外到內(nèi)分析美工圖結(jié)構(gòu)情況,以便布局時(shí)候如何架構(gòu)網(wǎng)頁(yè)框架,分析美工圖結(jié)構(gòu)時(shí),無(wú)需真正畫出結(jié)構(gòu)情況,而是默默分析即可。

2、圖片素材分析

哪些是內(nèi)容圖片、哪些是背景素材,如何切、切多少作為素材,都需要直接分析出。

以上分析只需要直接在心里默默分析即可,均不需要?jiǎng)邮之嫛?

二、切圖(布局所需圖片素材獲得)

根據(jù)分析,使用軟件切出需要的圖片內(nèi)容和圖片素材,切圖時(shí)候圖片素材注意與周圍聯(lián)系技巧性切。ň唧w切圖軟件使用方法與圖文教程在VIP教程均提供,同時(shí)在線培訓(xùn)時(shí)也演示個(gè)大家)。

切素材圖片時(shí)候盡量切小,能平鋪使用圖片注意把握規(guī)律,切出后在布局中平鋪使用即可,不需要整切,從而減少文件大小。

三、導(dǎo)出圖片

切好圖片后,就是導(dǎo)出圖片素材,導(dǎo)出圖片有2種情況,常見(jiàn)有3個(gè)圖片文件方式——gif,jpg和png格式。

導(dǎo)出切好圖片時(shí),可以在切好一處導(dǎo)出一次,也可以切好多處一次性導(dǎo)出幾處的圖片素材。

導(dǎo)出圖片時(shí)候常用gif格式,如果圖片色彩比較絢麗豐富,一般GIF格式圖片就不是那么清楚漂亮,這個(gè)時(shí)候選擇jpg或png格式圖片,在導(dǎo)出JPG格式的圖片時(shí)候根據(jù)需求選擇高、非常高的質(zhì)量。

在導(dǎo)出半透明或陰影圖片時(shí)候我們通常使用導(dǎo)出png擴(kuò)展名的圖片文件,導(dǎo)出時(shí)候選擇png-24格式質(zhì)量的Png。

有時(shí)可能一次性不能導(dǎo)出所有所需的圖片素材,可能會(huì)忘記一些,這時(shí)無(wú)所謂再通過(guò)軟件切出和導(dǎo)出所需素材即可。

從美工圖分析到切好圖片素材后,即開(kāi)始DIV CSS布局網(wǎng)頁(yè),這個(gè)時(shí)候從上開(kāi)始從外到內(nèi),根據(jù)分析一步步完成CSS開(kāi)發(fā)制作。

以上DIVCSS5為大家介紹分析和切圖的思維總結(jié),希望對(duì)大家有一定幫助。

轉(zhuǎn)載請(qǐng)保留原文地址: http://m.448gfe.cn/show-465.html

責(zé)編:王麗 作者:不詳 來(lái)源:網(wǎng)絡(luò)