交互(行为,javascript,时间轴)1.ppt

第8章交互,8.1利用行为制作动态页面 8.2层和时间轴的综合应用 8.3在网页中应用javascript,8.1利用行为制作动态页面,新课导入： 大家已经会在网页中制作一些简单效果（如：鼠标经过图象、脚本链接、插入背景音乐等），那具有特殊效果（如：弹出消息、检查表单、设置导航文本、鼠标的花瓣、棉花糖、下雪了、礼花绽放等）的动态网页又是如何制作的呢？使用行为就可以实现。 教学目标：熟练地应用行为、层和时间轴，能够随心所欲地制作出具交互功能的网页；培养大家的动手操作能力。,情感目标： 通过对行为的学习应用，增加网页设计的特殊效果，提高学生对学习网页制作的兴趣。 教学内容： 1.行为的概念和行为面板简介 2.行为的创建 3.使用DW内置的行为（教学重点难点） 4. 高级行为的应用（教学难点） 5. 层、行为和时间轴的综合应用（教学难点） 6.Javascript脚本的使用 教学方法： 任务驱动、引导教学、理论与操作紧密结合。,1、DW行为的引出 动态网页是通过JaveScript或基JaveScript的DHTML代码来实现的。包含JaveScript脚本的网页，还能够实现用户与页面的简单交互；但是编写脚本既复杂又专业。而DW提供的“行为” 机制，在可视化环境中，通过指定一个动作并且指定触发这个动作的事件就可以实现丰富的动态页面效果，实现人与页面的简单交互。,8.1.1初步认识行为,2、行为的概念 行为：行为就是一段预定义好的程序代码，通过浏览器的解释并响应用户操作的过程。它由事件和由该事件触发的动作组成，被用来动态响应用户操作、改变当前页面效果、执行特定的任务。例如：将鼠标移到一幅图像上产生了一个事件，如果图像发生变化(前面介绍过的鼠标经过图像)，就导致发生了一个动作。 与行为相关的三个重要部分是对象、事件和动作。,对象(Object) 对象是产生行为的主体，很多网页元素都可以成为对象，如图片、文字、多媒体文件等，甚至是整个页面。 事件(Event) 事件是浏览器生成的消息，指示该页的浏览者执行了某种操作；是在特定时间或用户在某时所发出的指令后紧接着发生的，是触发动态效果的原因。它可以被附加到各种页面元素上，也可以被附加到HTML标记中。,一个事件总是针对页面元素或标记而言的。例如：将鼠标移到图片上、把鼠标放在图片之外、单击鼠标(onMouseOver、 onClick 、onMouseOut、) ，是与鼠标有关的三个最常见的事件。 onClick和onMouseOver是与链接关联的事件，onload是与图像和文档的body部分关联的事件。 不同的浏览器 支持的事件种类和多少是不一样的，通常高版本的浏览器支持更多的事件。,Dreamweaver提供了许多常用的能够触发的动作的事件： onAbort：当浏览器用户中断浏览器正在载入图像的操作时产生。 onAfterUpdate：当网页中的数据元素已经完成源数据的更新时产生该事件。 onBeforeUpdate：当网页中的数据元素已经改变并且就要和浏览器用户失去交互时产生该事件。,Dw中的常见事件参看课本P161-162。,onBlur：当指定元素不再被浏览器用户交互时产生。 onBounce：当字幕（Marquee）中的内容移动到该字幕边界时产生。 onChange：当浏览器用户改变网页中的某个值时产生。 onClick：当浏览器用户在指定的元素上单击时产生。 onDblClick：当浏览器用户在指定的元素上双击时产生。 onError：当浏览器在网页或图像载入产生错误时产生。 onFinish：当字幕（Marquee）中的内容完成一次循环时产生。 onFocus：当指定元素被浏览器用户交互时产生。 onHelp：当浏览器用户单击浏览器帮助按钮或选择浏览器菜单中的帮助菜单项时产生。 onKeyDown：当按下任意键的同时产生。,onKeyPress：当按下和松开任意键时产生。 onKeyUp：当按下的键松开时产生。 onLoad：当一图像或网页载入完成时产生。 onMouseDown：当浏览器用户按下鼠标时产生。 onMouseMove：当浏览器用户将鼠标在指定元素上移动时产生。 onMouseOut：当鼠标从指定元素上移开时产生。 onMouseOver：当鼠标移动到指定元素时产生。 onMouseUp：当鼠标弹起时产生。 onMove：当窗体或框架移动时产生。 onReadyStateChange：当指定元素的状态改变时产生。 onReset：当表单内容被重新设置为缺省值时产生。 onResize：当浏览器用户调整浏览器或框架大小时产生。 onRowEnter：当数据源的当前记录指针已经改变时产生。,onRowExit：当数据源的当前记录指针将要改变时产生。 onScroll：当浏览器用户使用滚动条向上或向下滚动时产生。 on