当前位置: 首页 > 学习 > 电脑学习 > 网站开发 > ASP > 基础教程 > 正文

轻松解决Fireworks弹出菜单的位置偏差

http://www.zk168.com.cn  招考学习网 2006-4-29 16:49:11
-----------------------------------------------------------[交流]-[打印]-[发送]-[收藏]--

  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

  稳定引发装置

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

(出处:赛迪网--中国电脑教育报)

-----------------------------------------------------------[交流]-[打印]-[发送]-[收藏]--
最新入库:
 
·实质、过程及意义——阿多尔诺“否定的辩证法”探微
·从Ontology的译名之争看哲学术语的翻译原则
·论马克思主义哲学经典的解释——解释学方法及其在马克
·中国哲学当前的核心与周边问题
·和合学与21世纪文化价值和科技
·中国文化的和合精神与21世纪
·宗教之间理当相互宽容
·上半个世纪的自由主义
·殷周至春秋时期神人关系之演进
·大学之道:构建以“三纲八目”为核心的道德修养体系
相关内容:
 
·Fireworks 4.0 遮照大全
·在Fireworks中遮罩使用技巧
·烟花飞舞:FireWorksMX之旅一天(图)
·烟花飞舞:FireWorks MX之旅二天(图)
·Fireworks MX弹出菜单浅尝(图)
·Fireworks MX之位图选区操作(图)
·Fireworks MX优化菜单面面观(图)
·FireworksMX之属性面板Properties(图)
·初识Fireworks MX之菜单接触(图)
·用Fireworks4制作网页按钮下拉菜单
网友点评:
 
会员名称:
密码:匿名 ·注册·忘记密码?
评论内容:
(最多300个字符)
  查看评论
友情提醒:
 1.库中的资料大都来自互联网、网友上传、各类书籍,在录入的过程中难免会出现错误,恳请网
 友来信指正!
 2.如果网友在本库中未能找到所需要的材料,请登陆到我们的论坛《招考学习网》版块!
 3.考友想加入招考学习网的编辑部,请发信到XueXiWang#Gmail.com(#改为@)附带个人简历
 4.如需转载请注明出处及作者,谢谢合作!
 5.如果您有更好的建议或意见请EMAIL:XueXiWang#Gmail.com (#改为@)
 6.凡标题中有注有“[NO]”字样均不含答案且答案整理中.
 7.如本库中转载文章涉及版权等问题,请相关网站或作者在两周内发邮件通知(EMAIL:  XueXiWang#Gmail.com (#改为@))我们,我们接到通知后立即删除该文章及链接!
你问我答 更多>>