在Fireworks4中制作弹出菜单全过程技巧大揭密

文 / Donger　整理 / jingr

三、 如何在Dreamweaver中修改弹出菜单的外观及定位

　　如果在Fireworks4中您选择的弹出菜单的样式是HTML表格形式，那么输出的站点文件夹中就只会有这么几个图片：arrows.gif图片和菜单本身的图片。此外就是一个HTML文件和一个控制弹出菜单的JS文件。

　　在Dreamweaver中打开该HTML文件，切换至Show Code Views模式，此时您看到的将是代码模式的网页文件。Copy了其中一段来进行说明：

　　"window.fw_menu_0_1 = new Menu("艺术字效果",110,19,"Georgia, Times New Roman, Times, serif",12, "#cccccc", "#ffffff","#006699","#009ce8")；"

　　这一段讲的是菜单项"艺术字效果"所引出的子菜单的格式，"110"和"19"是指该弹出菜单的宽度，你可以根据实际需要对该值进行修改；"Georgia, Times New Roman, Times, serif"是刚才在Fireworks4的向导窗口中选定的字体格式；"12"是指字体尺寸大小；"#cccccc","#ffffff","#006699","#009ce8"这些颜色值分别代表的是默认的弹出菜单的文字颜色、当鼠标移到弹出菜单上时文字的颜色、默认的弹出菜单的背景颜色、当鼠标移到弹出菜单上时背景的颜色。所有的这些值您都可以根据需要进行修改，然后保存一下就能在浏览器中看到修改后的效果。

　　弹出菜单中的同级菜单的设置标准都是相同的，不同级菜单却可以有不同的外观设置，例如本例?quot;艺术字效果"和"动态字效果"算是同级菜单，而"卡通艺术字"、"变形艺术字"和"卷边艺术字"也是同级菜单。"艺术字效果"这一级的菜单和"卡通艺术字"这一级菜单可以有完全不同的外观设置及文字属性设置，只要您设计得好，五颜六色的弹出菜单有什么不好吗？这些在Fireworks4中是不能简单地定义的。

　　改变弹出菜单的定位。当我们将Fireworks4中输出的弹出菜单插入HTML文档预览时，我们常发现它并不象我们期望的那样出现在指定位置，特别是当插入的位置不是紧靠左和顶端的位置时，情况会显得更加糟糕。其实Fireworks4在输出弹出菜单文件时，会同时生成一个JavaScript文件，并定义一个CSS层，Jvascript代码赋予这个层一个绝对定位，这是为了确保弹出菜单和它的子菜单总是出现在同一个固定位置。但当触发弹出菜单的按钮被移动到其他位置时，由于层是绝对定位的，因此这个弹出菜单就会出现在错误的位置。

　　解决这个问题需要我们修改在Dreamweaver中插入的这个弹出菜单的JavaScript代码。

　　下图指出了弹出菜单的定位和相关代码的对应关系：

　　首先我们需要选中触发弹出菜单的按钮，然后打开Dreamweaver中的Show Code Views窗口，相关的代码会高亮显示，在此代码中寻找下面的一句：

　　"window.FW_showMenu(window.fw_menu_#,#,#)"

　　最后两个数字就是弹出菜单定位点的左边和顶部的坐标绝对位置，将这两个数字修改为您期望的值就可以了。

　　如果在Fireworks4中您选择的弹出菜单的样式是图片形式，那么输出的站点文件夹中就会多这么二个图片fwmenu1_114x26_over.gif、fwmenu1_114x26_up.gif，该图片是以尺寸大小来命名的。而且它在Fireworks4的弹出菜单文件输出时会根据选择的字体的大小来自动调节本身的尺寸。这两个图片是弹出菜单选项的两个不同状态，它在整个弹出菜单中都存在。还有一个arrows.gif文件，该文件是弹出菜单中指示下级菜单存在的箭头。

　　我们可以将这三个文件都在Fireworks软件中打开，修改为我们所需要的样式，再将它们按原名覆盖回去。值得注意的是，Fireworks输出的菜单上的文字是真正的文本格式，我们不需要每个菜单项都有Up和Over两个状态的图片，fw_menu.js文件只是在重复利用上面的两个图片作为菜单项的背景图片。