CH11 网页特效

单击此处编辑母版标题样式,*,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,第,11,章,网页特效,通过本章学习，应该掌握以下内容：,1 DW,插件的使用,2,时间轴的使用,3,Javascript,脚本语言,11.1,DW,插件的使用,一、插件的安装和管理,插件的安装步骤如下：,（,1,）单击菜单,【,开始,】【,程序,】【Macromedia】,【Macromedia Extension Manager】,，打开,“,Macromedia,扩展管理器,”,窗口。,（,2,）单击,【,安装新扩展,】,按钮，弹出,“,选取要安装的扩展,”,对话框，从对话框中选择相应文件，单击,【,安装,】,按,钮。,（,3,）弹出如图所示的对话框，单击,【,接受,】,按钮；接,着弹出提示信息对话框，单击,【,确定,】,按钮，,“,扩展管,理器,”,安装成功；接着弹出提示信息对话框，单击,【,确,定,】,按钮，完成安装。,二、插件的类型,行为插件：行为插入安装后会在,Dweamwaver,的,“,行为,”,面板中与基本的行为并列显示,命令插件：命令插件是由,HTML,文档和图片文件组成，安装之后会添加到菜单栏的,“,命令菜单,”,中,对象插件：安装对象插件之后，将以图标形式添加到,Dweamwaver,的插入栏中,三、常见插件的使用,创建滚动字幕,（,1,）安装,marquee.mxp,插件,（,2,）在,DW,的,“,常用,”,菜单栏下点击,marquee,图标，打开对话框，输入相应的文字并设置相应的参数,利用插件创建背景音乐网页,（,1,）,安装,sound.mxp,插件,（,2,）在,DW,的,“,常用,”,菜单栏下点击,sound,图标，打开对话框，输入音乐文件位置,利用插件制作漂浮广告,（,1,）安装,floating.mxp,插件,（,2,）在,DW,的,“,命令,”,菜单栏选择,“,floating image,”,（,3,）保存并浏览网页效果,直接使用,marquee,标签,dfhfjghk,11.2,使用时间轴制作特效,在,新建,网页中利用时间轴制作漂浮图片特效，具体操作过程如下：,（,1,）打开网页,“,15.html,”,。,（,2,）打开时间轴面板,在,Dreamweaver 8,主窗口中，单击菜单,【,窗口,】【,时间轴,】,，打开的,“,时间轴,”,面板。,（,3,）在,Dreamweaver 8,主窗口中，单击菜单,【,插入,】【,布局对象,】【,层,】,，或单单击,“,布局,”,插入工具栏中的,“,绘制层,”,按钮，在文档窗口中绘制一个层，然后在该层中放置一个图像，这里为,“,01.gif,”,。,（,4,）使用鼠标将选定的层拖至时间轴面板中，弹出对话框，单击,【,确定,】,按钮关闭对话框。一个颜色条出现在时间轴的第一个通道中，层的名称也将在该颜色条中出现。,（,5,）选中时间轴面板中的,“,自动播放,”,复选框，弹出对话框，单击,【,确定,】,按钮关闭该对话框，使时间轴在浏览器打开时自动播放。选中,“,循环,”,复选框，弹出对话框，单击,【,确定,】,按钮关闭该对话框，使时间轴连续循环播放。,“,行为,”,通道将插入到动画最后一帧后面。,（,6,）选中已插入图像的层，单击鼠标右键，从弹出的快捷菜单中单击菜单,【,记录路径,】,，然后按住鼠标左键将层拖曳在页面上运行，形成层的运行轨迹，当到达动画应停止的点时释放鼠标。,（,7,）在,Dreamweaver 8,主窗口中，单击菜单,【,窗口,】【,行为,】,，打开“行为”面板。,（,8,）选中层中的图像作为对象，然后单击“行为”面板中的加号“,+”,按钮，并从动作弹出式菜单中单击,【,时间轴,】【,停止时间轴,】,。,（,9,）在弹出的“停止时间轴”对话框中，从“停止时间轴”下拉列表框中选择要停止的时间轴或者选择“停止所有时间轴”，这里选择“,Timeline1”,。,（,10,）单击,【,确定,】,按钮关闭对话框。然后在“行为”面板中选择鼠标事件“,onMouseOver,”,。,（,11,）继续选中层中的图像，单击“行为”面板中的加号“,+”,按钮，并从动作弹出式菜单中单击,【,时间轴,】【,播放时间轴,】,。,（,12,）在弹出的,“,播放时间轴,”,对话框中，从,“,播放时间轴,”,下拉列表框中选择要播放的时间轴或者选择,“,播放所有时间轴,”,，这里选择,“,Timeline1,”,。,（,13,）单击,【,确定,】,按钮关闭对话框。然后在,“,行为,”,面板中选择鼠标事件,“,onMouseOut,”,。至此，鼠标控制时间轴播入或停止的效果就完成了。,（,14,）保存网页文档，然后浏览该网页，观察其效果,（,1,）掌握,JavaScript,的常量、变量、运算符和表式。,（,2,）掌握,JavaScript,的语句、函数。,（,3,）了解,JavaScript,的事件。,（,4,）学习,JavaScript,的对象以及,JavaScript,代码嵌入,HTML,文档的方法,11.3 JavaScript,11.3.1 JavaScript,概述,JavaScript,是一种基于对象和事件驱动并具有安全性能,的脚本语言。使用它的目的是与,HTML,超文本标记语言一起实,现网页中的动态交互功能。,应用,JavaScript,语言编写脚本程序，可以实现许多网页特效，但网页特效并非是网页中的重要组成元素，对,JavaScript,语言只需一般了解便可以。通过本章学习要求基本掌握,JavaScript,语言的语法、对象和常见的利用脚本创建特效的方法。,11.3.2 JavaScript,的基本语法,在网页中最常用的一种插入脚本程序的方式是使用,Script,标记符，把脚本标记符,置于网页上的,HEAD,部分或,BODY,部分，然后在其中加入脚本程序。一般语法形式如下：,通过标识,指明其间是,JavaScript,脚本,源代码。,11.3.3,JavaScript,的常量和变量,1,常量,JavaScript,有,6,种基本类型的常量：,（,1,）整型常量 （,2,）实型常量,（,3,）布尔值 （,4,）字符型常量,（,5,）空值 （,6,）特殊字符,2,变量,变量有,4,种类型：整型变量、实型变量、布尔型变量、字,符串变量。,JavaScript,变量在使用前可以使用,var,关键字先作声明，,并可赋值。,11.3.4,JavaScript,的运算符与表达式,运算符也称为操作符，,JavaScript,常用的运算符有：,算术运算符（包括,+,、,-,、*、,/,、,+,、,-,）,比较运算符（包括,、,、,=,、,=,、,!=,）,逻辑运算符（,&,、,|,、,!,）,赋值运算符（,=,）,条件运算符（,?:,）,表达式是运算符和操作数的组合，表达式通过求值确定表,达式的值，这个值是操作数据实施运算所确定的结果。,11.3.5,JavaScript,的语句,1,条件语句,（,1,）,if,语句,语法格式如下：,if(,表达式,),语句块,若表达式的值为,true,，则执行该语句块，否则就跳过该语句块。,（,2,）,if else,语句,语法格式如下：,if(,表达式,),语句块,1,else,语句块,2,若表达式的值为,true,，则执行语句块,1,；否则执行,语句块,2,。,2,循环语句,循环语句用于在一定条件下重复执行某段代码,JavaScript,中提供了多种循环语句：,for,语句、,while,语句、,do while,语句。,（,1,）,for,语句,语法格式如下：,for(,表达式,1;,表达式,2;,表达式,3),循环语句块,先执行,“,表达式,1,”,，完成初始化；然后判断,“,表达式,2,”,的值是否为,true,，如果为,true,，则执行,“,循环语句块,”,，否则退出。,11.3.6,JavaScript,对象的层次结构,1,第一层次,JavaScript,对象的层次结构中最顶层的对象是窗口,对象（,window,），它代表当前的浏览器窗口。,Window,对象常用的方法有：,open(),、,close(),、,alert(),、,confirm(),、,prompt(),。,2,第二层次,窗口对象,window,之下是文档,(document),、浏览器,(navigator),、屏幕,(screen),、事件,(event),、框架,(frame),、历史,(history),、地址,(location),。,3,第三层次,文档对象之下包括表单,(form),、图像,(image),、链接,(link),、锚对象,(anchor),等多种对象。浏览器对象之下,包括,MIME,类型对象,(,mimeType,),、插件对象,(,plugin,),等。,4,第四层次,表单对象之下包括按钮,(button),、复选,(checkbox),、,单选按钮,(radio),、文件域,(,fileUpload,),等。,11.3.7,Window,对象,Window,对象代表当前窗口，是每一个已打开的浏,览器窗口的父对象，包含了,Document,、,navigator,、,location,、,history,等子对象。,Window,对象常用的属性与方法有：,（,1,）,status,属性：表示窗口状态栏中的信息。,（,2,）,alert(string,),：显示提示信息对话框。,（,3,）,confirm(),：显示确认对话框，该对话框中包含,“,确定,”,和,“,取消,”,两个按钮，如果单击,“,确定,”,按钮，则返回,true,，如果单击,“,取消,”,按钮，则返回,false,。,（,4,）,open(,参数表,),：创建一个新窗口实例。,11.3.8,Document,对象,Document,对象代表当前浏览器窗口中的文档，使用它可以,访问到文档中的对象，例如图像、表单等。,Document,对象常,用的属性与方法有：,（,1,）,all,属性：表示文档中所有,HTML,标记符的数组。,（,2,）,bgColor,属性：用于描述文档的背景颜色。,（,3,）,forms,属性：表示文档中所有表单的数组。,（,4,）,title,属性：表示文档的标题。,（,5,）,write,方法：将字符或变量值输出到窗口。,（,6,）,close,方法：将输出关闭。,11.3.9,其他的浏览器对象,1,Navigator,对象,提供了浏览器环境的信息，包括浏览器的版本号、运行的平台等信息。,2,Location,对象,表示窗口中显示的当前网页的,URL,地址，可以使用该对象让浏览器打开某网页。,3,History,对象,表示窗口中最近访问网页的,URL,地址。,11.3.10,JavaScript,的内置对象,JavaScript,提供了一些内置的对象和函数，常用的,内置对象有：,1,string,对象,一般利用,string,对象提供的函数来处理字符串。,String,对象字符串的处理主要提供了以下方法：,substring(),、,charAt,(),、,indesOf,(),、,lastIndexOf,(),、,toLowerCase,(),、,toUpperCase,(),2,math,对象,math,对象包含用于各种数学运算的属性和方法，,math,对象的内置方法可以在不使用构造函数创建对象的情况直接调用。调用形式为：,math.,数学函数（参数）,3,date,对象,date,对象也就是日期对象，日期对象主要用于从系统中获得当前的日期和时间，设置当前日期和时间，在时间、日期同字符串之间转换。,4,array,对象,array,对象也就是数组对象，利用,new,构造数组对象。,JavaScript,和,C,语言一样，数组的下标从,“,0,”,开始的，创建数组后，能够用,“,”,符号访问数组元素。,5,事件对象,