网页制作中的行为技术

《网页制作中的行为技术》由会员分享，可在线阅读，更多相关《网页制作中的行为技术（35页珍藏版）》请在金锄头文库上搜索。

1、第11章 网页制作中的行为技术 本章知识点及学习目标本章重点介绍了Dreamweaver MX2004自带的20种“ 行为”的定义和基本功能。行为就是由一段段JavaScript 代码组成的，主要是为更好地控制其他网页中的元素而 设置。行为的扩展是无限制的，只要掌握了JavaScript， 就可以自己编写行为，也可以从Dreamweaver MX 2004 的官方网站中获得。通过本章的学习，应该掌握以下内 容： 行为的意义以及【行为】面板的使用方法 根据具体的行为设置相对应的事件 对所使用的事件进行修改本章内容概览11.1 选用行为 11.1.1 使用行为面板 11.1.2 添加行为 11.2

2、 标准事件 11.3 课堂小实例 11.3.1 调用 JavaScript 11.3.2 改变属性 11.3.3 检查浏览器 11.3.4 检查插件 11.3.5 控制 Shockwave 或 Flash 11.3.6 拖动层 11.3.7 转到 URL 11.3.8 跳转菜单 11.3.9 跳转菜单开始 11.3.10 打开浏览器窗口 11.3.11 播放声音 11.3.12 弹出消息 11.3.13 预先载入图像 11.3.14 设置导航栏图像 11.3.15 设置文本 11.3.16 显示隐藏层 11.3.17 显示弹出菜单 11.3.18 交换图像 11.3.19 恢复图像交换 11.

3、3.20 检查表单 11.4 课后习题与解答11.1 选用行为 为了更好地理解行为的概念，下面分别解释与行为相关的三个重 要的概念【对象】、【事件】和【动作】。【对象】是产生行为的主体，很多网页元素都可以成为对象，如图片 、文字、多媒体文件等。此外，网页本身有时也可作为对象。 【事件】是触发动态效果的原因，它可以被附加到各种页面元素上， 也可以被附加到HTML标记中。一个事件总是针对页面元素或标记而 言的，例如将鼠标指针移到图片上、把鼠标指针放在图片之外和单击 鼠标左键，是与鼠标有关的三个最常见的事件(onMouseOver、 onMouseOut、onClick)。不同的浏览器支持的事件种类

4、和数量是不一 样的，通常高版本的浏览器支持更多的事件。 【动作】是指最终需完成的动态效果，如交换图像、弹出信息、打开 浏览器窗口、播放声音等都是动作。动作通常是一段JavaScript代码。 在Dreamweaver MX 2004中使用内置的行为时，系统会自动向页面中 添加JavaScript代码，用户完全不必自己编写。将事件和动作组合起来就构成了行为。 11.1.1 使用行为面板 在Dreamweaver MX 2004中，对行为的添加 和控制主要通过【行为】面板来实现。具 体操作步骤如下。 1选择【窗口】中的【行为】命令。 2打开【行为】面板，如图11-1所示。 图11-1 【行为】面板

5、11.1.2 添加行为 添加行为的具体操作方 法如下。在网页中选定一个对象 ，或者直接选中整个页 面。 1 打开【行为】面板，单 击面板上的【+】按钮 ，将弹出动作菜单，如 图11-2所示。 2从弹出下拉菜单中选 择一种动作，弹出相应 的参数设置对话框，在 其中进行设置后，单击 【确定】按钮。 图11-2 添加行为11.2 标准事件 Dreamweaver MX 2004配备了一套得到流行 浏览器承认的事件列表。单击【行为】面板上的【】按钮，选取【 显示事件】菜单，打开级联菜单，可以看 到在级联菜单中提供的10种不同浏览器的 版本。11.3 课堂小实例（标准动作） Dreamweaver MX

6、 2004内置许多行为，每 一种行为都可以实现一个动态效果，或用 户与网页的交互行为。下面将分别讲述每 个动作。 11.3.1调用 JavaScript“调用 JavaScript”动作允许您使用“行为”面 板指定当发生某个事件时应该执行的自定 义函数或 JavaScript 代码行。（您可以自己 编写 JavaScript 或使用 Web 上多个免费的 JavaScript 库中提供的代码。 “调用 JavaScript”动作若要使用“调用 JavaScript”动作，请执行以下操作： 1.选择一个对象并打开“行为”面板。 2.单击加号 (+) 按钮并从“动作”弹出菜单中选择“调用 Java

7、Script”。 3.准确键入要执行的 JavaScript，或键入函数的名称。 例如，若要创建一个“后退”按钮，您可以键入 if(history.length0)history.back()。如果您已将代码封装 在一个函数中，则只需键入该函数的名称（例如 hogback()）。 4.单击“确定”。 5.检查默认事件是否是所需的事件。 如果不是，请从弹出菜单中选择另一个事件。如果未列 出所需的事件，则在“显示事件”弹出菜单中更改目标浏览 器。11.3.2 改变属性 使用“改变属性”动作更改对象某个属性（例 如层的背景颜色或表单的动作）的值。您 可以更改的属性是由浏览器决定的；在 Interne

8、t Explorer 4.0 中可以通过此行为更改 的属性比 Internet Explorer 3.0 或 Netscape Navigator 3.0 或 4.0 多得多。例如，您可以 动态设置层的背景颜色。 注意：只有在您非常熟悉 HTML 和 JavaScript 的情况下才使用此动作。使用“改变属性”动作 若要使用“改变属性”动作，请执行以下操作： 选择一个对象并打开“行为”面板。 单击加号 (+) 按钮并从“动作”弹出菜单中选择“更改属性”。 从“对象类型”弹出菜单中选择您要更改其属性的对象的类型。 “命名 对象”弹出菜单马上列出所有所选类型的命名对象。 从“命名对象”弹出菜单中选

9、择一个对象。 从“属性”弹出菜单中选择一个属性，或在文本框中输入该属性的名称 。 若要查看每个浏览器中可以更改的属性，请从浏览器弹出菜单中选 择不同的浏览器或浏览器版本。如果您正在键入属性名称，则一定要 使用该属性的准确 JavaScript 名称（请记住 JavaScript 属性是区分大小 写的）。 在“新值”文本框中为该属性输入新值，然后单击“确定”。 检查默认事件是否是所需的事件。（当该事件发生时，将执行动作并 更改属性。 如果不是，请从弹出菜单中选择另一个事件。如果未列出 所需的事件，则在“显示事件”弹出菜单中更改目标浏览器。11.3.3 检查浏览器 使用“检查浏览器”动作可根据访问

10、者不同类型和版本的浏 览器将他们转到不同的页。例如，您可能想要将使用 Netscape Navigator 4.0 或更高版本浏览器的访问者转到一 页，而将使用 Internet Explorer 4.0 或更高版本的访问者转 到另一页，并让使用任何其它类型浏览器的访问者留在当 前页上。 将此行为附加到几乎与任何浏览器都兼容的页（该页不使 用任何其它 JavaScript）的 body 标签将十分有用；这样， 已关闭 JavaScript 功能的访问者在访问此页时仍可以看到 内容。 另一个办法是将此行为附加到一个空链接（例如 ）并让该动作根据访问者浏览器的类 型和版本确定链接的目标。11.3.

11、4 检查插件 使用【检查插件】动作，可以检查访问者 的浏览器中是否安装了指定的插件，通过 这个检查，可以分别为安装插件和未安装 插件的用户显示不同的页面。例如，可以 检查用户是否安装有播放flash动画的插件， 如果用户安装了该插件，就可以将带有flash 动画对象的页面显现给该用户；相反则可 以将一幅带有图像的页面显示给该访问者 即可。 检查插件 1在文档中选中文本【检查插件】，并为文本添加一个 空链接。 2选择文本，打开【行为】面板。单击加号按钮，从【 动作】弹出菜单中选择【检查插件】，出现【检查插件】 对话框中设置具体的参数，如图所示。 【检查插件】对话框 11.3.5 控制 Shock

12、wave 或 Flash 使用【控制 Shockwave或Flash】动作来播放、停 止、倒放或转到Macromedia Shockwave 或 Macromedia Flash SWF文件中的帧。 在【行为】面板中单击按钮并从【动作】弹出 菜单中选择【控制 Shockwave 或 Flash】选项，出 现【控制 Shockwave 或 Flash】对话框，可以设置 控制播放的动作。11.3.6 拖动层 【拖动层】动作允许访问者拖动层。使用此动作可创建拼 板游戏、滑块控件和其他可移动的界面元素。 在【行为】面板中打开【拖动层】对话框，在【层】选项 的下拉列表中选择【层“Layer1”】，在【移

13、动】选项的下 拉列表中选择【不限制】选项，在【放下目标】选项中的 【左】和【上】文本框中为拖放目标输入值，在【靠齐距 离】文本框中输入一个值（以像素为单位），确定访问者 必须放目标多近，才能将层靠齐到目标，如图所示。 11.3.7 转到 URL 【转到 URL】动作在当前窗口或指定的框 架中打开一个新页。此操作尤其适用于通 过一次单击更改两个或多个框架的内容。 在【行为】面板中单击按钮，在弹出的【 动作】菜单中选择【转到 URL】命令，打 开【转到 URL】对话框，如图所示。 11.3.8 跳转菜单 选择菜单【插入】|【表单】|【跳转菜单】 ，可以在文档窗口中的当前位置插入跳转 菜单对象。通过

14、属性面板可以改变菜单项 列表顺序或一个菜单项所链接的文件，也 可以添加、删除菜单项，或给菜单项换名 。但是要改变链接文件打开的位置，添加 或改变菜单选择提示，必须使用【行为】 面板。 11.3.9 跳转菜单开始 【跳转菜单开始】动作与【跳转菜单】动作密切关联。【 跳转菜单开始】允许将一个【转到】按钮和一个跳转菜单 关联起来（在使用此动作之前，文档中必须已存在一个跳 转菜单），单击【转到】按钮打开在该跳转菜单中选择的 链接。通常情况下，并不是所有跳转菜单都需要一个【转 到】按钮。从跳转菜单中选择一项通常会引起URL的载入 ，不需要用户做任何进一步的操作。但是如果访问者选择 已在跳转菜单中选择的同

15、一项，则不发生跳转。通常情况 下这不会有多大关系，但是如果跳转菜单出现在一个框架 中，而跳转菜单项链接到其他框架中的页，就需要使用【 转到】按钮，以允许访问者重新选择已在跳转菜单中选择 的项。 11.3.10 打开浏览器窗口 使用【打开浏览器窗口】动作可在新窗口中打开一个URL 。可以指定新窗口的属性，例如窗口大小、属性（是否可 调整大小、是否有菜单栏等）以及名称。 如果指定窗口无属性，则窗口将按启动窗口的属性大小打 开。指定窗口的任何属性都将自动关闭所有其他属性。例 如，如果设置窗口无属性，则它可能会以640480像素打 开一个导航工具栏、位置栏、状态栏和菜单栏。如果明确 设置了窗口宽度为640，高度为480而没有设置其他属性， 则窗口将以640480像素打开，但是没有导航工具栏、位 置栏、状态栏、菜单栏调整柄以及滚动条。 11.3.11 播放声音 使用【播放声音】动作来播放声音。例如 用户可能要在每次鼠标指针滑过某个链接 时播放一段声音效果，或在页载入时播放 音乐剪辑。 11.3.12 弹出消息 【弹出消息】动作显示一个带有用户指定 的消息的 JavaScript 警告。因为 JavaScript 警告只有一个【确定】按钮，所以使用此