您现在的位置: 像素吧 >> 设计教程 >> DreamWeaver教程 >> 正文
下拉菜单全攻略之Dreamweaver篇(组图)
"下拉菜单全攻略之Dreamweaver篇(组图)"这篇DreamWeaver教程如果帮助了您,请记得分享给您身边的朋友,如果您有比"下拉菜单全攻略之Dreamweaver篇(组图)"更好的教程请发布共享,帮助别人快乐自己!
下拉菜单是网上最常见到的效果之一,用鼠标轻轻一点或是移过去,就出现一个更加详细的菜单,它不仅节省了网页排版上的空间、使网页布局简洁有序,而且一个新颖美观的下拉菜单,更是为您的网页增色不少。
制作下拉菜单的方法多种多样,本期专栏将为您介绍四种常用的制作方法,让您随心打造自己的下拉菜单。
用Dreamweaver制作下拉菜单
Dreamweaver是制作下拉菜单最常用的工具,方法简单,控制自由,可以最大限度地随心打造菜单样式,是制作下拄菜单的必修课。
用Dreamweaver制作下拉菜单的原理很简单,它利用了Behaviors(行为)面板中的内置方法Show-HideLayers(隐藏-显示层)方法,并用onMouseOver(鼠标移至)和onMouseOut(鼠标移开)来触发层的隐藏和显示,而将要出现的菜单就在层中。
因此,我们可以分四步来制作下拉菜单,首先我们需要一个导航条,它用来放置首先出现在浏览者眼前的主菜单;然后再制作开始隐藏着而将会出现的下拉选单;接着,进行最关键的一步,为主菜单和下拉选单添加上隐藏和显示层的效果;最后,我们进行菜单的美化修饰。最终看到的效果如图,您也可以访问以下地址:menu.htm
一、 导航条的制作
首先进行一些必要的前期工作,按CTRL+J,打开PageProperties(页面属性)窗口,参数设置如图二,这一设置对菜单的位置将有影响,所以请如图设置。
