下拉菜单（在Fireworks中也叫弹出菜单）是一种常见的网页交互方式，当用户将鼠标指针移到触发网页对象（包括切片或热点）上时，或者单击这些对象时，浏览器中将显示弹出菜单。用户可以将URL链接附加到弹出菜单项上以便于导航。

【例13-3】使用Fireworks制作一个下拉菜单，如图13-39所示，当鼠标指针移到“经营品种”文字上的时候，会出现一个包含下级子菜单的下拉菜单，单击其中的某个菜单项时会打开相应的网页。

图13-39　制作下拉菜单实例

1.新建文档

单击“文件”菜单→“新建”命令，在“新建文档”对话框中设置宽度为110像素，高度为40像素，分辨率为72像素/英寸，设置画布的颜色为白色，最后单击“确定”按钮。

2.制作菜单栏标题

单击工具箱中的“矩形”工具按钮，在画布上拖动制作一个矩形。然后使用“文本”工具创建标题文字“经营品种”，如图13-40所示，并在“属性”面板中设置文本字体为楷体、20号、蓝色、加粗，设置背景色为浅黄色。

图13-40　制作菜单栏标题文字

3.为标题文字制作切片

选中标题文字，单击鼠标右键，在快捷菜单中单击“插入切片”命令，为文字创建切片，如图13-41所示。

图13-41　为标题文字制作切片

4.制作下拉菜单

选中创建的切片，单击鼠标右键，在快捷菜单中选择“添加弹出菜单”命令，如图13-42所示，打开“弹出菜单编辑器”对话框。

（1）在“内容”选项卡中，单击“添加菜单项”按钮或“删除菜单项”按钮，可在文本列中加入或删除一个菜单项。

图13-42　“弹出菜单编辑器”对话框

在“文本”列中分别输入各菜单项的名称，如“苹果”、“香蕉”、“瓜果类”、“西瓜”等。

在“链接”列中分别输入菜单项所要链接的地址，如apple.html、banana.html等。

在“目标”列中选择链接对象在浏览器中的打开方式。

如果要把“文本”列中某个菜单项再设置为另一个菜单的下一级目录，例如为“瓜果类”菜单项制作下级菜单，使其包括“西瓜”和“甜瓜”两个菜单项，则分别选中这两个菜单项后，单击“缩进菜单”按钮。

（2）单击“继续”按钮，进入“外观”选项卡，在这里可以对菜单的外观进行改进。首先选择单元格为“HTML”形式还是“图像”形式，然后根据自己的爱好对字体风格、弹起状态和滑过状态等进行设定，效果如图13-43所示。(www.daowen.com)

图13-43　“弹出菜单编辑器”对话框的“外观”选项卡

（3）单击“继续”按钮进入“高级”选项卡。“高级”选项卡中提供了控制单元格大小、边距和间距、文字缩进、菜单消失延时，以及边框宽度、颜色、阴影和高亮等的各种设置，如图13-44所示，用户可以根据需要进行修改。

（4）单击“继续”按钮，进入“位置”选项卡，如图13-45所示。在这里可以对菜单的弹出方式及位置进行设定。最后单击“完成”按钮。

当“网页层”可见时，用户还可以通过在工作区中拖动顶级弹出菜单的轮廓来调整其位置。

图13-44　菜单的高级设置

图13-45　设置菜单的位置

5.预览下拉菜单

单击“文件”菜单→“保存”按钮，在弹出的“另存为”对话框中将其进行保存，如图13-46所示。

单击文档窗口右上角的“预览”按钮（注意，该“预览”按钮不是Fireworks工作区中的“预览”按钮），在其下拉菜单中选择“在主浏览器中预览”命令，如图13-47所示。

图13-46　“另存为”对话框

图13-47　“预览”按钮的展开菜单

注意，若要查看弹出菜单，可以按F12键在浏览器中预览。在Fireworks工作区中预览不会显示弹出菜单。

6.导出下拉菜单

单击“文件”菜单→“导出”命令，打开“导出”对话框。将文件命名为menu.htm，在“导出”下拉列表中选择“HTML和图像”项，如图13-48所示。

这样，Fireworks在导出图像的同时还导出了HTML文件。Fireworks生成了在Web浏览器中查看弹出菜单所需的所有JavaScript。在将包含弹出菜单的Fireworks文档导出为HTML时，同时会将一个JavaScript文件导出到与该HTML文件相同的位置。

图13-48　导出下拉菜单