第七章动态网页特效分析.ppt

第七章 动态网页特效 本章要点 7.1 JavaScript应用 7.1.1 JavaScript简介 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.1 JavaScript应用 7.1.1 JavaScript简介 JavaScript是一种基于对象（Object）和事件驱动（Event Driven）并具有安全性能的解释性的脚本语言。 优点：简单小巧 ，适用于多数流行浏览器 缺点：主要目的是为了扩展Netscape Navigator功能， 有些语法IE浏览器不能解释 VBScript以Visual Basic语言为基础提供了编程的功能。 优点：在服务器端，VBScript可以比其他脚本语言更紧密地同Windows NT集成。 缺点：Netscape公司的浏览器不支持VBScript，只能用于IE浏览器。 7.1.2 编写JavaScript程序 JavaScript及VBScript是通过嵌入在标准的HTML语言中使用的 。 Script块可放在head与/head之间，也可以放在body与/body之间。 JavaScript块 script language= JavaScript JavaScript脚本代码 /script VBScript块 script language=“VBScript” VBScript脚本代码 /script 7.1.2 编写JavaScript程序 【例7-1】编写JavaScript脚本代码，在网页中加入动态的日期。 html head titleJavaScript实例/title /head body 现在时间是： script language=JavaScript today=new Date(); function initArray(){ this.length=initArray.arguments.length for(var i=0;ithis.length;i++) this[i+1]=initArray.arguments[i] } var d=new initArray(星期日,星期一,星期二,星期三,星期四,星期五,星期六); document.write(today.getYear(),年,today.getMonth()+1,月, today.getDate(),日,d[today.getDay()+1],/font ); /script /body /html 7.1.2 编写JavaScript程序 【例7-2】使用外部*.js文件，在网页中插入可折叠的目录树。 选择“插入”面板“HTML”选项卡下的脚本图标 代码窗口： body script language=JavaScript type=text/javascript src=xuanze.js /script /body 【例7-3】 在网页中插入一段VBScript程序，使背景图滚动。 7.1.3 动态网页特效工具 【例7-3】使用外部*.js文件，在网页中插入可折叠的 7.2 行为的基础知识 行为是事件和动作的组合。 7.2 行为的基础知识 1． 添加行为 为对象附加行为：选中对象 － 打开行为面板 － 选动作，改参数 － 默认事件出现，可修改事件及浏览器版本 为时间线附加行为 2． 编辑行为 修改参数：双击行为面板上的一个行为。 删除行为：选中行为，点击减号框。 修改行为顺序：选中行为，点击▼▲按钮。 修改事件：点事件选择钮 Show Event For改浏览器版本 3． 系统自带行为 7.2.1 常用事件介绍 1．常用事件介绍 （1）鼠标类 ●onClick：鼠标单击时触发该事件。 ●onDblClick：鼠标双击时触发该事件。 ●onMouseDown：鼠标单击时触发该事件。 ●onMouseMove：鼠标在指定对象上移动时触发该事 件。 ●onMouseOut：鼠标离开指定对象时触发该事件。 ●onMouseOver：鼠标刚开始指向指定对象