下拉菜单全攻略之Dreamweaver篇

原创 2004年10月23日 21:15:00

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


■ 用Dreamweaver制作下拉菜单

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


2004927142026324.gif


相信你已经等不急了,那就让我们马上开始吧!

  一、 导航条的制作


 

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


 

2004927142026810.gif


 

  按CTRL+F2打开Objects面板,点击层按钮2004927142026671.gif后在页面中按住鼠标不放拖出一个层,然后在层的Properties(属性)面板中设置各参数,Layer ID框填入title,L、T、W、H框分别填入8、15、480、15,背景色填入#006699,如图。


 

2004927142026183.gif


 

  将光标移至层内,点击Objects面板上的表格按钮2004927142026795.gif,插入一个一行四列的表格,设置如图。


 

2004927142026190.gif

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


 

2004927142027390.gif


 

  二、 下拉选单的制作


 

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


 

2004927142027454.gif


 

  这时候,我们便可以在menu1这个层中输入我们所要的菜单内容。为了排版方便,我在这还是使用表格来做菜单。这个层将作为"经典论坛"的下拉选单出现,填入你所需要的菜单链接。同样的方法,再为"天极网"也做一个下拉选单(层menu2)。


 

2004927142027599.gif


 

  这一步要注意的地方就是下拉选单所在的层(menu1、menu2)的位置非常重要(由L和T两个参数决定)。它们的上边线应该紧贴导航条的下边线,这样才能保证在后面我们完成第三个步骤后,菜单能正常使用。因为如果远离导航条的话,鼠标一离开导航条,菜单就消失了。
按F2打开LAYER(层)面板,其中列出了网页中的三个层,点menu1和menu2的前面一格,出现闭着的眼睛图标,这两个层便隐藏起来了。操作这一步是因为下拉菜单的初始状态是不可见的。


 

  三、 显示和隐藏效果的添加


 

  这一步骤是化腐朽为神奇的关键一步,大家仔细跟我来做。
本步骤分为两部分:第一,对导航条中的主菜单添加控制显示隐藏的命令;第二,给下拉选单本身添加显示隐藏的命令。

  1.导航条部分
首先按CTRL键不放点击导航条中的第一个单元格,现按Shift+F3打开Behaviors窗口,点2004927142027142.gif按钮,在下拉选项中选中"Show-Hide Layers"(如图)。如果选项中没有这一项,则选择Show Events For下的IE 5.0后,重新点 按钮,此时"Show-Hide Layers"将出现。


 

2004927142027882.gif


 

2004927142027194.gif


 

  这时将会弹出一个窗口,如下图。在Named Layers框中会列出当前网页所有的层,选中" layer "menu1" ",因为我们想要menu1这个层对"经典论坛"响应。然后点下面的"show"按钮,OK。


 

2004927142027946.gif


 

  这时会回到Behaviors窗口,窗口中出现如下图所示字样,点击Events下的文字"onClick",会出现一个向下的小箭头,点击它,在下拉选项中选中onMouseOver。这一步的作用是实现当鼠标移至第一个单元格时,下拉选单menu1的状态变为显示(Show)。


 

2004927142028277.gif


 

  下一步是让下拉选单menu2在鼠标移至第二个单元格时再变加隐藏状态。
再点2004927142027142.gif按钮,在下拉选项中选中"Show-Hide Layers",在弹出窗口中选中" layer "menu1" ",因为我们想要menu1这个层对"经典论坛"响应。然后点下面的"hide"按钮,OK。


 

2004927142028607.gif


 

  回到Behaviors窗口,点击向下的小箭头,在下拉选项中选中onMouseOut。

  2.下拉选单部分
先选中层menu1,方法是点击层的边缘或在LAYER面板中点击menu1,用与导航条部分同样的方法在Behaviors窗口中为它添加显示与隐藏自己的命令。这样做的效果是当鼠标移出层menu1时,层menu1就自动隐藏。最后层menu1的状态如图所示。


 

2004927142028521.gif


 

  3.重复以上两部分,为导航条的第二个主菜单"天极网"和层menu2添加显示、隐藏层命令。


 

  四、 下拉菜单的美化修饰


 

  到这里,下拉菜单的功能效果已经实现了,你现在按F12就可以看到。不过你一定也发现菜单有点难看,字不够精细,菜单选项的默认链接色不好看,菜单也没有边框,那就让我们来稍稍为它美容一下。
1.定义菜单字体样式
按Shift+F11打开CSS Style(样式)面板,点击面板下面的2004927142028312.gif按钮

在弹出的"New Style"窗的Tag框内选中td标签,Type选第二项Redefine HTML Tag,Define选This Document Only,如图。


 

2004927142028894.gif


 

  此时弹出设置窗口,不管其它的,只在右边的Size框里选中12,单位为pixels。


 

2004927142028138.gif

 

  2.定义菜单链接样式
在样式面板中,点击面板下面的 按钮,在弹出窗中, Type选第三项Use CSS Selector,Tag框内选中a:hover标签,Define选This Document Only,如图。


2004927142028267.gif


  点击OK后在弹出窗中,Color填#ff9933,Decoration选none,点OK。


2004927142028320.gif


  返回到样式面板,点击面板下面的2004927142028312.gif按钮,在弹出窗中, Type选第三项Use CSS Selector,Tag框内选中a:link标签,Define选This Document Only。
点击OK后在弹出窗中,Color填#ffffff,Decoration选none,点OK。


  又返回到样式面板,点击面板下面的2004927142028312.gif按钮,在弹出窗中, Type选第三项Use CSS Selector,Tag框内选中a:visited标签,Define选This Document Only。
点击OK后在弹出窗中,Color填#ffffff,Decoration选none,点OK。


  3.定义菜单边框样式
在样式面板中,点击面板下面的 按钮,在弹出窗中, Tag框内选中td标签,Type选第二项Redefine HTML Tag,Define选This Document Only,如图。


2004927142029691.gif


  弹出设置窗口,在左边的列表中选Border,右边四条边宽度都输入为1,颜色设为黑色#000000,Style选为solid。


2004927142029529.gif


  到此,我们就大告成功了。赶快用到你的网页上去吧。

Dreamweaver下拉菜单全攻略

下拉菜单是网上最常见到的效果之一,用鼠标轻轻一点或是移过去,就出现一个更加详细的菜单,它不仅节省了网页排版上的空间、使网页布局简洁有序,而且一个新颖美观的下拉菜单,更是为您的网页增色不少。 ...
  • u011452015
  • u011452015
  • 2013年07月26日 10:21
  • 164

下拉菜单全攻略之Javascript篇

下拉菜单全攻略之Javascript篇 ...
  • aiwtu
  • aiwtu
  • 2006年06月30日 19:24
  • 790

DIV+CSS实操六:经管系网页添加导航栏下拉菜单

其实很久之前就想实现这个功能,一直没有去付诸行动,大早上的就开始看老师讲过的一些简单的JS下拉菜单的 知识,可能是我们基础差,老师讲的也是非常基础的一些,但是我们还是没有听懂,仔细研究了一番,反反复...
  • erlian1992
  • erlian1992
  • 2015年12月10日 10:43
  • 4046

《sed & awk》读书笔记之 sed 篇

Sed&awk笔记之sed篇:简单介绍 最近在阅读《sed & awk(第二版)》,这本书是sed和awk相关书籍中比较经典的一本。我在读书的时候有一个习惯,就是会作一些笔记,如果有条件我会放到博客中...
  • chenyulancn
  • chenyulancn
  • 2014年01月02日 15:24
  • 555

如何在adobe dreamweaver cs6中添加动态下拉列表

1. 从Dreamweaver 右侧的Bindings -> Add RecordSet(Query). 选择Table中包含要添加的列表的内容的那个表的列。 我们这里是从ProductCompo...
  • virus026
  • virus026
  • 2014年01月05日 20:36
  • 2464

异化的追思——读《变形记》《火之鸟10复活篇》《沙耶之歌》》

  原文图文并茂,请到http://www.jsharer.com/file/738383.htm下载 异化的追思——读《变形记》《火之鸟10复活篇》《沙耶之歌》》Version 1.000三部作品的...
  • luozhuang
  • luozhuang
  • 2008年07月14日 13:21
  • 5513

2、菜鸟也学DW做ASP(数据库设置篇)

1,首先确认站点根目录下有专门的数据库存放目录,比如d:/newgate下面的database文件夹(有则Ok,无则新建)。 接着打开Microsoft Access DBMS,"文件"---“新建....
  • regina_419
  • regina_419
  • 2007年05月10日 17:13
  • 2556

初读《演说之禅设计篇》有感

零零散散看了快半个月吧,还剩几十页,今天终于把那几十页看完了,直观感受就是,看起来说得挺不错的,但是如果换我自己去做,没有参考,能做出些许满意的PPT吗?尽管带着满满的不自信,但还是找出一份大一时候做...
  • u013816144
  • u013816144
  • 2016年06月21日 21:53
  • 387

《sed & awk》读书笔记之sed篇

Sed是什么 Sed本质上是一个编辑器,但是它是非交互式的,这点与VIM不同;同时它又是面向字符流的,输入的字符流经过Sed的处理后输出。这两个特性使得Sed成为命令行下面非常有用的一个...
  • aichuanwendang
  • aichuanwendang
  • 2016年11月25日 20:25
  • 672

一步一步学ROP之linux_x86篇

0x00    本文仅解释说明蒸米大神一步一步学ROP之linux_x86篇,读者应先阅读这篇文章,遇到问题再来看我这篇文章。    阅读完这两篇文章后,我们会理解ROP(返回导向编程),DEP(堆栈...
  • jltxgcy
  • jltxgcy
  • 2016年02月19日 11:16
  • 2444
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:下拉菜单全攻略之Dreamweaver篇
举报原因:
原因补充:

(最多只允许输入30个字)