用Fireworks制作导航条

　导航条实际上是一组互斥的按钮，因此，快速制作导航条的方法，就是先创建一个按钮元件，然后，在文档中多次应用，并对实例进行简单编辑。
　　下面介绍一个简单导航条的制作方法。
　　该导航条专门用于以下五张网页的导航（均放在同一目录之中）。即，
　　主页： index.html
　　个人简介： personal.htm
　　我的学校： school.htm
　　本人作品： writing.htm
　　自荐书： oneself.htm
　　具体步骤是，先制作元件按钮，然后在文档窗口中复制出五个实例，并设置它们的属性，最后将文档导出成“ HTML 和图像”。

1　制作按钮

　　⑴创建一个新文档，属性如图1所示。并保存为“按钮 .png ” 。

图1 “新建文档”对话框

　　⑵单击“编辑”·“插入”·“新建元件”。
　　提示：可以单击“编辑”·“插入”·“新建按钮”，创建按钮元件。但是，这样做，按钮名称，默认为“按钮”。
　　⑶在“元件属性”对话框上，“名称”框中输入“导航按钮”；“类型”选项区中，选中“按钮”，然后单击“确定”。如图2 所示。

图2 “元件属性”对话框

　　⑷在按钮编辑窗口中，用“圆角矩形”工具制作一个圆角矩形。属性如图3所示。

图3 圆角矩形属性

　　⑸用“矩形”工具制作一个矩形。属性如图4所示。

图4 矩形属性

　　⑹按住“指针”工具在窗口中拖曳（或按 Ctrl ＋ A ），将两个对象选中后，“修改”·“组合路径”·“联合”，将它们联合成为一个对象。
　　提示：“联合”， 是将多个对象结合成一个对象，新对象的轮廓，是由被联合对象的外部界线，内部界线将消失。填充的颜色全部改为下部对象的原填充的颜色。
　　⑺单击“属性”面板上，“效果”右侧的“＋”按钮后，指向“斜角和浮雕”，然后单击“内斜角”。为联合后的对象应用样式。如图5 所示。
　　⑻在“宽度”框中，将宽度设定为“ 2 ”。如图6所示。
　　提示：双击“效果”框中样式名，即可打开样式属性设置对话框。

图5 应用样式“内斜角”

图6 “样式属性”对话框

　　⑼用“文本”工具书写“主页”，并将其放置元件中央。属性如图7 所示。

图7 文本属性设置

　　提示：在“主”与“页”之间加两个全角空格。即，让“主页”两字占用 4 个字的位置。因为，计划在导航条放置的按钮实例上，最多有四个字。
　　至此，按钮的第一种状态“释放”制作完成，效果如图8 所示。

图8 按钮“释放”状态

　　⑽单击按钮编辑窗口上方的“滑过”标签，制作“滑过”状态。
　　⑾单击“复制弹起时的图形”按钮，将“释放”状态的图形复制过来。
　　⑿将文字的颜色改变为黑色；图形对象的颜色改为黄色。如图9 所示。

图9 按钮“滑过”状态

　　⒀单击按钮编辑窗口上方的“按下”标签，制作“按下”状态。
　　⒁单击“复制弹起时的图形”按钮，将“滑过”状态的图形复制过来。
　　⒂将文字的颜色改变为白色，字体改为“华文新魏”；图形对象的颜色改为青色（ #339999 ）。如图10 所示。

图10 按钮“按下”状态

　　⒀单击按钮编辑窗口上方的“按下”标签，制作“按下”状态。
　　⒁单击“复制弹起时的图形”按钮，将“滑过”状态的图形复制过来。
　　⒂将文字的颜色改变为蓝色；图形对象的颜色改为红色，且在“属性”面板上将“效果”框中的“内斜角”效果删除。如图11 所示。

图11 按钮“按下时滑过”状态

　　至此，按钮元件制作完成。“库”面板，如图12 所示。
　　提示：按钮图形，以及文字的字体和颜色，用户可以根据自己的喜好选定。上述仅供参考。

图12 “库”面板

　　“库”面板上可进行的操作
　　•  修改元件，双击该元件名（或预览框中的图形），打开元件编辑窗口，即可以对元件进行修改。
　　•  删除元件，单击“库”面板右下角的删除按钮，即可删除选中的元件。
　　•  复制元件，将元件拖到面板下部的新建按钮上，则可复制元件。

2　制作导航条

　　回到编辑文档窗口
　　⑴将按钮实例，摆放到画布的最左侧后，四次从“库”面板中将按钮元件拖到文档窗口，并摆放整齐。如图13 所示。

图13 导航条上按钮实例

　　提示：为了使五个实例摆放整齐，可以应用“修改”·“对齐”次级菜单中的命令，或者在“属性”面板上，精确设定各个实例的位置（ X 、 Y 值）。
　　⑵选中左侧第一个后，在“属性”面板上，“链接”框中输入“ index.html ”。如图14 所示。

图14 “链接”设置

　　⑶选中右起第二个按钮实例，修改属性。如图15 所示。

图15 “个人简介”设置

　　⑷选中中间的按钮实例，修改属性。如图16 所示。

图16 “我的学校”设置

　　⑸选中右起第二个的按钮实例，修改属性。如图17 所示。

图17 “本人作品”设置

　　⑹选中最右侧按钮实例，修改属性。如图18 所示。

图18 “自荐书”设置

　　提示：“文本”框中，“自荐书”之前加了一个半角空格，这是为了保持文本在按钮中央位置。
　　至此，导航条制作完成，如图19 所示。

图19 制作完成的导航条

　　⑺保存“按钮 .png ”文件，以便今后修改之需。

3　导出导航条

　　导航条制作完成后，要在网页中应用，须将它导出。
　　⑴单击“文件”·“导出”。
　　⑵在“导出”对话框上，选定导出文件的存放目录和文件名后，单击“确定”。如图 20 所示。

图20 “导出”对话框

　　提示：导出的文件包括，一个插入 JavaScript 客户端脚本的网页文件和一些图像切片。

4　备注

　　今后，在使用 Dreamweaver 制作网页时，使用“插入”·“图像对象”·“ Fireworks HTML ”命令，将它们导入网页。
　　制作过程中，设定了各个导航按钮的“链接”目标等，如果需要修改，可以在 Fireworks 中，修改原文件，也在导出的网页文件中修改。