《网页设计》完整课件网页设计10

《《网页设计》完整课件网页设计10》由会员分享，可在线阅读，更多相关《《网页设计》完整课件网页设计10（42页珍藏版）》请在金锄头文库上搜索。

1、第十讲 行为事件我们学习图层的相关内容的时候曾经接触 了为一个对象（如图片、链接等）添加一 个“行为”（或称为动作，例如显示隐藏图层 、拖动图层等），然后产生一个 onMouseOver(鼠标经过)事件的例子。 作为一个对于网页设计了解不多，又不了解 复杂编程的人来说，Dreamweaver提供的 行为工具将是最好的选择。通过这一章节 的学习，要求同学们掌握如何使用系统提 供的行为技术来制作一些复杂的网页。主要内容一、使用行为面板 二、应用行为 三、介绍Dreamweaver提供的行为 四、本节小结 五、作业使用行为面板一、介绍几个基本概念 1、行为的概念 行为就是一段JavaScript 代

2、码，这些代码 放置在文档中执行特定的任务（例如打开 浏览器窗口、显示或隐藏层、播放声音或 影片），以实现网页的各种特殊的功能。 2、行为的基本元素 在具体操作中：一个行为是一个事件和由 该事件触发的动作组成的。因此它的基本 元素有两个：一个是事件，一个是动作。3、在网页中怎样使用行为？在网页中是通过“行为”面板把“行为”附加（ 添加）到网页元素中来实现各种不同的网 页效果。 4、什么是事件？ 事件是浏览器产生的有效信息，也就是说访 问者对网页所做的事情。如：onClick 、 onMouseOver、 onMouseOut等（事件与 浏览器的版本有关，每个浏览器都提供一 组事件，这些事件可以与

3、“行为”面板的动作 (+) 弹出式菜单中列出的动作相关联。浏览 器的版本越高，可以使用的事件就越多， 反之越少。）标准的事件 下面介绍一些常用的事件。首先，不同版本 或不同浏览器对事件的支持是不一样。可 以通过设置“显示事件”命令来选择对应的浏 览器。在使用行为事件时，一定要考虑访问者的浏 览器的版本和类型，因为低版本的浏览器 支持的动作不多。在事件的菜单中可以看 到所有的事件，但不是所有的事件都常用 ，下面介绍常用的事件及意义和支持该事 件的浏览器。 1）鼠标类 onMouseDown(N4,IE4,IE5):当鼠标键按下时 就会发生动作。 onMouseMove(N3,IE4,IE5):当

4、鼠标在对象上 面移动时就会发生动作。onMouseOver(N3,N4,IE3,IE4,IE5):当鼠标移 动到对象的范围时发生动作。 onMouseOut(N3,N4,IE4,IE5):当鼠标从对象 上移开时发生动作。 onMouseUp(N4,IE4,IE5):当鼠标左键按下又 释放时发生动作。 onClick(N3, N4, IE3,IE4,IE5):当鼠标单击对 象时发生动作，例如链接、按钮、图片等 对象用得较多。 onDblClick(N4,IE4,IE5):当鼠标单双对象时发 生动作。2）键盘类 onKeyDown(N4,IE4,IE5):当键盘上的任何一 个键被按下时就会发生动作

5、。 onKeyPress(N4,IE4,IE5):当键盘上的一个键 被按下又释放时发生动作。 onKeyUp(N4,IE4,IE5):当键盘上的一个键被 按下一段时间并被释放时发生动作。 3）其它类型事件 onLoad(N3,N4, IE3,IE4,IE5):当打开网页时动 作发生。 onUnload(N3,N4, IE3,IE4,IE5):当离开网页时 动作发生。onScroll(IE4,IE5):当滚动条被移动时动作发生 。 onResize(N4,IE4,IE5):当浏览器窗口大小被改 变时动作发生。 onChange(N3,N4, IE3,IE4,IE5):当浏览者改 变了下拉框或文本

6、框中的一个值时动作发生 。 onFocus(N3,N4, IE3,IE4,IE5):当元素获得焦 点时，比如单击了一个文本框时动作发生。 onBlur(N3,N4, IE3,IE4,IE5):和onFocus相反 ，当元素失去焦点时动作发生。5、什么是动作？ 动作指的是“行为”中的JavaScript 代码所执行 特定的操作，如打开浏览器窗口、显示或 隐藏层、播放声音等。 综上所述，可以得归纳如下几点：“行为”是响 应某一“事件”而采取的一个“动作”；“行为” 是通过“行为”面板来添加到网页元素中；行 为中的动作必须要有由与它关联的事件来 触发。 注意： 行为代码是客户端 JavaScript

7、 代码； 即它运行于浏览器中，而不是服务器上。二、打开行为面板 1、 “行为”面板 若要打开“行为”面板，请单击“设计面板”中的 【 行为】 命令。打开系统的“行为”面板如下：面板的主区 域（或称为 行为列表）动作请留意 提示！已附加的行为会显示在此列表！说明：在上图中，已附加到当前所选网页元素 的行为显示在行为列表中（面板的主区域） ，按事件以字母顺序排列。如果同一个事件 有多个动作，则将以在列表上出现的顺序执 行这些动作。如果行为列表中没有显示任何 行为，则没有行为附加到当前所选的网页元 素。 2、“行为”面板具有的选项说明： 1）、动作 (+) 是一个弹出式菜单，其中包含可 以附加到当前

8、所选元素的多个动作。当您从 此列表中选择某个动作时，将出现一个对话 框，您可以在其中指定该动作的参数。如果 所有动作都灰显，则没有所选元素可以执行 的动作。 2）、删除 (-) 从行为列表中删除所选的事件 和动作。 3）、上下箭头按钮将特定事件的所选动作在 行为列表中向上或向下移动来改变动作执 行的顺序。 4）、事件（当您单击行为列表中所选事件名 称旁边的箭头按钮时出现的菜单）是一个 弹出式菜单，其中包含可以触发该动作的 所有事件。只有在选择了行为列表中的某 个事件时才显示此菜单。根据所选对象的 不同，显示的事件也有所不同。如果未显 示预期的事件，则检查是否选择了正确的 网页元素。5）、显示事

9、件（“事件”菜单中的子菜 单）指定当前行为应该在其中起作 用的浏览器。通常，较早的浏览器 比较新的浏览器支持的事件要少， 一般我们选择IE4.0或以上浏览器。 6）、动作（或者称为操作）指的是行 为菜单中的具体动作。 熟悉了“行为”面板后，下面来讨论如 何应用。应用行为一、哪些对象可应用行为可以将“行为”附加到整个文档（即附加到 body 标签），还可以附加到链接、图像、图 层、表单元素或多种其他 HTML 元素等。 特别注意 ： 不能将行为附加到纯文本。 二、为网页中的元素附加行为的操作步骤如下 ： 1）、在网页上选择一个元素，例如一个图像或 一个链接。 （若要将行为附加到整个页，请 在文档

10、窗口底部左侧的标签选择器中单击 标签。）2）、单击“设计”面板中的 【行为】 命令。打开 “行 为”面板。 3）、单击加号 (+) 按钮并从“动作”弹出式菜单中选 择一个动作。 注意：DreamweaverMX增加了一项所选HTML元素 的提示功能。具体操作时要多留意这项提示！ 4）、选择某个动作时，将出现一个对话框，显示该 动作的参数和说明。 5）、为该动作输入参数，然后单击“确定”。 三、如何将行为附加到纯文本 操作方法：若要将行为附加到文本，最简单的方法就 是向文本添加一个空链接（在属性面板中的链接文 本框中输入“#”），然后将行为附加到该链接上。Dreamweaver提供的行为介绍1、

11、调用Javascript 【调用Javascript】行为动作,能够让用户 使用行为面板去指定一个自定义功能,或 者当一个事件发生时执行一段Javascript 代码,具体操作步骤如下: 1）、在文档窗口中键入中文“关闭窗口” ，然后将新输入的文本选定。 2）、为文本添加空链接，在其属性面板的 【链接】栏内直接输入“#”。3）、打开行为面板，单击“+”按钮，从动作 弹出的菜单中选择【调用Javascript】命 令，打开【调用Javascript】对话框，如 下图所示：4）、键入将要执行的Javascript代码或函数 名，如“window.close()”，用来关闭窗口的 命令。单击“确定”

12、按钮，完成设置。6）、在行为面板中 选择【onClick】 事件。如右图所示 。 7）、预览网页。当 鼠标点击“关闭窗 口”时，就会弹出 信息框，询问用户 是否关闭窗口，打 开如右对话框： 8）、单击“是”按钮 ，将关闭当前浏览 器窗口，否则回到 浏览器窗口。2、播放声音使用【播放声音】动作来播放声音和音乐 文件。例如，在页面载入时会自动播放一 段动听的音乐，或者当鼠标点击按钮时会 发出声音，具体的操作步骤如下： 1）、打开一个预加入背景音乐的页面文档 ，然后打开行为面板。 2）、在行为面板中点击“+”按钮，从动作弹 出的菜单中选择【播放声音】命令，打开 【播放声音】对话框，如下图所示：3）、

13、点击“浏览”按钮 选中一个声音文件， 或者直接在“播放声 音”域中输入声音文 件的路径和文件名。 4）、单击“确定”按钮 ，完成声音设定。 5）、在行为面板中加 入了一个事件为【 onLoad】，动作为【 播放声音】，的行为 ，如右图所示：如果不想当网页载入时就播放音乐，而是想当鼠标点击时再播 放，只要将事件改为【onClick】即可。3、打开浏览器窗口使用打【开浏览器窗口】行为动作，将打开 一个新的浏览器窗口，在其中显示指定的网 页文档。用户可以指定这个新窗口的属性， 包括窗口尺寸大小、是否可以调节大小、是 否有菜单栏等等。在网页中的小图需要放大 时，可以使用这个行为，在一个大窗口中放 置小

14、图像的放大图，可将窗口设置成与图像 大小相吻合的尺寸，将多余的导航栏、地址 栏、状态栏、菜单栏等去掉不显示。注意：如果我们不对窗口属性进行设置，它 就会以640480像素大小打开，而且有导航 栏、地址栏、状态栏、菜单栏等。 具体的操作步骤如下： 1）、首先在文档中选定一幅需要放大的图像。 2）、在行为面板中点击“+”按钮，从动作弹出菜单 中选择【打开浏览器窗口】命令，打开【打开浏 览器窗口】 对话框。如下图：3）、点击 按钮以选择图像放大图。其 他设置如下： 【窗口宽度】确定窗口宽度的像素值。（这题 我们就以图像的宽度为标准。） 【窗口高度】确定窗口高度的像素值。（这题 我们就以图像的高度为标

15、准。） 【导航工具栏】包括后退、前进、主页、刷新 等浏览器按钮的工具栏。 【地址工具栏】浏览器中包含网址等工具栏。 【状态栏】浏览器窗口底部的区域，显示剩余 下载时间，连接指向的网址等。【菜单条】浏览器窗口主菜单，包括文件、 编辑、查看等。 4）、本例中我们只需要输入图像的放大图 的路径和文件名，其他项都不选，单击“确 定”按钮，完成设置。 5）、动作设置完成以后，还要对事件进行 设置在弹出的事件菜单中选择【 onMouseDown】(鼠标左键按下立即产生 动作) 6）、预览效果。4、弹出信息【弹出信息】动作将显示一个指定的 Javascript提示信息框。因为Javascript提 示信息框

16、只有一个按钮，使用这个动作以 提供给用户信息，而不是让它做出选择。 在实际网页设计中可以使用这个动作来给 浏览者的一些信息提示。 下面让我们来看一下设置【弹出信息】动作 的具体操作步骤。 1）、在文档窗口中选定图像，打开行为面板 。2）、点击“+”按钮，从动作弹出菜单中选择【弹出信 息】命令，打开【弹出信息】对话框，如图所示:3）、在【信息】区域内输入要提示访问者的文本信息 ，单击“确定”按钮。4）、在行为面板中选择【onMouseUp】事件(按 下鼠标左键释放时产生动作)。如下图:5）、预览网页。点击鼠标右键会弹出信 息框，如图所示。5、改变属性使用【改变属性】 动作来改变网页 元素的属性的值。例如，可改变图 像的来源。 下面用“改变图像的来源”为例，说明 这个动作的使用具体操作步骤如下 ：1）、首先在文档中插入一幅图像，在属性 面板中为其取名为“mark”。2）、选定该图像，打开行为面板，点击“+”按 钮，从弹出菜单中选择【改变属性】命令， 打开【改变属性】对话框，如下图所示。3）、在【对象类型】下拉列表中选择 “IMG，这项是针对图像