页面设计完成之后，我们就要对图片进行切图，并转换成HTML格式了。

　　切图的工作很简单，使用工具箱中的切图工具在图片上进行分割，切割的部分可以转换成HTML页面的表格。因为图片上有些部分转换成HTML表格，有些地方还是用图片，所以切图的时候需要注意转换成表格部分的左右上下区域的位置，保证在生成网页后，留下图片部分不被打乱。下面我们通过实例来理解这句话的意思，请看图9。

图9

　　在Fireworks中使用切图工具先将大的区域切割下来，然后再使用箭头、变形等工具对切割区域进行编辑。一般在切割的时候可能会产生区域之间重叠的现象，所以使用这些工具可以通过移动切片的分割线来调整切割的位置避免重叠的情况。如果有重叠的地方，以顶部的切片为优先。

　　图9中这部分画面中 A 区域是需要在Dreamweaver制作成HTML表格的，但是 A 的变动可能会影响到Dreamweaver中B部分的宽度位置，因此 B 这一部分我们在Fireworks中也做了切割，宽度和 A 部分一样。C 部分是不需要转换的，在Dreamweaver中它和 A 部分只是分别为两列，改变A部分可能会影响到 C 的高度，所以在Fireworks中切图的时候一定要注意 C 和 A 的切割线底部的高度一致（顶部因为和其它切图的部分衔接，所以这里不需要考虑）。

　　这样操作一番在Dreamweaver中去掉A中的白色图片添加表格之后，只要表格的大小不超过A的位置，就不会影响它周围的图片位置了。通过上述的方法才可以保证转换之后网页的效果和图片的效果一样，否则图片取消成表格后页面排列可能会错位。

　　切图完成之后将它导出为HTML页，在Fireworks“文件”菜单下选择“导出”，弹出保存设置对话框，指定好网页保存的位置，然后设定保存的格式为“HTML和图像”，在“HTML”选项种选择“导出HTML文件”，在“切片”中选择“导出切片”，同时勾选“包括无切片区域”。设置好之后最后保存文件名为“index”的网页（图10）。其他两个网页的处理方法也是一样的。

图10

　　五、图片处理

　　制作网页当然少不了图片，为了和网站的整体风格相同，我们可以直接使用模板中的一些图片再加工变成页面需要的图片。例如首页气球那个图片，气球本来就是节日的象征，我们就可以添加上“情人节礼物”的文字表示这是专为情人节准备的小礼物。另外页面左下方的花朵图案正好可以制作成为Gif动画，让它转动起来放在音乐页面，让这个页面不仅有背景音乐烘托气氛，本生就充满动感（图11）。

图11