Dreamweaver制作下拉菜单（上）
#1?牐犠试垂芾砥餍筒说?
?牐燚reamweaver制作这个类型的菜单可谓轻而易举，因为已经有人把这个效果做成了插件。名字叫“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 是这个下拉菜单的名字，在一个页面中包含好几个下拉菜单时予以区分，记住不能用中文！
?牐犜贏dd Heading中输入文字，然后点下面的“+”，就可以把需要菜单出现的文字列入Heading区，用“-”按钮进行删除，用上下按钮进行上移或下移。
?牐燭ext Indent of Child Items：用来控制菜单和浏览器左边界的距离以及子菜单左边界和父菜单左边界的距离。
?牐營nclude Latin Filer Text：用来在子菜单处加入一些文本以显示效果。
#1?牐犉胀ㄒ患恫说?
?牐?1.制作需要的图片。在这个例子中，我把所有的菜单项和子菜单都做成了图片。因为这样更美观，而且更容易控制，不会因为CSS等其他问题而使菜单变形。例如目前要做的菜单有五个栏目：Microsoft、Macromedia、Adobe、MetaCreations、Ulead，每个菜单下又有若干个子菜单（图3）（^19040704c^）。
?牐?2.将为顶级菜单准备好的五张图片分别放入五个单元格中，并对表格风格进行设置。
?牐牻酉吕匆龅氖遣迦氩愕墓ぷ鳌Ｓ檬蟊曜蠹セ髂惩计≈校饫镂颐茄≡馦acromedia图片，然后按键盘的方向键“→”，使光标位置紧贴图片右侧。按键盘的“Shift+空格”，在当前位置插入一个“软回车”，使光标换行。在Dreamweaver菜单栏中的Insert菜单下有个Layer命令，这条命令是在光标当前位置插入一个层。设置层的宽度为100%，高度为子菜单的四张图片高度加起来的值（20+19+19+19=77px）。在此层中再插入一个四行一列的表格。并对表格风格进行设置。这里，我们设置表格边框为“0”，表格边距和间隙都为“0”（即属性面板上的Border、CellPad和CellSpace三项为“0”）并且，每个单元格的对齐方式为居中。然后在每个单元格中插入剩下的四张子菜单图片（^19040704d^4）：
?牐犜贒reamweaver里这个样子可能有点难看，但是等做好之后就会一切OK的。
?牐?3.加入链接和Behavior。对Macromedia、Dreamweaver、Fireworks、Flash和Director五张图片进行必要的超链接。一般子菜单都有确定的超链接，但是一级菜单却没有。为了视觉上的效果，我们也给Macromedia图片一个超链接，链接到“#####”或者“javascript:void（0）；”，这样可以保证当鼠标点击这个图片之后，页面停留在当前位置，而不是跳到顶部。
?牐?4.选中Macromedia图片，通过Window /Behaviors（快捷键为“Shift+F3”）打开Behaviors面板，点“+”为图片添加一个Behavior。再点击“+”弹出的菜单中选Show-Hide Layer。
?牐犛檬蟊曜蠹セ餮≈校俚阆旅娴摹癝how”按钮，最后点右边的“OK”按钮。这一系列动作的意思是：对于Macromedia图片的某一事件，激活Show-Hide Layer这个行为。最后，在Behaviors面板中将上一动作的激发事件变为“onMouseOver”。这个可以通过Behaviors面板上的小三角来实现（^19040704e^5）：
?牐犝庖幌盗卸髁鹄吹囊馑际牵旱笔蟊暌贫組acromedia图片上时，显示名为“Layer1”的层。
?牐犛猛姆椒ǎ俑鳰acromedia图片加一个Behavior：当鼠标离开图片的时候，隐藏名为“Layer1”的层。
?牐犖颐窍壤醇蛞治鲆幌孪吕说サ摹跋吕惫獭５笔蟊暌贫組acromedia图片上时，隐藏的层“Layer1”显示，当鼠标从Macromedia图片移动到层“Layer1”上时，产生了两个动作：鼠标移出图片、鼠标移入层。而我们刚才加的两个动作使得鼠标移出图片的时候，层“Layer1”就隐藏了。不能达到下拉菜单的目的，因此。我们需要给层“Layer1”加上两个和Macromedia图片完全相同的Behavior，才能避免上述情况的发生。给层加Behavior和给图片加是一样的，不过选中的对象是层“Layer1”而已。
?牐犠詈蟮恼怼Ｕ庖徊糠趾芗虻ィü齏indow/Layer菜单打开Layer浮动面板，点击层“Layer1”左边的空白区域，直到有闭着的眼睛出现（^19040704f^6）。
?牐犝馐前选癓ayer1”层的初始状态设置为隐藏。保存文件！最后，打开浏览器看看刚才的成果，怎么样？还不错吧！