83网站导航栏制作案例

本案例将练习 Dreamweaver 中行为的使用。案例的制作思路：

(1) 向预留的导航栏位置插入嵌套表格。

(2) 插入导航栏图片。

(3) 对图片添加“交换图像”行为，使得鼠标移到图片上时文字发光，如图所示，鼠标移开图片时文字恢复，如图所示。

图鼠标移到导航栏上

图鼠标从导航栏移开

在介绍案例的具体实现之前，先来介绍相关的知识。

8.3.1 行为概述

Dreamweaver 提供了一种称为“行为”的机制，帮助用户构建页面中的交互行为。行为，就是在网页中进行一系列动作，通过这些动作实现用户与页面的交互，是一个带有面向对象设计思想的工具。事实上，行为是由预先书写好的JavaScript 代码构成的，使用它可以完成诸如弹出浏览器窗口、显示-隐藏元素等任务。利用Dreamweaver 中的行为，不需要书写代码，就可以实现丰富的动态页面效果。

行为有 3 个重要的组成部分：对象、事件和行为。

对象是产生行为的主体，许多网页元素都可以成为对象，如图片、文字、多媒体文件等。

事件是触发动态效果的条件，它可以被添加到各种页面元素上，也可以被添加到 HTML 标记中。不同的浏览器支持的事件种类和数量不一样，通常高版本浏览器支持更多的事件。

行为通过动作来完成动态效果。例如，弹出信息、改变属性、交换图像等都是动作。动作是一段JavaScript 代码，在Dreamweaver CS3 中使用内置的行为，系统会自动往页面中添加JavaScript 代码，用户完全不必自己编写。Dreamweaver 内置了很多行为动作，形成一个JavaScript 程序库，用户还可以到官方网站下载并安装更多的行为。另外，如果精通JavaScript 语言，也可以编写自己的行为，添加到Dreamweaver CS3 中。

选择“窗口”→“行为”可以显示“行为”面板。在网页中添加行为时，首先需选择要添加行为的对象，然后在“行为”面板中单击按钮打开“动作”菜单，如图所示。因为浏览器版本或选择对象的不同，在“动作”菜单中有些选项呈灰色状态，表明当前情况下不能使用该动作。设定好动作以后还需要在“行为”面板中选择相应的事件，如图所示。

图“动作”菜单

图“事件”列表

8.3.2 预定义行为

Dreamweaver 提供很多预定义行为(或称内置行为)动作，这些都是一些比较常用的功能，在“动作”菜单中可以进行选择。另外单击“动作”菜单中的“获取更多行为”，用户

还可以从Internet 上下载更多的第三方行为并添加到“动作”菜单中。下面主要介绍几种预定义行为的使用方法。

1．交换图像

交换图像动作可以实现用户执行某个动作后改变页面上显示的图像的效果，要注意改变的是图像的源路经，而原来设置的图像大小不变，最好交换图像的两张图片大小相同，以免图像变形。创建交换图像行为的操作步骤如下。

(1) 选中要添加行为的对象，通常是图像对象。

(2) 在“行为”面板中单击按钮打开“动作”菜单，从中选择“交换图像”。

(3) 在打开的“交换图像”对话框中设置各选项，如图所示。

图“交换图像”对话框

“交换图像”对话框中各参数含义如下。

•①“图像”：在列表中显示了页面中所有的图像对象，选择要添加行为的图像。

•②“设定原始档为”：设置替换图像的路径，可以单击“浏览”按钮从磁盘上选择。

•③“预先载入图像”：选择该选项，则无论图像是否显示，都会被下载。

•④“鼠标滑开时恢复图像”：选择该选项，则鼠标离开设定行为的图像对象时，恢复显示原始图像。

(4) 设置完毕后单击“确定”按钮，回到“行为”面板中选择相应的事件。

2．弹出信息

弹出信息动作可以在用户执行某个动作后，显示一个信息对话框，起提示信息的作用。创建弹出信息效果的具体操作步骤如下。

(1) 选中要添加行为的对象。

(2) 在“行为”面板中单击按钮打开“动作”菜单，从中选择“弹出信息”。

(3) 在“弹出信息”对话框中的输入要显示的内容，如图所示。在消息文本框中可以输入文字，也可以使用JavaScript 语句。

图“弹出信息”对话框

(4) 设置完毕后单击“确定”按钮。回到“行为”面板中选择相应的事件，效果如图所示。

图“弹出信息”效果图

3．显示-隐藏层

显示-隐藏层动作可以控制层在网页中的可见性。例如，网页中可以将对某个对象的说明性文字放在一个层内，通过添加显示-隐藏层动作，实现当鼠标移到对象上时显示文字，而当鼠标移开对象时隐藏文字。显示-隐藏层的操作步骤如下。

(1) 选中要添加行为的对象。

(2) 在“行为”面板中单击按钮打开“动作”菜单，从中选择“显示-隐藏元素”。

(3) 在“显示-隐藏元素”对话框中，列出了页面中所有的层。选择要设置的层，单击“显示”按钮则执行显示层的动作，单击“隐藏”则执行隐藏层的动作，单击“默认”则恢复层默认的可见性状态，如图所示。

图“显示-隐藏元素”对话框

(4) 设置完毕后单击“确定”按钮，回到“行为”面板中选择相应的事件。

4．打开浏览器窗口

打开浏览器窗口动作可以在一个新的浏览器窗口中载入指定 URL 地址的文档。另外，对于新打开的窗口还可以设置其属性，如大小、名称、是否显示菜单条等。打开浏览器窗口的具体操作步骤如下。

(1) 选中要添加行为的对象。

(2) 在“行为”面板中单击按钮打开“动作”菜单，从中选择“打开浏览器窗口”。

(3) 设置“打开浏览器窗口”对话框中各参数，如图所示。

图“打开浏览器窗口”对话框

“打开浏览器窗口”对话框中各参数含义如下。

•①“要显示的URL”：输入在新窗口中要打开文件的URL 地址，可以单击“浏览”

按钮来选择。

•②“窗口宽度”、“窗口高度”：设置打开的新浏览器窗口的宽度和高度，单位为像素。

•③“属性”：设置打开的新浏览器窗口的显示属性，如是否有导航栏、菜单栏、地址栏、状态栏等。可以根据需要在相应的选项中勾选。

•④“窗口名称”：设置打开的新浏览器窗口的名称。

(4) 设置完毕后单击“确定”按钮，回到“行为”面板中选择相应的事件。

5．网页效果

在 Dreamweaver CS3 中增加了一项“效果”动作，其中包括7 种视觉效果，如图所示。例如，制作图像缩放效果的具体步骤如下。