DIV CSS布局分析與切圖的實戰應用介紹
分享
評論
贊0
DIV CSS布局分析與切圖的實戰應用介紹
從美工圖到DIV CSS到制作成HTML中間必不可少的步驟為對美工圖的分析和美工圖的切圖。平時大家說切圖也是從這個步驟撿取的一個詞語來代表css完整制作的代名詞，就像div css制作一樣。
一、美工圖分析
在拿到網頁美工圖，第一件事不是直接切圖，而是分析美工圖，主要從以下方面分析：
1、網頁結構分析
從上到下，從外到內分析美工圖結構情況，以便布局時候如何架構網頁框架，分析美工圖結構時，無需真正畫出結構情況，而是默默分析即可。
2、圖片素材分析
哪些是內容圖片、哪些是背景素材，如何切、切多少作為素材，都需要直接分析出。
以上分析只需要直接在心里默默分析即可，均不需要動手畫。
二、切圖（布局所需圖片素材獲得）
根據分析，使用軟件切出需要的圖片內容和圖片素材，切圖時候圖片素材注意與周圍聯系技巧性切取（具體切圖軟件使用方法與圖文教程在VIP教程均提供，同時在線培訓時也演示個大家）。
切素材圖片時候盡量切小，能平鋪使用圖片注意把握規律，切出后在布局中平鋪使用即可，不需要整切，從而減少文件大小。
三、導出圖片
切好圖片后，就是導出圖片素材，導出圖片有2種情況，常見有3個圖片文件方式——gif,jpg和png格式。
導出切好圖片時，可以在切好一處導出一次，也可以切好多處一次性導出幾處的圖片素材。
導出圖片時候常用gif格式，如果圖片色彩比較絢麗豐富，一般GIF格式圖片就不是那么清楚漂亮，這個時候選擇jpg或png格式圖片，在導出JPG格式的圖片時候根據需求選擇高、非常高的質量。
在導出半透明或陰影圖片時候我們通常使用導出png擴展名的圖片文件，導出時候選擇png-24格式質量的Png。
有時可能一次性不能導出所有所需的圖片素材，可能會忘記一些，這時無所謂再通過軟件切出和導出所需素材即可。
從美工圖分析到切好圖片素材后，即開始DIV CSS布局網頁，這個時候從上開始從外到內，根據分析一步步完成CSS開發制作。
以上DIVCSS5為大家介紹分析和切圖的思維總結，希望對大家有一定幫助。
猜你喜歡
評論(0人參與，0條評論)
發布評論
最新評論