div css制作步骤介绍divcss5经验篇
DIVCSS5总结CSS制作重要步骤供大家学习与参考。
一、分析带切美工图 - TOP
在CSS制作前对网页美工图分析是必不可少的，少了分析会让你接下来布局凌乱。我们分析也应该遵循整体到局部、从外到内、从上到下，分析内容：
1、网页结构
分析网页结构，让自己有数如何布局网页框架，比如分析网页左右、上下结构构造，便于整体布局把握
比如重要的 头部、内容部分、底部版权
内容部分是什么结构，可以如何拆分布局。
2、分析需要切出图片素材
分析网页美工图那些是作为网页背景、那些是内容图片。
作为网页背景图片，如果是背景不重复的一般是隐藏遮挡背景图片上的内容再整体切出，如果是可以平铺重复显示背景，我们如何切出减少素材大小。
3、特效分析
如果网页中有特效，我们如何实现，自己会那没问题，也可以找特效嵌入，这个时候就要求平时多收集常用CSS+JS特效（CSS特效、CSS模块），便于布局运用。
4、整体把握
通过整体、局部分析应该做到对此网页CSS布局心中有数，整体框架如何布局，网页如何拆分结构布局、局部是否有难点，难点解决等都要做到心中有数。
二、切出素材 - TOP
根据第一步分析，切出网页中图片、网页素材等，PS导出切片。
一般图片GIF格式，如果是图片有半透明一般导出PNG格式（ie6 png透明解决），图片内容一般导出为jpg格式。
三、引入DIVCSS5初始化模板 - TOP
将拷贝一份divcss5初始化模板，命名好文件夹项目名。提供的初始化css模板，包括了CSS文件(style.css)、HTML文件（index.html）、放图片images文件夹，已经对应新建好常用文件夹结构。
四、将切出网页图片素材放入初始化模板 - TOP
我们将网页素材图片考入新建项目的images文件夹内。
五、开始从上到下、从外到内布局 - TOP
1、基础修改设置
一般使用DW软件打开index.html,首先进行基本设置，比如根据网页美工图使用PS获得文字颜色、背景颜色，对css中设置字体颜色、背景颜色、如果背景是图片中设置好CSS背景图片。
2、布局把握
一般是从上到下布局，从外到内布局，先布局同级最大结构框架，再局部布局。
比如，头部，我们就开始布局头部最外层div盒子，设置好css布局居中，css宽度等，再布局头部上下结构情况，再分别设置局部左右框架最后布局内容（左右布局一般使用css float样式）。
比如左右结构内容，一般是先布局最外层盒子，在跟着布局左右结构2个盒子，然后再回到左侧盒子，开始布局左侧内容。新手不要布局最外层盒子后，就开始布局左侧及左侧内容而右侧结构都没有设置布局，如果这样很容易造成布局混乱与布局错误。
重要：一定先最外层，如何对应左侧和右侧盒子大框架布局了，再回到左侧或右侧开始从上到下布局局部。
以上布局把握布局步骤让您在布局时候有条有理，不易造成布局混乱无从下手。
同时在布局时候可能一般不确定自己布局是否正确是否兼容，可以在布局时候边布局边在一个浏览器中测试兼容，新手千万不要在软件中布局完网页才测试，这样很容易造成错误兼容问题找不到原因。在布局中测试可以发现问题解决问题，让DIV+CSS网页兼容更好。
六、测试css兼容，完成布局 - TOP
网页布局完后，就进行最后常用浏览器兼容性测试，最后调整修改完善，这样一个从网页美工图到css制作完成的html网页就完成。
希望以上DIVCSS5总结常见重要布局步骤对大家学习与布局有用，网页布局总体思维布局方法一定要善于总结。
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/rumen/r498.shtml
