这里主要介绍的是Fireworks 8的位图工具的使用，如果你用过ps的话，会感觉这两个软件在位图处理中有很多相似的地方，本例是一个以女性化妆品为主打产品的企业宣传网站“北京达美”的形象页面效果图设计。达美公司一直致力于结合科技和自然的化妆品产品的研发。由于达美公司主打自然健康的产品理念，因此在整体的页面设计中以绿色为主要的风格，同时配以女性模特、植物和蝴蝶的素材来体现清新、自然的感觉。如图1.1所示。

图1.1 北京达美公司网站形象页面效果图。
1．新建一个Fireworks文件。
2．在弹出的【新建文档】对话框中设置画布的宽度为760像素，高度为430像素，背景颜色为白色。如图1.2所示。

图1.2 【新建文档】对话框
3.选择绘图工具栏中的【选取框】工具，在【属性】面板中进行相应的设置，如图1.3所示。

图1.3 【选取框】工具的属性设置
4.使用【选取框】工具在画布的右侧绘制一个矩形选区，如图1.4所示。

图1.4 使用【选取框】工具绘制选区
5.选择绘图工具栏中的【渐变】工具 ，这时【属性】面板会自动变成渐变色的调节属性。设置渐变的类型为线性渐变，渐变颜色为白色过度到绿色。如图1.5所示。

图1.5 【渐变】工具的属性设置
6.使用【渐变】工具，在画布右侧的选区中单击鼠标左键，渐变色即可填充到当前选区中。如图1.6所示。填充完毕，按快捷键【Ctrl+D】推出位图编辑模式。

图1.6 给选区填充渐变色
【说明】使用【渐变】工具在选区单击，得到的渐变色方向默认为水平方向，如果希望得到不同方向的渐变色，可以使用【渐变】工具在选区中拖拽填充。
7.在Fireworks 8的新窗口中打开事先准备好的图像素材“花草.jpg”，选择绘图工具栏中的【椭圆选取框】工具，在【属性】面板中进行相应的设置，如图1.7所示。

图1.7 【椭圆选取框】工具的属性设置
8.使用【椭圆选取框】工具在图像“花草.jpg”中绘制一个正圆的选区。如图1.8所示。
 
图1.8【渐变】工具的属性设置

9.按住键盘的【Shift】键，这时在鼠标指针的右下角会显示一个小【+】号，表示添加选区。使用【椭圆选取框】工具在当前选区的基础上增加一个新的选区。如图1.9所示。

图1.9 使用【椭圆选取框】工具增加选区
10.现在得到的是有点类似于望远镜的两个椭圆连接在一起的选区，如果需要调整选区在图像中的位置，在【椭圆选取框】工具选中的状态下，直接用鼠标移动即可。把选择的像素区域，复制到前面新建立的画布中来。如图1.10所示。

图1.10 把选中的像素区域复制到画布中
11. 在Fireworks 8的新窗口中打开事先准备好的图像素材“模特.jpg”，选择绘图工具栏中的【多边形套索】工具，在【属性】面板中进行相应的设置，如图1.11所示。

图1.11 【多边形套索】工具的属性设置
12.使用【多边形套索】工具,把图像素材“模特.jpg”的人物区域选中，如图1.12所示。在选择的过程中，不需要完全的压边，因为有羽化的设置。同时如果不小心选择错误的话，必须重新绘制选区。

图1.12 使用【多边形套索】工具选择像素区域
13.把选中的像素区域复制到前面新建的画布中，如图1.13所示。

图1.13 复制选中的像素区域到新的文档中

14.选择绘图工具栏中的【椭圆选取框】工具，其属性设置和前面一致。在画布中绘制一个椭圆的选区。如图1.14所示。

图1.14 使用【椭圆选取框】工具绘制选区
15.选择【选择】@@【反选】命令（快捷键为【Ctrl+Shift+I】），对选区进行反选操作，这样选中的就是椭圆选区以外的部分。如图1.15所示。

图1.15 对选区进行反选操作
11.在图层中选择图像素材“模特.jpg”所在的图层，按键盘的【Delete】键，即可删除所选中的像素区域。根据需要，可以适当移动选区，对图像素材“模特.jpg”的边缘部分进行多次删除，最终效果如图1.16所示。

图1.16 删除选中的像素区域
17.选择【修改】@@【变形】@@【水平翻转】命令，改变模特素材的水平方向。并且使用【缩放】工具适当调整图像的尺寸，对齐到相应的位置。
18.打开【属性】面板中的【亮度/对比度】滤镜命令，适当增加其【亮度】和【对比度】属性，使图像素材更清晰明亮。如图1.17所示。

图1.17 对图像素材进行色彩调整
19.使用绘图工具栏中的【直线】工具，在画布中绘制一个十字坐标，并且在【属性】面板中设置其笔触样式为虚线。如图1.18所示。

图1.18 绘制十字坐标

20.在Fireworks 8的新窗口中打开事先准备好的图像素材“向日葵.jpg”，选择绘图工具栏中的【多边形套索】工具，其属性设置和前面一致，把向日葵选择下来，并且复制到当前画布中。如图1.19所示。

图1.19 使用【多边形套索】工具选择像素区域
21.首先把向日葵复制一个，选中复制的向日葵图像，在【属性】面板的【滤镜】菜单中选择【模糊】@@【运动模糊】命令。
22.在弹出的【运动模糊】对话框中设置好相应的属性，效果如图1.20所示。

图1.20 给图像添加【移动模糊】滤镜
23.在【图层】面板中调整模糊后向日葵的排列顺序，拖拽到所有对象的下方，并且同时设置其【透明度】为40。如图1.21所示。

图1.21 调整图像的排列顺序和透明度
24.把另外一张向日葵的图像缩小到适当的尺寸，并且移动到十字坐标上，如图1.22所示。

图1.22 缩小向日葵图像的尺寸，并且移动到相应的位置
25.使用绘图工具栏中的【选取框】工具，选中图像中多余的像素区域，依次删除。如图1.23所示。

图1.23 使用【选取框】工具，删除图像多余的部分
21.最后，在画布中添加文本和网站标志，整个页面效果图就制作完毕了。效果如图1.1所示。

效果图制作完毕，如何生成网页呢？请看下面的教程：

效果图制作完毕，如何生成网页呢？请看下面的教程：

1.1 创建Web站点
首先来创建WEB站点，具体操作步骤如下：
1.启动Dreamweaver 8软件，选择【站点】@@【新建站点】命令。
2.在弹出的“定义站点”窗口中选择“高级”选项卡。
3.如图1.2所示，在“站点定义窗口”的“本地信息”中设置本地站点参数。
图片附件: 1-03.jpg (2006-8-17 18:04, 56.85 K)


图1.2文档属性对话框
4.点击【确定】按钮，站点建立完毕。
5.在硬盘上建立一个名为“bjdm”的文件夹，这个文件夹就是当前站点的根目录。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
1.2 制作形象首页
然后来制作网站的形象首页，具体操作步骤如下：
1.启动Fireworks 8软件，打开形象页面效果图。如图1.3所示。
图片附件: 1-04.jpg (2006-8-17 18:06, 74.37 K)


图1.3 使用Fireworks 8打开形象首页效果图
2.选择工具箱中的【裁剪工具】选择效果图中的背景渐变色区域。如图1.4所示。
图片附件: 1-05.jpg (2006-8-17 18:06, 20.33 K)


图1.4 选择背景的渐变色区域
3.选择【文件】@@【图像预览】命令（快捷键：【Ctrl+Shift+X】），把背景渐变色优化并输出。如图1.5所示。
图片附件: 1-06.jpg (2006-8-17 18:06, 47.59 K)


图1.5 优化背景图片
【说明】因为背景是渐变色，所以优化为“JPG”格式。
4.单击【导出】按钮，把优化好的背景图片导出到北京达美的站点中，并且在站点中建立一个“img”文件夹来保存所有的图片。如图1.6所示。
图片附件: 1-08.jpg (2006-8-17 18:06, 39.39 K)


图1.6 把背景图片导出到站点中的“img”文件夹中
【说明】导出背景图片的文件名不能使用中文，这里叫做“bg”表示是背景。之所以要把背景图片单独导出，是因为在最后的网页中，背景图片是可以作为网页的背景平铺起来的。
5.在Fireworks 8中重新打开形象首页效果图。
6.在Fireworks 8中的【图层面板】中，点击背景图片前的眼睛图标，把刚刚导出的背景图片隐藏起来。如图1.7所示。
图片附件: 1-09.jpg (2006-8-17 18:06, 33.09 K)


图1.7 隐藏背景图层
【说明】因为背景已经单独输出，所以在后面的编辑中就不需要背景了。把背景图层隐藏后，在导出图像的时候就不会输出背景图层中的内容，效果和删除调这个图层中的内容是一样的。

7.选择【视图】@@【标尺】命令（快捷键：【Ctrl+Alt+R】），打开Fireworks 8的标尺。如图1.8所示。
图片附件: 1-010.jpg (2006-8-17 18:06, 79.51 K)


图1.8 打开Fireworks 8的标尺
8.从标尺中拖拽出辅助线，目的是为了能够更加准确地进行切片。效果如图1.9所示。
图片附件: 1-011.jpg (2006-8-17 18:06, 85.6 K)


图 1.9 拖拽辅助线
9.选择工具箱中的【切片工具】，根据刚刚拖拽出来的辅助线，绘制切片。效果如图1.10所示。
图片附件: 1-012.jpg (2006-8-17 18:06, 90.57 K)


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


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


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

1.3 使用Dreamweaver 8进行调整
1.打开Dreamweaver 8的【文件面板】，使用Fireworks 8生成的网页和切割好的图片都已经保存到站点中。如图1.13所示。
图片附件: 1-015.jpg (2006-8-17 18:06, 33.63 K)


图1.13 文件面板中的网页文件和图片
2.双击“index.htm”，在Dreamweaver 8的编辑窗口中打开生成的形象首页。效果如图1.14所示。
图片附件: 1-016.jpg (2006-8-17 18:06, 107.36 K)


图1.14 打开形象首页
3.把提供的Flash素材拷贝到站点中的Flash文件夹里。如图1.15所示。
图片附件: 1-017.jpg (2006-8-17 18:06, 44.66 K)


图1.15 把Flash动画素材拷贝到站点的Flash文件夹中
4.把形象页面“index.htm”中的女性图片删除。效果如图1.16所示。
图片附件: 1-018.jpg (2006-8-17 18:06, 79.55 K)


图1.16 删除页面中的图片
5.选择删除掉图片的单元格，把刚刚删除掉的图片在【属性面板】中设置为当前单元格的背景图片。如图1.17所示。
图片附件: 1-019.jpg (2006-8-17 18:06, 199.02 K)


图1.17 设置单元格的背景图片
6.选择【插入】@@【媒体】@@【Flash】命令（快捷键：【Ctrl+Alt+F】）。在这个单元格中插入Flash动画“hudie.swf”。如图1.18所示。
图片附件: 1-020.jpg (2006-8-17 18:06, 63.71 K)


图1.18 插入Flash动画
7.但是这个Flash动画的尺寸比单元格的尺寸要大很多，选择这个Flash动画，在【属性面板】中设置Flash动画的宽度和高度分别为“406像素”和“258像素”。最终效果如图1.19所示。
图片附件: 1-021.jpg (2006-8-17 18:06, 169.89 K)


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


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


图1.21 制作背景透明的Flash动画

10.选择【窗口】@@【CSS样式】命令（快捷键：【Shift+F11】），打开Dreamweaver 8的CSS样式面板。如图1.22所示。
图片附件: 1-024.jpg (2006-8-17 18:06, 13.81 K)


图1.22 打开Dreamweaver 8的样式面板
11.点击【CSS样式面板】右下角的 按钮，创建新的样式规则。
12. 如图1.23所示，在弹出的【新建样式规则】面板中进行相应的设置。在“选择器类型”单选按钮中选择“类”；在“名称”文本框中输入“.bg”；在“定义在”单选按钮中选择“新建样式表文件”。
图片附件: 1-025.jpg (2006-8-17 18:06, 22.43 K)


图1.23 新建样式规则
13.点击【确定】按钮，进入到保存样式的窗口。如图1.24所示。
图片附件: 1-027.jpg (2006-8-17 18:06, 38.46 K)


图1.24 保存样式对话框
14.给这个样式命名为“dm”，保存在当前站点中的“css”文件夹中。
15.点击【保存】按钮，进入到样式效果的编辑窗口。
16. 如图1.25所示，在【编辑样式】窗口选择左侧“分类”里的“背景”，在右侧进行相应的设置。在“背景图像”文本框中输入背景图片的相对路径；在“重复”下拉列表中选择“纵向重复”；在“水平位置”下拉列表中选择“右对齐”。
图片附件: 1-029.jpg (2006-8-17 18:06, 33.3 K)


图1.25 选择背景的渐变色区域
17.点击【确定】按钮，样式创建完毕。相应的样式表文件保存这站点中的“css”文件夹内。如图1.26所示。
图片附件: 1-031.jpg (2006-8-17 18:06, 38.94 K)


图1.26 选择背景的渐变色区域
18.在Dreamweaver 8的页面编辑窗口中，选择左下角标签选择器中的“body”标签。如图1.27所示。
图片附件: 1-032.jpg (2006-8-17 18:06, 137.19 K)


图1.27 在标签选择器中选择“body”标签
19.在标签选择器的“body”标签上单击鼠标右键，在弹出的菜单中选择【设置类】@@【bg】，如图1.28所示。
图片附件: 1-033.jpg (2006-8-17 18:06, 11.04 K)


图1.28 给“body”标签添加样式
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

1.4 Fireworks 8中调整图像
1.选择Dreamweaver 8的编辑窗口中形象首页中的“点击进入”图片，单击【属性面板】中的【使用Fireworks编辑】按钮 。
2.这时计算机会自动启动Fireworks 8软件，并且弹出如图1.29所示对话框，点击【使用此文件】按钮。进入到Fireworks 8的编辑状态。
图片附件: 1-034.jpg (2006-8-17 18:06, 23.28 K)


图1.28 Fireworks 8的查找源对话框
3.同样使用【两幅】的优化模式，在【优化面板】中选择“索引色透明”，把当前图像的背景白色更改为背景透明的GIF图像。如图1.29所示。
图片附件: 1-036.jpg (2006-8-17 18:06, 35.96 K)


图1.29 设置图像的背景透明
4.优化完毕，点击Fireworks画布左上角的【完成】按钮，返回Dreamweaver的编辑窗口。
5. 在Dreamweaver 8的页面编辑窗口中，选择左下角标签选择器中的“table”标签，在【属性】面板中设置表格的对齐方式为居中对齐。如图1.30所示。
图片附件: 1-037.jpg (2006-8-17 18:06, 174.82 K)


图1.30 设置表格的对齐方式为居中对齐
6.到此为止，北京达美的形象首页制作完毕，保存并且按快捷键【F12】在IE浏览器中预览。效果如图1.31所示。
图片附件: 1-038.jpg (2006-8-17 18:06, 93.39 K)


图1.31 形象首页完成效果