Web前端设计与开发技术-课件-第8章使用行为制作网页特效.pptxVIP

Web前端设计与开发技术（HTML+CSS+JavaScript）江西农业大学计算机与信息工程学院主讲人：

第8章使用行为制作网页特效8.1认识行为8.2“行为”面板8.3使用行为应用图像8.4使用行为显示文本8.5使用行为调节浏览器窗口8.6使用行为加载多媒体8.7上机练习

?在网页中使用“行为”可以创建各种特殊的网页效果，例如弹出信息、交换图像、跳转菜单等。行为是一系列使用JavaScript程序预定义的页面特效工具，是JavaScript在DreamweaverCC2018中内建的程序库。学习目标?网页行为的基础知识?“行为”面板?使用行为

8.1认识行为?DreamweaverCC2018网页行为是Abobe公司借助JavaScript开发的一组交互特效代码库。在DreamweaverCC2018中，用户可以通过简单的可视化操作对交互特效代码进行编辑，从而创建出丰富的网页应用。?表行为的概念?行为是DreamweaverCC2018中重要的一个部分，通过行为，可以方便地制作许多网页效果，极大地提高了工作效率。行为由两个部分组成，事件和动作，通过事件的响应而执行对应的动作。?在网页中，事件是浏览器生成的消息，表明该页的访问者执行了某种操作。例如，当访问者将鼠标指针移动到某个链接上是，浏览器为该链接生成一个onMouseOver事件。不同的网页元素定义了不同的事件。在大多数浏览器中，onMouseOver和onClick是与链接关联的事件，而onLoad是与图像和文档的body部分关联的事件。事件由浏览器定义、产生与执行。

事件的分类?行为事件可以分为鼠标事件、键盘事件、表单事件和页面事件。每个事件都含有不同的触发方式。?1．鼠标事件?onClick：单击选定元素（如超链接、图像、按钮等）将触发该事件。?onDblClick：双击选定元素将触发该事件。?onMouseDown：当按下鼠标按钮（不必释放鼠标按钮）时触发该事件。?onMouseMove：当鼠标指针停留在对象边界时触发该事件。?onMouseOut：当鼠标指针离开对象边界时触发该事件。?onMouseOver：当鼠标首次移动指向特定对象时触发该事件。该事件通常用于链接。?onMouseUp：当按下的鼠标按钮别释放时触发该事件。

?键盘事件?onKeyPress：当按下并释放任意键时触发该事件。?onKeyDown：当按下任何键时即触发该事件。?onKeyUp：按下键后释放该键时触发该事件。?表单事件?onChange：改变页面中数值时将触发该事件。例如，在菜单中选择了一个项目，或者修改了文本区中的数值，然后再页面任意位置单击均可触发该事件。?onFocus：当指定元素成为焦点时将触发该事件。例如，单击表单中的文本编辑框将触发该事件。?onBlur：当特定元素停止做为用户交互的焦点时触发该事件。例如，在单击文本编辑框后，在该编辑框区域以外单击，则系统将产生该事件。?onSelect：在文本区域选定文本时触发该事件。?onSubmit：确认表单时触发该事件。?onReset：当表单被复位到其默认值时触发该事件。

?页面事件?onLoad：当图像或页面完成装载后触发该事件。?onUnload：离开页面时触发该事件。?onError：在页面或图像发生装载错误时，将触发该事件。?onMove：移动窗口或框架时将触发该事件。?onResize：当用户调整浏览器窗口或框架尺寸时触发该事件。?onScroll：当用户上、下滚动时触发该事件。?行为是由预先编写的JavaScript代码组成的，这些代码执行特定的任务，例如打开浏览器窗口、播放声音或停止播放影片。当事件发生后，浏览器就查看是否存在与该事件对应的动作，如果存在，就执行它，这就是整个行为的过程。

8.2“行为”面板?在“行为”面板中可以将DreamweaverCC2018中内置的行为附加到页面元素，并且可以修改以前所附加行为的参数。?选择“窗口”\“行为”命令，打开“行为”面板。?在“行为”面板中显示了已经附加到当前所选页面元素的行为显示在行为列表中，并按事件以字母顺序列出。如果针对同一个事件列有多个动作，则会按在列表中出现的顺序执行这些动作。如果行为列表中没有显示任何行为，则表示没有行为附加到当前所选的页面元素。

8.3使用行为应用图像?图像是网页设计中必不可少的元素。在Dreamweaver中，我们可以通过使用行为，以各种各样的方式在网页中应用图像元素，从而制作出富有动感的网页效果。使用行为应用图像，包括“预先载入图像”行为、“交换图像”行为和“恢复交换图像”行为。?“预先载入图像”行为?使用“预先载入图像”行为，可以是浏览器下载那些尚未在网页中显示但是可能显示的图像，并将之存储到本地缓存中，这样可以