正确制作和定位Fireworks弹出菜单
应用Fireworks不光可以制作各种特色图像，还可以制作网页弹出菜单。但在实际操作时我们常常会遇到这种情况：将制作出的图片导入Dreamweaver中编辑时，当改变弹出菜单位置后，在预览中弹出的菜单位置却往往是没有改变或位置不正确。这就涉及到了正确定位网页中的Fireworks弹出菜单的问题。
制作一个弹出菜单
http://edu.itbulo.com/UploadFiles_1485/200510/20051027143948549.jpg
图1
步骤1：新建一个240×43像素的Fireworks文档，背景为深草绿色(#006666)，使用工具栏Text Tool文本工具，点击编辑区于弹出Text Editor窗口中输入“网站导航栏目”，并同时设置字体、字号、字形和颜色为合适值(如图1)，确认退出，调整文字至合适位置。
http://edu.itbulo.com/UploadFiles_1485/200510/20051027143948197.jpg
图2
步骤2：设置文字特效。按快捷键Alt+F7打开Effect控制面板，选择文字后点击Effect面板下拉框，执行弹出菜单Shadow and Glow/Drop Shadow命令为其添加阴影效果，并设置合适效果参数(如图2)。
http://edu.itbulo.com/UploadFiles_1485/200510/20051027143949687.jpg
图3
步骤3：制作弹出菜单。选取工具栏Slice Tool工具，对文字进行热区切割，将编辑区域切割成五块(如图3)。执行主菜单Insert/Pop-up Menu...命令，弹出Set Pop-up Menu窗口，在Text文本栏中输入菜单内容，Link文本栏中输入Url链接地址。点击Next进入下一步设置菜单样式，我们这里只设置其HTML样式，如果选取复选Image还可以为其设置菜单图片效果，分别设置字体、字号以及Up State(平时状态)和Over State(鼠标悬浮状态)的文字及背景颜色(如图4)。确认即可完成弹出菜单效果，我们只需调整一下菜单位置并导出Html and Images文件类型即可。
http://edu.itbulo.com/UploadFiles_1485/200510/20051027143949816.jpg
图4
正确定位弹出菜单
步骤1：启动Dreamweaver 4，执行菜单Insert/Interactive Images/Fireworks HTML命令，将Fireworks导出的弹出菜单Html文件插入到页面合适位置，按“F12”预览发现菜单位置虽然改变，但弹出下级菜单项的位置没有改变。
步骤2：上述效果造成原因是由于在Fireworks导出HTML文件的同时生成了一个fw_menu.js文件，在该文件中定义了下级弹出菜单项的位置，它是在我们编辑Fireworks文件时为画布的左、上边距定义的绝对位置，这个绝对位置同时也被带到Html页面中。这里我们只需将Dreamweaver源代码窗口的“window.FW_showMenu(window.fw_menu_0,18,27)”这句代码最后两个数字更改为我们需要的正确位置值，这就将弹出下级子菜单相对于页面边缘的绝对位置更改为相对于菜单的绝对位置，问题就解决啦。
页:
[1]