您所在的位置:首页 > 教程首页 > 软件教程 > 网络工具 > Dreamweaver制作活动菜单条效果教程

Dreamweaver制作活动菜单条效果教程

来源:互联网 | 编辑:慕冰岚 | 时间:2014-08-30 11:21:40 | 阅读:

在自己的网页中加一些元素在Dreamweaer 中实现自动隐藏窗口功能效果,具体怎么做呢?大家就和我一起来制作吧!

第1步:制作菜单外貌

在Dreamweaer 中新建一个文件,绘制一个层,在该层中插入一个表格(如图1),对该表格进行修饰,然后加入菜单项并建立各项的超链接,为了去掉超链接的下划线,可以编辑超链接的CSS样式,在CSS样式面板中通过CSS选择器将“Link”和“Hover”的“Decoration(装饰)”均设置为 “None(无)”,将“Hover”的“Color(颜色)”设置为红色,最后将设置好的样式应用到各个菜单条中(可按“F12”键预览效果)。

Dreamweaver制作活动菜单条效果教程_52z.com

第2步:设计菜单的动态效果

1、选定层面,当鼠标变成“十”字形时按住左键将层面拖动到页面右上角(使整个菜单条完全露出但上边缘正好靠拢页面上边界),在窗口菜单中打开时间线面板,选定层面将其拖动到时间线上,Dreamweaer会自动产生一个长度为15帧的动画对象,拖动该动画对象的最后一个关键帧到第30帧,将其长度设置为30帧。然后在第15帧处单击右键,在弹出的快捷菜单中选择“添加关键帧”选项插入一个关键帧,并将层面拖动到适当位置(如图2)。

Dreamweaver制作活动菜单条效果教程_52z.com

在时间线窗口中的第15帧处再次单击右键,在弹出的快捷菜单中选择“添加动作”,为该帧添加一个交互行为,Dreamweaer将自动打开行为面板。单击行为面板中的“+”按钮,从弹出的菜单中选择“Timeline/Stop Timeline”,打开“Stop Timeline”对话框,选择“Timeline1”后单击“确定”按钮关闭该对话框。交互行为的事件为“onFrame15”,动作为“Stop Timeline”,这样当时间线运行到第15帧时,动画将停止播放,这样就实现了菜单条弹回的功能。

2、用同样的方法在时间线的第30帧处也添加一个“Stop Timeline”的交互行为,这样就实现了菜单弹出的功能。添加了这两个交互行为后,在时间线窗口的相应帧上面都出现了一个蓝色方块,它代表一个交互行为。选择“自动播放和循环”复选框,使动画能够自动循环播放(如图3)。

Dreamweaver制作活动菜单条效果教程_52z.com

3、现在还要设置一个行为让时间线停止后能继续播放。我的设想是这样的:在一般状态下菜单条弹回但仅保留下方的“校园大观”字样,而菜单条再次弹出和弹回则由鼠标是否经过了菜单条上的“校园大观”来控制。如此可以这样继续进行:选定菜单条中的“校园大观”(要确保该字样的超链接地址为“#”,即空链接)字样,单击行为面板中的“+”按钮,在弹出的菜单中选择“Timeline/Play Timeline”,在接着弹出的对话框中选择“Timeline1”后单击确定按钮,这时行为面板中将增加一个行为,在其“Events”下拉列表中选择“onMouseOver”事件,表示当鼠标处于该字样上方时播放动画(如图4)。

Dreamweaver制作活动菜单条效果教程_52z.com

一个活动菜单条制作完成了。可以按“F12”键预览其效果。

Dreamweaver CS6 官方中文版
Dreamweaver CS6 官方中文版

类型:主页制作  大小:278.7 MB  平台:

Vista/winXP/win7/win8

相关专题:

h5页面制作工具网页三剑客Dreamweaver
猎龙战记

你可能感兴趣的内容

  • wifi密码破解教程
    wifi密码破解教程
    1.准备工作网卡首先,你得有一个至少支持monitor模式的网卡(内置的,外接的均可),...

    互联网

    2016-02-23 14:49:11

  • 2014马年男孩取名字大全
    2014马年男孩取名字大全
    取名软件大全:https://www.52z.com/zhuanti/baobaoquming.html2014马年男宝宝起名方法:...

    互联网

    2014-08-04 10:47:18

  • 有效解决迅雷7下载速度慢的10种方法
    有效解决迅雷7下载速度慢的10种方法
    迅雷是目前使用的最广泛的下载软件,迅雷的下载速度可谓是同类软件最快的,不过迅雷的设置还是需要一...

    互联网

    2016-09-02 10:56:28

  • 马年取名草字头的字大全
    马年取名草字头的字大全
    取名软件大全:https://www.52z.com/zhuanti/baobaoquming.html起名草字头的字有哪些芝,...

    互联网

    2013-12-31 17:50:49

  • 腾达路由器怎么设置
    腾达路由器怎么设置
    现如今,市场上的路由器种类繁多。其中,Tenda路由器使用也比较广泛。下面,小编为大家介绍一下腾达Te...

    互联网

    2013-04-16 16:02:11

  • 猎豹wifi常见问题解决方法
    猎豹wifi常见问题解决方法
    1、手机显示WiFi已连接,却上不了网?请先检查开启免费WiFi的电脑是否有稳定的网络接入;...

    互联网

    2013-12-25 14:50:16

  • 王字旁的字大全
    王字旁的字大全
    部首为王的汉字部外笔画数0:王部外笔画数1:玌部外笔画数2:玎玑玐玏...

    互联网

    2014-02-14 14:44:04

  • Win7笔记本怎么做wifi热点
    Win7笔记本怎么做wifi热点
    WIn7本身就自带了WiFi和SoftAp(即虚拟无线AP)功能,只要激活它们,就可以让笔记本变身为一个“WiFi...

    互联网

    2013-11-20 09:54:03

  • 2014马年女孩子名字大全
    2014马年女孩子名字大全
    取名软件大全:https://www.52z.com/zhuanti/baobaoquming.html马年女孩子名字大全  名...

    互联网

    2013-12-31 17:41:58

  • 移动宽带路由器设置图文介绍
    移动宽带路由器设置图文介绍
    移动宽带路由器如何设置,我们下面来看一个移动宽带路由器设置案例:移动宽带(铁通宽带),路由...

    互联网

    2013-03-14 16:04:10

热门游戏

下载声明 | 法律声明 | 版权声明 | 友情链接 | 智能电视应用| 发布软件 | 网站地图

本站为非盈利网站,不接受任何广告。本站所有软件,都由网友上传,如有侵犯你的版权,请发邮件给 admin@52z.com 湘ICP备13012539号-1