给你网页上的菜单加上阴影效果能很好的提高视觉效果,当然办法有很多,用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

