Fireworks MX网页设计实用指南

附录

谢臻

Fireworks MX在以Web为中心的单一环境中提供了图形专业人员所需的设计工具。你可以使用它创建和编辑位图、矢量图形，还可以非常轻松地做出各种网页设计中常见的效果，比如翻转图像、下拉菜单等；轻松地编辑和无缝地集成所有主要图形格式的源文件，并导出为Flash和Dreamweaver项目，或输出为可以在Photoshop、Illustrator等软件中编辑的格式。

一、Fireworks MX快速入门

1.Fireworks MX的工具栏

首先来看一下Fireworks的工具栏，对于任何用户来说工具栏无疑是使用得最多的部分，因此Macromedia采取了非常人性化的面板设计。我们可以看到整个工具栏被分割成选择对象、位图、矢量对象、网页 、颜色、视图六个部分，每个部分的工具都有不同的含义与用法。几乎所有的Fireworks常用绘图操作都可以使用工具栏中的工具完成。
(1)选择对象工具：
选择对象工具是绘图软件必备的基本工具。在Fireworks中工作时，将需要处理矢量对象、位图对象、文本块、切片和热点以及像素区域。使用选择工具和变形工具，可以移动、复制、删除、旋转、缩放或倾斜对象。在具有多个对象的文档中，可以通过对对象执行堆叠、组合和对齐操作来组织它们。
（图1）

2.Fireworks MX的滤镜

对于一款图形处理软件来说，滤镜功能无疑是其重要的组成部分，大家一定对Photoshop的强大滤镜功能印象深刻。由于不针对平面设计领域，Fireworks自带的滤镜功能比较少，但是却可以通过设置外挂滤镜进行扩展。我们可以通过使用“滤镜”菜单命令来选择需要进行的滤镜操作。
（图7）

3.Fireworks MX的图层混合模式

图层是图形处理中最基本的概念，如果用好了图层的混合，很多复杂的效果唾手可得。图层的混合指的是在两个不同的图层上的图形混合。按下F2键就可以打开Fireworks 的“层”面板，我们可以在这里选择层的混合模式。下面是我们常用的一些混合模式：
(1)“色彩增殖”混合模式：将被选定图层与其下方图层的颜色进行混合，表现得更加暗淡，如果被选定的图层为黑色，则混合后为黑色，被选定图层为白色，则不会有任何效果。
(2)“屏幕”混合模式：将被选定图层与其下方图层的颜色进行混合，表现得更加明亮，如果被选定的图层为白色，则混合后为白色，被选定图层为黑色，则不会有任何效果。
(3)“变暗”混合模式：将被选定图层与其下方图层的颜色进行对比，亮的部分会使用下层图层的图像，暗的部分会将两个图层混合，显示出更暗的效果。
(4)“变亮”混合模式：将被选定图层与其下方图层的颜色进行对比，暗的部分会使用下层图层的图像，亮的部分会将两个图层混合，显示出更亮的效果。
(5)“差异”混合模式：使用被选择图层的颜色，下层图层的明暗进行混合。

4.Fireworks MX中的批处理操作

批处理是自动转换一组图形文件的一种简便方法。可以选择执行下面的批处理操作：将所选文件转换为其他格式；使用不同的优化设置将所选文件转换为相同的格式；缩放导出的文件；查找和替换文本、颜色、URL、字体和非网页216色；通过添加前缀或后缀重命名文件组；对所选文件执行命令。下面是自动批处理的具体操作步骤：
(1)点击“文件→批处理”菜单命令，打开“批次”对话框。在其中选择所需要进行处理的文件后，点击“添加”按钮将文件添加到选择框中。
(2)点击“继续”按钮，打开“批处理”对话框，在“批次选项”框中选择“导出”选项，点击“添加”按钮，此时会出现“导出”选项，在“设置”下拉列表中选择要输出文件的格式。如果在下拉框中没有你满意的设置，可以点击“编辑”按钮自行编辑输出的文件属性；选择“缩放”选项后，在打开的下拉列表中可以看到四个选项。其中，无缩放表示原样导出文件。缩放到大小表示将图像缩放到指定的确切宽度和高度。缩放到匹配区域表示使图像按比例缩放以适合你指定的最大宽度和高度范围。按百分比缩放表示按百分比缩放图像；选择“查找与替换”选项，它的作用是替换PNG格式文件(只对PNG格式的文件有效)中的颜色、字体、文字大小等属性，如果对其他格式使用该选项将不会有任何的效果。选择“重命名”选项，在下拉框中我们可以给选择的文件添加前缀名或者后缀名。而其中的“命令”选项则是Fireworks预设置的一些常用的批处理命令，我们可以直接点击展开选择菜单直接进行选择，需要注意的是所有的预设批处理命令都只能直接套用，而不能进行编辑。上面的动作添加完毕后，点击“继续”按钮，将打开相应的对话框。
(3)在这里，选择用于保存文件的选项。你可以在批处理中保存原始文件的备份副本。文件的备份副本放在“Original files”子文件夹中，该子文件夹与每个原始文件属于同一文件夹。设置完毕，点击“批次”按钮即可。
好了，相信你已能熟练操作Fireworks了，下面让我们进一步来学习有关Fireworks的高级应用。

二、利用Fireworks MX制作动画Banner

网站的制作总是离不开漂亮的动画，一个富有创意的精致Banner会让人对你的网站印象深刻。Banner是网站的名片，是网上合作的重要平台，无论是网上广告还是友情链接都离不开它，它占据着页面中最宝贵的位置──头部，是来访者注意力的焦点，也是网站门面之所在。

1.准备Banner素材

(1)打开Fireworks，首先按照网络Banner的一般规则新建一个468×60的新文件，其背景色为白色。
(2)在工具栏上选择“矩形”工具，设置填充色为深红色，边框色为无，绘制一个比图形区域略大的矩形。
(3)在工具栏上选择“文字”工具，输入需要的文字，如电脑报书友会。在“参数选择”对话框中设置文字的大小、颜色与字体。并将文字置于Banner的左上角。
(4)选中“电脑报书友会”，点击“文本→转化为路径”菜单集合将文字转换为路径，然后再点击“修改→取消组合”菜单命令将路径解除组合状态。我们可以在图形文件上看到文字已经能够被转化为四个路径。
(5)在界面下方的“属性”设置面板中，将“纹理”选项选择为“网格线3”以利用纹理进行填充，将后面的滑动条上的滑块拖曳到100%，然后点击选中“透明”选项。此时我们可以看到文字被线条填充。
(6)在工具栏上选择“椭圆”工具，使用黑色为边框色，并使用不同的填充色绘制三个宽与高均为12像素的圆。将这三个圆依次放置在Banner的右边。

2.动画帧的设置

(1)在工作区域右侧打开“层”面板，选择“层 1”，点击面板上右上角倒三角的按钮，将弹出层设置菜单，选择“共享此层”命令，将“层 1”共享，这样凡是放置在“层 1”中的所有元素在任意帧上都可以被显示。
(2)点击“层”面板下方的“新建/复制层”按钮，新建一层，再打开“帧和历史记录”面板，点击面板下方的“新建/复制帧”按钮新建一个“帧 2”。
(3)使用Fireworks打开准备好的人像图片。选择人像后复制粘贴到“帧 2”中。请注意粘贴到“帧 2”的同时应当保证此时粘贴的位置在“层 2”，即保证鼠标选中“层 2”。
(4)选中人像图形，点击“修改→变形→任意变形”菜单命令对图像进行变形，将其大小缩小到28×28 像素，如果你使用的是其他图像可以自行定义缩放的大小。在“层”面板上选中放置人像的层，拖曳上方滑块，将其透明度调整为40%。
(5)在“帧和历史记录”面板上点击右上角的倒三角按钮，在弹出菜单中选择“复制帧”命令复制一帧。将人像图像复制到这一帧的“层 2”中，并且设置透明度为60%，大小为35×35像素。选择“复制帧”命令复制一帧。将人像图像复制到这一帧的“层 2”中，并且设置透明度为80%，大小为45×45像素。
再次选择“复制帧”命令复制一帧。将人像图像复制到这一帧的“层 2”中，并且设置透明度为100%，大小为55×55像素。
然后在“帧和历史记录”面板上双击“帧 1”，将“帧 1”的显示是调整为15毫秒，并以同样的方法将其他帧的显示时间都改为15毫秒。
在“帧和历史记录”面板上将“帧 5”复制4帧，分别为“帧 6”、“帧 7”、“帧 8”、“帧 9”，并且将“帧 5”、“帧 6”、“帧 7”、“帧 8”的显示时间改为10毫秒，将“帧 9”的显示时间定为100毫秒。因为我们必须让动画停下来以给浏览者足够的时间阅读相关的信息，所以在Banner的制作中，最后显示信息的帧一般要多停留一段时间。
在“帧和历史记录”面板上选择“帧 5”，在工具栏上选择“文字”工具，输入你需要的文字，如www.itbook.com.cn，在界面下方的“属性”设置面板中调整文字的大小、颜色、字体等属性。
(6)选择输入的文字www.itbook.com.cn，点击“修改→动画→设置”菜单命令进行动画的设置。在弹出的对话框中，我们可以设置动画运行的帧数、元件旋转的角度，元件大小的变化等一系列属性。在这里设置后动画的运动方式是：元素完全透明从右至左移动250个像素后变为完全不透明。设置完毕后点击“确定”按钮，我们可以看到文字已经被Fireworks自动转化为元素，而且还有一根动画线表示文字运动的轨迹，动画线上的每一个点都代表每帧上元素所处的位置。
(7)最后在“帧和历史记录”面板上点击“动画循环”按钮，在弹出菜单中选择“永远”命令，这样我们发布后的动画循环播放，永不停止。当然如果你有特殊需要也可以设置动画循环播放几次后停止。
(8)最后点击“播放”按钮来预览动画的效果，或者按下F12 键来在浏览器中观看动画效果。

三、Fireworks MX的交互式应用

1.简单的交互效果

我们可以使用Fireworks轻松建立简单的翻转图像，比如一个红色按钮，当我们将鼠标移动到按钮上时，按钮变成绿色，当鼠标从按钮上移开后，按钮又恢复原来的红色。这样的效果就是一个典型的翻转图应用，下面我们就来具体看看怎样制作简单的翻转图像。
(1)在工具栏上选择“圆角矩形”工具，在界面下方的“属性”设置面板中设置边框色为无，填充色为深红，使用鼠标在画布上拖曳绘制一个圆角矩形(你也可以使用其他任意的图形代替)。
(2)选中该矩形，点击“编辑→插入→切片”菜单命令制作一个切片。当选定切片时，一个带有十字的圆圈将出现在切片的中央，这称为行为手柄。我们只需要使用鼠标拖动行为手柄并将其放置在目标切片上，可以轻松地创建变换图像和交换图像效果，触发器和目标可以是同一切片。
(3)现在我们就使用鼠标拖曳行为手柄，并在同一个切片上松开鼠标，将打开“交换图像”对话框，我们可以在这里指定当鼠标触发事件后显示哪一个帧的内容，点击“确定”按钮完成设置。

2.制作替换图效果

你一定见过有些网站中使用的取景框效果，我们将鼠标移动到不同的按钮选项上就可以从信息区域中看到不同的图片或者是文字的描述。这样的效果使用了大量的JavaScript代码进行图片的控制与转换，实在是很专业的功能。但是我们可以使用Fireworks轻松实现，完全不需要去了解程序的编写。
(1)首先我们应当准备相应的素材，这里需要三张图片，并使用Fireworks将这三张图片全部改为同样的大小。
(2)新建一个文件，在工具栏上选择“矩形”工具，绘制一个矩形并使用下方的“属性”设置面板设置其长宽与准备的图片相同，边框色为红色，填充色为无，然后设置“效果”选项为阴影特效。在工具栏上使用“矩形”工具绘制三个小矩形，并设置阴影特效。将准备好的三张图片导入，并将其大小均更改为100×75像素，分别放置在三个矩形中。
(3)在“帧和历史记录”面板中复制出三个帧，“帧 2”、“帧 3”、“帧 4”，分别选择这三个帧将准备好的三张图片放置在大的矩形框中。然后选中左边的小图片，点击“编辑→插入→切片”菜单命令制作一个切片，使用同样的方法给其他的图形做切片。
(4)选择第一个小图片的切片，右击中心的圆形按钮，在弹出的菜单中选择“添加交换图像行为”命令，将弹出翻转图片设置对话框，在其中选择大图框，将“帧编号”项设置为“帧 2”。点击“确定”按钮，可以看到从小图片的切片有一个蓝色曲线连接到了大图片的切片上，这表明两者之间有事件关系。
(5)使用同样的方法依次给其他的小图片切片建立事件关系，分别连接到“帧 3”、“帧 4”。在完成设置后，我们可以预览制作的效果。当鼠标移动到每一个小图片上时，在大的图框中将显示大图。

3.弹出菜单效果

弹出菜单是指为响应指针移过触发网页对象(如切片、热点)或单击这些对象的操作而在浏览器中显示的菜单。弹出菜单项可以附加URL链接以便于导航。例如，可以使用弹出菜单来组织与导航栏中的某个按钮相关的若干个导航选项。你可以按照自己需要创建的菜单级数在弹出菜单中创建子菜单。
每个弹出菜单项都以HTML或图像单元格的形式显示，并具有“释放”状态和“滑过”状态，并且在这两种状态中都包含文本。若要预览弹出菜单，必须按F12键在浏览器中预览。Fireworks工作区的预览不会显示弹出菜单。
(1)制作弹出菜单：
在工具栏上选择“文字”工具，输入文字，如Click。并将其放置在图形的左上角。
在工具栏上选择“切片”工具，在文字上画一个矩形。切片后的区域以绿色表示，我们可以在下方的“属性”面板上精确调整切片的位置与大小。右击切片的绿色区域，在弹出的菜单中选择“添加下拉菜单”。打开“下拉菜单编辑器”对话框。“弹出菜单编辑器”会引导你完成整个创建弹出菜单的过程。它的许多用于控制弹出菜单特征的选项被组织在以下四个选项卡中。
“内容”选项卡包含可确定基本菜单结构以及每个菜单项的文本、URL链接和目标的选项；“外观”选项卡包含可确定每个菜单单元格的“释放状态”和“滑过状态”以及菜单的垂直和水平方向的选项；“高级”选项卡包含可确定单元格尺寸、边距、间距、单元格边框宽度和颜色、菜单延迟以及文字缩进的选项；“位置”选项卡包含可确定菜单和子菜单位置的选项。
点击“文本”项下的区域，输入菜单的名称，如选项一。再单击“+”号，重复以上操作，即可添加所有的菜单选项，如果输入有错，可以点击“-”号删除这一个选项。同样在“链接”项下可以输入此菜单选项的链接地址。
在此选项卡上有“左缩进菜单”与“缩进菜单”两个按钮，它们可以用来设置某一菜单选项下的子选项。你只需要先选择一个选项，点击“缩进菜单”就可以将其设置为二级菜单，点击“左缩进菜单”就可以将其恢复为一级菜单。以这样的方法你可以做出结构非常复杂的下拉菜单来。
点击“外观”选项卡。我们可以设置下拉菜单的外观属性。点击“高级”选项卡，在这里可以进一步设置菜单的外观风格，这主要包括表格的属性，如边框的宽度，颜色，以及菜单内容与边框的距离等。最后点击“位置”选项卡，在这里可以调整菜单弹出的位置与方向。
按下F12键预览上面制作的效果。
(2)导出弹出菜单：
你可以点击“文件→输出”菜单命令来输出制作好的效果。但是更方便的是直接点击打开工作窗口右上角的“快速输出”按钮，在这里你可以将文件输出到Dreamweaver、Flash、Director等其他应用程序。
Fireworks生成了在Web浏览器中查看弹出菜单所需的所有JavaScript。在将包含弹出菜单的Fireworks 文档导出为HTML时，同时会将一个名为“mm_menu.js”的JavaScript文件导出到与该HTML文件相同的位置。
在上传文件时，应该将“mm_menu.js”文件上传到与包含该弹出菜单的网页相同的位置。如果希望将该文件发送到其他位置，必须在Fireworks HTML代码中更新引用“mm_menu.js”文件的超级链接，以便反映自定义位置。如果你的文档中包含若干个弹出菜单，或者你有若干个包含弹出菜单的文档，则Fireworks并不创建额外的“mm_menu.js”文件。对于所有文档中的所有菜单，仅使用一个文件。
当包含子菜单时，Fireworks会生成一个名为“arrows.gif”的图像文件。该图像是一个出现在菜单项旁边的小箭头，它告诉用户存在一个子菜单。无论文档中包含多少个子菜单，Fireworks也同样是使用同一个“arrows.gif”文件。