第六章 行为.ppt

1、第6章 使用行为制作网页特效,行为是将 Java Script 代码放置在文档中以允许访问者与 Web 页进行交互。用户只需用鼠标点击进行简单的设定就可以实现复杂的动态网页的效果。,什么是行为？ 如何使用行为创建特效 创建动画 应用Java Script,1 什么是行为？,行为是事件和由事件触发的动作的组合。其中： 动作是由预先编写的 JavaScript 代码组成的，这些代码执行特定的任务，例如打开浏览器窗口、显示或隐藏层、播放声音或停止 Shockwave 影片等等。 事件是浏览器生成的消息，指示页面的访问者执行了某种操作。例如，当访问者将鼠标指针移动到某个链接上时，浏览器为该链接生成一个

2、 onMouseOver 事件，然后浏览器查看是否存在应该调用的 JavaScript 代码。,系统为不同的页面元素定义不同的事件。将一个动作和一个事件结合在一起就完成了一个行为的过程。例如我们在网页的载入事件中响应一个弹出对话框的动作，其对应的事件为Onload，对应的动作为“弹出信息”，经过简单的设定就可以完成需要的功能。如图所示。,1 什么是行为？,行为面板 “行为”面板如图所示：,添加行为按钮：单击此按钮将弹出可以显示行为的菜单，当选择了其中一个行为后会弹出响应的设置对话框。,2 添加行为,删除行为按钮：单击此按钮将删除当前选中的行为。 事件更改按钮：单击此按钮将弹出事件菜单，从中进行

3、选择以更换触发动作的事件类型。如果菜单中未列出所需的事件，可在“显示事件”弹出的子菜单中更改目标浏览器。,Dreamweaver内置的行为,交换图像/ 恢复交换图像 弹出信息 打开浏览器窗口 拖动层 控制Shockwave或Flash 播放声音 改变属性 显示-隐藏层 显示弹出式菜单和隐藏弹出式菜单 检查插件,检查浏览器 检查表单 设置导航栏图像 设置文本 1.设置层文本 2. 设置文本域文字 3.设置框架文本 4.设置状态栏文本 调用JavaScript 跳转菜单和跳转菜单开始 转到URL,常用事件,onAbort：当浏览器用户中断浏览器正在载入图像的操作时产生。 onAfterUpdate

4、：当网页中的数据元素已经完成源数据的更新时产生该事件。 onBeforeUpdate：当网页中的数据元素已经改变并且就要和浏览器用户失去交互时产生该事件。 onBlur：当指定元素不再被浏览器用户交互时产生。 onBounce：当字幕（Marquee）中的内容移动到该字幕边界时产生。 onChange：当浏览器用户改变网页中的某个值时产生。 onClick：当浏览器用户在指定的元素上单击时产生。 onDblClick：当浏览器用户在指定的元素上双击时产生。 onError：当浏览器在网页或图像载入产生错误时产生。,常用事件,onFinish：当字幕（Marquee）中的内容完成一次循环时产生。

5、 onFocus：当指定元素被浏览器用户交互时产生。 onHelp：当浏览器用户单击浏览器帮助按钮或选择浏览器菜单中的帮助菜单项时产生。 onKeyDown：当按下任意键的同时产生。 onKeyPress：当按下和松开任意键时产生。 onKeyUp：当按下的键松开时产生。 onLoad：当一图像或网页载入完成时产生。 onMouseDown：当浏览器用户按下鼠标时产生。 onMouseMove：当浏览器用户将鼠标在指定元素上移动时产生。 onMouseOut：当鼠标从指定元素上移开时产生。 onMouseOver：当鼠标移动到指定元素时产生。 onMouseUp：当鼠标弹起时产生。 onMov

6、e：当窗体或框架移动时产生。,常用事件,onReadyStateChange：当指定元素的状态改变时产生。 onReset：当表单内容被重新设置为缺省值时产生。 onResize：当浏览器用户调整浏览器或框架大小时产生。 onRowEnter：当数据源的当前记录指针已经改变时产生。 onRowExit：当数据源的当前记录指针将要改变时产生。 onScroll：当浏览器用户使用滚动条向上或向下滚动时产生。 onSelect：当浏览器用户选择文本框中的文本时产生。 onStart：当字幕（Marquee）内容开始循环时产生。 onSubmit：当浏览器用户提交表格时产生。 onUnload：当浏览

7、器用户离开网页时产生。,添加行为 （1）选中一个网页中的对象。 （2）单击添加行为按钮，在弹出的菜单中选中要添加的行为。 （3）单击所选行为，在弹出的对话框中进行设置。 （4）在行为面板中，单击事件更改按钮，在弹出的下拉菜单中选择你需要的触发事件类型。,2 添加行为,“行为”面板的约定： （）行为面板中有多个行为时，则按事件的字母顺序显示在面板上。 （）同一个事件可以有多个动作，对于同一个事件的多个动作，行为面板中的显示顺序就是多个动作的执行顺序。 （）要想调整动作的执行顺序，可以利用行为面板的按钮 和 来调整，以实现所需要的效果。,3 编辑管理行为,与文本有关的行为,【设置文本】行为包括四种

8、：一种是设置容器文本；一种是设置文本域文字；一种是设置框架文本；一种是设置状态栏文本。在四种文本特效中，只有添加状态栏文本行为时不需要选择对象。 【设置容器的文本】行为是将页面上的现有容器中的内容替换为指定的内容，该容器可以是表格、Div标签或者AP元素，但是必须具有ID属性。 例：设置容器文本 例：设置文本域文字 例：设置框架文本,与窗口有关的行为,行为命令中包括两种窗口信息，一种是纯文字信息警告框，一个是能够插入各种网页元素的窗口。两种不同的窗口其作用也各不相同。 【弹出消息】行为显示一个包含指定消息的JavaScript警告。因为JavaScript警告对话框只有一个【确定】按钮，所以使

9、用此行为可以提供用户信息，但不能为用户提供选择操作。 例：弹出信息 使用【打开浏览器窗口】行为可以在一个新的窗口中打开页面，这个窗口的属性可以由用户设置，例如窗口大小、是否有状态栏以及窗口的名字等。例：打开游览器窗口,与图像有关的行为,【交换图像】行为是通过更改 标签的src属性将一个图像和另一个图像进行交换。使用此行为可以创建鼠标经过按钮的效果以及一次交换多个图像效果。 例：交换图像使用【设置导航栏图像】行为可将某个图像变为导航栏图像，还可以更改导航条中图像的显示和动作。选中文档中的图像后，【添加行为】按钮 ，选择【设置导航栏图像】命令，打开的【设置导航条图像】对话框中包括【基本】与【高级】

10、两个选项卡。其中【基本】选项卡中的选项与【插入导航条】对话框基本相同。例：设置导航栏图像,与层有关的行为,由于AP元素的独特性，Dreamweaver分别针对其属性准备了两个行为命令【拖动AP元素】与【显示隐藏元素】命令。通过添加这两个行为命令，能够实现在预览时拖动、显示或者隐藏AP元素中的网页元素。【拖动AP元素】行为可以让访问者拖动绝对定位的AP元素。使用此行为可以创建拼图游戏、滑块控件和其它可移动的界面元素。在添加该行为之前，首先需要在页面中创建AP元素，以及在其中插入图像或者输入文本。例：拖动AP元素 【显示-隐藏元素】行为可以显示、隐藏或者恢复一个或多个页面元素的默认可见性。此行为用

11、于在用户与网页进行交互时显示信息。 注意：显示-隐藏的元素必须是一个AP元素，而且属性设置为隐藏。例：显示-隐藏元素,与网页元素有关的行为,在Dreamweaver中的行为命令中，【改变属性】命令能够针对不同的网页元素，设置不同的属性；而【效果】命令中的子命令，有些是针对图像元素，有些是针对AP元素。在这些命令中，如果选择不正确，那么将无法实现效果。 【改变属性】行为是用来动态地改变某个对象的属性值，比如改变图像的大小，或者表格的背景颜色等。为元素添加该行为命令之前，必须先为该元素设置ID，在【属性】面板中设置图像元素的ID。例：改变属性 Spry效果是视觉增强功能，可以将它们应用于使用Jav

12、aScript的HTML页面上几乎所有的元素。效果通常用于在一段时间内高亮显示信息，创建动画过渡或者以可视方式修改页面元素。在这些Spry效果命令中，有些可以应用于所有的网页元素，有些则必须应用于AP元素。 例：spry-增大-收缩,要创建时间轴，首先在页面中绘制一个AP元素，在AP元素插入图片或者文本，然后确定AP元素的动画开始时所处位置。在页面中选中AP元素，并且将其拖入【时间轴】面板内部，创建动画帧。或是选择AP元素后，右键菜单中选择“添加到时间轴”创建路径动画：选择AP元素后，右键菜单中选择“记录路径”，然后在窗口中拖到AP元素，会形成路径例：时间轴动画注意：只能为AP元素创建时间轴动

13、画 路径只有在关键帧的位置（有白色圆点）可以是弯曲的 添加关键帧的方法是，在帧上按下ctrl键单击 如果想改变运动的速度，可以修改FPS（帧速率）的值,创建时间轴动画,JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，有了JavaScript，使网页变得更加生动活泼。使用它的目的是与HTML超文本标识语言、Java脚本语言一起实现在一个网页中链接多个对象，与网络客户交互作用，从而可以开发出客户端的应用程序。它可以通过嵌入或调入标准的HTML语言中实现。 JavaScript功能非常强大，在动态网页设计里发挥了重要作用。在一个网页里，JavaScript是无所不在的，它可以控

14、制和改变HTML很多无法达到的效果。,应用javascript,运动字幕经常被作为公告板使用，应用非常广泛，并且源代码也比较短小，因此可以在很多地方使用而不会影响页面载入的速度。受到很多网页设计者的青睐例：制作滚动字幕,Javascript对文字的操作,Marquee属性,Direction=left/right/up/down:设置文字滚动的方向 Scrollamount=“n”：参数n表示字幕每移动一次的距离，单位为像素 Scrolldelay=“n”：参数n表示字幕每隔多久移动一次，单位为豪秒 Behavior=scroll/slide/alternate behavior=scroll:绕圈移动 behavior=slide:只走一次 behavior=alternate:来回移动 Loop=n：设置循环滚动的次数，默认为无数次 Bgcolor=#ff00ee ONMOUSEOU