/templets/default/images/top_banner_01.jpg|http://www.azukikoubou.com/|荣耀棋牌app下载欢迎你!
/templets/default/images/top_banner_02.jpg|http://www.azukikoubou.com/|荣耀棋牌app下载欢迎你!
/templets/default/images/top_banner_03.jpg|http://www.azukikoubou.com/|荣耀棋牌app下载欢迎你!
/templets/default/images/top_banner_04.jpg|http://www.azukikoubou.com/|荣耀棋牌app下载欢迎你!
当前位置: 首页 > 资源中心 > 网站开发 >

Dreamweaver中活动菜单条的制作

时间:2009-01-03 15:07来源:学校点击:

聊过QQ的朋友恐怕都对它的自动隐藏窗口功能记忆犹新,它可以使窗口显得清爽整洁而且富有动感,在网页中加入类似的东东效果会怎么样呢?下面我们通过一个活动菜单条的制作来看看吧。
    一、首先制作这个菜单的外貌。在Dreamweaer中新建一个文件,绘制一个层,在该层中插入一个表格(如图1中"1"所示),对该表格进行修饰,然后加入菜单项并建立各项的超链接,为了去掉链接的下划线,可以编辑超链接的CSS样式,在CSS样式面板中通过CSS选择器将link和hover的decoration(装饰)均设置为none(无),将hover的color(颜色)设置为红色,最后将设置好的样式应用到各个菜单条中(可按F12键预览效果)。(如图1)

 

图1

 

    二、结合时间线(timeline)设计菜单的动态效果。
      1、选定层面,当鼠标变成十字形时按住左键将层面拖动到页面右上角(使整个菜单条完全露出但上边缘正好靠拢页面上边界),在窗口菜单中打开时间线面板,选定层面将其拖动到时间线上,Dreamweaer会自动产生一个长度为15帧的动画对象,拖动该动画对象的最后一个关键帧到第30帧,将其长度设置为30帧。然后在第15帧处单击右键,在弹出的快捷菜单中选择"添加关键帧"选项插入一个关键帧,并将层面拖动到如图2所示位置。在时间线窗口中的第15帧处再次单击右键,在弹出的快捷菜单中选择"添加动作",为该帧添加一个交互行为,Dreamweaer将自动打开行为面板(如图2)。单击行为面板中的"+"按钮,从弹出的菜单中选择timeline|stop timeline,打开stop timeline对话框,选择timeline1后单击"确定"按钮关闭该对话框(如图3)。设置完成后的行为面板如图4所示。交互行为的事件为onFrame15,动作为stop timeline,这样当时间线运行到第15帧时,动画将停止播放,这样就实现了菜单条弹回的功能。

 

图2
 

图3

图4

------分隔线----------------------------
  • 上一篇:没有了
  • 下一篇:没有了