下拉菜单全攻略之Dreamweaver篇

[ 来源:www.it55.com | 作者: | 时间:2007-06-27 | 收藏 | 推荐 ] 【大中小】

广告位出租

　　下拉菜单是网上最常见到的效果之一，用鼠标轻轻一点或是移过去，就出现一个更加详细的菜单，它不仅节省了网页排版上的空间、使网页布局简洁有序，而且一个新颖美观的下拉菜单，更是为您的网页增色不少。
　　制作下拉菜单的方法多种多样，本期专栏将为您介绍四种常用的制作方法，让您随心打造自己的下拉菜单。

■ 用Dreamweaver制作下拉菜单

　　Dreamweaver是制作下拉菜单最常用的工具，方法简单，控制自由，可以最大限度地随心打造菜单样式，是制作下拄菜单的必修课。
　　用Dreamweaver制作下拉菜单的原理很简单，它利用了Behaviors（行为）面板中的内置方法Show-Hide Layers（隐藏-显示层）方法，并用onMouseOver（鼠标移至）和onMouseOut（鼠标移开）来触发层的隐藏和显示，而将要出现的菜单就在层中。
　　因此，我们可以分四步来制作下拉菜单，首先我们需要一个导航条，它用来放置首先出现在浏览者眼前的主菜单；然后再制作开始隐藏着而将会出现的下拉选单；接着，进行最关键的一步，为主菜单和下拉选单添加上隐藏和显示层的效果；最后，我们进行菜单的美化修饰。最终看到的效果如图，您也可以访问以下地址：menu.htm

　　相信你已经等不急了，那就让我们马上开始吧！

更多内容请看网络游戏攻略专题，或

　　一、导航条的制作

　　首先进行一些必要的前期工作，按CTRL+J，打开Page Properties（页面属性）窗口，参数设置如图二，这一设置对菜单的位置将有影响，所以请如图设置。

下拉菜单全攻略之Dreamweaver篇

·菜鸟学用DreamWeaver做ASP
·Dreamweaver动态网页实例：验证用户注册
·Dreamweaver教程：页面制作
·用Dreamweaver打造在线音乐网站
·Dreamweaver制作网页幻灯片效果
·用Dreamweaver实现网站购物车功能
·Dreamweaver轻松打造Flash像册
·photoshop切片结合dreamweaver拼接教程
·Dreamweaver制作网页之图片应用技巧
·Dreamweaver制作产品展示动态网页

　　按CTRL+F2打开Objects面板，点击层按钮下拉菜单全攻略之Dreamweaver篇后在页面中按住鼠标不放拖出一个层，然后在层的Properties（属性）面板中设置各参数，Layer ID框填入title，L、T、W、H框分别填入8、15、480、15，背景色填入#006699，如图。

下拉菜单全攻略之Dreamweaver篇

　　将光标移至层内，点击Objects面板上的表格按钮下拉菜单全攻略之Dreamweaver篇，插入一个一行四列的表格，设置如图。

下拉菜单全攻略之Dreamweaver篇

更多内容请看网络游戏攻略专题，或

　　按住CTRL键不放点取表格的四个单元格，然后设置它们的宽度为120，并在前两个单元格中输入文字，就是你的主菜单名，可按自己想要的名字输入，我用"经典论坛"和"天极网"为例，并加上链接。

下拉菜单全攻略之Dreamweaver篇

　　二、下拉选单的制作

　　现在开始制作将要下拉出现的菜单，同样用层来制作。
再次从Objects面板插入一个层到前面我们做好的导航条的下方，各项参数填为：Layer ID框填入menu1，L、T、W、H框分别填入8、34、120、80，背景色填入#999966，其中L和T两个参数是设置这个层距离窗口左边框和上边框的距离，一定不能填错，不然菜单将会错位，也将影响完成后的可用性。

下拉菜单全攻略之Dreamweaver篇