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 中，修改原文件，也在导出的网页文件中修改。