Dreamweaver中多种菜单样式的实现方法

上海邦德职业技术学院 马 恒

一、引言

凡是浏览过网页的人都知道：导航菜单是一个网站不可缺少的部分，它不仅直观的体现出了这个网站的整体结构，更是指引和方便浏览者访问所需内容的快速通道。故而，网站导航菜单的设计和实现就体现得尤为重要了，良好的网站导航会使网站更易于访问、更加吸引浏览者。导航条的样式和风格是网站样式的一个重要的组成部分，好的导航条可以在确定网站风格的同时，清晰网站的层次。

二、导航菜单样式的实现

1.普通的导航菜单样式

普通的导航菜单样式适合下级链接页面不多，结构也不是很复杂的网站，使用Dreamweaver面板中提供的层或者表格直接编辑链接就可以了。

以表格的制作方式为例，我们创建一个水平的导航菜单，插入1行多列的表格(一个菜单项为一列)，在每个单元格中输入具体的菜单项或者也可使用自己设计制作图片为菜单，在属性面板中编辑超链接的地址。若我们需要制作侧边菜单栏，可以采用垂直的导航菜单样式，插入多行1列的表格进行编辑，在单元格中添加文字或图片，编辑超链接即可。

但是，无论是水平还是垂直导航菜单都有美中不足：编辑过超链接的文字会出现的蓝色的下划线，我们可以通过之间添加代码来解决：

2.带滑块效果的导航菜单样式

当鼠标指向导航菜单的某一菜单项时，该菜单项的颜色就会变成与其他菜单项不相同。与上面的菜单样式比较，这种菜单的视觉效果比较好，美观性强、生动活泼、动感性强，吸引人们的注意力。其实现方式有以下有两种：

第一种方式：通过翻转图片来实现。

(1)设计好的导航菜单的菜单项，再将每个菜单项制作成像素大小一致的图片，将菜单项制作成图片的好处不仅仅是为了方便实现上述的翻转样式，由于图片可以根据自己喜欢的设计风格来选择颜色、背景、字体，所以制作的菜单更为美观。

(2)为每个菜单项制作翻转图(鼠标指向菜单项时，想要显示的与其他菜单不同颜色的那张图片)，制作时需注意不仅翻转图的像素尺寸大小要与第一步制作的菜单项图片一致，而且为了网站的美观效果尽量颜色有所反差。将每个菜单项图以及它们的翻转图都保存在网站存放图片的目录下。

(3)使用表格来布局菜单项，插入1行多列的表格，每个单元格中插入原始的菜单项图片。

(4)打开Dreamweaver的行为面板，选中某一菜单项图片，在行为面板张添加行为：交换图像，此时出现对话框，对话框“设定原始档为：”中浏览、选择制作好的该菜单项的翻转图片，并勾选“鼠标滑开时恢复图像”。

这时，我们看到行为面板里添加了两个动作：“onMouseOver交换图像”和“onMouseOut恢复交换图像”。每个菜单项都需要如此制作。然后编辑每个导航菜单的菜单项的超链接，由于现在的菜单项都是图片形式的，若直接选中图片编辑超链接，图片周围会出现蓝色的边框，这是我们不想见到的，所以我们一般使用图片属性窗口中的“地图”热点工具，绘制热点来编辑超链接。

第二种方式：通过代码来实现。

(1)制做导航菜单项背景图以及鼠标指向菜单项时显示的效果背景图，图片像素不用很大，将这两张图片保存在网站存放图片的目录下即可。

(2)在之间添加如下代码：

上述代码中text-decoration∶ none;定义链接的文字不带下划线，#borderlinks a{}中定义的是鼠标没有指向时，导航菜单的显示样式(字体大小、行高、背景样式)，#borderlinks a∶hover{}中定义的是鼠标指向导航菜单时，菜单显示的样式(字体大小、行高、背景样式)，其中代码background-image∶url(images/bnck02.jpg);指定背景图片样式。

(3)使用表格来布局导航菜单的菜单项，插入1行多列的表格，在每一单元格中输入菜单项。

(4)在导航菜单的区块前，引用上述样式，代码为：

……

(5)为导航菜单项文字编辑超链接。

以上两种方法，同为实现滑块效果的导航菜单，不同之处在于：第一种方法是用图片来制作菜单项，视觉效果比较美观，但是一旦需要增加或者删除菜单项时，就必须调整每个菜单项以及它的翻转图的像素尺寸；第二种方法中菜单项仅仅是文字，美观效果依赖于背景图片以及网页的整体设计，但遇到增删菜单的情况其处理起来就比较简单，只需要调整单元格的尺寸即可。

3.带下拉菜单的导航菜单样式

当鼠标指向导航菜单的某一菜单项时，该菜单项会显示出隐藏的子菜单，浏览者可以直接在子菜单中直接选择要访问的页面，这样既节约了排版空间，又使网页布局简洁有序。该子菜单有下拉菜单有垂直和水平两种。我们以垂直菜单为例，其实现亦有2种常见的方法：

第一种：通过行为面板的显示隐藏层来实现，其原理比较简单，它利用了行为面板中的内置方法Show-Hide Layers(隐藏-显示层)方法，并用onMouseOver(鼠标移至)和onMouseOut(鼠标移开)来触发层的隐藏和显示。

具体的实现方法如下：

(1)在表格中布局好具体的导航菜单项。

(2)在某导航菜单的菜单项下添加一个层，在层中编辑隐藏的子菜单的内容、字体、链接、背景等，将层的属性设置为“hidden”，如此设置，使这个层平时为不可见的隐藏层。要注意的是：下拉选单所在的层的位置非常重要（属性面板中由L和T两个参数决定）。它们的上边线应该紧贴导航条的下边线，这样才能保证在后面我们完成第三个步骤后，菜单能正常使用。因为如果远离导航条的话，鼠标一离开导航条，菜单就消失了。

(3)选中该菜单项，在行为面板中添加行为“显示-隐藏层”：OnMouseOver显示隐藏层（显示），以及行为：OnMouseOut显示隐藏层（隐藏），在添加行为时注意层的编号。

(4)每个菜单项都需要如此制作。

(5)根据自己的需要和网站的整体风格对菜单和层进行美化和修饰。

第二种：通过行为面板的显示弹出式菜单实现。

(1)使用表格布局导航菜单项。

(2)选中某一菜单项，在行为面板中添加行为：OnMouseOver显示弹出式菜单。

(3)双击行为面板中的显示弹出式菜单，弹出对话框，可以对子菜单的内容、链接、外观、位置、边框、字体颜色、字体大小、背景颜色等进行编辑。其中，“菜单延迟”编辑框默认设置为1000相当于1秒；使用“位置”选项设置弹出式菜单相对于触发图像或链接的显示位置。

(4)单击“位置”标签；在“菜单位置”区选择“触发器在右上边缘”按钮；确保选中了“在发生onmouseout事件时隐藏菜单”复选框。此设置的效果是当用户将鼠标指针移开触发器之后该菜单项自动隐藏。

(5)编辑完成，确定后，行为面板中自动生成：OnMouseOut隐藏弹出式菜单。现在行为面板列表中显示了两个动作。

(6)每个菜单项都需要如此制作。

若想生成的菜单为水平式样，以某菜单项生成的代码段举例：

window.mm_menu_0107124954_0=new Menu("root",88,18,"",12,"#FFFFFF","#FFFFFF","#4682B4","#1E90FF","cente r","middle",3,0,1000,-5,7,true,fals e,true,0,true,true);

mm_menu_0107124954_0.addMenuItem(“学生社团”,”location=’xysh/shetuan.htm’”);

mm_menu_0107124954_0.addMenuItem(“学生管理”,”location=’xysh/xsguanli.htm’”);

mm_menu_0107124954_0.addMenuItem(“学生服务”,”location=’xysh/xsfuwu.htm’”);

mm_menu_0107124954_0.hideOn-MouseOut=true;

mm_menu_0107124954_0.bgColor='#555555';

mm_menu_0107124954_0.menuBorder=1;

mm_menu_0107124954_0.menuLite-BgColor='#FFFFFF';

mm_menu_0107124954_0.menuBorder-BgColor='#777777';

只需将上述代码中：window.mm_menu_0107124954_0=new Menu("root",88,1 8,"",12,"#FFFFFF","#FFFFFF","#4682B4","#1E90FF","center","middle",3,0,1000,-5,7,true,false,true,0,true,true);最后的3个true改为false即可。

第二种方法比第一种方法制作出来的菜单更为美观，它不只是简单实现了下拉菜单效果，同时还可以实现显示子菜单的延时时间、鼠标指向某子菜单式时显示的反差背景色，还可以将子菜单进行多个位置的定位。

具体选用垂直子菜单还是水平子菜单是根据实际情况来的，水平子菜单需要考虑菜单的项目数不能过多，超出网页页面范围就显得不合适了，相对而言垂直子菜单就不用考虑这一点，更有甚者，有的网站还设有三级菜单，这种情况，使用垂直子菜单更为合适。

三、菜单的组合

菜单的样式不是独立存在或是一成不变的。可以讲上面的几种菜单组合起来使用，以实现不同的效果。例如，要实现带滑块效果的水平下拉菜单，只需要将上面的第二种和第三种相结合，就可以实现这个效果。如果美化的效果不够理想，可以通过定义CSS样式来解决。

[1]胡崧,吴晓炜,李胜林.Dreamweaver CS6中文版从入门到精通[M].中国青年出版社.

[2]李睦芳,肖新容.Dreamweaver CS5 +ASP动态网站开发与典型实例[M].清华大学出版社.