首 页 网站运营 网络编程 网页制作 图象媒体 数据库 建站资源 网管专区 下载专区 最新资讯
IT学堂|红色黑客联盟
设为首页
加入收藏
联系站长
您所在的位置:首页>网页制作>Dreamweaver>文章内容
用DW MX制作导航下拉菜单(组图)
来源: 作者: 发布时间:2007-04-12

 Dreamweaver从出道以来,其简便易用而又功能强大的“行为”(Behavior)一直是大家所关注的热点之一。在DreamweaverMX(DWMX)中,对这一功能又有了扩充与改进。

  在DWMX中,行为指的是为了响应某一事件(Event)而采取的一个操作(Action)。其中Event指的是浏览器的事件,比如窗口刷新、鼠标移动等。而Action 指的是后台响应事件的 JavaScript代码,可以完成相应的操作,比如播放声音、翻转图片等。

  用DW MX制作导航下拉菜单是网页中经常使用的特效之一。(如图1)主要应用了DW MX中的“Show-HideLayers”行为。

图1

  首先制作好导航条(图1中的“产品中心”那一栏),随后添加一个层,作为下拉菜单将要显示的位置,并填入下拉菜单的对应栏目。

  接下来,打开“Behaviors”面板,同时选中“产品中心”链接(注意,这个时候不能够选中刚刚建好的层,否则无法应用“Show-HideLayers”行为),单击“+”号,选择“Show-HideLayers”,就可以看到我们刚刚建好的层在选择项中,可以设定为隐藏或者显示(如图2)。
图2


  行为的妙用主要体现在:如果我们要实现下拉菜单,关键就是让鼠标移到“产品中心”链接上时,使层显示;而鼠标离开链接时,使层隐藏。根据这种思想,我们首先为这个层设立两个Action,一个选择Hide,一个选择Show。然后,调整Event,将HideLayer的Event设为OnMouseOut,即为鼠标离开链接;而将ShowLayer的Event设为OnMouseOver,即为鼠标选中链接。按“F12”预览,就可看到我们期盼的效果。

  这样,平时我们觉得很神秘的导航下拉菜单就可以轻易在行为中实现。还可以在导航链接上继续应用“SwapImage”行为,实现鼠标点选链接时出现图片翻转效果。

  行为不是一个个孤立的特效,可以由多个行为组合叠加实现复杂的功能,除了DWMX默认设置好的行为外,我们还可以从www.mcromedia.com上下载更多更酷的第三方行为,我们只需将它们直接复制到DreamweaverMX\\Configuration\\Behaviors\\Actions\\目录下即可,从而使DWMX的这一闪光点更加眩目。




[推荐] [返回顶部] [打印本页] [关闭窗口]
热点文章
·Dreamweaver 8图文快报
·Dreamweaver 8图文快报2
·Dreamweaver未必了解的5个小技巧
·手把手教你网页布局的基本元素
·我要看代码 破解加密网页文字有高招
·美化网页 制作精美圆角表格
·Dreamweaver经典问题大搜罗(全集)1
·Dreamweaver经典问题大搜罗(全集)2
·菜鸟学用DreamWeaver做ASP1
·Dreamweaver中加入竖直线的办法
相关文章
·自己动手制作活动菜单条(组图)
·滑动菜单的制作(组图)
·解决在Dreamweaver中不支持中文文件名
· 用Dreamweaver MX制作文字特效(组图)
·Dreamweaver层使用八定律
·利用DW MX自带的行为制作弹出菜单(组
·下拉菜单全攻略之Dreamweaver篇(组图)
·DreamWeaver经典技巧四则
·Dreamweaver中幂格式文本巧实现
·用JavaScript在页面内加入日期(图)
文章检索
Google
相关文章
·自己动手制作活动菜单条
·滑动菜单的制作(组图)
·解决在Dreamweaver中不
· 用Dreamweaver MX制作
·Dreamweaver层使用八定
·利用DW MX自带的行为制
·下拉菜单全攻略之Dreamw
·DreamWeaver经典技巧四
·Dreamweaver中幂格式文
·用JavaScript在页面内加
·聚焦 DreamWeaver MX 20
· dreamweaver中网页折
·Dreamweaver MX 2004设
·Dreamweaver 4.0 新增功
·Dreamweaver MX 2004从