网页制作中的行为技术.ppt

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 【行为】面板,11.1.2 添加行

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

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

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

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

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

10、tscape Navigator 4.0 或更高版本浏览器的访问者转到一页，而将使用 Internet Explorer 4.0 或更高版本的访问者转到另一页，并让使用任何其它类型浏览器的访问者留在当前页上。 将此行为附加到几乎与任何浏览器都兼容的页（该页不使用任何其它 JavaScript）的 body 标签将十分有用；这样，已关闭 JavaScript 功能的访问者在访问此页时仍可以看到内容。 另一个办法是将此行为附加到一个空链接（例如 ）并让该动作根据访问者浏览器的类型和版本确定链接的目标。,11.3.4 检查插件,使用【检查插件】动作，可以检查访问者的浏览器中是否安装了指定的插件，通过

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

12、media 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 播放声音,使用【播放声音】动作来播放

16、声音。例如用户可能要在每次鼠标指针滑过某个链接时播放一段声音效果，或在页载入时播放音乐剪辑。,11.3.12 弹出消息,【弹出消息】动作显示一个带有用户指定的消息的 JavaScript 警告。因为 JavaScript 警告只有一个【确定】按钮，所以使用此动作可以提供信息，而不能为用户提供选择。,11.3.13 预先载入图像,【预先载入图像】动作将在浏览器缓存中载入不会立即出现在页上的图像，如那些将通过行为或 JavaScript 换入的图像。这样可防止当图像变换时由于下载速度慢而导致延迟。,11.3.14 设置导航栏图像,【设置导航栏图像】的具体操作步骤如下。 1选中要设置为导航栏的图像，

17、打开【行为】面板。 2单击【行为】面板上的按钮，在下拉菜单中选择【设置导航栏图像】，出现【设置导航栏图像】对话框，如图所示。,11.3.15 设置文本,【设置文本】动作包括【设置层文本】、【设置文本域文本】、【设置框架文本】和【设置状态条文本】4个选项。这4个动作分别为层、文本域、框架和状态条对象添加文本信息。,11.3.16 显示隐藏层,【显示隐藏层】动作显示、隐藏或恢复一个或多个层的默认可见性。此动作用于在用户与网页进行交互时显示信息。例如，当用户将鼠标指针滑过一个图像时，可以显示一个层给出有关的详细信息。,11.3.17 显示弹出菜单,使用【显示弹出菜单】行为可创建或编辑 Dreamwe

18、aver弹出菜单，或者打开并修改已插入Dreamweaver文档的Fireworks弹出菜单。 可以通过在【显示弹出菜单】对话框中设置选项来创建水平或垂直的弹出菜单，使用此对话框来设置或修改弹出菜单的颜色、文本和位置。,11.3.18 交换图像,【交换图像】动作通过更改img标签的src属性将一个图像和另一个图像进行交换。使用此动作可创建按钮鼠标经过图像和其他图像效果（包括一次交换多个图像）。插入鼠标经过图像会自动将一个【交换图像】行为添加到网页中。,11.3.19 恢复图像交换,【恢复交换图像】动作的使用方法和【交换图像】相似，是将最后一组交换的图像恢复为它们以前的源文件，每次用户将【交换图

19、像】动作附加到某个对象时都会自动添加该动作。如果用户在附加【交换图像】时选择了【恢复】选项，则用户就不再需要手动选择【恢复交换图像】动作。,11.3.20 检查表单,【检查表单】动作检查指定文本域的内容以确保用户输入正确的数据类型。使用onBlur事件将此动作分别附加到各文本域，在用户填写表单时对域进行检查；或使用 onSubmit事件将其附加到表单，在用户单击【提交】按钮时同时对多个文本域进行检查。将此动作附加到表单中可防止表单提交到服务器后任何指定的文本域包含无效的数据。,课堂串讲,本章主要讲述如何使用行为。行为在网页中常被用在页面的交互中，通过使用行为可以使网页多些“灵性”。如当用户打开或页面下载完时弹出一个问候或消息的对话框。还可通过【检查表单】行为检查用户是否按照表单的要求如实的填写调查表，这样可以防止一些垃圾信息。行为在网页的设计和制作中常和层、表单等页面元素结合使用。合理的使用行为可以为网站增添不少特色。,11.4 课后习题与解答,11.4.