进入旧版 | 服务项目 | 成功案例 | 联系方式 | 过客留言 | 友情链接
   
设为首页
加入收藏
联系我们
网站首页 | 新闻资讯 | 操作系统 | 办公软件 | 网络软件 | 工具软件 | 媒体动画 | 网页制作 | 网站开发 | 程序开发 | 平面设计
Photoshop视频教程 | Word入门 | Flash入门 | JScript | VBScript | ASP | PHP | ADO | 网页特效 | 3DS MAX6.0命令 | 系统进程
您当前的位置:GOODSGY电脑学习网 -> 网页制作 -> FireWorks -> 文章内容  
下拉菜单全攻略之Fireworks篇-3

2. 在DW4中重新设置菜单样式

   如图可以看到刚才复制到站点中来的FW4弹出菜单文件中有这样一个文件--fw_menu.js,

www.goodsgy.com


www.goodsgy.com


用DW4将它打开,在文件的开头部分可以看到这样一段代码:

this.menuWidth = mw;
this.menuItemHeight = mh;
this.fontSize = fs||12;
this.fontWeight = "plain";
this.fontFamily = fnt||"arial,helvetica,verdana,sans-serif";
this.fontColor = fclr||"#000000";
this.fontColorHilite = fhclr||"#ffffff";
this.bgColor = "#555555";
this.menuBorder = 1;
this.menuItemBorder = 1;
this.menuItemBgColor = bg||"#cccccc";
this.menuLiteBgColor = "#ffffff";
this.menuBorderBgColor = "#777777";
this.menuHiliteBgColor = bgh||"#000084";
this.menuContainerBgColor = "#cccccc";
this.childMenuIcon = "arrows.gif";


  注意this.后面的变量名,下面是直接影响菜单效果的变量名对应的菜单属性:

menuWidth: 菜单宽度
menuItemHeight : 菜单条目高度
fontWeight: 菜单条目文字粗细
fontFamily: 菜单条目文字字体
fontSize: 菜单条目文字大小
fontColor: 菜单条目文字颜色
fontColorHilite: 菜单条目文字高亮色(即鼠标移到菜单上时文字的颜色)
bgColor: 菜单暗边背景色
menuBorder: 菜单边框宽度
menuItemBorder: 菜单条目边框宽度(其实是菜单内各条目之间分隔线的宽度)
menuItemBgColor: 菜单条目背景色
menuLiteBgColor: 菜单亮边背景色
menuBorderBgColor: 菜单边框背景色
menuHiliteBgColor: 菜单条目背景高亮色(即鼠标移到菜单上时背景的颜色)
childMenuIcon: 子菜单扩展标记(默认是个小黑箭头)


   弹出菜单的样式是遵循下图中的规则的,大家可以细细研究一下,对照起来修改参数。www.goodsgy.com


www.goodsgy.com


  由于篇幅限制,笔者在这里就不赘述了,先给出一个修改其中一些参数的样例,余下的大家可以自行测试:

this.bgColor = "#000000";
this.menuBorder = 1;
this.menuItemBorder = 1;
this.menuItemBgColor = bg||"#cccccc";
this.menuLiteBgColor = "#000000";
this.menuBorderBgColor = "";
this.menuHiliteBgColor = bgh||"#000084";
this.menuContainerBgColor = "#cccccc";
this.childMenuIcon = "arrows.gif";


   存盘,回到菜单的HTML文件,F12预览,菜单样式已经发生了变化,菜单边框变细致了,是不是很cool啊!www.goodsgy.com


www.goodsgy.com



3. 弹出菜单缩回停留时间的修改

  大家会发现弹出菜单要收回似乎要等待一两秒的时间,没关系,在fw_menu.js中找到这句代码:

fwHideMenuTimer = setTimeout("fwDoHide()", 1000);

  将其中的1000改成300,再找到这句代码:

if (elapsed < 1000) {
fwHideMenuTimer = setTimeout("fwDoHide()", 1100-elapsed);
return;
}


  将其中的1000改成300,1100改成330,存盘,再回到HTML文件按F12预览一下,是不是快多了。这些数值是以毫秒为单位的,也就是说1000代表1秒,建议这些数值不要设得太小,否则菜单收回太快会导致你点不中弹出菜单。
4. 特殊效果的弹出菜单

  运用Javascript来调用和控制CSS滤镜还可以为菜单带来意想不到的效果。在fw_menu.js中使用这样的参数设置:

this.bgColor = "";
this.menuBorder = 3;
this.menuItemBorder = 3;
this.menuItemBgColor = bg||"#cccccc";
this.menuLiteBgColor = "";
this.menuBorderBgColor = "";
this.menuHiliteBgColor = bgh||"#000084";
this.menuContainerBgColor = "#cccccc";
this.childMenuIcon = "arrows.gif";


  并在下面加上一句:

this.alpha = "Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=0, StartY=0, FinishX=200, FinishY=0)";


  然后找到这句:

l.style.backgroundColor = menu.menuItemBgColor;


  在它下面加上一句:

l.style.filter = menu.alpha;


  存盘,回到HTML文件按F12预览,效果如下图所示,是不是很有趣啊!这样的CSS滤镜还有很多,大家可以自己找一些相关资料实践一下。
顺便提一下,大家在查找代码时可以充分利用DW4的查找替换功能,在页面中按Ctrl+F快捷键调出查找替换窗,输入要查找的代码,按Find Next就可以了。

www.goodsgy.com


www.goodsgy.com

  下一篇我们将讲如何用Flash来制作下拉菜单。

在百度中搜索:下拉菜单全攻略之Fireworks篇-3
在Google中搜索:下拉菜单全攻略之Fireworks篇-3
在Yahoo中搜索:下拉菜单全攻略之Fireworks篇-3

收藏到网摘:新浪VIVI 365key 我摘 POCO网摘 博采中心 YouNote 和讯网摘 天天收藏
[] [返回上一页] [打 印] [收 藏]

 相关文章    最新文章
· [组图] LiveMotion制作下拉菜单
· Javascript调用XML制作连动下拉框
· 一个很通用的javascript的下拉菜单
· CSS+DIV设计实例:纯CSS制作下拉导航菜单..
· [组图] 下拉菜单全攻略之Flash篇(上)
· [组图] 下拉菜单全攻略之Flash篇(下)
· [组图] 下拉菜单全攻略之Flash篇
· [组图] 下拉菜单全攻略之Fireworks篇-1
· [组图] 下拉菜单全攻略之Fireworks篇-2
· [组图] 下拉菜单全攻略之Fireworks篇(上)
 
· [组图] Fireworks渐隐线的两种做法
· [图文] Fireworks中制作渐隐线技巧一则
· [组图] Fireworks绘画小技巧
· [组图] FW制作放射光感字体效果
· [组图] Fireworks 打造无限宇宙
· [组图] 教你用Fireworks制作Logo
· [组图] Fireworks的高级操作技巧集合
· [组图] 用Fireworks 制作纸张卷边效果
· [组图] Fireworks教程:自制树叶笔触绘制榕..
· [组图] Fireworks滤镜巧绘极光字特效

∷相关文章评论∷    (评论内容只代表网友观点,与本站立场无关!) [更多评论…]
站内搜索

精彩图文
  网站导航  
操作系统 办公软件 网络软件
Vista Windows2003 WindowsXP Windows2000/NT Windows9X/ME Linux 其他 Word Excel Powerpoint Outlook 金山系列 其他 网页浏览 上传下载 联络聊天 邮件工具 服务器软件 网络辅助
工具软件 媒体动画 网页制作
系统工具 媒体工具 压缩工具 图文处理 文件管理 其他 3DMAX Authorware Director Maya 视频处理 其他 Flash Dreamweaver FireWorks FrontPage LiveMotion Golive HTML/CSS 其它
网站开发 平面设计 程序设计
ASP JSP PHP CGI JavaScript VBScript XML/SOAP Web服务器 Photoshop PhotoImpact CorelDraw Illustrator Freehand 设计欣赏 其他 VB VC .NET C/C++ DELPHI JAVA

冀ICP备05019428号
Copyright © 2004-2008 电脑学习网 Inc.All rights reserved.
TEL:13832340607
QQ:39873155
E_Mail:good_sgy@tom.com  
MSN:goodsgy@hotmail.com