admin 管理员组文章数量: 1087829
2024年3月10日发(作者：詹姆斯实时数据)
■ 用Dreamweaver制作下拉菜单
用Dreamweaver制作下拉菜单的原理：它利用了Behaviors（行为）面板中的内置方法Show-Hide La
yers（隐藏-显示层）方法，并用onMouseOver（鼠标移至）和onMouseOut（鼠标移开）来触发层的隐藏
和显示，而将要出现的菜单就在“层”中。
一、 导航条的制作
按CTRL+F2打开Objects面板，点击【层按钮】在页面中按住鼠标不放拖出一个“层”，然后在层的Pro
perties（属性）面板中设置各参数，Layer ID框填入title，L、T、W、H框分别填入8、15、480、30，
背景色填入#006699，如图。
将光标移至‘层内’，点击Objects面板上的【表格按钮】，插入一个一行四列的“表格”。
按住CTRL键不放，公别点取表格的四个单元格，然后设置它们的宽度为120（120*4=480），高度为25，
并在前两个单元格中输入“关于公司”和“新闻中心”，做为主菜单名，并加上链接。
二、 下拉选单的制作
现在开始制作将要‘下拉出现的菜单’，同样用‘层’来制作。
再次插入一个层到前面我们做好的导航条的下方，各项参数填为：Layer ID框填入menu1，L、T、W、H框
分别填入8、34、120、80，背景色填入#999966，其中L和T两个参数是设置这个层距离窗口‘左边框’
和‘上边框’的距离，一定不能填错，不然菜单将会错位，也将影响完成后的可用性。
Wee制作
■ 用Dreamweaver制作下拉菜单
这时候，我们便可以在menu1这个层中输入我们所要的菜单内容。为了排版方便，我在这还是使用表
格来做菜单（W=120,H=80）。这个层将作为“关于公司”的下拉选单出现，填入你所需要的菜单并链接。
同样的方法，制作其它的下拉选单（层menu2）。
这一步要注意的地方就是下拉菜单所在的层（menu1、menu2）的位置非常重要（由L和T
两个参数决定）。它们的上边线应该紧贴导航条的下边线。如果远离导航条的话，鼠标一离
开导航条，菜单就消失了。
按F2打开LAYER（层）面板，其中列出了网页中的三个层，点menu1和menu2的前面一
格，出现闭着的眼睛图标，这两个层便隐藏起来了。操作这一步是因为下拉菜单的初始状态
是不可见的。
三、 显示和隐藏效果的添加
本步骤分为两部分：
第一，对“导航条中的主菜单”添加控制显示隐藏的命令；
第二，给“下拉选单”本身添加显示隐藏的命令。
1．导航条部分
首先按CTRL键不放，点击导航条中的第一个单元格
，现按Shift+F3打开Behaviors(行为)窗
口，在下拉选项中选中"Show-Hide Layers"（如图）。如果选项中没有这一项，则选择Show Events For
下的IE 5.0后，重新点按钮，此时"Show-Hide Layers"将出现。
Wee制作
版权声明：本文标题：Dreamweaver制作下拉导航菜单 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/b/1710055318a555612.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论