CH11 网页特效

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