第四章 动态网页特效,本章要点,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）、CSS等与HTML结合使静态的HTML网页变成动态，主要是在网页中建立各种动态特效 。,4.1 JavaScript应用 4.1.1 JavaScript简介,JavaScript是一种基于对象（Object）和事件驱动（Event Driven）并具有安全性能的解释性的脚本语言。 优点：简单小巧 ，适用于多数流行浏览器 缺点：主要目的是为了扩展Netscape Navigator功能， 有些语法IE浏览器不能解释 VBScript以Visual Basic语言为基础提供了编程的功能。 优点：在服务器端，VBScript可以比其他脚本语言更紧密地同Windows NT集成。 缺点：Netscape公司的浏览器不支持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=initArray.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 添加行为 为对象附加行为：选中对象 打开行为面板 选动作，改参数 默认事件出现，可修改事件及浏览器版本 为时间线附加行为 2 编辑行为 修改参数：双击行为面板上的一个行为。 删除行为：选中行为，点击减号框。 修改行为顺序：选中行为，点击按钮。 修改事件：点事件选择钮 Show Event For改浏览器版本 3 系统自带行为,4.2.1 常用事件介绍,1常用事件介绍 （1）鼠标类 onClick：鼠标单击时触发该事件。 onDblClick：鼠标双击时触发该事件。 onMouseDown：鼠标单击时触发该事件。 onMouseMove：鼠标在指定对象上移动时触发该事 件。 onMouseOut：鼠标离开指定对象时触发该事件。 onMouseOver：鼠标刚开始指向指定对象时触发该事件。 onMouseUp：释放鼠标时触发该事件。,4.2.1 常用事件介绍,（2）键盘类 onKeyDown：按下任意键时触发该事件。 onKeyPress：按下并释放任意键时触发该事件。 onKeyUp：按下键后释放时触发该事件。 （3）其它类型 onLoad：图像或页面载入完成时触发该事件。 onUnload：离开页面时触发该事件。 onScroll：上下拖动浏览器窗口的滚动条时触发该事件。 onResize：重调浏览器窗口或框架大小时触发该事件。 onChange：更改页面上的值时触发该事件。 onError：载入页面或图像期间出错时触发该事件。 onFocus：选中指定对象时触发该事件。 onBlur：取消选中对象时触发该事件。,4.2.2 行为的实际应用,行为的实际应用 1打开浏览器窗口行为 2播放声音行为 3弹出信息行为 4预先载入图像行为 5设置导航栏图像行为 6设置状态栏文本行为 7显示/隐藏元素行为 8显示弹出式菜单行为 9交换图像行为和恢复交换图像行为 10使用第三方行为,1 交换图像,“交换图像”行为将一个图像和另一个图像进行交换。使用此行为可创建鼠标经过按钮的效果以及其它图像效果。 新建一个文档，在文档窗口中插入一幅图像。确保选中图像，单击【行为】面板上的【添加行为】按钮，从中选择【交换图像】命令，打开【交换图像】对话框，从中设置交换图像的参数，单击【确定】按钮，为对象添加【交换图像】 行为，保存文档，按下F12键预览网页，当鼠标指针移到图像上时，将换为另一幅图像，如下图所示。,2 弹出信息,“弹出信息”行为可以在网页中显示警告对话框，因为JavaScript警告对话框只有一个“确定”按钮，所以使用此行为可以提供用户信息，但不能为用户提供选择操作。 打开需要添加【弹出信息】行为的文档。单击文档窗口左下角的标签。选择整个文档。单击【行为】面板上的【添加行为】按钮，从中选择【弹出信息】命令，打开【弹出信息】对话框，在【消息】文本框中输入要显示的信息，单击【确定】按钮，为对象添加【弹出信息】 行为。保存文档，按下F12键预览网页，效果如下图所示,3 打开浏览器窗口,“打开浏览器窗口”行为可在一个新的窗口中打开页面。用户可以指定新窗口的属性，如大小、名称、是否显示菜单栏等。 在文档中选择要添加【打开浏览器窗口】行为的对象。单击【行为】面板上的【添加行为】按钮，从中选择【打开浏览器窗口】命令，打开【打开浏览器窗口】对话框，设置参数，单击【确定】按钮，为所选对象添加行为。保存文档，按下F12键预览网页，当单击图片时，将打开另一个浏览器窗口，如下图所示。,4 设置状态栏文本,“设置状态栏文本”行为可在浏览器窗口左下角处的状态栏中显示消息。 打开需要添加【设置状态栏文本】行为的文档，单击文档窗口左下角的标签，选择整个文档。 单击【行为】面板上的【添加行为】按钮，从中选择【设置文本】/【设置状态栏文本】命令，打开【设置状态栏文本】对话框，在【消息】文本框中输入文字，单击【确定】按钮，为对象行为，在【行为】面板中将事件设置为【onMouseOver】，保存文档，按下F12键预览网页,4.2.3 行为实例练习,【例2-4-3】学习“Popup Message”及“Call JavaScript” 【例2-4-4】学习使用Change Property（改变属性）行为。鼠标指向“鸡”图片时，图片放大一倍，鼠标离开“鸡”图片时，图片恢复原大小。（自学） 【例2-4-5】学习使用Drag Layer（拖拽层）行为。网页上水平排放着4幅小图，拖拽它们到合适的位置，拼成一幅完整的图形。 【例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 “刷新”：“调用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动画效果主要增强视觉效果，应用于使用JavaScript的HTML页面上的几乎所有元素。效果通常用于在一段时间内高亮显示信息，创建动画过渡或以可视方式修改页面元素。对某个元素应用效果，必须为该元素指定一个ID。 Spry动画效果可以修改元素的不透明、缩放比例、位置和样式属性（如背景颜色），还可以组合两个或多个属性来创建有趣的视觉效果。由于这些效果都基于Spry，因此，当你单击应用了效果的对象时，只有对象会进行动态更新，不会刷新整个HTML页面。,效果（Spry动画） Dreamweaver CS3中的Spry动画效果主要用来增强视 觉效果，创建动画过渡或者以可视方式修改页面元素，效果 行为可应用于使用JavaScript的HTML页面上的几乎所有元 素。要对某个元素应用效果，必须使该元素处于选定状态， 或该元素已指定一个ID。当使用效果时，系统会在“代码”视 图中将不同的代码行添加到您的文件中。其中 用来标识SpryEffects.js文件，该文件包含所有Spry效果所必 须的JavaScript脚本库。请不要从代码中删除该行，否则这 些效果将不起作用。,效果（Spry动画） Spry效果包括显示/渐隐、高亮颜色、遮帘、滑动、增 大/收缩、晃动、挤压等动画效果，它可以设置元素的不透 明、缩放比例、位置和样式属性（如背景颜色），还可以组 合两个或多个属性来创建有趣的视觉效果。由于这些效果都 基于Spry，因此，当单击应用了效果的对象时，只有对象会 进行动态更新，不会刷新整个HTML页面。,（1）增大/收缩效果 利用该Spry效果，可以使元素产生变大或变小动画效果。此效果适用于下列HTML对象：address、dd、div、dl、dt、form、p、ol、ul、applet、center、dir、menu或pre。 新建一个页面文档，插入一幅图像并选中该图像。单击行为面板按钮，从弹出菜单中选择“效果/增大/收缩”，弹出“增大/收缩”对话框，如图所示 。,（2）挤压效果 利用该Spry效果，可以使元素产生从页面左上角消失的动画效果。 新建一个页面文档，插入一幅图像并选中该图像。单击行为面板按钮，从弹出菜单中选择“效果/挤压”，弹出“挤压”对话框，如图所示。,（3）显示/渐隐效果 利用该Spry效果，可以使元素产生淡淡显示或隐藏的动画效果。 新建一个页面文档，插入一幅图像并选中该图像。单击行为面板按钮，从弹出菜单中选择“效果/显示/渐隐”，弹出“显示/渐隐”对话框，如图所示。,（4）晃动效果 利用该Spry效果，可以模拟从左向右晃动元素的动画效果。 新建一个页面文档，插入一幅图像并选中该图像。单击行为面板按钮，从弹出菜单中选择“效果/晃动”，弹出“晃动”对话框，如图所示。,（5）滑动效果 利用该Spry效果，可以产生上、下移动元素的动画效果。此效果适用于下列HTML对象：blockquote、dd、div、form或center。滑动效果要求在要滑动的内容周围有一个标签。 选中Div标签单击行为面板按钮，从弹出菜单中选择“效果/滑动”，弹出“滑动”对话框，如图所示。,（6）遮帘效果 利用该Spry效果，可以模拟百叶窗，产生向上或向下滚动百叶窗来隐藏或显示元素的动画效果。 新建一个页面文档，插入一个Div标签，