上篇文章（个人网站建设教程（一）：photoshop制作网页效果图）讲解了如何用Photoshop制作网页效果图，那么怎么把这个网页效果图转化成可以在Dreamwever里面编辑的网页呢，接下来要讲解的是后两个步骤：切片和布局。

首先要将效果图进行切割，就是把大的效果图切割成小的图片，然后对每一个图片进行编辑，其实这个过程也可以在Photoshop中进行，也可以使用新的软件Firework，由于Firework是专门为网页作图创作的软件，所以在切片方面更加有优势，不仅可以切割效果图还可以优化每个图片，所以我们选择在Firework里面切图。

在切割图片之前要注意，在Photoshop中导出效果图的时候要保存成png格式，然后用Firework打开这个png图片。
切割方法：先横向切成几行，在细分切成块。保证切出网页中需要多次修改的区域，比如文字、导航等。切片工具位于工具栏web里面：切割时按住鼠标左键从左上方拖到右下方就是一个矩形区域。

1、切成两行

2、切出左边导航区域

3、细化切割区域

切好后导出网页HTML文件和图片，导出之前先把文件保存，方便后期修改。Ctrl+A全选，执行文件>导出，导出到你想要保存的地方，底下三个选项全都打勾。

选择浏览，在站点内新建一个文件夹images，点击导出。

打开文件夹，双击 htm文件，就可以在浏览器中打开网页了，所有切割的图像都会保存在images文件里面。

然后用Dreamwever打开这个htm文件，自动生成的页面是由表格布局的，接下来就可以修改每一个元素了。