随意处理Fireworks弹出菜单地位置偏差

来源:互联网
更新时间:2017/1/17 5:52:33
责任编辑:王亮
字体:

14black" id=text>   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。 点击图片看大图学网 www.xue163.com

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

www.xue163.com true /3/35797.html report 2521 随意处理Fireworks弹出菜单地位置偏差,14blackid=textFireworks可以制作各种特效弹出菜单,但是,当你把在Fireworks4中制作的弹出菜单输入到一个HTML文件中预览时就会发现,菜单出现的位置往往会有较大偏差。经过无数次的调试和摸索,终于总结出几点经验,特写出来...
最近关注
首页推荐
热门图片
最新添加资讯
24小时热门资讯
精彩资讯
精彩推荐
热点推荐
真视界
精彩图片
社区精粹
关于本站 | 广告服务 | 手机版 | 商务合作 | 免责申明 | 招聘信息 | 联系我们
Copyright © 2004-2016 Xue163.com All Rights Reserved. 学网 版权所有
京ICP备10044368号-1 京公网安备11010802011102号
荐闻 | 学网头条知识问答 | 装修 | 作业 | 荐闻 | 学网头条精彩微信 | 新闻中心 | 软件教室 | 设计大全 | 网络相关 | 英语学习 | 开发编程 | 考试中心 | 参考范文 | 管理文库 | 营销中心 | 站长之家 | IT信息中心 | 商学院 | 数码大全 | 硬件DIY | 企业服务 | 网吧在线 | 问吧 | 百科 | 硬件知识 | 本网视点 | 文库 | 手机 | 平板 | 汽车 | 游戏 | 家电 | 精彩摄影 | 时尚科技 | 现代家居 | IT女人 | 经验 | 每日新闻 | 健康养生 | 图书馆 | 猎奇 | 精彩看点 | 图库 | 新闻中心 | 软件教室 | 设计大全 | 网络相关 | 英语学习 | 开发编程 | 考试中心 | 参考范文 | 管理文库 | 营销中心 | 站长之家 | IT信息中心 | 商学院 | 数码大全 | 硬件DIY | 企业服务 | 网吧在线 | 问吧 | 百科 | 硬件知识 | 本网视点 | 文库 | 手机 | 平板 | 汽车 | 游戏 | 家电 | 精彩摄影 | 时尚科技 | 现代家居 | IT女人 | 经验 | 每日新闻 | 健康养生 | 图书馆 | 精彩微信 | 猎奇 | 精彩看点 | 图库编程 方案 信息windows方案windows answer文档机构教育文档问答中心IT编程数码信息解决方案信息中心IT科技