《动态网页特效》PPT课件.ppt

1、第四章 动态网页特效,本章要点,4.1 JavaScript应用 4.1.1 JavaScript简介 4.1.2 编写JavaScript程序 4.1.3 动态网页特效工具 4.2 行为 4.2.1 添加和编辑行为 4.2.2 预定义行为 4.3 时间轴 4.3.1 时间轴的应用 4.3.2 时间轴面板 4.3.3 时间轴使用 4.3.4 时间轴动画,第4章 动态网页,两种动态网页： 用服务器端动态页面技术（程序代码在服务器端运行 ），主要实现浏览者与服务器管理者之间的信息交互。 用完全“客户端”技术（程序代码在客户端运行 ）， ，利用脚本语言（JavaScript或VBScript）、CS

2、S等与HTML结合使静态的HTML网页变成动态，主要是在网页中建立各种动态特效 。,4.1 JavaScript应用 4.1.1 JavaScript简介,JavaScript是一种基于对象（Object）和事件驱动（Event Driven）并具有安全性能的解释性的脚本语言。 优点：简单小巧 ，适用于多数流行浏览器 缺点：主要目的是为了扩展Netscape Navigator功能， 有些语法IE浏览器不能解释 VBScript以Visual Basic语言为基础提供了编程的功能。 优点：在服务器端，VBScript可以比其他脚本语言更紧密地同Windows NT集成。 缺点：Netscape

3、公司的浏览器不支持VBScript，只能用于IE浏览器。,4.1.2 编写JavaScript程序,JavaScript及VBScript是通过嵌入在标准的HTML语言中使用的 。 Script块可放在与之间，也可以放在与之间。 JavaScript块 JavaScript脚本代码 VBScript块 VBScript脚本代码 ,4.1.2 编写JavaScript程序,【例4-1】编写JavaScript脚本代码，在网页中加入动态的日期。 JavaScript实例 现在时间是： today=new Date(); function initArray() this.length=initAr

4、ray.arguments.length for(var i=0;i ); ,4.1.2 编写JavaScript程序,【例4-2】使用外部*.js文件，在网页中插入可折叠的目录树。 选择“插入”面板“HTML”选项卡下的脚本图标 代码窗口： 【例4-3】 在网页中插入一段VBScript程序，使背景图滚动。,4.1.3 动态网页特效工具,【例4-3】使用外部*.js文件，在网页中插入可折叠的,4.2 行为的基础知识,行为是事件和动作的组合。,行为面板,4.2 行为的基础知识,1 添加行为 为对象附加行为：选中对象 打开行为面板 选动作，改参数 默认事件出现，可修改事件及浏览器版本 为时间线附

5、加行为 2 编辑行为 修改参数：双击行为面板上的一个行为。 删除行为：选中行为，点击减号框。 修改行为顺序：选中行为，点击按钮。 修改事件：点事件选择钮 Show Event For改浏览器版本 3 系统自带行为,4.2.1 常用事件介绍,1常用事件介绍 （1）鼠标类 onClick：鼠标单击时触发该事件。 onDblClick：鼠标双击时触发该事件。 onMouseDown：鼠标单击时触发该事件。 onMouseMove：鼠标在指定对象上移动时触发该事 件。 onMouseOut：鼠标离开指定对象时触发该事件。 onMouseOver：鼠标刚开始指向指定对象时触发该事件。 onMouseUp

6、：释放鼠标时触发该事件。,4.2.1 常用事件介绍,（2）键盘类 onKeyDown：按下任意键时触发该事件。 onKeyPress：按下并释放任意键时触发该事件。 onKeyUp：按下键后释放时触发该事件。 （3）其它类型 onLoad：图像或页面载入完成时触发该事件。 onUnload：离开页面时触发该事件。 onScroll：上下拖动浏览器窗口的滚动条时触发该事件。 onResize：重调浏览器窗口或框架大小时触发该事件。 onChange：更改页面上的值时触发该事件。 onError：载入页面或图像期间出错时触发该事件。 onFocus：选中指定对象时触发该事件。 onBlur：取消选

7、中对象时触发该事件。,4.2.2 行为的实际应用,行为的实际应用 1打开浏览器窗口行为 2播放声音行为 3弹出信息行为 4预先载入图像行为 5设置导航栏图像行为 6设置状态栏文本行为 7显示/隐藏元素行为 8显示弹出式菜单行为 9交换图像行为和恢复交换图像行为 10使用第三方行为,1 交换图像,“交换图像”行为将一个图像和另一个图像进行交换。使用此行为可创建鼠标经过按钮的效果以及其它图像效果。 新建一个文档，在文档窗口中插入一幅图像。确保选中图像，单击【行为】面板上的【添加行为】按钮，从中选择【交换图像】命令，打开【交换图像】对话框，从中设置交换图像的参数，单击【确定】按钮，为对象添加【交换图

8、像】 行为，保存文档，按下F12键预览网页，当鼠标指针移到图像上时，将换为另一幅图像，如下图所示。,2 弹出信息,“弹出信息”行为可以在网页中显示警告对话框，因为JavaScript警告对话框只有一个“确定”按钮，所以使用此行为可以提供用户信息，但不能为用户提供选择操作。 打开需要添加【弹出信息】行为的文档。单击文档窗口左下角的标签。选择整个文档。单击【行为】面板上的【添加行为】按钮，从中选择【弹出信息】命令，打开【弹出信息】对话框，在【消息】文本框中输入要显示的信息，单击【确定】按钮，为对象添加【弹出信息】 行为。保存文档，按下F12键预览网页，效果如下图所示,3 打开浏览器窗口,“打开浏览

9、器窗口”行为可在一个新的窗口中打开页面。用户可以指定新窗口的属性，如大小、名称、是否显示菜单栏等。 在文档中选择要添加【打开浏览器窗口】行为的对象。单击【行为】面板上的【添加行为】按钮，从中选择【打开浏览器窗口】命令，打开【打开浏览器窗口】对话框，设置参数，单击【确定】按钮，为所选对象添加行为。保存文档，按下F12键预览网页，当单击图片时，将打开另一个浏览器窗口，如下图所示。,4 设置状态栏文本,“设置状态栏文本”行为可在浏览器窗口左下角处的状态栏中显示消息。 打开需要添加【设置状态栏文本】行为的文档，单击文档窗口左下角的标签，选择整个文档。 单击【行为】面板上的【添加行为】按钮，从中选择【设

10、置文本】/【设置状态栏文本】命令，打开【设置状态栏文本】对话框，在【消息】文本框中输入文字，单击【确定】按钮，为对象行为，在【行为】面板中将事件设置为【onMouseOver】，保存文档，按下F12键预览网页,4.2.3 行为实例练习,【例2-4-3】学习“Popup Message”及“Call JavaScript” 【例2-4-4】学习使用Change Property（改变属性）行为。鼠标指向“鸡”图片时，图片放大一倍，鼠标离开“鸡”图片时，图片恢复原大小。（自学） 【例2-4-5】学习使用Drag Layer（拖拽层）行为。网页上水平排放着4幅小图，拖拽它们到合适的位置，拼成一幅完整

11、的图形。 【例2-4-6】学习使用Go To URL（跳转到URL）行为。（自学。可多种事件触发跳转） 【例2-4-7】学习使用Jump Menu（跳转菜单）行为 【例2-4-8】学习使用Open Browser Window（打开浏览器窗口）行为及Play Sound（播放声音）行为。 【例2-4-9】制作选项卡，学习使用行为Show-Hide Layer（显示/隐藏层）。点击不同的文字，显示不同的图形。 【例2-4-10】学习使用行为Swap Image（交换图）和Swap Image Restore（恢复交换图）。这是养兔生产教学光盘的封面。 （自学）,调用JavaScript “刷新”

12、：“调用JavaScript”对话框输入JavaScript代码“window.location.reload()”。 “关闭” ： “调用JavaScript”对话框中JavaScript代码“window.close()”。默认事件为onClick。 “后退”：键入JavaScript代码“if(history.length0)history.back()” 提示窗口：键入JavaScript代码“alert(嘿嘿！找我干什么？)”。,4.2.4 调用JavaScript,效果（Spry动画） 在Dreamweaver CS3中Spry动画效果主要增强视觉效果，应用于使用JavaScrip

13、t的HTML页面上的几乎所有元素。效果通常用于在一段时间内高亮显示信息，创建动画过渡或以可视方式修改页面元素。对某个元素应用效果，必须为该元素指定一个ID。 Spry动画效果可以修改元素的不透明、缩放比例、位置和样式属性（如背景颜色），还可以组合两个或多个属性来创建有趣的视觉效果。由于这些效果都基于Spry，因此，当你单击应用了效果的对象时，只有对象会进行动态更新，不会刷新整个HTML页面。,效果（Spry动画） Dreamweaver CS3中的Spry动画效果主要用来增强视 觉效果，创建动画过渡或者以可视方式修改页面元素，效果 行为可应用于使用JavaScript的HTML页面上的几乎所有

14、元 素。要对某个元素应用效果，必须使该元素处于选定状态， 或该元素已指定一个ID。当使用效果时，系统会在“代码”视 图中将不同的代码行添加到您的文件中。其中 用来标识SpryEffects.js文件，该文件包含所有Spry效果所必 须的JavaScript脚本库。请不要从代码中删除该行，否则这 些效果将不起作用。,效果（Spry动画） Spry效果包括显示/渐隐、高亮颜色、遮帘、滑动、增 大/收缩、晃动、挤压等动画效果，它可以设置元素的不透 明、缩放比例、位置和样式属性（如背景颜色），还可以组 合两个或多个属性来创建有趣的视觉效果。由于这些效果都 基于Spry，因此，当单击应用了效果的对象时，

15、只有对象会 进行动态更新，不会刷新整个HTML页面。,（1）增大/收缩效果 利用该Spry效果，可以使元素产生变大或变小动画效果。此效果适用于下列HTML对象：address、dd、div、dl、dt、form、p、ol、ul、applet、center、dir、menu或pre。 新建一个页面文档，插入一幅图像并选中该图像。单击行为面板按钮，从弹出菜单中选择“效果/增大/收缩”，弹出“增大/收缩”对话框，如图所示 。,（2）挤压效果 利用该Spry效果，可以使元素产生从页面左上角消失的动画效果。 新建一个页面文档，插入一幅图像并选中该图像。单击行为面板按钮，从弹出菜单中选择“效果/挤压”，弹

16、出“挤压”对话框，如图所示。,（3）显示/渐隐效果 利用该Spry效果，可以使元素产生淡淡显示或隐藏的动画效果。 新建一个页面文档，插入一幅图像并选中该图像。单击行为面板按钮，从弹出菜单中选择“效果/显示/渐隐”，弹出“显示/渐隐”对话框，如图所示。,（4）晃动效果 利用该Spry效果，可以模拟从左向右晃动元素的动画效果。 新建一个页面文档，插入一幅图像并选中该图像。单击行为面板按钮，从弹出菜单中选择“效果/晃动”，弹出“晃动”对话框，如图所示。,（5）滑动效果 利用该Spry效果，可以产生上、下移动元素的动画效果。此效果适用于下列HTML对象：blockquote、dd、div、form或c

17、enter。滑动效果要求在要滑动的内容周围有一个标签。 选中Div标签单击行为面板按钮，从弹出菜单中选择“效果/滑动”，弹出“滑动”对话框，如图所示。,（6）遮帘效果 利用该Spry效果，可以模拟百叶窗，产生向上或向下滚动百叶窗来隐藏或显示元素的动画效果。 新建一个页面文档，插入一个Div标签，并在Div标签中插入图像和说明性文字。选中Div标签单击行为面板按钮，从弹出菜单中选择“效果/遮帘”，弹出“遮帘”对话框，如图所示。,（4）高亮颜色效果 利用该Spry效果，可以使元素产生颜色渐变的动画效果。 新建一个页面文档，在页面绘制一个APDiv，设置其背景色为任一颜色。选中该APDiv单击行为面

18、板按钮，从弹出菜单中选择“效果/高亮颜色”，弹出“高亮颜色”对话框，如图所示。,（8）跳转菜单与跳转菜单开始 Dreamweaver CS3的表单一节介绍过跳转菜单的插入，选择“插入记录/表单对象/跳转菜单”就可以同时创建跳转菜单和跳转菜单开始，它不需要通过行为面板手动添加，但它是作为一种行为出现在Dreamweaver CS3的行为面板上。单击“跳转菜单”的“前往”，可以在行为面板上自动添加有动作。效果如图所示。,4.3 时间轴,时间轴只能移动层： 创建一个层，在其内插入图片。 选择层，拖入时间线面板中。 选中动画对象条末尾的关键帧，把层移动到动画结束位置。,4.3.1 时间轴的应用,时间轴

19、和层就像一对钥匙和锁，只有相互配合，才能打开网页动画的大门。常见的时间轴动画都涉及到沿着一条轨迹移动层，时间轴只能移动层。【时间轴】面板用于显示层与图像随时间变化的属性，选择【窗口】|【时间轴】命令，打开【时间轴】面板，如图6.24所示。 在【时间轴】面板中可以进行如下设置。 【播放头】：显示当前在页面中的是时间轴上对应的帧。 【动画条】：显示每个对象动画的持续时间。 【关键帧】：在动画中被指定对象属性的帧。 【动画通道】：显示层图像的动画条。 【行为通道】：在时间轴上某一帧执行Dreamweaver行为的通道。,【时间轴下拉列表框】：指定当前显示在【时间轴】面板中的是文档的哪一条时间轴。 【

20、回退】：移动播放头到时间轴的第1帧。 【后退】：向左移动播放头一帧。单击按钮并按住鼠标左键，可以回放时间轴。 【播放】：向右移动播放头一帧。单击按钮并按住鼠标左键，可以连续播放时间轴动画。 【帧数】：可以通过设置总帧数和每秒钟播放帧数来控制动画的持续时间，通常默认设置是每秒播放15帧。 【自动播放】：使时间轴在打开浏览器后自动开始播放。 【循环播放】：使当前时间轴在浏览器中打开后做循环播放。,4.3.2 时间轴面板,图2-4-16 时间轴面板,单击菜单栏中的“插入记录/布局对象/AP Div”命令，绘制层AP Div，然后在AP Div中插入文字或图片。 选择文档中的AP Div，按下鼠标左键

21、，并将其拖动到时间轴面板中，DreamweaverCS3自动生成15帧动画。选择第15帧，再选中AP Div，按住鼠标左键向任意方向拖动改变原始位置。如图所示。,4.3.3 时间轴使用,在时间轴面板上选中“自动播放”和“循环”复选框，按下F12键浏览网页，就可以预览到沿直线运动的文字效果。若要使动画播放时间更长，在时间轴面板选择结束帧标签向右拖动。动画中的所有关键帧都会随之移动，保持它们的相对保持不变。若要阻止其他关键帧的移动，按住“Ctrl”再拖动结束帧标签，其他关键帧在动画中的位置保持不变。,若要修改时间轴动画某帧的位置，选择该帧单击鼠标右键，在弹出的菜单中选择“增加关键帧”命令（或）按住Ctrl键单击左键增加一个关键，选中该帧后拉动APDiv调整位置，从而改变APDiv的运动轨迹。如图所示。,如果期望延长动画播放时间，选中结束帧标签向后拖动，动画中的所有关键帧都会随之移动，并保持它们之间的相对性不变。若要阻止其他关键帧的移动，按住“Ctrl”再拖动某一帧关键帧（或最后