china.com
主页
新闻
体育
游戏
文化
教育
健康
财经
科技
旅游
军事
娱乐
商贸
  科技动态 硬件广场 下载基地 网络教室 网络冲浪 科学博览 移动时代 手机上网 桌面壁纸 科技商情  


不编代码制作下拉菜单

2000-09-01 13:31:40

  由于Javascript的广泛应用,网页的导航菜单越来越向应用程序靠近,网上也有不少介绍用Javascript编程制作弹出下拉菜单的文章。但对Javascript是人人想用它而又怕编程,必竟敲代码是件烦人的事,用别人的代码,要作一点小改动,增加一点个性,也不是件容易的事,改过别人代码的人恐怕都有这种感觉。Macromedia公司推出Dreamweaver3网页制作利剑,给我们带来了福音。用他制作图文并茂的弹出下拉导航菜单,完全可以同应用程序媲美。而制作起来,轻松得出乎你的意料——点点鼠标就行,不用你编一行代码,真是神了!先看下面的效果图,再看后面的制作方法。

237564__082903t01.jpg
图1 导航主菜单

237564__082903t02.jpg
图2 鼠标在第一主菜单上

237564__082903t03.jpg
图3 鼠标在第二主菜单上

制作方法:
  下面介绍的方法是假设你懂得Dreamweaver3的基本操作方法的,若你对Dreamweaver3一无所知,则必须先去看一看Dreamweaver3教程。

  1、在网页上画一个层(Layer1),层的大小以略大于主菜单和下拉菜单为准;

  2、插入一个一行多列的表格,准备制作主菜单背景用。列的多少,根据主菜单有多少个菜单项来确定。然后,给表格的每个单元格加入背景色,当然插入背景图象效果会更好些;

  3、插入若干个层用于写主菜单项,层的大小以略小于表格的单元格为准。层的个数与表格的列数相同。然后,在层上写上各主菜单项的名称,并把它设置为超级链接(因为超级链接可以使用“Behaviors"的显示和隐藏层的功能,假如你用图象作主菜单项名,就不用设为超级链接了,因为图象可直接使用“Behaviors" 的显示和隐藏层的功能。)。注意:在“Link"栏里只要添上一个“#”,不要添其它任何东西;

  4、把写有主菜单项的各个层移到表格相应的单元格里,并摆放整齐,这样主菜单就做好了。注意:各主菜单项的层要分开,不能连接到一起;

  5、再插入若干个层用于放置弹出菜单(子菜单),层的个数与主菜单项的个数相同,层的大小以能容纳下弹出菜单且略有空隙为好。然后在每个层上写上相应的弹出菜单,弹出菜单的设计你可以尽量发挥你的设计水平,因为在层上几乎支持所有的网页设计方法。弹出菜单设计好后,把他们拖到相应的主菜单项下面,且含有弹出菜单的层的上边缘必须与含有主菜单项的层的下边缘相连接,两者之间不能有空隙。

  6、把各个子菜单项的名称设置为超级链接,也就是在相应的属性面板上在“Link”输入窗中写上要链接的网页文件名。然后,把含有弹出菜单的各个层的“Vis”属性设置为“hidden”(隐藏)在相应的层属性面板上设置。

  7、下面来设置“Behaviors”,这是制作弹出下拉菜单关键的一步。用鼠标选取一个主菜单项,再按F8键,此时将弹出“Behaviors”面板(如下图所示),在“Behaviors”面板上点击“+”图标,将弹出一个功能菜单(如下图所示),

237564__082903t04.jpg
图4 Behaviors面板

237564__082903t05.jpg
图5 功能菜单

在功能菜单上选择“Show-hide Layer”菜单,此时弹出“Show-hide Layer”功能面板(如下图所示),在面板上的“Layer Number”输入窗中选择该主菜单项

237564__082903t06.jpg
图6 Show-hide Layer功能面板

  对应的子菜单所在层的层号(也就是层的名称),然后按“show”按钮,再按“OK”,返回到“Behaviors”面板,此时可看到在面板的窗口中增加了一行代码“ onClik Show-hide Layers” 其含义是:在这主菜单项上按下鼠标左键后显示你所选择的层,也就显示了其子菜单,这下正好达到了我们的目的,假如我们要求当鼠标在主菜单项上时不用按左键就要其显示子菜单,那又怎么做呢?要达到这种效果,很容易。用鼠标点一下窗口中的那行代码,可看到在代码的中间部位出现了一个倒三角块,用鼠标点一下那个三角块,将弹出一块面板,在上面选择“onMoseOver”,此时窗口中的代码变为“ onMouseOver Show-hide Lyaers”,目的达到了,是不是很简单?!这时你去看一看网页的源代码,其里面增加了一段Javascript代码,仔细分析一下这段Javascript代码,就是用来当我们按下主菜单项时,显示子菜单那个层的,而且代码编写的相当紧凑,这就是Dreamweaver的功能强大之处。我们再来看看在主菜单项的超级链接中有什么变化,哦!增加了“onMouseOver="MM_showHideLayers('Layer10','','show')"这样一行代码,其含义我不讲你也明白,对吧?!其它主菜单项如法炮制。

  8、进行最后一步操作,由于Dreamweaver3在层元素上没有设置Behaviors功能(我想在以后的版本中会加上),所以我们在网页的源代码中操作,我们先把这行代码复制下来“onMouseOver="MM_showHideLayers('Layer10','','show')",并把他改成这个样子onMouseOver="MM_showHideLayers('Layer11','','hide'); MM_showHideLayers('Layer12' ,'','hide'); MM_showHideLayers('Layer13','','hide'); MM_showHideLayers('Layer14','','hide'); MM_showHideLayers('Layer15','','hide'); MM_showHideLayers('Layer16','','hide');",然后,把他放到本制作方法第一步所插入的那个层(就是我们假设的Layer1)的定义代码中层名称定义的后面,这段代码里的layer10、Layer11...Layer16等层号,就是那些子菜单所在层的层号,这段代码所起的作用是:当鼠标在Layer1 上时,隐藏所有的子菜单层。由于Layer1是包围所有主菜单和子菜单,当鼠标一旦移开主菜单或子菜单,必然经过Layer1,所以弹出的子菜单将关闭,这正是我们所望的。到此,我们的制作已结束。按F12键预览一下,一个漂亮的弹出下拉菜单就呈现在你面前了。我们除了按按鼠标,复制、粘贴了几行代码外,没有去编代码吧?!用Dreamveaver3制作网页就是这样简单!

  摘自《赛迪网》 冯永曜/文

404 Not Found

404 Not Found


nginx


科技检索


中华网推荐

  • 1000名医生在线咨询

  • 中国足球队官方网站

  • 鸦片玫瑰(新版)

  • 精选股票天地

  • 闪光的flash教程

  • 中华网汽车世界

  • 为你的爱情出谋划策

  • 网文精选——野百合集

  • 世界文化遗产在中国

  • 历届香港小姐风姿集



  •  


    网络教室编辑信箱
    版权声明 | 本站检索 | 联系方法 | 刊登广告 | 使用说明 | 关于中华网 | 豁免条款

    版权所有 中华网