使用Fireworks 8制作网页效果图2－生成网页

图 1.9 拖拽辅助线
9.选择工具箱中的【切片工具】，根据刚刚拖拽出来的辅助线，绘制切片。效果如图1.10所示。

点击放大图片

图1.10 绘制切片
【说明】在绘制切片的时候需要注意，切片和切片之间尽量不要重叠，同时使用切片把所有图像都覆盖起来。
10.点击画布左上角的【两幅】，进入到两幅窗口的显示模式。
11.选择【窗口】@@【优化】命令（快捷键：【F6】），打开Fireworks 8的【优化面板】。如图1.11所示。

点击放大图片

图1.11 对切片进行优化
【说明】在两幅的优化模式下，选择左侧的切片，在【优化面板】中进行设置，优化后的效果会在右侧的预览窗口中显示出来。优化的原则是颜色多、有渐变色的图像区域优化成“JPG”格式；颜色少的图像区域优化成“GIF”格式。
12.全部优化完毕，选择【文件】@@【导出】命令（快捷键：【Ctrl+Shift+R】），打开Fireworks 8的【导出】窗口。如图1.12所示。

图1.12 导出窗口
13.在【导出】窗口中进行相应的设置。保存的位置一定要在站点的根目录，文件名为“index”，保存类型为“HTML和图像”，将所有切片生成的图像都放置到“img”文件夹中。
【说明】使用Fireworks 8的导出命令导出后，会自动生成网页，并且使用表格把导出的切片拼贴成完整的图像效果。

1.3 使用Dreamweaver 8进行调整
1.打开Dreamweaver 8的【文件面板】，使用Fireworks 8生成的网页和切割好的图片都已经保存到站点中。如图1.13所示。

图1.13 文件面板中的网页文件和图片
2.双击“index.htm”，在Dreamweaver 8的编辑窗口中打开生成的形象首页。效果如图1.14所示。

点击放大图片

图1.14 打开形象首页
3.把提供的Flash素材拷贝到站点中的Flash文件夹里。如图1.15所示。

图1.15 把Flash动画素材拷贝到站点的Flash文件夹中
4.把形象页面“index.htm”中的女性图片删除。效果如图1.16所示。

点击放大图片

图1.16 删除页面中的图片
5.选择删除掉图片的单元格，把刚刚删除掉的图片在【属性面板】中设置为当前单元格的背景图片。如图1.17所示。

点击放大图片

图1.17 设置单元格的背景图片
6.选择【插入】@@【媒体】@@【Flash】命令（快捷键：【Ctrl+Alt+F】）。在这个单元格中插入Flash动画“hudie.swf”。如图1.18所示。

点击放大图片

图1.18 插入Flash动画
7.但是这个Flash动画的尺寸比单元格的尺寸要大很多，选择这个Flash动画，在【属性面板】中设置Flash动画的宽度和高度分别为“406像素”和“258像素”。最终效果如图1.19所示。

点击放大图片

图1.19 设置Flash动画的宽度和高度
【说明】Flash动画的宽度和高度实际上和单元格背景的图片是一样的。具体尺寸可以在制作完切片以后，在Dreamweaver中插入图像时得到。
8.选择Flash动画，点击【属性面板】右下角的【参数】按钮，在弹出的【参数】对话框中输入“wmode”＝“transparent” 如图1.20所示。

图1.20 给Flash动画添加参数
【说明】添加这个参数的作用是把Flash动画的背景改变为透明，很多时候我们可以在背景图片上覆盖一个透明的Flash动画，快速实现Flash页面效果。背景透明的Flash动画有很多素材，大家可以直接拿来使用，在网络中可以搜索到很多这样的Flash动画。
9.使用同样的方法，在形象首页的右侧，插入一个Flash动画“text.swf”。如图1.21所示。

点击放大图片

图1.21 制作背景透明的Flash动画
10.选择【窗口】@@【CSS样式】命令（快捷键：【Shift+F11】），打开Dreamweaver 8的CSS样式面板。如图1.22所示。

图1.22 打开Dreamweaver 8的样式面板
11.点击【CSS样式面板】右下角的 按钮，创建新的样式规则。