轻松解决Fireworks菜单位置偏差

Fireworks 可以制作各种特效弹出菜单，但是，当你把在Fireworks4 中制作的弹出菜单输入到一个HTML文件中预览时就会发现，菜单出现的位置往往会有较大偏差。经过无数次的调试和摸索，终于总结出几点经验，特写出来和大家一起分享。我发现引起位置偏差的原因主要有三点：

1、改变了引发装置的位置——弹出菜单的引发装置（热区、按钮或者带链接的图片等）在Dreamweaver 页面中的位置和在Fireworks 画布中的位置不同。

2、浏览器留边——没有把页面的margins属性设置为“0”。

3、引发装置相对定位——引发装置不是绝对定位的。

引发装置的绝对定位

当Fireworks 输出一个带有弹出菜单的文件时，程序会自动创建一个JavaScript 文件（fw_menu.js），它给出了下级菜单的位置，而这个位置是根据下级菜单距离画布左边和上边的绝对像素来定位的，这个绝对定位也被带到了HTML页面。当你在Dreamweawer 中改变引发装置的位置时，下级菜单将依然出现在原来的位置而不会跟着引发装置改变。我们还是来看一个引发装置位置改变实例吧：

在Fireworks 的画布中创建一个引发装置（按钮）和它的下级菜单（如图1），请注意按钮和菜单各自的定位。按钮的位置在画布的左上角，W和H的位置是150和50，X和Y坐标的位置是0和0。但是，下级菜单左上角距离画布左边和上边的位置为50，即X和Y坐标的位置是50和50。

图1

然后把生成的Fireworks HTML 代码插入到Dreamweaver 中（Insert→Interactive Images→Fireworks HTML）。然而按钮在Dreamweaver 页面中的位置并没有安排和Fireworks 画布中一样的位置，而是距离页面左边50、上边60个像素（如图2），虽然按钮的位置改变了，但是下级菜单的位置并没有一起改变，这样在浏览器中下级菜单出现的位置肯定就会有较大偏差。

图2

解决的办法就是通过修改HTML代码来修改下级菜单的定位。在Dreamweaver 中选中弹出菜单的引发装置，

切换成HTML 代码视图，相关代码会变成高亮状态。

找到以下“window.FW_showMenu(window.fw_menu_0,50,50)”的文字，最后2个数字就是代表下级菜单的X和Y坐标的绝对位置。将这2个数字修改为你希望的位置即可。保存后预览，一切恢复正常。

浏览器留边

如果浏览器留边没有被设置成“0”，同样可能会引起下级菜单的定位不准确——这个解决的办法就容易了，只要重设浏览器margins 值就可以，在Page Properties中将页面的margins值设为“0”（如图3）。

图3

稳定引发装置

因为弹出菜单是绝对定位的，而引发装置的相对定位可能使得最终效果在不同分辨率下看起来会产生偏差。其实只要保证引发装置与窗口左边和上边的像素不发生变化，尽量使用靠左对齐的排版方式，不使用例如居中对齐的方式就没问题。