DIV CSS布局分析與(yǔ)切圖的實(shí)戰應用介(jiè)紹
從美(měi)工(gōng)圖(tú)到DIV CSS到(dào)製作(zuò)成(chéng)HTML中間(jiān)必不(bù)可少(shǎo)的步驟為對美工(gōng)圖的分(fēn)析和(hé)美工(gōng)圖的(dí)切圖。平時大家說切(qiē)圖(tú)也是從這個步(bù)驟(zhòu)撿(jiǎn)取的一(yī)個(gè)詞(cí)語(yǔ)來代表(biǎo)css完整製(zhì)作(zuò)的(dí)代名詞，就像(xiàng)div css製(zhì)作一樣。
一，美工圖(tú)分析(xī)
在(zài)拿(ná)到網頁美工圖，第一件事(shì)不(bù)是直接切圖，而是分(fēn)析美工(gōng)圖，主(zhǔ)要從(cóng)以下(xià)方麵分析：
1，網頁(yè)結構分析
從上到下(xià)，從外(wài)到(dào)內(nèi)分(fēn)析(xī)美工(gōng)圖(tú)結構情況，以便布局時候(hòu)如(rú)何架構網(wǎng)頁(yè)框架，分(fēn)析美(měi)工圖結構(gòu)時，無需真正(zhèng)畫(huà)出(chū)結(jié)構情況，而是默默(mò)分(fēn)析(xī)即可。
2，圖片素材分析(xī)
哪(nǎ)些是內(nèi)容圖片(piàn)，哪(nǎ)些是背景素(sù)材，如何切，切多(duō)少(shǎo)作為(wéi)素(sù)材，都需(xū)要(yào)直接分析出。
以上(shàng)分析隻需要(yào)直接(jiē)在心裏默默(mò)分析即可(kě)，均不(bù)需(xū)要動(dòng)手(shǒu)畫。
二(èr)，切圖(tú)（布(bù)局所需圖片(piàn)素材獲得）
根據分析，使(shǐ)用(yòng)軟件(jiàn)切(qiē)出(chū)需(xū)要(yào)的(dí)圖片(piàn)內(nèi)容和圖片素材(cái)，切圖時候(hòu)圖片(piàn)素材(cái)注(zhù)意與周圍(wéi)聯(lián)係技巧性切(qiē)取（具體切圖軟(ruǎn)件使用(yòng)方法(fǎ)與圖文教程在VIP教程均提供，同(tóng)時(shí)在綫(xiàn)培訓(xùn)時也(yě)演示(shì)個(gè)大(dà)家(jiā)）。
切素材圖(tú)片時(shí)候盡量(liáng)切(qiē)小，能(néng)平(píng)鋪(pū)使用圖片(piàn)注意把(bǎ)握規律，切(qiē)出後(hòu)在(zài)布局中(zhōng)平鋪(pū)使(shǐ)用即可(kě)，不需要整切(qiē)，從(cóng)而(ér)減少(shǎo)文(wén)件大小。
三，導出(chū)圖片(piàn)
切好圖片(piàn)後(hòu)，就(jiù)是導(dǎo)出圖片素材(cái)，導(dǎo)出(chū)圖(tú)片有2種(zhǒng)情(qíng)況(kuàng)，常(cháng)見有(yǒu)3個圖片文(wén)件方(fāng)式——gif,jpg和(hé)png格式(shì)。
導(dǎo)出(chū)切(qiē)好圖片(piàn)時(shí)，可以在切(qiē)好一(yī)處導出一(yī)次，也(yě)可以切好多處一(yī)次性(xìng)導出(chū)幾處的圖片(piàn)素材(cái)。
導(dǎo)出圖片時(shí)候常用(yòng)gif格式(shì)，如(rú)果圖(tú)片(piàn)色彩比(bǐ)較絢(xuàn)麗豐富，一(yī)般GIF格式(shì)圖(tú)片就(jiù)不(bù)是那(nà)麼(mó)清楚(chǔ)漂亮(liàng)，這個(gè)時候選擇jpg或png格(gé)式圖(tú)片(piàn)，在(zài)導出JPG格(gé)式的圖片時(shí)候(hòu)根(gēn)據需求選(xuǎn)擇(zé)高，非常(cháng)高的質(zhì)量。
在(zài)導(dǎo)出(chū)半(bàn)透明(míng)或(huò)陰(yīn)影圖片時候我們通(tōng)常(cháng)使用(yòng)導(dǎo)出(chū)png擴展名的(dí)圖片(piàn)文(wén)件(jiàn)，導出時候選(xuǎn)擇(zé)png-24格(gé)式質量的Png。
有(yǒu)時可能(néng)一(yī)次(cì)性不(bù)能(néng)導出所有(yǒu)所(suǒ)需(xū)的(dí)圖片素(sù)材，可(kě)能會(huì)忘記(jì)一(yī)些，這(zhè)時無所(suǒ)謂再通過軟(ruǎn)件切(qiē)出和(hé)導(dǎo)出(chū)所(suǒ)需(xū)素(sù)材(cái)即(jí)可。
從美(měi)工圖分析(xī)到(dào)切好圖(tú)片素材後，即開(kāi)始(shǐ)DIV CSS布局網(wǎng)頁，這個(gè)時候從上(shàng)開始(shǐ)從(cóng)外(wài)到(dào)內(nèi)，根據(jù)分析(xī)一(yī)步(bù)步完成CSS開(kāi)發(fā)製作。
以上DIVCSS5為(wéi)大家介紹(shào)分(fēn)析(xī)和切圖的(dí)思維總(zǒng)結，希(xī)望對大家(jiā)有一定(dìng)幫助。
轉載(zǎi)請保(bǎo)留(liú)原文(wén)地址(zhǐ): https://antelcom.cn/show-465.html