弹出菜单制作及应用

1　前　言

　　本文介绍用Fireworks MX制作弹出菜单。
　　制作的弹出菜单与应用软件窗口中的菜单栏类似。即，当发生鼠标滑过菜单标志（或单击菜单标志等）事件，触发弹出菜单动作。

2　操作步骤

2.1　制作菜单标志

　　⑴新建一个文档，宽度150像素、高度30像素、分辨率72ppi。
　　⑵用矩形工具绘制一个宽150像素、高30像素的矩形。填充，灰黑色。
　　⑶利用属性面板，为矩形添加，内斜角样式，宽度为4。
　　⑷使用文本工具添加文字：板书；颜色：白色；字体：华文中宋；文字大小：20像素。
　　⑸选中矩形后，单击"编辑"·"插入"·"热点"。

2.2　添加弹出菜单

　　⑴在矩形上单击右键后，单击"添加弹出菜单"，打开"弹出菜单编辑器"对话框。
　　⑵在"内容"选项卡（图 1）上，双击"文本"下方的空单元格，然后在其中输入"Flash MX初步"；双击"链接"下方的单元格，然后输入链接地址；双击"目标"下方的单元格，选择"_blank"（即链接对象在新窗口中打开）。
　　提示：第2步是设置，弹出菜单中最上部的第一个菜单项。
　　⑶重复⑵，添加第二个菜单项…… 
　　⑷在"外观"选项卡（图 2）上，"菜单对齐方式"框中使用默认设置"垂直菜单"；"大小"框中键入15；在"弹起状态"和"滑过状态"选项区中，分别设置菜单项弹出和鼠标滑过时的菜单项文本、单元格（底色）和样式。
　　⑸在"高级"选项（图 3）上，分别设置单元格宽度为150像素、单元高度为30像素。
　　提示：默认情况下，单元格宽度和单元格高度均为自动，也就是根据文本的大小来确定单元格的高度和宽度。
　　选用默认设置来确定单元格的大小，结果很可能不是用户所期望的，因此，应该自行设定单元格大小。
　　默认情况下，左侧的文本框是灰色，不能键入数字，故需要先在右侧的下拉式列表框中，选定"像素"。此后，文本框就可以键入数字了。
　　注意，如果所设定的单元格宽度、高度值，过小，软件会自动扩大，以适应菜单文字大小。

图1

图2

图3

图4

　　⑹在"位置"选项卡（图 4）上，菜单位置下方的"X"框内键入"0"，"Y"框内键入"30"。
　　提示："Y"框中的数值是由单元格高度确定的。小于单元格高度，菜单项将发生（部分）重叠；大于单元格高度，菜单项之间将出现空隙。
　　⑺单击"弹出菜单编辑器"对话框上的完成。弹出菜单的制作工作即告完成。

2.3　文件保存

　　保存Fireworks MX文档，只能使用PNG格式。若要将制作、编辑成果保存为其它格式文件，则必须使用导出方式。

2.4　文件导出

　　Fireworks MX文档，可以导出成不同类型（11种）的文件。由于，制作的弹出菜单，将在网页中应用，因此，导出文件类型为：HTML和图像。
　　⑴单击"文件"·"导出"，打开"导出"对话框。
　　⑵在"保存类型"框中，选定"HTML和图像"；"HTML"框中，自动选定"导出HTML文件"；"切片"框中，自动显示"无"；在"文件名"框中键入"menu.htm"。
　　提示：主文件名，不但Fireworks HTML文件用，同时导出的图像文件也用它。
　　此后，在Dreamweaver MX编辑网页，插入"Fireworks HTML"后，图像文件名及网页中的链接仍要使用主文件名，因此，主文件名不能用中文。
　　⑶在"保存在"框中，选定保存目录。
　　提示：由于导出的HTML文件中，含用于重新装配所需JavaScript及表，以及，导出图像的链接信息，因此，应保存在将来需插入的网站中。以免插入后，不能正常运行。
　　⑷单击"导出"对话框上的"保存"即可。

2.5　弹出菜单应用

　　在Dreamweaver MX编辑的网页中，若需要插入上述弹出菜单，则单击"插入"面板，"常用"选项卡的"Fireworks HTML"按钮后，在"插入Fireworks HTML"对话框上，选定需插入的Fireworks HTML文件，然后，单击"确定"。

3　特别说明

　　上述弹出菜单是，由鼠标滑过行为，触发菜单弹出事件的。如果要更改行为，可上"行为"面板上更改。