轻松解决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
稳定引发装置
因为弹出菜单是绝对定位的，而引发装置的相对定位可能使得最终效果在不同分辨率下看起来会产生偏差。其实只要保证引发装置与窗口左边和上边的像素不发生变化，尽量使用靠左对齐的排版方式，不使用例如居中对齐的方式就没问题。
相关视频
相关阅读 Windows错误代码大全 Windows错误代码查询激活windows有什么用Mac QQ和Windows QQ聊天记录怎么合并 Mac QQ和Windows QQ聊天记录Windows 10自动更新怎么关闭 如何关闭Windows 10自动更新windows 10 rs4快速预览版17017下载错误问题Win10秋季创意者更新16291更新了什么 win10 16291更新内容windows10秋季创意者更新时间 windows10秋季创意者更新内容kb3150513补丁更新了什么 Windows 10补丁kb3150513是什么
- 文章评论
-
热门文章 没有查询到任何记录。
最新文章
没有查询到任何记录。
fireworks动画蝴蝶制作教程Fireworks绘制逼真飞利浦手机教程Fireworks教程之树叶笔触绘制榕树如何用Fireworks历史面板制作连续背景
人气排行 在Fireworks中遮罩使用技巧fireworks动画蝴蝶制作教程fireworks做动态按钮Fireworks与Dreamweaver结合：看实例学切片Fireworks教程之树叶笔触绘制榕树用Fireworks制作立体金属小球Fw与Dw结合：看实例学切片Fireworks制作GIF动画广告BANNER
查看所有0条评论>>