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条评论)
发布评论
最新评论