使用Dreamweaver MX 方便添加下拉式菜单

几乎不懂做网页， 更不懂JAVA了， 看到不少网站都有下拉式菜单，简洁、美观、实用，于是也想用在自己管辖下的网站首页上，因为不懂JAVA，所以花了一下午时间去截取和修改别人的代码，发觉事半功倍，得不到自己满意的效果，而且好些代码，看得很是头大。

晚上在网上搜了一下， 提到其实Dreamweaver MX 本身就提供功能强大的下拉菜单的制做，主要是利用新建层加上一些行为来完成，相关简单制做如下（取自网上）:

 

Dreamweaver 4 制作弹出式菜单

	本篇已刊登在《计算机应用文摘》十一月刊，不得转载！
	自动滚屏(右键暂停)
	DW是梦幻的编织者，它努力为你的头脑注入新的活力，Dreamweaver有着不断变化的丰富的内涵，和长久不衰的设计思想。我们总会看到一些网站的弹出式菜单、状态栏特效、图片移动等效果。为了实现这些效果，网页设计师都喜欢利用代码直接编辑，而自Macromedia出品的 Dreamweaver4.0上市，所有的特效无需你写一行程序代码，仅需频频点击鼠标，便可实现，真正地实现操作简捷、所见即所得！
	Dreamweaver 4 强大功能的详解，请浏览：http://favorites.myrice.com/eschool/frontpage/dw4_new.htm
	现在我们来共同学习制作弹出式下拉菜单的效果，先看看下面的例子，用鼠标点一下，是否出现下拉菜单？(具体特效，请参看本页面的导航菜单！)
	互动学院
	下面让笔者来解释一下，这是怎样的效果：当鼠标移动主菜单时，就激发一个Behaviors事件，在本例中响应的事件是显示隐藏图层，当然这种效果有很多。今后，我会将我所知的一些技巧都写出来供大家参考。
	１.在需要建立主导航菜单的相应位置，建立类似上面效果的主菜单；
	２.新建一个层（layer），在层中建立表格。这个层就是弹出子菜单；
	３.在这个层的表格中，加入导航文字，并添加超链接；
	操作系统 页面工厂 图形图像 软件荟萃 冲浪宝典 办公一族
	４.调整一下层与主菜单之间的位置啊，使层放置在主菜单的下面，这时，主菜单与子菜单（层）并排显示着；
	５.打开Windows菜单，在下拉菜单中，选择Layer层命令，这时就会出现层窗口，同时在层窗口中会看到一个层(layer1)；
	６.将这个层设置隐藏(hide)特性。
	用鼠标在Layer1层上，点击一下眼睛的按钮，熟悉flash、photoshop的都会知道，他是用来进行显示和隐藏层的按钮，大家看一下，现在 Layer1层是不是隐藏了。跟大家解释一下，因为我们是想做当鼠标放在主菜单中会出现下拉式菜单的效果，所以这时必须将Layer1隐藏起来。不然就看不到特效了！
	７.将主菜单的文字选中（我们这里是“互动学院”四个字），选择Windows菜单中的行为命令，打开行为面板，点击一下“+”找到show-hide layer(显示－隐藏层)的命令，弹出窗口，选择Layer1，点击show（显示）按钮，最后点击ok退出。

========================================================================完=====

有些东西要注意，一般网页制做人员想要实现的效果是MOUSE移到目标上的时候菜单显示，移走的时候，菜单消失，且菜单上肯定要有可以点击的操作，如果只是在目录上加对菜单的显示和隐藏操作，那么MOUSE一离开目标，那菜单也立即消失了， 根本没办法在菜单上做选择或是点击等操作；摸索了一下，同时在菜单里的对象上（如：表格）也加上对自身菜单的显示和隐藏形为就OK了。

８.将事件改为onMouseOver(即鼠标移至)。在行为窗口中，从事件列的下拉按钮中直接选择onMouseOver。    

    　　９.同样，我们依照步骤７，在show-hide layer(显示－隐藏层)窗口中，将layer1设为hide(隐藏)。并将事件改为onMouseOut(鼠标移出)。     　　现在我们尝试着，将鼠标移至主菜单，看看什么效果：          

互动学院

          　　子菜单确实能显现出来，但为何无法定位至子菜单呢？ 我们继续·····     　　 １０.在层面板中选择layer1，在行为窗口中，将layer1的行为与事件设置与主菜单相同。
　　即在show-hide layer(显示－隐藏层)窗口中，将layer1设为show(显示)，并将事件改为onMouseOver(鼠标移至)；还在show-hide layer(显示－隐藏层)窗口中，将layer1设为hide(隐藏)，并将事件改为onMouseOut(鼠标移出)。
    　　 注意：我们对主菜单与子菜单（层）的设置，都是对layer1进行的，不能混淆！     　　现在我们看看，是不是在主菜单与子菜单的行为窗口中，显示的是两个事件，分别为onMouseOver、onMouseOut。    

    　　其中关系是：onMouseOver相对应是layer1的显示；onMouseOut相对应是layer1的隐藏。
    　　１２.现在保存页面，打开Internet Explorer 浏览器(F12),是不是你所预览的效果了？？           　　我们已成功制作完成了弹出式菜单的效果。现在对子菜单加些特效：     　　１.在层面板中，选择layer1，并在该层中，选择整个表格。     　　２.将表格的背景设为浅谈色#F5F5F5，在第一行中，添加如下代码：     　　onMouseOut="this.style.backgroundColor='#F5F5F5'" onMouseOver="this.style.backgroundColor='#FFffff'"     　　这样，就会在代码窗口中出现如下完全代码：     　　<td onMouseOut="this.style.backgroundColor='#F5F5F5'" onMouseOver="this.style.backgroundColor='#FFffff'">
　　···········
　　</td>     　　同样，在其它各行，也这样设置！    

互动学院

          　　现在，一张具有特效的弹出式菜单就正式制作完成了！如果你在制作时，发现有问题的话，请通过邮件，或者我们网站的技术支持进行咨询。我们会及时回复！