| 首页 | 新闻 | 网页 | 设计 | 色彩 | 原创 | 视觉 | 素材 | 动漫 | 酷站 | 策划 | 文案 | 访谈 | 运营 | 编程 | 数据库 | 服务器 | 下载 | 图库 | 
您的位置: 幽幽天空 > 网页 > 网页制作 > Dreamweaver教程 > Dreamweaver实例教程 > 文章正文 用户登录
没有相关文章

用Dreamweaver做真正半透明的菜单阴影           

用Dreamweaver做真正半透明的菜单阴影

作者:新浪网 来源:新浪网 更新:2005-4-6 16:41:53 错误报告 我要投稿

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

文章录入:skyuu    责任编辑:skyuu 
  • 上一篇文章:

  • 下一篇文章:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    发表评论:
    姓名:  评 分: 1分 2分 3分 4分 5分
     
  • 严禁发表危害国家安全、政治、黄色淫秽等内容的评论。
  • 用户需对自己在使用幽幽天空服务过程中的行为承担法律责任。
  • 本站管理员有权保留或删除评论内容。
  • 评论内容只代表机友个人观点,与本网站立场无关。