对于很多刚学完CSS理论，想要一展DIV+CSS制作功底的人来说。 最大的问题是你有理论但不知道从哪里开始。 为了解决这个问题，我们可可家网站总结了一些DIV+CSS网页制作流程。 今天我们就一起来学习一下吧！

1. 分析艺术品

在制作网页之前，我们通常会提前设计网页的大致效果并绘制图稿。 因此，分析网页图稿是我们DIV+CSS制作的首要任务。 因为如果你错过了这一步，你后续的布局就会很乱。 美术绘画可以从以下三个方面来分析：

1. 网页结构

我们可以先分析网页的左右、上下结构来把握整体布局。 然后，为了方便我们拆分布局，我们可以重点分析一些重要的部分，比如网页的头部、主体的核心内容、底部的版权等。

2. 分析材料

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

3.特效分析

如果网页中有特效，我们就要考虑是否可以实现以及如何实现？ 如果我们感觉对实现这些特效没有把握，可以寻找对应的特效代码来嵌入。 这个时候我们就需要收集比较常用的CSS+JS特效，方便布局和应用。

通过以上三点的分析，我们必须清楚整体框架是如何布局的，网页是如何划分结构的，是否存在局部难点。

2.剪出材料

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

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

3.引入初始化模板

为了节省我们每次开发CSS项目时的准备时间，我们不妨考虑引入一个初始化CSS模板。 初始模板包括 CSS 文件 (style.css)、html 文件 (index.html) 和图像文件夹。

4、将剪出的网页图片素材放入初始化模板中

这一步很简单，只需将网页素材图片复制到新项目的文件夹中即可。

5.开始布局

一般布局是从上到下、从外到内。 先布置同层最大的结构框架，然后进行局部布置。

例如，对于头部，一般我们可以先定义最外面的div框，即设置CSS布局中心，CSS宽度等，然后布局头部的上下结构，然后设置局部的左和右正确的框架，最后布置内容。 （左右布局一般采用css float样式）

至于局部布局，我们以设置左右边框为例。 正确的做法是先布局最外面的盒子，然后按照左右两个盒子的布局，再回到左边的盒子开始布局左边的内容。 切记不要在布局完最外层盒子而没有布局左右结构框的情况下直接布局左右内容。 这种做法很容易造成布局混乱和布局错误。

如果布局时不确定自己的布局是否正确或兼容，可以在布局时在浏览器中测试兼容性。 这将有助于我们及时发现问题并解决问题。

6.测试css兼容性并完成布局

网页布局完成后，对常用浏览器进行最终的兼容性测试，并进行最后的调整和改进。

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