教 程 分 类

您现在的位置: 温州市新桥里仁电脑培训学校 >> 在线教程 >> Dreamweaver网页制作 >> 教程正文
站内文章搜索:

用Dreamweaver制作半透明的菜单阴影效果

作者:hujinyu    教程来源:本站原创    点击数:    更新时间:2008-3-29
          给你网页上的菜单加上阴影效果能很好的提高视觉效果,当然办法有很多,用Java和图片都能实现,但用Java你是不是觉得太复杂?用图片很简单,但如果菜单下面有内容,效果就太假了。下面我们只用dreamweaver4自身的功能,通过简单的办法就能让你网页上的菜单拥有真正半透明的阴影效果。

  下图是在Dreamweaver4中用层功能做的一个非常简单的弹出菜单:

点此在新窗口浏览图片
图1

  左边是触发条,当鼠标放在这些条目上右边就会弹出相应的菜单。这里我们假设要加上阴影效果的菜单层为submenu1。

  首先,用层工具新建一个层,大小位置一定要和submenu1层保持一致,到属性面板把层的背景色改为黑色,到层面板选中这个新建出来的层,双击层的名字,将这个层的名字改成submenu1s,z高度设为比submenu1层低一级。

点此在新窗口浏览图片
图2

  选中submenu1s层,用键盘上的方向键往右和下挪动7、8次,使submenu1s层和submenu1层错开。

  现在开始修改触发元素和菜单层的事件,以让submenu1s层和submenu1层的显示隐藏同步。选中submenu1层,到事件面板,一般这种方法做出的菜单都有两个事件,OnMouseOut和OnMouseOver,双击OnMouseOver事件,出现隐藏-显示层面板,选submenu1s层,点显示按钮,点确定关掉这个窗口。同样,再双击OnMouseOut事件,选submenu1s层,点隐藏按钮,点确定。

  用上面的方法修改你自己菜单的触发元素的事件,这样submenu1s层和submenu1层就同时显示、隐藏。

  到CSS面板新建一个样式,取名为shadow,在样式定义的窗口中到扩展栏。点滤镜下拉菜单,选中第一项“Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)”。

点此在新窗口浏览图片
图3

  修改其中的“?”:Alpha(Opacity=50, FinishOpacity=50, Style=1, StartX=0, StartY=0, FinishX=500, FinishY=500)

  其中Opocity=?用于控制半透明的程度,取值相当于百分比,你可以根据你自己的情况调整这个值。

  选择submenu1s层,再到CSS单击shadow样式,对submenu1s层应用这个样式。

  按F12预览看看吧。

点此在新窗口浏览图片
图4

  • 上一篇教程:
  • 下一篇教程: 没有了
  • 相关文章:
    没有相关教程