几乎不懂做网页, 更不懂JAVA了, 看到不少网站都有下拉式菜单,简洁、美观、实用,于是也想用在自己管辖下的网站首页上,因为不懂JAVA,所以花了一下午时间去截取和修改别人的代码,发觉事半功倍,得不到自己满意的效果,而且好些代码,看得很是头大。
晚上在网上搜了一下, 提到其实Dreamweaver MX 本身就提供功能强大的下拉菜单的制做,主要是利用新建层加上一些行为来完成,相关简单制做如下(取自网上):
Dreamweaver 4 制作弹出式菜单
|
![]() ![]() ![]() ![]() |
![]() | ||||||||
本篇已刊登在《计算机应用文摘》十一月刊,不得转载!
| ||||||||
自动滚屏(右键暂停)
| ||||||||
DW是梦幻的编织者,它努力为你的头脑注入新的活力,Dreamweaver有着不断变化的丰富的内涵,和长久不衰的设计思想。我们总会看到一些网站的弹出式菜单、状态栏特效、图片移动等效果。为了实现这些效果,网页设计师都喜欢利用代码直接编辑,而自Macromedia出品的 Dreamweaver4.0上市,所有的特效无需你写一行程序代码,仅需频频点击鼠标,便可实现,真正地实现操作简捷、所见即所得! | ||||||||
Dreamweaver 4 强大功能的详解,请浏览:http://favorites.myrice.com/eschool/frontpage/dw4_new.htm | ||||||||
现在我们来共同学习制作弹出式下拉菜单的效果,先看看下面的例子,用鼠标点一下,是否出现下拉菜单?(具体特效,请参看本页面的导航菜单!) | ||||||||
| ||||||||
下面让笔者来解释一下,这是怎样的效果:当鼠标移动主菜单时,就激发一个Behaviors事件,在本例中响应的事件是显示隐藏图层,当然这种效果有很多。今后,我会将我所知的一些技巧都写出来供大家参考。 | ||||||||
1.在需要建立主导航菜单的相应位置,建立类似上面效果的主菜单; | ||||||||
2.新建一个层(layer),在层中建立表格。这个层就是弹出子菜单; | ||||||||
3.在这个层的表格中,加入导航文字,并添加超链接; | ||||||||
| ||||||||
4.调整一下层与主菜单之间的位置啊,使层放置在主菜单的下面,这时,主菜单与子菜单(层)并排显示着; | ||||||||
5.打开Windows菜单,在下拉菜单中,选择Layer层命令,这时就会出现层窗口,同时在层窗口中会看到一个层(layer1); | ||||||||
6.将这个层设置隐藏(hide)特性。 | ||||||||
用鼠标在Layer1层上,点击一下眼睛的按钮,熟悉flash、photoshop的都会知道,他是用来进行显示和隐藏层的按钮,大家看一下,现在 Layer1层是不是隐藏了。跟大家解释一下,因为我们是想做当鼠标放在主菜单中会出现下拉式菜单的效果,所以这时必须将Layer1隐藏起来。不然就看不到特效了! | ||||||||
![]() | ||||||||
7.将主菜单的文字选中(我们这里是“互动学院”四个字),选择Windows菜单中的行为命令,打开行为面板,点击一下“+”找到show-hide layer(显示-隐藏层)的命令,弹出窗口,选择Layer1,点击show(显示)按钮,最后点击ok退出。 | ||||||||
![]() |
========================================================================完=====
有些东西要注意,一般网页制做人员想要实现的效果是MOUSE移到目标上的时候菜单显示,移走的时候,菜单消失,且菜单上肯定要有可以点击的操作,如果只是在目录上加对菜单的显示和隐藏操作,那么MOUSE一离开目标,那菜单也立即消失了, 根本没办法在菜单上做选择或是点击等操作;摸索了一下,同时在菜单里的对象上(如:表格)也加上对自身菜单的显示和隐藏形为就OK了。
8.将事件改为onMouseOver(即鼠标移至)。在行为窗口中,从事件列的下拉按钮中直接选择onMouseOver。
![](http://favorites.myrice.com/eschool_image/frongpage/popu-menu2.gif)
9.同样,我们依照步骤7,在show-hide layer(显示-隐藏层)窗口中,将layer1设为hide(隐藏)。并将事件改为onMouseOut(鼠标移出)。 现在我们尝试着,将鼠标移至主菜单,看看什么效果:
互动学院
|
即在show-hide layer(显示-隐藏层)窗口中,将layer1设为show(显示),并将事件改为onMouseOver(鼠标移至);还在show-hide layer(显示-隐藏层)窗口中,将layer1设为hide(隐藏),并将事件改为onMouseOut(鼠标移出)。
注意:我们对主菜单与子菜单(层)的设置,都是对layer1进行的,不能混淆! 现在我们看看,是不是在主菜单与子菜单的行为窗口中,显示的是两个事件,分别为onMouseOver、onMouseOut。
![](http://favorites.myrice.com/eschool_image/frongpage/popu-menu3.gif)
其中关系是:onMouseOver相对应是layer1的显示;onMouseOut相对应是layer1的隐藏。
12.现在保存页面,打开Internet Explorer 浏览器(F12),是不是你所预览的效果了?? 我们已成功制作完成了弹出式菜单的效果。现在对子菜单加些特效: 1.在层面板中,选择layer1,并在该层中,选择整个表格。 2.将表格的背景设为浅谈色#F5F5F5,在第一行中,添加如下代码: onMouseOut="this.style.backgroundColor='#F5F5F5'" onMouseOver="this.style.backgroundColor='#FFffff'" 这样,就会在代码窗口中出现如下完全代码: <td onMouseOut="this.style.backgroundColor='#F5F5F5'" onMouseOver="this.style.backgroundColor='#FFffff'">
···········
</td> 同样,在其它各行,也这样设置!
互动学院
|