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

第9章交互,9.1利用行为制作动态页面 9.3 在网页中应用javascript 9.2层和时间轴的综合应用,9.1利用行为制作动态页面,新课导入： 大家已经会在网页中制作一些简单效果（如：鼠标经过图象、脚本链接、插入背景音乐等），那具有特殊效果（如：弹出消息、检查表单、设置导航文本、鼠标的花瓣、棉花糖、下雪了、礼花绽放等）的动态网页又是如何制作的呢？使用行为就可以实现。 教学目标：熟练地应用行为、层和时间轴，能够随心所欲地制作出具交互功能的网页；培养大家的动手操作能力。,情感目标： 通过对行为的学习应用，增加网页设计的特殊效果，提高学生对学习网页制作的兴趣。 教学内容： 1.行为的概念和行为面板简介 2.行为的创建 3.使用DW内置的行为（教学重点难点） 4. 高级行为的应用（教学难点） 5. 层、行为和时间轴的综合应用（教学难点） 6.Javascript脚本的使用 教学方法： 任务驱动、引导教学、理论与操作紧密结合。,1、DW行为的引出 动态网页是通过JaveScript或基JaveScript的DHTML代码来实现的。包含JaveScript脚本的网页，还能够实现用户与页面的简单交互；但是编写脚本既复杂又专业。而DW提供的“行为” 机制，在可视化环境中，通过指定一个动作并且指定触发这个动作的事件就可以实现丰富的动态页面效果，实现人与页面的简单交互。,9.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：当浏览器用户使用滚动条向上或向下滚动时产生。 onSelect：当浏览器用户选择文本框中的文本时产生。 onStart：当字幕（Marquee）内容开始循环时产生。 onSubmit：当浏览器用户提交表格时产生。 onUnload：当浏览器用户离开网页时产生。,动作(Action) 动作是由javascript代码组成的，事件发生后，这些代码执行特定的任务，使网页做出发应。行为就是通过动作来完成动态效果的，如：图片翻转、打开浏览器、播放声音都是动作。 当web 的浏览者与页进行交互时，浏览器生成事件，这些事件可用于调用引起动作发生的javascrit函数。 一个事件可以同多个动作相关联(1：n)，即发生事件时可以执行多个动作。,DW内置了20多个行为动作，好象是一个现成的JaveScript库。除此之外，第三方厂商提 供了更多的行为库，下载并在DW中安装行为库中的文件，可以获得更多的可操作行为。使用DW内置的行为往页面中添加JaveScript代码时，就不必自己编写代码了。若熟悉JaveScript语言，也可以自行设计新动作，添加到DW中。,3、认识行为面板 在DW中，对行为的添加和控制主要通过“行为”面板来实现。 选择窗口行为命令，或shift+f4打开行为面板。,行为面板的使用 在行为面板上可以进行如下操作： 单击“+”按钮，打开动作菜单，添加行为； 单击“-”按钮，删除行为。 添加行为时，从动作菜单中选择一个行为项，单击事件列右方的三角，打开事件菜单，可以选择事件。 单击“向上“箭头或向下箭头，可将动作项向前移或向后移，改变动作执行的顺序。,9.1.2行为的创建、修改和更新,对行为的添加和控制主要通过行为面板来实现。 创建行为 创建行为一般有三个步骤：先在页面中选择要添加行为的对象,再在行为面板中为之添加所需的动作,最后调整触发动作的事件。 注意：一个对象可添加多个行为，多个行为以字母顺序显示在行为面板上。为了实现需要的效果，我们还可以指定和修改动作发生的顺序。,修改行为 添加行为之后可以修改触发动作的事件、添加或删除动作、修改动作的参数。 编辑动作的参数可双击行为名称或选中后按enter键 修改给定事件的多个动作顺序，可选定动作后按上下箭头按钮，或剪切后在所需顺序处粘贴。 要删除行为，选定后按“-”按钮或按del键,更新行为 不同版本的dw做好的网页中如有行为，在另一低版本中打开时一般不会自动更新。实现行为更新的步骤：选定一个对象，打开行为面板，双击行为后确定。,9.1.3使用DW内置的行为,dw8.0自带的行为动作，使用于4.0以上版本的浏览器，同一动作在不同的浏览器中支持的程度不同。 dw8.0自带的行为主要有: 1.弹出消息 其动作回显示一个带有指定消息的只有“确定”按钮的javascript警告窗口，警告窗口的外观取决于浏览者的浏览器。功能类似于脚本链接.,2、“播放声音”实例 用播放声音的动作，可以在网页中播放声音文件，如背景音乐，或单击某个按钮(文字或图片)播放一段声音。 （1）给网页添加背景音乐 打开一个网页，单击编辑窗口状态栏上的标记，选中整个网页。 打开行为面板，单击“+”按钮，在菜单中选择“播放声音”。 在弹出的菜单中输入音乐文件的路径，单击“确定”。 把事件调整为onLoad(载入页面后)。 （2）给图片添加声音，方法同上。,3、跳转菜单和跳转菜单开始 创建一个菜单对象并向其附加一个“跳转菜单”（或“跳转菜单转到”）行为。 4、网页中的变色按钮 （改变属性） 新建11.html文件，插入一个1行2列的表格，做如下设置： 选中全部单元格，在属性面板中做如下设置：,在两个单元格中分别输入文字“变色按钮”、“应用行为”，并将它们居中对齐，产生一个DIV标签，在代码区找到第一个div标签，在代码中设置一个id值，这段代码改为，同样的方法，在第2二个div标签中设置一个id= “ button2” ，即分别给两个单元格内的div标签命名。,选择窗口行为，打开行为面板，鼠标在第一个单元格中点击一下，在状态栏选中div标签，单击行为面板上的按钮，从弹出菜单中选择“改变属性”菜单项，在弹出的对话框中做如下选择：,单击“确定”，回到行为面板中，将其鼠标响应行为改为onMouseOver。用同样的方法在该div标签上再设置一个行为，将其鼠标响应行为改为onMouseOut，并将对话框中的“新的值”设为原来的背景色#CCCC00。 对第二个单元格中的id=button2的div标签，我们也做同样的设置。保存文件，按F12浏览效果。,5、打开浏览器窗口：用于制作网站的公告通告或者广告宣传、单击缩略图可以弹出一个放大图像、规定链接目标网页的大小和外观等。 在一个新的窗口中打开URL。 6、调用javascript “调用 JavaScript”动作允许读者使用“行为”面板指定当发生某个事件时应该执行的自定义函数或 JavaScript 代码行。熟悉html和javascript的情况下使用。,7、检查表单 该动作主要是检查指定文本域的内容以确保用户输入了正确的数据类型。Onblur事件分别将动作添加给各个文本域，在用户提交表单时分别对各个域进行检查；onsubmit事件将动作添加给表单，在用户提交表单时同时对多个域进行检查。 选定单个域或form进行添加检查表单动作。,8、检查插件 根据浏览者是否安装了指定的插件，转到不同的页。 9、检查浏览器 使用该动作可以获得用户浏览网页所使用的浏览器类型，可根据浏览者不同的类型和版本的浏览器，可以给浏览者显示不的网页。 10、交换图象与恢复交换图象 只要一个对象添加交换图象，恢复交换图象也添加给它,11、预先载入图象：“预先载入图像”动作将不会立即出现在页上的图像载入浏览器缓存中。 12、控制shockshave或flash 使用该动作可以播放、停止、后退或转到shockshave或flashswf 文件中帧 13、设置导航栏图像 设置该动作可以将某个图像变为导航栏图像，或修改导航条中图像的显示和动作。 14、设置文本 A：设置框架文本 B：设置层文本,C：设置状态栏文本 浏览器下端的状态行通常显示当前状态的提示信息，利用“设置状态栏文本”行为，可 以重新设置状态行信息。 选中要附加行为的对象，如网页的标记，或一个链接。 单击行为面板上的“+”按钮，在打开的动作菜单。 选择“设置文本”“设置状态文本”命令，在打开的“信息”对话框中输入需要的文本。按F12键，可以看到打开网页后，浏览器下端的状态行上有了新输入的信息。 D：设置文本域文本,15、显示弹出菜单（下拉菜单） （参看课本p228-232页，效果见实例站点中dianzixiangce.html ） 使用“显示弹出菜单”行为来创建或编辑 Dreamweaver 弹出式菜单，或者打开并修改已插入 Dreamweaver 文档的 Fireworks 弹出式菜单。 16、显示和隐藏层（效果见实例站点中guodu2.html 中“娱乐”和qqshiyishi.html中的qq虚拟试衣室） 显示隐藏层：“显示隐藏层”动作显示、隐藏或恢复一个或多个层的默认可见性。此动作用于在用户与页进行交互时显示信息。,17、拖动层 18、转到url “转到 URL”动作在当前窗口或指定的框架中打开一个新页。 19、滚动链接的层,9.1.4高级行为的应用,1、插入滚动字幕 浏览网页时，有时会看到网页中有些文字会循环往复的移动。这种动画效果是如何制作的呢？当然我们可以采用Gif动画或者利用flash来实现，但是这种方式往往占用的空间比较大，而且不如HTML标记来得那么简单。这个标记就是Marquee标记，中文翻译为“跑马灯”。IE3.0以上版本的浏览器中支持这个HTML标记，而NetScape则不支持。因此我们在设计网页的时候需要考虑这个问题。,选择“常用插入栏”的“标签选择器”命令按钮，打开标签选择器窗口从中选择“html标签”下的marquee标签，单击“插入”就在页面的代码视图中插入一个marquee标签，在行为面板中设置标签检查器中的标签。,Marquee标记的基本语法结构,Marquee标记的基本语法结构如下所示 ： 夜鹰电脑教学网，电脑爱好者的乐园,其中ALIGN可以用来指定滚动字幕与左右文字的对齐方式，它的值可以有top、middle、bottom等； behavior用来指定滚动字幕的滚动方式，它的属性值有scroll、slide和alternate三个，scroll表示滚动字幕内容向同一方向重复滚动，slide表示滚动字幕内容从一端向另一端滚动并在另一端停止，alternate表示滚动字幕内容在两端之间来回往复滚动；,direction指定滚动字幕的滚动方向，它的属性值有left和right两个，分别表示滚 动字幕由右向左和由左向右滚动；SCROLLAMOUNT用来设置多次滚动之间的间隔距离，其 单位是pixels（像素）； scrolling用来指定滚动字幕滚动一次所需要的时间，单位是ms（千分之一秒）， 其值的大小将直接影响滚动字幕的滚动速度；,LOOP属性是用来指定滚动字幕的滚动次数 的，当它的值为“1”时，滚动字幕将连续滚动直到浏览器载入下一个页面； HSPACE和 VSPACE则分别用来指定滚动字幕与其上一级页面在水平方向和竖直方向上的距离。 示例：文本自动向上循环滚动，鼠标放到上面还会暂停,2、下载安装扩展插件 3、下载网页特效，适当修改相关代码，再把代码放到代码视图的具体位置。 举例：花瓣 棉花糖,9.2时间轴,时间轴是flash制作的关键，dw中的时间轴式根基flash制作动画的原理演化出来的。 1.时间轴面板,在时间轴面板中： 时间轴选单：显示目前所编辑的时间轴名称。 播放头： 红色的播放头指示在网页中显示的是哪一帧。 动画条：即图中的Layer11，Layer12，可显示每个层对象的持续时间。 关键帧：动画条中的小圆圈是关键帧。 帧数：显示播放头的位置。 ：回转，可将播放头移到时间轴的初始帧。 ：后退，将播放头往左移动一帧。 ：前进，将播放头往右移动一帧。 FPS：播放速度。每秒种播放的帧数。 自动播放：当网页载入到浏览器时使当前时间轴自动播放。 循环：当网页载入到浏览器时使当前时间轴循环播放。,说明： 一个网页中可以创建多个时间轴，每个时间轴上可以创建多个动画对象，每个对象对于一个动画条。同一个时间轴内的动画对象同时开始，同时结束，并且播放速度也一样。 关键帧在时间轴上以小圆圈标识；一个动画可以设计多个关键帧；起始帧和结束帧规定了动画的起始状态和结束状态。 动画的制作是以层位基础的，要创建的动画的元素都必须放在一个层上，然后对层制作动画。,2、时间轴和图层的综合运用 （1）滚动字幕 （见实例站点中guodu2.html中欢迎光临！滚动文字字幕） 添加层，并在层上输入文字，然后设置层的滚动轨迹，即可得到滚动文字效果。 （2）网页浮动动画，类似与（1）中的滚动文字，无非是把文字换成图片，多增加几个关键帧，使运动轨迹更复杂化。 （见实例站点中guodu2.html中（我送给你了图片） （3）设置文字的阴影效果 插入父层和子层，都输入相同的文字，设置不同的颜色，在设计视图中调整二者的重叠程度以显示阴影的效果。,（4）幻灯片效果，单击换图。 简要操作步骤： 插入三个层，并分别插入三个图片，调整大小一样，把它们在设计视图中的左上边距都设成一样；分别拖放到同一个时间轴上的3个动画条上，使三者首尾相接；最后分别为3个动画条上对应的第一关键帧添加显示隐藏行为即可。给每一个动画条的第一关键帧添加显示（下一个图像所在的）层，而隐藏其他层，行为面板中的相关事件改成onclick。 （见实例站点中guodu2.html中幻灯片播放效果）,（5）控制图像播放动画 （见实例站点中guodu2.html中展开图像和闭合图像） （a）.在设计视图中插入一个层，并插入图片,并将层的可见性和溢出属性都设为“hidden”；然后将该层拖放到两个时间轴上，第一个时间轴上起始帧和结尾帧对应的层的大小分别为最小值（0，0）和最大值（图片实际大小），第二个时间轴上起始帧和结尾帧对应的层的大小分别为最大值（图片实际大小）和最小值（0，0） ；不勾选“自动播放”和“循环”复选框。,（6）制作滚动的折叠菜单：和（5）的操作类似。（相关操作可参看相关flash视频） （7）具有预览功能的电子相册效果，自动换图。（相关操作可参看课本p237-243页，效果见实例站点中dianzixiangce.html）,9.3在网页中应用javascript,认识代码片段面板 应用代码片段 在在页面中插入html代码片段（在设计视图中即可完成） 在网页代码视图中插入javascript代码片段 在html文档的头部插入如下代码： ，然后把光标放在这个标签之间，选择“代码片段”面板中的“javascript”选项，从中选择所需的代码，单击插入即可。,所有的脚本程序必须封装在 这对标签之间，这对标签可以放在html中的任何地方（或者部分中）。大多数script代码被定义成过程函数（fuction），放在部分，在部分调用函数时执行它。 应用举例： 1.在代码片段面板中选择有关导航条的代码片段，在网页中插入合适的导航条； 2.将把光标放在 这对标签之间，选择“代码片段”面板中的选择javascript|浏览函数|禁止右键单击（disablerightclick（）单击插入即可实现禁止右击的操作。（实例网站中的guodu1.html） 3