《网页设计完整课件网页设计10.ppt》由会员分享，可在线阅读，更多相关《网页设计完整课件网页设计10.ppt（42页珍藏版）》请在三一办公上搜索。
1、第十讲 行为事件,我们学习图层的相关内容的时候曾经接触了为一个对象（如图片、链接等）添加一个“行为”（或称为动作，例如显示隐藏图层、拖动图层等），然后产生一个onMouseOver(鼠标经过)事件的例子。作为一个对于网页设计了解不多，又不了解复杂编程的人来说，Dreamweaver提供的行为工具将是最好的选择。通过这一章节的学习，要求同学们掌握如何使用系统提供的行为技术来制作一些复杂的网页。,主要内容一、使用行为面板 二、应用行为三、介绍Dreamweaver提供的行为四、本节小结五、作业,使用行为面板,一、介绍几个基本概念1、行为的概念行为就是一段JavaScript 代码，这些代码放置在文
2、档中执行特定的任务（例如打开浏览器窗口、显示或隐藏层、播放声音或影片），以实现网页的各种特殊的功能。2、行为的基本元素在具体操作中：一个行为是一个事件和由该事件触发的动作组成的。因此它的基本元素有两个：一个是事件，一个是动作。,3、在网页中怎样使用行为？在网页中是通过“行为”面板把“行为”附加（添加）到网页元素中来实现各种不同的网页效果。4、什么是事件？事件是浏览器产生的有效信息，也就是说访问者对网页所做的事情。如：onClick、onMouseOver、onMouseOut等（事件与浏览器的版本有关，每个浏览器都提供一组事件，这些事件可以与“行为”面板的动作(+)弹出式菜单中列出的动作相关联
3、。浏览器的版本越高，可以使用的事件就越多，反之越少。）,标准的事件下面介绍一些常用的事件。首先，不同版本或不同浏览器对事件的支持是不一样。可以通过设置“显示事件”命令来选择对应的浏览器。,在使用行为事件时，一定要考虑访问者的浏览器的版本和类型，因为低版本的浏览器支持的动作不多。在事件的菜单中可以看到所有的事件，但不是所有的事件都常用，下面介绍常用的事件及意义和支持该事件的浏览器。1）鼠标类onMouseDown(N4,IE4,IE5):当鼠标键按下时就会发生动作。onMouseMove(N3,IE4,IE5):当鼠标在对象上面移动时就会发生动作。,onMouseOver(N3,N4,IE3,I
4、E4,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):当键盘上的任何一个键被按下时就会发生动作。onKeyPress(N4,IE4,IE5):当键盘上的一个键被按下又释放时发生动作。onKeyUp(N4
5、,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):当浏览者改变了下拉框或文本框中的一个值时动作发生。onFocus(N3,N4,IE3,IE4,IE5):当元素获得焦点时，比如单击了一个文本框时动作发生。onBlur
6、(N3,N4,IE3,IE4,IE5):和onFocus相反，当元素失去焦点时动作发生。,5、什么是动作？动作指的是“行为”中的JavaScript 代码所执行特定的操作，如打开浏览器窗口、显示或隐藏层、播放声音等。综上所述，可以得归纳如下几点：“行为”是响应某一“事件”而采取的一个“动作”；“行为”是通过“行为”面板来添加到网页元素中；行为中的动作必须要有由与它关联的事件来触发。注意：行为代码是客户端 JavaScript 代码；即它运行于浏览器中，而不是服务器上。,二、打开行为面板1、“行为”面板若要打开“行为”面板，请单击“设计面板”中的【行为】命令。打开系统的“行为”面板如下：,面板的
7、主区域（或称为行为列表）,动作,请留意提示！,已附加的行为会显示在此列表！,说明：在上图中，已附加到当前所选网页元素的行为显示在行为列表中（面板的主区域），按事件以字母顺序排列。如果同一个事件有多个动作，则将以在列表上出现的顺序执行这些动作。如果行为列表中没有显示任何行为，则没有行为附加到当前所选的网页元素。2、“行为”面板具有的选项说明：1）、动作(+)是一个弹出式菜单，其中包含可以附加到当前所选元素的多个动作。当您从此列表中选择某个动作时，将出现一个对话框，您可以在其中指定该动作的参数。如果所有动作都灰显，则没有所选元素可以执行的动作。,2）、删除(-)从行为列表中删除所选的事件和动作。3
8、）、上下箭头按钮将特定事件的所选动作在行为列表中向上或向下移动来改变动作执行的顺序。4）、事件（当您单击行为列表中所选事件名称旁边的箭头按钮时出现的菜单）是一个弹出式菜单，其中包含可以触发该动作的所有事件。只有在选择了行为列表中的某个事件时才显示此菜单。根据所选对象的不同，显示的事件也有所不同。如果未显示预期的事件，则检查是否选择了正确的网页元素。,5）、显示事件（“事件”菜单中的子菜单）指定当前行为应该在其中起作用的浏览器。通常，较早的浏览器比较新的浏览器支持的事件要少，一般我们选择IE4.0或以上浏览器。6）、动作（或者称为操作）指的是行为菜单中的具体动作。熟悉了“行为”面板后，下面来讨论
9、如何应用。,应用行为,一、哪些对象可应用行为 可以将“行为”附加到整个文档（即附加到 body 标签），还可以附加到链接、图像、图层、表单元素或多种其他 HTML 元素等。特别注意：不能将行为附加到纯文本。二、为网页中的元素附加行为的操作步骤如下：1）、在网页上选择一个元素，例如一个图像或一个链接。（若要将行为附加到整个页，请在文档窗口底部左侧的标签选择器中单击 标签。）,2）、单击“设计”面板中的【行为】命令。打开“行为”面板。3）、单击加号(+)按钮并从“动作”弹出式菜单中选择一个动作。注意：DreamweaverMX增加了一项所选HTML元素的提示功能。具体操作时要多留意这项提示！4）、
10、选择某个动作时，将出现一个对话框，显示该动作的参数和说明。5）、为该动作输入参数，然后单击“确定”。三、如何将行为附加到纯文本操作方法：若要将行为附加到文本，最简单的方法就是向文本添加一个空链接（在属性面板中的链接文本框中输入“#”），然后将行为附加到该链接上。,Dreamweaver提供的行为介绍,1、调用Javascript【调用Javascript】行为动作,能够让用户使用行为面板去指定一个自定义功能,或者当一个事件发生时执行一段Javascript代码,具体操作步骤如下:1）、在文档窗口中键入中文“关闭窗口”，然后将新输入的文本选定。2）、为文本添加空链接，在其属性面板的【链接】栏内直
11、接输入“#”。,3）、打开行为面板，单击“+”按钮，从动作弹出的菜单中选择【调用Javascript】命令，打开【调用Javascript】对话框，如下图所示：4）、键入将要执行的Javascript代码或函数名，如“window.close()”，用来关闭窗口的命令。单击“确定”按钮，完成设置。,6）、在行为面板中选择【onClick】事件。如右图所示。7）、预览网页。当鼠标点击“关闭窗口”时，就会弹出信息框，询问用户是否关闭窗口，打开如右对话框：8）、单击“是”按钮，将关闭当前浏览器窗口，否则回到浏览器窗口。,2、播放声音 使用【播放声音】动作来播放声音和音乐文件。例如，在页面载入时会自动
12、播放一段动听的音乐，或者当鼠标点击按钮时会发出声音，具体的操作步骤如下：1）、打开一个预加入背景音乐的页面文档，然后打开行为面板。2）、在行为面板中点击“+”按钮，从动作弹出的菜单中选择【播放声音】命令，打开【播放声音】对话框，如下图所示：,3）、点击“浏览”按钮选中一个声音文件，或者直接在“播放声音”域中输入声音文件的路径和文件名。4）、单击“确定”按钮，完成声音设定。5）、在行为面板中加入了一个事件为【onLoad】，动作为【播放声音】，的行为，如右图所示：,如果不想当网页载入时就播放音乐，而是想当鼠标点击时再播放，只要将事件改为【onClick】即可。,3、打开浏览器窗口 使用打【开浏览
13、器窗口】行为动作，将打开一个新的浏览器窗口，在其中显示指定的网页文档。用户可以指定这个新窗口的属性，包括窗口尺寸大小、是否可以调节大小、是否有菜单栏等等。在网页中的小图需要放大时，可以使用这个行为，在一个大窗口中放置小图像的放大图，可将窗口设置成与图像大小相吻合的尺寸，将多余的导航栏、地址栏、状态栏、菜单栏等去掉不显示。注意：如果我们不对窗口属性进行设置，它就会以640480像素大小打开，而且有导航栏、地址栏、状态栏、菜单栏等。,具体的操作步骤如下：1）、首先在文档中选定一幅需要放大的图像。2）、在行为面板中点击“+”按钮，从动作弹出菜单中选择【打开浏览器窗口】命令，打开【打开浏览器窗口】对话
14、框。如下图：,3）、点击 按钮以选择图像放大图。其他设置如下：【窗口宽度】确定窗口宽度的像素值。（这题我们就以图像的宽度为标准。）【窗口高度】确定窗口高度的像素值。（这题我们就以图像的高度为标准。）【导航工具栏】包括后退、前进、主页、刷新等浏览器按钮的工具栏。【地址工具栏】浏览器中包含网址等工具栏。【状态栏】浏览器窗口底部的区域，显示剩余下载时间，连接指向的网址等。,【菜单条】浏览器窗口主菜单，包括文件、编辑、查看等。4）、本例中我们只需要输入图像的放大图的路径和文件名，其他项都不选，单击“确定”按钮，完成设置。5）、动作设置完成以后，还要对事件进行设置在弹出的事件菜单中选择【onMouseD
15、own】(鼠标左键按下立即产生动作)6）、预览效果。,4、弹出信息【弹出信息】动作将显示一个指定的Javascript提示信息框。因为Javascript提示信息框只有一个按钮，使用这个动作以提供给用户信息，而不是让它做出选择。在实际网页设计中可以使用这个动作来给浏览者的一些信息提示。下面让我们来看一下设置【弹出信息】动作的具体操作步骤。1）、在文档窗口中选定图像，打开行为面板。,2）、点击“+”按钮，从动作弹出菜单中选择【弹出信息】命令，打开【弹出信息】对话框，如图所示:3）、在【信息】区域内输入要提示访问者的文本信息，单击“确定”按钮。,4）、在行为面板中选择【onMouseUp】事件(按
16、下鼠标左键释放时产生动作)。如下图:,5）、预览网页。点击鼠标右键会弹出信息框，如图所示。,5、改变属性 使用【改变属性】动作来改变网页元素的属性的值。例如，可改变图像的来源。下面用“改变图像的来源”为例，说明这个动作的使用具体操作步骤如下：,1）、首先在文档中插入一幅图像，在属性面板中为其取名为“mark”。,2）、选定该图像，打开行为面板，点击“+”按钮，从弹出菜单中选择【改变属性】命令，打开【改变属性】对话框，如下图所示。,3）、在【对象类型】下拉列表中选择“IMG，这项是针对图像的”。如下图：4）、对话框中的【命名对象】变为已命名的图像“mark”。,选中！,5）、对话框中【属性】的选
17、项默认状态是【选择】，【选择】下拉列表中只有一项“src”（文件的路径）。6）、右边下拉列表是支持行为动作的浏览器版本，共有4项选择：NS3、IE3、NS4、IE4。浏览器的版本越早，所支持的行为就越少。注意：对熟悉HTML语言的用户可以选择【输入】项，然后在空白栏内设置图像的属性，如border、width、height等。,7）、假如我们选择了“src”属性，那么在【新的值】栏内输入另外的图像路径，如下图所示：,8）、单击“确定”按钮，完成设置。9）、在行为面板中选择一个“onMouseOver”事件。10）、预览网页，当鼠标经过图像时，就回调出第二幅图像。,6、交换图像【交换图像】动作可
18、以将一个图像替换为另一个图像，这是通过改变图像的“src”属性达到的，其实在上一个动作“改变属性”中已经介绍了如何改变图像的“src”属性。注意：使用这个动作要求原始图像和替换图像的尺寸（宽和高）完全一致，否则替换图像会发生收缩或放大。具体操作步骤如下：,1）、首先在文档中插入一幅图像。2）、在属性面板命名文本框中键入图像的名称。3）、选定将要替换的图像，打开行为面板。4）、点击“+”按钮，从动作弹出菜单中选择【交换图像】命令，打开【交换图像】对话框。如下图：,5）、在【图像】列表中选择要改变的图像。6）、点击“浏览”按钮来选择替换的图像文件，或者在【设置原始档为】栏内键入新图像的路径和文件名
19、。7）、勾选【预先载入图像】选项，以便在页面载入时在浏览器的缓存中存入替换的图像，这样可以防止由于显示替换图像时需要下载而造成拖延。8）、勾选【鼠标滑开时恢复图像】选项，实现鼠标离开后，图像恢复为原始图像效果。,9）、单击“确定”按钮，完成设置。说明：以上设置完成以后，行为面板中添加了两个行为：一个是鼠标经过时图像变换，另一个是鼠标离开时恢复原始图像。如下图：,本节小结,知识点1：行为-是响应某一事件而采取的一个动作。当把行为赋予文档中的某个元素时，也就定义了一个动作。知识点2：动作-是行为中的那段Javascript代码，用于完成某一组特定的操作，比如打开窗口，播放一段音乐等。知识点3：事件-是由用户或者浏览器触发的事件，比如onMouseOver、onLoad等。要求：熟练掌握如何使用系统提供的行为技术来制作一些复杂的网页。,作业,完成今天讲过的行为动作的上机操作。,
