第七章 动态网页特效

第七章动态网页特效本章要点7.1JavaScript应用7.1.1JavaScript简介7.1.2编写JavaScript程序7.1.3动态网页特效工具7.2行为7.2.1添加和编辑行为7.2.2预定义行为7.3时间轴7.3.1时间轴的应用7.3.2时间轴面板7.3.3时间轴使用7.3.4时间轴动画第7章动态网页两种动态网页：用服务器端动态页面技术（程序代码在服务器端运行），主要实现浏览者与服务器管理者之间的信息交互。用完全“客户端”技术（程序代码在客户端运行），，利用脚本语言（JavaScript或VBScript）、CSS等与HTML结合使静态的HTML网页变成动态，主要是在网页中建立各种动态特效。7.1JavaScript应用7.1.1JavaScript简介JavaScript是一种基于对象（Object）和事件驱动（EventDriven）并具有安全性能的解释性的脚本语言。优点：简单小巧，适用于多数流行浏览器缺点：主要目的是为了扩展NetscapeNavigator功能，有些语法IE浏览器不能解释VBScript以VisualBasic语言为基础提供了编程的功能。优点：在服务器端，VBScript可以比其他脚本语言更紧密地同WindowsNT集成。缺点：Netscape公司的浏览器不支持VBScript，只能用于IE浏览器。7.1.2编写JavaScript程序JavaScript及VBScript是通过嵌入在标准的HTML语言中使用的。Script块可放在head与/head之间，也可以放在body与/body之间。JavaScript块scriptlanguage=JavaScriptJavaScript脚本代码/scriptVBScript块scriptlanguage=“VBScript”VBScript脚本代码/script7.1.2编写JavaScript程序【例7-1】编写JavaScript脚本代码，在网页中加入动态的日期。htmlheadtitleJavaScript实例/title/headbody现在时间是：scriptlanguage=JavaScripttoday=newDate();functioninitArray(){this.length=initArray.arguments.lengthfor(vari=0;ithis.length;i++)this[i+1]=initArray.arguments[i]}vard=newinitArray(星期日,星期一,星期二,星期三,星期四,星期五,星期六);document.write(today.getYear(),年,today.getMonth()+1,月,today.getDate(),日,d[today.getDay()+1],/font);/script/body/html7.1.2编写JavaScript程序【例7-2】使用外部*.js文件，在网页中插入可折叠的目录树。选择“插入”面板“HTML”选项卡下的脚本图标代码窗口：bodyscriptlanguage=JavaScripttype=text/javascriptsrc=xuanze.js/script/body【例7-3】在网页中插入一段VBScript程序，使背景图滚动。7.1.3动态网页特效工具【例7-3】使用外部*.js文件，在网页中插入可折叠的7.2行为的基础知识行为是事件和动作的组合。行为事件动作行为面板7.2行为的基础知识1．添加行为为对象附加行为：选中对象－打开行为面板－选动作，改参数－默认事件出现，可修改事件及浏览器版本为时间线附加行为2．编辑行为修改参数：双击行为面板上的一个行为。删除行为：选中行为，点击减号框。修改行为顺序：选中行为，点击▼▲按钮。修改事件：点事件选择钮ShowEventFor改浏览器版本3．系统自带行为7.2.1常用事件介绍1．常用事件介绍（1）鼠标类●onClick：鼠标单击时触发该事件。●onDblClick：鼠标双击时触发该事件。●onMouseDown：鼠标单击时触发该事件。●onMouseMove：鼠标在指定对象上移动时触发该事件。●onMouseOut：鼠标离开指定对象时触发该事件。●onMouseOver：鼠标刚开始指向指定对象时触发该事件。●onMouseUp：释放鼠标时触发该事件。7.2.1常用事件介绍（2）键盘类●onKeyDown：按下任意键时触发该事件。●onKeyPress：按下并释放任意键时触发该事件。●onKeyUp：按下键后释放时触发该事件。（3）其它类型●onLoad：图像或页面载入完成时触发该事件。●onUnload：离开页面时触发该事件。●onScroll：上下拖动浏览器窗口的滚动条时触发该事件。●onResize：重调浏览器窗口或框架大小时触发该事件。●onChange：更改页面上的值时触发该事件。●onError：载入页面或图像期间出错时触发该事件。●onFocus：选中指定对象时触发该事件。●onBlur：取消选中对象时触发该事件。7.2.2行为的实际应用行为的实际应用1．打开浏览器窗口行为2．播放声音行为3．弹出信息行为4．预先载入图像行为5．设置导航栏图像行为6．设置状态栏文本行为7．显示/隐藏元素行为8．显示弹出式菜单行为9．交换图像行为和恢复交换图像行为10．使用第三方行为1交换图像“交换图像”行为将一个图像和另一个图像进行交换。使用此行为可创建鼠标经过按钮的效果以及其它图像效果。新建一个文档，在文档窗口中插入一幅图像。确保选中图像，单击【行为】面板上的【添加行为】按钮，从中选择【交换图像】命令，打开【交换图像】对话框，从中设置交换图像的参数，单击【确定】按钮，为对象添加【交换图像】行为，保存文档，按下F12键预览网页，当鼠标指针移到图像上时，将换为另一幅图像，如下图所示。2弹出信息“弹出信息”行为可以在网页中显示警告对话框，因为JavaScript警告对话框只有一个“确定”按钮，所以使用此行为可以提供用户信息，但不能为用户提供选择操作。打开需要添加【弹出信息】行为的文档。单击文档窗口左下角的body标签。选择整个文档。单击【行为】面板上的【添加行为】按钮，从中选择【弹出信息】命令，打开【弹出信息】对话框，在【消息】文本框中输入要显示的信息，单击【确定】按钮，为对象添加【弹出信息】行为。保存文档，按下F12键预览网页，效果如下图所示3打开浏览器窗口“打开浏览器窗口”行为可在一个新的窗口中打开页面。用户可以指定新窗口的属性，如大小、名称、是否显示菜单栏等。在文档中选择要添加【打开浏览器窗口】行为的对象。单击【行为】面板上的【添加行为】按钮，从中选择【打开浏览器窗口】命令，打开【打开浏览器窗口】对话框，设置参数，单击【确定】按钮，为所选对象添加行为。保存文档，按下F12键预览网页，当单击图片时，将打开另一个浏览器窗口，如下图所示。4设置状态栏文本“设置状态栏文本”行为可在浏览器窗口左下角处的状态栏中显示消息。打开需要添加【设置状态栏文本】行为的文档，单击文档窗口左下角的body标签，选择整个文档。单击【行为】面板上的【添加行为】按钮，从中选择【设置文本】/【设置状态栏文本】命令，打开【设置状态栏文本】对话框，在【消息】文本框中输入文字，单击【确定】按钮，为对象行为，在【行为】面板中将事件设置为【onMouseOver】，保存文档，按下F12键预览网页7.2.3行为实例练习【例2-7-3】学习“PopupMessage”及“CallJavaScript”【例2-7-4】学习使用ChangeProperty（改变属性）行为。鼠标指向“鸡”图片时，图片放大一倍，鼠标离开“鸡”图片时，图片恢复原大小。（自学）【例2-7-5】学习使用DragLayer（拖拽层）行为。网页上水平排放着4幅小图，拖拽它们到合适的位置，拼成一幅完整的图形。【例2-7-6】学习使用GoToURL（跳转到URL）行为。（自学。可多种事件触发跳转）【例2-7-7】学习使用JumpMenu（跳转菜单）行为【例2-7-8】学习使用OpenBrowserWindow（打开浏览器窗口）行为及PlaySound（播放声音）行为。【例2-7-9】制作选项卡，学习使用行为Show-HideLayer（显示/隐藏层）。点击不同的文字，显示不同的图形。【例2-7-10】学习使用行为SwapImage（交换图）和SwapImageRestore（恢复交换图）。这是《养兔生产》教学光盘的封面。（自学）调用JavaScript“刷新”：“调用JavaScript”对话框输入JavaScript代码“window.location.reload()”。。“关闭”：“调用JavaScript”对话框中JavaScript代码“window.close()”。默认事件为onClick。“后退”：键入JavaScript代码“if(history.length0){history.back()}”提示窗口：键入JavaScript代码“alert(嘿嘿！找我干什么？)”。7.2.4调用JavaScript效果（Spry动画）在DreamweaverCS3中Spry动画效果主要增强视觉效果，应用于使用JavaScript的HTML页面上的几乎所有元素。效果通常用于在一段时间内高亮显示信息，创建动画过渡或以可视方式修改页面元素。对某个元素应用效果，必须为该元素指定一个ID。Spry动画效果可以修改元素的不透明、缩放比例、位置和样式属性（如背景颜色），还可以组合两个或多个属性来创建有趣的视觉效果。由于这些效果都基于Spry，因此，当你单击应用了效果的对象时，只有对象会进行动态更新，不会刷新整个HTML页面。效果（Spry动画）DreamweaverCS3中的Spry动画效果主要用来增强视觉效果，创建动画过渡或者以可视方式修改页面元素，效果行为可应用于使用JavaScript的HTML页面上的几乎所有元素。要对某个元素应用效果，必须使该元素处于选定状态，或该元素已指定一个ID。当使用效果时，系统会在“代码”视图中将不同的代码行添加到您的文件中。其中scriptsrc=../../SpryAssets/SpryEffects.jstype=text/javascript用来标识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效果，可以使元素产生淡淡显示或隐藏的动画效果。新建一个页面文档，插入一幅图像并选中该图像。单击行为面板按钮，从弹出菜单中选择“效果/显示/渐隐”，弹出“显示/