DIV+ CSS网页制作流程

作者:课课家教育更新于： 2019-03-19 11:07:46

       对于很多刚刚学习完css理论，想在DIV+CSS制作中一显身手的人来说。最大的问题莫过于空有一身理论，却不知到该从哪些方面开始入手。为了解决这个问题，我们课课家网站总结了一些DIV+CSS网页制作流程，下面让我们一起进行今天的学习吧！

　　一、分析美工图

　　在网页制作之前，我们通常预先设计出网页的大致效果，画出美工图。所以对网页美工图进行分析是我们 DIV+CSS制作的首要任务。因为如果少了这个步骤，将会导致你接下来布局出现凌乱。美工图，我们可以从以下三方面进行分析：

　　1、网页结构

　　我们可以先分析网页的左右、上下构造，实现整体布局把握，然后为了便于我们拆分布局，可再对一些重要部分进行重点分析，如网页头部，主体核心内容、底部版权等。

　　2、分析素材

　　分析完结构后，接下来我们要分析图片类型。即哪些是内容图片，哪些是背景素材。

　　3、特效分析

　　如果网页中有特效，我们就要考虑自己能否实现，如何实现？如果我们觉得自己实现这些特效的把握不大，可以寻找对应的特效代码嵌入，这个时候就要求平时多收集常用CSS+JS特效，便于布局运用。

　　通过以上3点的分析，我们要做到对整体框架如何布局，网页如何拆分结构、局部是否有难点等心中有数。

　　二、切出素材 

　　接下来，我们就要根据第一步分析，切出网页中图片、网页素材等，然后导出切片。

      图片一般使用GIF格式，如果是图片有半透明一般导出PNG格式，图片内容一般导出为jpg格式。

　　三、引入初始化模板 

　　为了节约每次开发CSS项目时候准备时间，我们不妨考虑引入一份初始化css模板。初始模板包括了CSS文件(style.css)、html文件（index.html）、存放图片images文件夹。

　　四、将切出网页图片素材放入初始化模板 

　　这一步很简单，就是将网页素材图片拷入新建项目的images文件夹内。

　　五、开始布局 

       一般是从上到下布局，从外到内布局，先布局同级最大结构框架，再局部布局。

　　比如头部，大致上我们可以先定义最外层div盒子，即设置好css布局居中，css宽度等，然后布局头部上下结构情况，接着是设置局部左右框架，最后布局内容。（左右布局一般使用css float样式）

　　至于局部布局，我们以设置左右框架为例，正确的做法是先布局最外层盒子，在跟着布局左右结构2个盒子，然后再回到左侧盒子，开始布局左侧内容。切记不要布局最外层盒子后，没有布局左右结构盒子，就直接开始布局左侧及左侧内容。这种做法很容易造成布局混乱与布局错误。

　　在布局时候如果不确定自己布局是否正确是否兼容，可以在布局时候边布局边在一个浏览器中测试兼容，这样做有助于使我们及时发现问题并进行解决。

　　六、测试css兼容，完成布局 

　　网页布局完后，就进行最后常用浏览器兼容性测试，最后调整修改完善。

　　以上就是我们课课家网站为大家总结的DIV+CSS制作的六大流程，不知道DIV+CSS制作从何入手的朋友，不妨参考一下。