1.3.1 创建新的站点

首先来创建当前网站的Web站点，只有在Web站点中制作才能够正确的制作出页面效果，具体操作步骤如下：
1.启动Dreamweaver 8软件，选择【新建站点】命令。
2.在弹出的定义站点对话框窗口中选择【高级】选项卡。
3.在【本地信息】中设置本地站点参数，如图1.39所示。
 
图1.39 定义站点对话框
4.点击【确定】按钮，站点建立完毕。在硬盘上建立一个名为“gongyi”的文件夹，这个文件夹就是当前站点的根目录。

1.3.2 对效果图进行切片

由于这里制作的页面效果图属于门户页面，而不是完全的形象页面，所以在切片的时候一定要明确切片的目的：就是为了获得图像素材。那么在最终生成的网页中，所有需要使用到的图像素材都应该切片输出，而纯文本部分则不需要考虑在内。最终切片效果如图1.40所示。
 
图1.40 对效果图的切片
在对效果图进行切片的时候，一定要注意：切片之间不要重叠、错位，同样的内容只需切片一次。下面就一些特别需要注意的地方来进行说明。
1.在绘制切片的时候可以按照辅助线来进行切割，这样会更精确。
2.不是所有的文本必须以网页的纯文本形式出现，有些特殊需要的文本如按钮上的文本，或特殊字体的文本等也可以切片输出，在网页中制作成图片的形式，如图1.41所示的几个不同的版本按钮。
 
图1.41 页面中间的广告栏
3.同样的效果只需要切片一次即可，例如这里的new按钮都是一样的，所以只需要切片其中的一张就可以了，如图1.42所示。
 
图1.42 页面中间的广告栏
4.对于比较标准的图像，如果标准的矩形或椭圆形，可以在选择图像后，单击鼠标右键，选择【插入矩形切片】命令，快速地插入切片，这样比自己手动绘制要精确，快速，如图1.43所示。
 
图1.43 【插入矩形切片】命令
5.对于可以用来制作平铺效果的背景图片，只需要切片其中的一小部分即可，平铺后给人还是整体的感觉，如图1.44所示。
 
图1.44 切片背景图像
1.3.3 对切片进行优化
对切片进行优化也是必不可少的一项工作，这样可以让网页中的图像在保持最佳的显示效果的同时，可以快速地下载并显示。在前面的章节中已经给大家介绍了有关优化的概念和方法，这里就不再复述，只是把针对于本例的优化方法进行介绍，具体操作步骤如下：
1.选择需要优化的切片。
2.在Fireworks 8中选择画布上方的【2幅】按钮，切换到2幅的预览状态，可以在左侧的【原始】窗口中选择需要优化的切片，而在右侧的【预览】窗口中查看优化后的效果和文件大小，如图1.45所示。
 
图1.45 【2幅】预览模式
3. 选择【窗口】@@【优化】命令（快捷键为【F6】）打开Fireworks 8的【优化】面板，如图1.46所示。
 
图1.46 【优化】面板
3.依次选择所有的切片，在【优化】面板中进行优化即可。一定要把所有的切片都进行优化。
【说明】对于优化图像的格式而言，颜色较多、有渐变色和纹理的图像适合优化成Jpg格式，如广告或顶部通栏的部分。而颜色相对较少的图像适合优化成Gif格式，如按钮，文本或小图标等。
4.优化完毕后要输出到前面建立好的站点中，选择【文件】@@【导出】命令（快捷键为【Ctrl+Shift+R】），打开Fireworks 8的【导出】面板，如图1.47所示。
 
图1.47 Fireworks 8的【导出】面板
5.在导出面板中进行相应的设置：
$$ 导出的位置一定要在前面所建立好的“gongyi”文件夹内。
$$ 文件名可以命名为“index”。
$$ 在【导出】下拉列表中选择【HTML和图像】命令，这样Fireworks 8会自动生成相应的HTML页面。
$$ 在【HTML】下拉列表中选择【导出HTML文件】命令。
$$ 在【切片】下拉列表中选择【导出切片】命令。
$$ 选择【将图像放入子文件夹】复选项，可以把生成的图片放置到二级文件夹中，Fireworks 8默认生成的文件夹名为“images”。
6.设置完毕，点击【导出】按钮，输出网页和图像，生成的图像如图1.48所示。
 
图1.48 切片生成的图像