fireworks导航条
学习啦在线学习网 关于导航条是网页必不可少的一部分，那么怎样制作一个高质量的、美观的导航条呢?那么下面学习啦小编跟分享了更多关于fireworks 导航条，希望你喜欢。
fireworks 导航条的方法/步骤：
学习啦在线学习网 该导航条专门用于以下五张网页的导航(均放在同一目录之中)。即，
主页： index.html
个人简介： personal.htm
我的学校： school.htm
本人作品： writing.htm
自荐书： oneself.htm
学习啦在线学习网 具体步骤是，先制作元件按钮，然后在文档窗口中复制出五个实例，并设置它们的属性，最后将文档导出成“ HTML 和图像”。
1 在fireworks中 制作按钮
学习啦在线学习网 ⑴创建一个新文档，属性如图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 中，修改原文件，也在导出的网页文件中修改。