Dreamweaver制作下拉菜单（上）

袁一春 
2001年 19期

　　Dreamweaver为我们提供了一些制作下拉菜单的方法。我们从简到繁，从详到略，逐步地介绍一些用Dreamweaver制作下拉菜单的方法。
　　#1　　资源管理器型菜单
　　　　Dreamweaver制作这个类型的菜单可谓轻而易举，因为已经有人把这个效果做成了插件。名字叫“dHTML Outlines”（下载地址：http://jet.cnnf.net/software/extension/MX133574_dHTMLOutlines.mxp，大小13.2K）。只要你安装了Dreamweaver 4.0，直接双击下载下来的后缀名为.mxp的文件，之后一路确定即可安装此插件。打开Dreamweaver，在Object面板右上角有一个小三角，点击后出现下拉菜单，选择dhtml outlines就可以找到该插件。点击  按钮即可运行（图1）（^19040704a^）。
　　　　运行界面（图2）（^19040704b^），Base Name for Outlines 是这个下拉菜单的名字，在一个页面中包含好几个下拉菜单时予以区分，记住不能用中文！
　　　　在Add Heading中输入文字，然后点下面的“+”，就可以把需要菜单出现的文字列入Heading区，用“-”按钮进行删除，用上下按钮进行上移或下移。
　　　　Text Indent of Child Items：用来控制菜单和浏览器左边界的距离以及子菜单左边界和父菜单左边界的距离。
　　　　Include Latin Filer Text：用来在子菜单处加入一些文本以显示效果。
　　#1　　普通一级菜单
　　　　1.制作需要的图片。在这个例子中，我把所有的菜单项和子菜单都做成了图片。因为这样更美观，而且更容易控制，不会因为CSS等其他问题而使菜单变形。例如目前要做的菜单有五个栏目：Microsoft、Macromedia、Adobe、MetaCreations、Ulead，每个菜单下又有若干个子菜单（图3）（^19040704c^）。
　　　　2.将为顶级菜单准备好的五张图片分别放入五个单元格中，并对表格风格进行设置。
　　　　接下来要做的是插入层的工作。用鼠标左键单击某图片选中，这里我们选择Macromedia图片，然后按键盘的方向键“→”，使光标位置紧贴图片右侧。按键盘的“Shift+空格”，在当前位置插入一个“软回车”，使光标换行。在Dreamweaver菜单栏中的Insert菜单下有个Layer命令，这条命令是在光标当前位置插入一个层。设置层的宽度为100%，高度为子菜单的四张图片高度加起来的值（20+19+19+19=77px）。在此层中再插入一个四行一列的表格。并对表格风格进行设置。这里，我们设置表格边框为“0”，表格边距和间隙都为“0”（即属性面板上的Border、CellPad和CellSpace三项为“0”）并且，每个单元格的对齐方式为居中。然后在每个单元格中插入剩下的四张子菜单图片（^19040704d^4）：
　　　　在Dreamweaver里这个样子可能有点难看，但是等做好之后就会一切OK的。
　　　　3.加入链接和Behavior。对Macromedia、Dreamweaver、Fireworks、Flash和Director五张图片进行必要的超链接。一般子菜单都有确定的超链接，但是一级菜单却没有。为了视觉上的效果，我们也给Macromedia图片一个超链接，链接到“#####”或者“javascript:void（0）；”，这样可以保证当鼠标点击这个图片之后，页面停留在当前位置，而不是跳到顶部。
　　　　4.选中Macromedia图片，通过Window /Behaviors（快捷键为“Shift+F3”）打开Behaviors面板，点“+”为图片添加一个Behavior。再点击“+”弹出的菜单中选Show-Hide Layer。
　　　　用鼠标左键单击选中，再点下面的“Show”按钮，最后点右边的“OK”按钮。这一系列动作的意思是：对于Macromedia图片的某一事件，激活Show-Hide Layer这个行为。最后，在Behaviors面板中将上一动作的激发事件变为“onMouseOver”。这个可以通过Behaviors面板上的小三角来实现（^19040704e^5）：
　　　　这一系列动作连起来的意思是：当鼠标移动到Macromedia图片上时，显示名为“Layer1”的层。
　　　　用同样的方法，再给Macromedia图片加一个Behavior：当鼠标离开图片的时候，隐藏名为“Layer1”的层。
　　　　我们先来简要分析一下下拉菜单的“下拉”过程。当鼠标移动到Macromedia图片上时，隐藏的层“Layer1”显示，当鼠标从Macromedia图片移动到层“Layer1”上时，产生了两个动作：鼠标移出图片、鼠标移入层。而我们刚才加的两个动作使得鼠标移出图片的时候，层“Layer1”就隐藏了。不能达到下拉菜单的目的，因此。我们需要给层“Layer1”加上两个和Macromedia图片完全相同的Behavior，才能避免上述情况的发生。给层加Behavior和给图片加是一样的，不过选中的对象是层“Layer1”而已。
　　　　最后的整理。这一部分很简单，通过Window/Layer菜单打开Layer浮动面板，点击层“Layer1”左边的空白区域，直到有闭着的眼睛出现（^19040704f^6）。
　　　　这是把“Layer1”层的初始状态设置为隐藏。保存文件！最后，打开浏览器看看刚才的成果，怎么样？还不错吧！ 
 