网页制作高级特效教材课件汇总完整版ppt全套课件最全教学教程整本书电子教案全书教案课件合集

1、模块一HTML 高级特效123课题 使用 Emmet 高效布局网页课题 使用内嵌框架制作画中画特效课题 使用 HTML5 制作验证码特效目录课题 使用 Emmet 高效布局网页学习目标. 了解静态网站和静态网页的概念，能正确创建静态网站，建立和测试静态网页。. 掌握 Emmet 基本语法，能使用 Emmet 快速生成 HTML 和 CSS 代码，加快网站开发速度。相关知识静态网站是指全部由 HTML 代码格式页面组成的网站，完全采用 HTML 代码格式的网页通常被称为静态网页。课题 使用 Emmet 高效布局网页一、创建本地站点. 使用 Dreamweaver CS3 / CS4 创建本地站点

2、. 使用 Dreamweaver CS5 / CS6 / CC 创建本地站点课题 使用 Emmet 高效布局网页二、Emmet. Emmet 的简介Emmet 插件的前身为 Zen Coding，是一个文本编辑器的插件，使用 Emmet 可以快速生成 HTML 和 CSS 代码，从而加速 Web 前端开发。. Emmet 的安装目前很多流行的文本编辑器都支持 Emmet 插件。() Dreamweaver CS3() Dreamweaver CS6() Dreamweaver CC 2015课题 使用 Emmet 高效布局网页. Emmet 的使用任何一个 HTML 文档都具有一些默认的文档结

3、构，使用 Emmet 可以创建 HTML 文档初始结构。使用 Emmet 生成 HTML 文档初始结构课题 使用内嵌框架制作画中画特效学习目标掌握内嵌框架的用法，能在内嵌框架中正确显示文本、图像、动画和 HTML 文档，实现局部刷新，形成 “画中画” 的特效。相关知识一、内嵌框架iframe 是 Inline Frame 的缩写，也是框架的一种形式。与框架 ( frame) 不 同的是，iframe 非常灵活，可以嵌在网页的任意部分，将嵌入的文档与整个页面的内容相互融合，形成一个整体，因此 iframe 被称为内嵌框架或内联框架。课题 使用内嵌框架制作画中画特效使用内嵌框架可以将文本、图片、动

4、画或 HTML 文档嵌入在一个 HTML 中显示，结合数据库技术可以在静态页面中嵌入动态内容，实现数据的增加、删除、查询、修改等操作，形成 “画中画” 的效果。重载页面时不需要重载整个页面，只需要重载页面中的内嵌框架，减少了数据传输，增加了网页下载速度。课题 使用内嵌框架制作画中画特效二、内嵌框架的属性 iframe 标签的常用属性课题 使用内嵌框架制作画中画特效 iframe 标签的常用属性课题 使用 HTML5 制作验证码特效学习目标掌握 canvas 标签的用法，能使用 HTML5 的 canvas 标签和 JavaScript 制作 “验证码” 特效。相关知识“验证码” 是用一串随机产

5、生的数字或符号生成的一幅图片，其中还会加入一些干扰像素防止 OCR (Optical Character Recognition 光学字符识别)。使用时，用户肉眼识别其中的验证码信息，输入表单提交网站验证，验证成功后才能使用某项功能。使用验证码可以防止恶意破解密码、刷票、论坛灌水、刷页。不少网站为了防止用户利用机器人自动注册、登录、灌水，都采用了验证码技术。课题 使用 HTML5 制作验证码特效canvas 是在 HTML5中新增的标签，用于在网页实时生成图像，并且可以操作图像内容。使用 HTML5中的 canvas 标签再结合 JavaScript 可以制作 “验证码” 特效。课题 使用 H

6、TML5 制作验证码特效一、canvas 标签canvas 的中文含义为 “ 画布”，画布的坐标原点 (0，0) 在左上角，水平方向为 x 轴，垂直方向为 y 轴。canvas 标签和其他标签的用法一样，语法格式如下： 画布坐标课题 使用 HTML5 制作验证码特效绘制图形前，需要使用 getContext ( )方法返回一个用于在画布上绘图的环境，语法格式如下：canvas. getContext（ context ID ）其中，参数 context ID 指定了画布上绘制图形的类型，当前唯一的合法值是 “2d”，它指定了二维绘图 ( 即可以绘制直线、矩形、圆形、文本等)。目前 canvas

7、 标签不支持三维绘图。综上所述，使用 canvas 标签绘图的基本结构如下：无标题文档 课题 使用 HTML5 制作验证码特效var canvas=document.getElementById(myCanvas); /查找 id为 myCanvas的画布var ctx=canvas.getContext(2d); /获取该 canvas的2D绘图环境 /此处添加画图(直线、矩形、圆形、文本、图像等)语句课题 使用 HTML5 制作验证码特效二、基本图形的画法. 画直线ctx.moveTo(50，20)；/定义绘画开始的位置，将画笔移到坐标(50，20)ctx.lineTo(150，80)；/

8、画一条直线，结束点坐标是(150，80)ctx.lineWidth=2；/定义线的宽度ctx.strokeStyle=red；/定义描边颜色为红色。注意：要在 stroke( )之前使用ctx.stroke( )；/描边直线显示效果课题 使用 HTML5 制作验证码特效. 画矩形/* 1.绘制实心矩形 */ctx.fillStyle=#F00；ctx.fillRect(20，20，40，60)；/从画布上(20，20)开始，绘制宽40像素、高60像素的实心矩形/* 2. 绘制空心矩形 */ctx.strokeStyle=#0F0；/定义描边颜色为绿色ctx.strokeRect(80，20，4

9、0，60)；/从画布上(80，20)开始，绘制宽40像素、高60像素的空心矩形/* 3. 矩形的填充与描边 */课题 使用 HTML5 制作验证码特效ctx.rect(140，20，40，60)；/画矩形ctx.fillStyle=#EEE；/定义填充颜色为浅灰色ctx.fill( )；/填充。当矩形既有描边又有填充时，必须先填充ctx.strokeStyle=#000；/定义描边颜色为黑色ctx.strokeRect(140，20，40，60)；/在填充后，再描边，描边才能显示出来矩形显示效果课题 使用 HTML5 制作验证码特效. 画圆 (弧线)如果要创建一个圆形、半圆或弧线，可以使用 a

10、rc ( ) 方法。arc 的中文含义是 “ 弧线”，arc ( )方法是用一个中心点和半径，为一个画布的当前子路径添加一条弧线。一个圆的弧线是 360或 2 弧度 (用 Math. PI*2 表示)。画圆 (弧线) 的语法格式如下：课题 使用 HTML5 制作验证码特效arc 参数含义谢谢模块二JavaScript 高级特效31课题 JavaScript 语言基础2课题 JavaScript 对象化编程课题 制作表单验证类特效目录45678课题 制作层切换和层提示特效课题 制作菜单类特效课题 制作广告类特效课题 制作滚动类和日期类特效课题 制作网页辅助类特效课题 JavaScript 语言基

11、础学习目标. 了解 JavaScript 的概念，能编写简单的 JavaScript 程序。. 了解常量、变量、函数、运算符和优先级等概念，能正确运用常量、变量、函数和运算符，能按照优先级正确书写表达式。. 了解常用内部函数的用法，能根据需要自定义函数。. 了解数组的概念，能正确定义和引用数组。. 掌握分支语句和循环语句的使用方法，能进行顺序结构、分支结构和循环结构程序的设计。一、JavaScript 简介JavaScript 是一种基于对象和事件驱动的客户端脚本语言，是目前 Web 应用程序开发者使用最为广泛的客户端脚本编程语言。JavaScript 能通过 DOM ( Document O

12、bject Model，文档结构模型) 及自身提供的对象、操作方法实现所需的功能。JavaScript 采用事件驱动方式，能响应键盘事件、鼠标事件及浏览器窗口事件等，并执行指定的操作。课题 JavaScript 语言基础二、第一个 JavaScript 程序计算机程序是指一组指示计算机执行动作或做出判断的指令，通常用某种程序设计语言编写。一般情况下，计算机程序要编译成机器语言程序后再运行。还有一种未经编译就可运行的程序，通常称为 “ 脚本程序”。JavaScript 属于客户端脚本语言，VBScript ( 主要用于ASP) 属于服务器端脚本语言。课题 JavaScript 语言基础客户端脚本

13、和服务器端脚本比较编写 JavaScript 程序可选择普通的文本编辑器或集成开发环境。Dreamweaver 集成了JavaScript 开发环境，提供了强大的 JavaScript 支持。JavaScript 需要嵌入 HTML 中，即 JavaScript 的存在依赖于 HTML 文档。在 HTML 中，使用 标记引入 JavaScript ，使用 结束 JavaScript ，和 之间是 JavaScript 脚本。 可以放在 和 之间，也可以放在 和 之间。二者的区别是:) head 部分的脚本: 需调用才执行的脚本或事件触发执行的脚本放在 HTML 的 head部分。当把脚本放在

14、head 部分时，可以保证脚本在任何调用之前被加载。课题 JavaScript 语言基础) body 部分的脚本: 当页面被加载时立即执行的脚本放在 HTML 的 body 部分。放在 body 部分的脚本通常用来生成页面的内容。 标记有一个 language 属性，用于指明使用的语言，其值可以为 “JavaScript”“VBScript” 或者 “JScript”。 标记还有一个 type 属性，用于指明文本类型，其值为 “text / javascript”。课题 JavaScript 语言基础和 VBScript 不区分大小写不同，JavaScript 严格区分大小写。在编写 Java

15、Script 脚本语句时，用 “；” 作为当前语句的结束符。语句分行后，作为语句结束符的 “；” 可省略。也可将多个语句写在同一行中，若将多个语句写在同一行中，则语句之间的 “；” 不能省略。JavaScript 中的注释采用和 Java 中类似的方式，单行注释前加 “ / / ”，多行注释放在 “ / ” 和 “ / ” 之间。课题 JavaScript 语言基础三、常量和变量. 常量常量是程序执行过程中其值保持不变的量，有数值常量和字符串常量两种。在 VBScript中，字符串常量只能使用双引号作为定界符。与 VBScript 不同，在 JavaScript 中不仅允许使用双引号和单引号作

16、为定界符，而且允许双引号和单引号相互嵌套。课题 JavaScript 语言基础. 变量变量是程序执行过程中可能发生变化的量。使用 var 关键字对变量进行显式声明，不能使用 Var 和 VAR，JavaScript 对关键字的大小写敏感 (v 和 V 是不同的字符)。声明变量的语法格式如下:var 变量 值;变量可以在声明的同时赋值，也可以在声明后使用过程中再赋值。赋值语句的语法格式如下:变量 表达式;课题 JavaScript 语言基础变量的有效范围称为变量的作用域。JavaScript 有局部变量和全局变量两种变量。局部变量是指只能在本变量声明的函数内部调用的变量。全局变量是指在整个代码中

17、都可以调用的变量。JavaScript 中也可以隐式地使用变量，即不用声明，直接使用。注意，JavaScript 总是把隐式声明的变量当成全局变量来使用。课题 JavaScript 语言基础四、函数函数是指实现某一特定功能的小程序段，JavaScript 除了提供大量实用的内部函数外，还允许用户自定义函数。. 内部函数. 自定义函数使用自定义函数分为两个步骤: 函数定义和函数调用。一般情况下在 和 之间定义函数，在 和 之间调用函数。课题 JavaScript 语言基础五、运算符和优先级表达式是用运算符把常量、变量和函数连接起来的式子。一个表达式可以只包含一个常量或一个变量。运算符可以是四则运

18、算符、关系运算符、逻辑运算符、复合运算符等。在计算表达式的值时，按照运算符的优先级从高到低依次进行计算。优先级相同时，按照从左到右的顺序进行计算。使用( )可以改变计算的顺序。课题 JavaScript 语言基础六、数组数组是相同类型的变量按顺序组成的一种复合数据类型，这些相同类型的变量称为数组元素。数组通过数组名加索引来使用数组的元素。. 定义数组var 变量 new Array (元素1，元素2， ，元素 n )；. 引用数组数组名索引. 遍历数组在使用数组时，经常需要依次访问数组中的每个元素，这种操作称为数组的遍历。JavaScript 中数组遍历最简单的办法是使用 for 循环并用数组

19、长度 “ 数组名 . length” 作为 for 循环最大限度值。除此之外也可以使用 for in 循环。课题 JavaScript 语言基础七、语句. 输入与输出语句() 输入() 输出使用 document . write ( ) 方法在浏览器窗口输出，使用 alert ( ) 方法在对话框中输出。. 选择结构语句选择结构是按照给定的逻辑条件来决定执行的顺序，有单向选择、双向选择和多向选择之分，但是程序在执行过程中都只是执行其中的一条分支。选择语句分为 if 条件语句和 switch 语句。课题 JavaScript 语言基础() if 条件语句if (条件语句)执行语句;课题 Java

20、Script 语言基础) if else 语句if (条件)语句1;else语句2;) if else if else语句if (条件1)课题 JavaScript 语言基础语句1;else if(条件2)语句2;else语句3;课题 JavaScript 语言基础() switch 语句在 JavaScript 中，switch 语句也是选择结构中很常用的语句，功能与 if 语句类似。switch语句用于将一个表达式同多个值进行比较，并根据比较结果选择执行语句。语法格式如下:switch(表达式)case 值1:语句组1;break;case 值2:语句组2;break; case 值 n:

21、语句组 n;break;default:语句组 n 1;课题 JavaScript 语言基础. 循环结构语句循环结构可以实现将某一段代码多次重复执行，在 JavaScript 中可以使用 for 循环、for in 循环、while 循环和 do while 循环四种。() for 循环for 循环语句是最常用的循环语句，一般用在循环次数已知的情况下。for (初始化表达式;循环条件;操作表达式)循环体;课题 JavaScript 语言基础() for in循环for in 循环用于遍历数组或者对象的属性，即对数组或者对象的属性进行循环操作。for (变量 in 对象)循环体;课题 JavaS

22、cript 语言基础() while 循环while 循环在 “循环条件” 的值为真 (true) 时执行 “循环体”，否则结束循环。while (循环条件)循环体;课题 JavaScript 语言基础() do while 循环do while 循环与 while 循环类似，不同的是 do while 循环在判断 “循环条件” 的值之前先执行 “循环体”，也就是说至少会执行一次 “循环体”。do循环体;while (循环条件);课题 JavaScript 语言基础课题 JavaScript 对象化编程学习目标. 了解浏览器对象模型和文档对象模型，掌握 JavaScript 中常用的对象和事件

23、。. 能利用 JavaScript 中对象的属性、事件和方法，制作数字时钟特效、动态改变文本特效、打开新窗口特效、状态栏打印机特效和在状态栏设置日期时间特效。相关知识JavaScript是基于对象 (Object Based) 的编程语言。基于对象与面向对象 (Object Oriented) 不同，它不提供抽象、继承、重载等有关面向对象语言的功能。基于对象的编程语言仍具有一些面向对象的基本特征，可以根据需要创建自己的对象，进一步扩大语言的应用范围，编写出功能强大的 Web 文档。课题 JavaScript 对象化编程一、BOM 和 DOM 结构JavaScript 以 BOM 和 DOM 中

24、定义的对象模型及操作方法为基础，支持 BOM 和 DOM 提供的对象模型，根据其对象模型层次结构访问目标对象的属性并对对象施加相应的操作。BOM 是 Browser Odject Model 的缩写，即浏览器对象模型。BOM 提供独立于页面内容而与浏览器窗口进行交互的对象。DOM 是 Document Odject Model 的缩写，即文档对象模型。DOM 是 W3C 制定的标准。课题 JavaScript 对象化编程BOM 中定义了六种重要的对象:() window 对象表示浏览器中打开的窗口。() navigator 对象包含了有关浏览器的信息。() location 对象包含了浏览器当

25、前的 URL 信息。() document 对象表示浏览器中加载页面的文档对象。课题 JavaScript 对象化编程BOM 和 DOM 结构课题 JavaScript 对象化编程() history 对象包含了浏览器访问网页的历史信息。() screen 对象包含了客户端显示屏幕的信息。浏览器会为每一个网页自动创建 window 对象、navigater 对象、location 对象、document 对象、history 对象和 screen 对象。window 对象位于浏览器所有对象的最顶层，其他五个对象都是该 window 对象的子对象。课题 JavaScript 对象化编程二、Jav

26、aScript 对象在JavaScript 中，对象是一种特殊的数据，拥有属性和方法。属性是指与对象有关的值，方法是指对象可以执行的行为 (或者可以完成的功能)。课题 JavaScript 对象化编程属性与方法的引用. window 对象window 对象对应 Web 浏览器的窗口，使用它可以直接对浏览器窗口进行操作。window 对象提供的主要功能可以分为以下 5 类: 调整窗口的大小和位置、打开新窗口、系统提示框、状态栏控制和定时操作。() 调整窗口的大小和位置课题 JavaScript 对象化编程调整窗口的大小和位置的方法() 打开新窗口window 对象的 open ( )方法用于从一

27、个窗口中新开一个窗口。课题 JavaScript 对象化编程系统提示框的方法() 系统提示框() 状态栏控制window 对象的 status 属性可设置或返回窗口状态栏中的文本。浏览器状态栏的显示信息可以通过 window . status 属性直接进行修改。设置在状态栏中显示文本的代码如下:window . status=显示文本在状态栏!;课题 JavaScript 对象化编程课题 JavaScript 对象化编程定时操作的方法() 定时操作课题 JavaScript 对象化编程. document 对象document 对象是 window 对象的子对象，每个载入浏览器的 HTML 文

28、档都会成为 document对象。document 对象包含当前文档的信息，如标题、背景颜色、表单、表格等。document 对象常用于向浏览器输出内容或者获得当前文档中的信息。. form 对象form 对象是 document 对象的一个子对象，表示表单对象。一个文档中的每一个表单都是独立的、互不关联的对象，document . formName 或 document . forms index 用于获取对某个form 的引用，其中 index 的值在 0 到此文档中的 form 数减 1 之间。获取指定的 form 对象后，就可以使用它来获取 form 中的各个元素。课题 JavaScr

29、ipt 对象化编程. screen 对象screen 对象包含有关客户端显示屏幕的信息。JavaScript 程序可以利用这些信息优化它们的输出，以达到用户的显示要求。. JavaScript 核心对象JavaScript 核心对象是 ECMAScript 标准定义的一些对象与函数。课题 JavaScript 对象化编程JavaScript 核心对象三、JavaScript 事件课题 JavaScript 对象化编程JavaScript 常用事件课题 制作表单验证类特效学习目标. 能使用 JavaScript 函数实现表单验证。. 能使用正则表达式实现即时提示错误的表单验证。相关知识JavaS

30、cript 可以实现在数据被送往服务器前对 HTML 表单中的输入数据进行验证。被 JavaScript 验证的典型表单数据包括: 用户是否已填写表单中的必填项目、用户输入的邮件地址是否合法、用户是否已输入合法的日期、用户是否在数据域中输入了文本。课题 制作表单验证类特效. 获取表单元素的值document . 表单名称.表单元素名称 . value. 判断表单元素值是否满足条件. 设置表单的 onsubmit 提交事件. this 关键字如果在 JavaScript 的 “ 主程序” 中 ( 不在任何 function 中，不在任何事件处理程序中)使用 this ，它代表 window 对象

31、。如果在事件处理程序中使用 this ，它代表发生事件的对象。课题 制作表单验证类特效二、正则表达式正则表达式 ( Regular Expression) 描述了强大的模式匹配和文本检索与替换函数的方法，用于检查字符串是否含有某子串、将匹配的子串进行替换或者从某字符串抽取出符合条件的子串等。. RegExp 对象RegExp 对象表示正则表达式，是对字符串执行模式匹配的强大工具。() 直接量语法/ pattern /attributes() 创建 RegExp 对象的语法new RegExp(pattern，attributes) 课题 制作表单验证类特效. 修饰符. 方括号. 元字符. 量词

32、. RegExp 对象属性. RegExp 对象方法. 支持正则表达式的 String 对象的方法. 正则表达式符号总表. 常用正则表达式课题 制作表单验证类特效课题 制作表单验证类特效常用正则表达式课题 制作层切换和层提示特效学习目标. 能制作层切换特效。. 能制作层提示特效。相关知识一、getElementById ( )方法getElementById ( ) 方法根据指定的 id 属性值获取对象。假如对应的为一组对象，则返回该组对象中的第一个，即 getElementById ( ) 方法可返回拥有指定 id 的第一个对象的引用。在操作文档的一个特定元素时，最好给该元素一个id 属性，

33、在文档中为它指定一个唯一的名称，然后就可以用该 id 查找想要的元素。Elementdocument . getElementById(“id”) ;课题 制作层切换和层提示特效二、display 属性display 属性设置元素如何显示，其值为 “none” 时，元素不会被显示；其值为 “block”时，元素将显示为块级元素，元素前后会带有换行符。Object . style . display“none block ;课题 制作层切换和层提示特效三、层切换和层提示制作原理. 获取对象，设置显示属性. 初始时隐藏所有对象. 显示对象. 隐藏对象. 移入时显示对象，移出时隐藏对象课题 制作层切

34、换和层提示特效课题 制作菜单类特效学习目标. 能制作纯 HTML CSS 的菜单特效。. 能制作 JavaScript CSS 的菜单特效。相关知识一、导航菜单导航菜单是网页设计中不可缺少的部分，是人们浏览网站时从一个页面转到另一个页面的快速通道。导航菜单的种类繁多，最基本的有三种形式: 横向导航菜单、纵向导航菜单和下拉式菜单。制作导航菜单的技术有很多，可以采用纯 HTML CSS 、JavaScript CSS 或 jQuery 等技术制作菜单特效。课题 制作菜单类特效二、HTML CSS 二级菜单制作原理不使用 JavaScript，只使用 HTML CSS 也能制作出精美的二级菜单特效，

35、其原理是使用:hover 伪类控制子选项的显示与隐藏。. 增加专门用于控制导航菜单的 Div. 一级菜单设置. 二级菜单设置() 二级菜单定位与隐藏() 二级菜单显示() 二级菜单变换链接效果设置课题 制作菜单类特效三、JavaScript CSS 二级菜单制作原理() 每个一级菜单都对应一个层，而这个层里存放着该一级菜单对应的二级菜单。二级菜单排列形状不同，就构成了不同形式的菜单。如果排列成横向，制作出来的就是横向导航菜单；如果排列成纵向，制作出来的就是纵向导航菜单。() 默认情况下，二级菜单这个层是隐藏的。通过 标签 onload 事件调用初始化函数，在 CSS 中将需要被隐藏层的 dis

36、play 属性值设为 “none”，可以达到此目的。() 当鼠标移入一级菜单时，对应的二级菜单层显示。在 JavaScript 中通过鼠标移入事件 onmouseover 调用自定义的显示层函数，将层的 display 属性值设为 “block”。课题 制作菜单类特效() 当鼠标从一级菜单中移开时，对应的二级菜单层隐藏。在 Javascript 中通过鼠标移出事件 onmouseout 调用自定义的隐藏层函数，将层的 display 属性值设为 “none”。() 鼠标从一级菜单移到二级菜单上时，二级菜单也不能隐藏，因此，对二级菜单必须将其设为: 当鼠标移入时显示当前层，当鼠标移出时隐藏当前层

37、。课题 制作菜单类特效课题 制作广告类特效学习目标. 能制作路径不固定、可关闭的漂浮广告特效。. 能制作可关闭的对联广告特效。. 能制作带数字导航的横幅广告特效。. 能制作可折叠的商品分类广告特效。相关知识一、路径不固定的漂浮广告漂浮广告 (Floating Advertising) 是指漂浮在网站首页或各版块、帖子等页面的漂移形式的广告。课题 制作广告类特效漂浮路径示意图. 运动轨迹的控制. 暂停与继续移动的控制. 关闭的控制课题 制作广告类特效二、对联广告对联广告是指利用网站页面左右两侧的竖式广告位而设计的广告形式。课题 制作广告类特效可关闭对联广告. 在网站上挂对联. 对联广告随页面浏览

38、跟随移动实现对联广告随页面浏览跟随移动特效，必须获取当前页面的滚动条纵坐标，并根据用户操作动态调整滚动条纵坐标。课题 制作广告类特效三、带数字导航的横幅广告横幅广告 (Banner Ad) 是横跨于网页上的矩形公告牌，表现商家广告内容的图片放置在页面上，当单击这些横幅的时候，通常可以链接到广告主的网页。课题 制作广告类特效带数字导航的横幅广告. 轮播广告. 切换广告四、可折叠的商品分类广告在商品分类下，单击某类商品可展开该分支，再次单击该类商品可折叠该分支。课题 制作广告类特效可折叠的商品分类广告. eval ( )函数. 可折叠商品广告核心代码分析课题 制作广告类特效课题 7制作滚动类和日期

39、类特效学习目标. 能制作无缝文字滚动广告特效。. 能制作无缝图片滚动广告特效。. 能制作可手动控制的无缝图片滚动广告特效。. 能制作日历显示特效。. 能制作倒计时特效。相关知识一、 无缝文字滚动广告. Marquee 标记的缺陷制作文字滚动类特效时，可使用 Marquee 标记来实现文字在水平或垂直方向上的滚动。在文字滚动的过程中，总会有一段时间出现无滚动文字的情况，这是使用 Marquee 标记制作文字滚动类特效的一个缺陷。 为了弥补这个缺陷，可使用 Div 层和 JavaScript 脚本代码实现广告的无缝连续滚动。课题 7制作滚动类和日期类特效. 无缝滚动原理课题 7制作滚动类和日期类特

40、效准备滚动课题 7制作滚动类和日期类特效滚动中. 暂停与继续滚动设置一个实时器，当鼠标移入时清除定时器，达到暂停的目的。 当鼠标移出时，重新设置定时器，继续滚动。二、 无缝图片滚动广告无缝图片滚动广告的工作原理与无缝文字滚动广告相同，区别是滚动方向不同。 无缝文字滚动广告从下向上滚动，无缝图片滚动广告从右向左滚动。课题 7制作滚动类和日期类特效滚动到交界时还原制作无缝图片滚动广告与制作无缝文字滚动广告有两点不同:() 需要把无缝文字滚动源程序中的 offsetTop 改成 offsetLeft ，offsetHeight 改成 offsetWidth。() 为了使图片水平排列，需要多添加一个

41、Div，并设置左浮动。课题 7制作滚动类和日期类特效无缝图片滚动广告三、 可手动控制的无缝图片滚动广告在无缝图片滚动的基础上，增加左、 右两个箭头，当鼠标单击左、 右箭头时，可以手动控制图片的滚动，当释放鼠标时，图片继续无缝滚动。. 移动宽度. 变速移动课题 7制作滚动类和日期类特效可手动控制的无缝图片滚动广告四、 日历显示. 年、 月、 日的获取. 时、 分、 秒的获取. 星期的获取. 输出日历课题 7制作滚动类和日期类特效日历显示特效五、 倒计时倒计时是从未来某一时间点向现在计算时间，用于表示距离某一期限还有多少时间。课题 7制作滚动类和日期类特效倒计时特效课题 8 制作网页辅助类特效学习

42、目标. 能制作设为主页和添加收藏特效。. 能使用 JavaScript 动态改变 CSS。. 能制作全国省、 市、 区三级联动特效。相关知识一、 设为主页和添加收藏. 设为主页() 通过 IE 浏览器 “Internet 选项” 设置主页的方法打开 IE 浏览器工具菜单 Internet 选项常规主页 (文本框中输入要设为主页的网址) 确定关闭浏览器。() 通过 JavaScript 程序代码设置主页设为首页 课题 8 制作网页辅助类特效. 添加收藏收藏夹可以让用户上网时方便记录自己喜欢的、 常用的网站。收藏网页的方法有多种:() 使用 IE 浏览器 “收藏夹” 菜单中 “添加到收藏夹” 命令

43、收藏网页。() 使用快捷键 【Ctrl D】收藏网页。() 使用 JavaScript 程序代码收藏网页。通过 JavaScript 程序代码添加收藏的语法格式如下:课题 8 制作网页辅助类特效二、 使用 JavaScript 动态改变 CSSCSS 用于网页中样式的定义，它起到了美化网页的作用。 通过 JavaScript 和 CSS 联合使用，可以动态加载不同的 CSS 样式表文件，实现同一网页显示效果的 “大变脸”。三、 省、 市、 区三级联动省、 市、 区三级联动的显示效果: 选择省份后，自动显示该省所辖各市信息，选择城市后，自动显示该市所辖区或县信息。课题 8 制作网页辅助类特效谢谢

44、模块三 Flash 高级特效31课题 ActionScript 语言基础2课题 制作菜单类特效课题 制作 UI 类特效目录456课题 制作鼠标类特效课题 制作时钟类特效课题 制作 Loading 预载特效课题 ActionScript 语言基础学习目标. 能使用 “动作” 面板创建动作。. 掌握常量、 变量、 函数、 运算符的概念，能根据需要正确书写表达式，能正确自定义函数。. 掌握分支语句、 循环语句和常用动作脚本语句，能在帧、 按钮和影片剪辑上添加动作脚本语句，实现一定的动画效果。相关知识一、 ActionScript 简介ActionScript 的中文名称为 “ 动作脚本”，它是 Fl

45、ash 专用的一种编程语言，用于控制 Flash 内容的播放方式。课题 ActionScript 语言基础二、 第一个 ActionScript 程序() ActionScript 3.0和 ActionScript 2.0不完全兼容。() ActionScript 脚本代码只能添加到关键帧、 按钮和影片剪辑中。与时序有关的行为(如到达某一时刻就执行某一行为) 必须添加到关键帧上；与事件相关的行为 (如单击鼠标就执行某一行为) 必须添加到按钮或影片剪辑上。()“动作” 面板有两种不同的工作模式: 标准模式和专家模式。() trace 语句在测试模式下计算表达式并在 “输出” 面板中显示结果。

46、trace 输出的信息只能在测试影片 (.fla文件) 时观察到， 导出影片 (.swf文件) 后就不能显示任何信息。课题 ActionScript 语言基础() ActionScript 中使用 “ / ” 表示单行注释，使用 “ / ” 表示多行注释，从 “ /”开始，到 “/ ” 结束。课题 ActionScript 语言基础转义符三、 常量和变量. 常量常量是程序运行过程中其值保持不变的量，包括数值型、 字符串型和逻辑型三种类型。() 数值型常量该类常量是具体的数值，常用于表示参数的值。() 字符串型常量与数值型常量不同的是，该类常量必须在字符串的两端添加双引号。() 逻辑型常量该类常

47、量又称布尔型常量，它用于表明一个条件是否成立，如果成立，用 true 或非 0 值(如 ) 表示 如果不成立，用 flase 或 0 表示。课题 ActionScript 语言基础. 变量变量是程序执行过程中可以被改变的量。() 变量的命名规则) 第一个字符必须是字母、 下划线或符号 “”，后面的字符可以是字母、 数字、 下划线和符号 “” 的有效组合，避免使用空格和句号等。) 不能使用 ActionScript 保留的关键字，if、 for 等关键字不能用作变量名。) 不能使用布尔值 true 或 false 作为变量名。) 变量名尽量具有一定的含义，做到见名知义，以便于区分和记忆。 在保持

48、意义明确的同时尽可能使用短变量名。) 变量名在其作用范围内必须是唯一的。) 使用变量前要先定义再使用。课题 ActionScript 语言基础() 变量的类型) 按变量的作用划分数值型 ( Number ) 变量: 一般用于存储一些特定的数值，如年龄等。逻辑型变量: 用于判断指定的条件是否成立，其值有两种，即 true 或 false 。字符串型 ( String ) 变量: 主要用于保存特定的文本信息，如姓名等。对象型 ( Object ) 变量: 用于存储对象型的数据。影片剪辑型 (MovieClip) 变量: 用于存储影片剪辑型数据。未定义型 (undefined) 变量: 当一个变量没

49、有定义任何类型时，即为未定义型。课题 ActionScript 语言基础) 按变量的作用范围划分全局变量: 全局变量是指在整个文件中都有效的变量。 如果要声明一个全局变量，只要给该变量直接赋值或者使用 set 语句赋值即可。变量名表达式;set(变量名,表达式);局部变量: 局部变量的作用范围是它所在的程序段，可以使用 var 语句声明一个局部变量。 var 变量名;var 变量名=表达式;课题 ActionScript 语言基础) 按强弱程度划分弱类型变量 (weak typing): 弱类型变量是不显式指定数据类型的变量。 var 变量名;强类型变量 (strong typing): 强类

50、型变量是指定数据类型的变量。 var 变量:变量类型;利用强类型变量可以让编译器帮助用户处理数据类型问题。 强类型变量包括变量的类型信息，编译器每次使用变量时，都会检查被赋予的数据与被赋予变量的类型是否匹配。 无论何时编译器发现一个潜在的数据类型不兼容，它都会报告错误并且拒绝完成编译。课题 ActionScript 语言基础四、 函数. 函数的概念及分类函数是执行特定任务并可以在程序中重用的代码块。 利用函数编程，可以重复利用代码，提高编程效率。Flash 函数分为标准函数 (全局函数) 和自定义函数两种。. 标准函数 (全局函数)标准函数是 Flash 自带的已经编写好的函数，用户只需直接调

51、用即可，如最大值函数 max( )、 最小值函数 min( )、 随机函数 random( )等。课题 ActionScript 语言基础. 自定义函数自定义函数由用户根据需要自行定义，在 Flash 中可以使用 function 语句创建自定义函数。() 自定义函数的语法格式functin 函数名(参数:参数类型,参数:参数类型,):函数返回数据类型函数体;课题 ActionScript 语言基础() 调用函数() 传递参数() 自定义函数中常见的错误() 从函数返回值有时函数可以像使用子程序一样，不返回值。 有时函数在进行某些计算或操作后，返回一个值。在函数中使用 return 语句返回一

52、个特定的值， return 语句会将其结果立即返回给发出调用的代码。returnexpression;课题 ActionScript 语言基础() 编写匿名函数ActionScript 中除了支持使用标准的、 命名的函数语法定义函数外，还支持使用匿名函数，即允许创建一个没有名字的函数，然后将该函数赋予一个变量。 var 变量:变量类型function(参数1:参数类型,参数2:参数类型,):函数返回类型函数体;课题 ActionScript 语言基础五、 运算符. 算术运算符. 比较运算符课题 ActionScript 语言基础算术运算符比较运算符. 字符串运算符 进行连接时，对于不是字符串类

53、型的数值，先将其转换成字符串，再进行连接。 如果要将两个数字类型的数字进行连接，可以借助空字符串。. 逻辑运算符课题 ActionScript 语言基础逻辑运算符. 赋值运算符赋值运算符的一种特殊形式是条件运算符，其语法格式如下:变量条件?数值:数值/如果条件成立,则为数值1;如果不满足,则为数值2课题 ActionScript 语言基础赋值运算符. 点运算符点运算符用来连接对象与嵌套在对象中的子对象，以及访问对象的属性和方法。. 数组访问运算符 数组是一个对象，其属性称为元素，这些元素由称作索引的数字逐一标识。 创建数组时，需用数组访问运算符 (即方括号 ) 括住元素。 一个数组可以包含各种

54、类型的元素。. typeof 运算符typeof 运算符返回一个用于标识表达式的数据类型的字符串，可能的返回值为 string、movieclip、 object、 function、 number 或 boolean。课题 ActionScript 语言基础六、 语句ActionScript 中的基本语句分为条件语句、 循环语句和动作脚本语句三大类。. 条件语句程序要实现交互性，就必须对程序服务对象提交的数据做出判断。 ActionScript 提供了四种可用来控制程序流的基本条件语句，即 if 、 ifelse、 if else if 和 switch 语句。. 循环语句循环语句可以将一段

55、代码块多次重复执行。 ActionScript 提供了 for 循环、 for in循环、while 循环和 do while 循环四种。课题 ActionScript 语言基础. 常用动作脚本语句() 影片剪辑控制) on ( )语句指定触发动作的鼠标事件或按键。 当事件发生时，执行该事件后面大括号 ( ) 中的语句。 on(mouseEvent) statements; ) onClipEvent ( ) 语句触发为特定影片剪辑实例定义的动作。 当事件发生时，执行该事件后面大括号 ( ) 中的语句。 onClipEvent(movieEvent) statements; 课题 Action

56、Script 语言基础) startDrag ( ) 语句使指定影片剪辑在影片播放过程中可拖动。 一次只能拖动一个影片剪辑。 执行 startDrag( ) 操作后，影片剪辑将保持可拖动状态，直到用 stopDrag( ) 显式停止拖动为止，或直到对其他影片剪辑调用了 startDrag( ) 动作为止。 startDrag(target,lock,left,top,right,bottom) ; ) stopDrag( ) 语句停止当前由 stopDrag( ) 语句设定的拖动操作。 stopDrag ( );课题 ActionScript 语言基础) setProperty( ) 语句当影

57、片剪辑播放时，更改影片剪辑的属性值。 setProperty(target,property,value);) getProperty()语句返回指定影片剪辑的指定属性的值。 语法格式如下:getProperty(instancename,property) duplicateMovieClip( )语句复制指定的影片剪辑，创建一个新的影片剪辑的实例。duplicateMovieClip(target,newname,depth);) removeMovieClip( )语句删除指定的影片剪辑。removeMovieClip(target);课题 ActionScript 语言基础() 时间轴

58、控制) play( )语句在时间轴中向前移动播放头，从当前位置开始播放 swf 文件。 play( ); ) stop( )语句停止当前正在播放的 swf 文件。 此动作最通常的用法是用按钮控制影片剪辑。 stop( ) ;课题 ActionScript 语言基础) gotoAndPlay ( )语句将播放头转到场景中指定的帧并从该帧开始播放。 如果未指定场景，则播放头将转到当前场景中的指定帧。 gotoAndPlay ( scene,frame );) gotoAndStop ( ) 语句将播放头转到场景中指定的帧并停止播放，如果未指定场景，播放头将转到当前场景中的帧。gotoAndStop

59、 ( scene,frame);课题 ActionScript 语言基础() 浏览器 / 网络语句) fscommand ( ) 语句使 swf 文件与 Flash 播放器或承载 Flash 播放器的程序 ( 如 Web 浏览器) 进行通信。 fscommand (command,parameters);) getURL ( ) 语句将来自特定 URL 的文档加载到窗口中，或将变量传递到位于所定义 URL 的另一个应用程序。 getURL (url,window,method);) loadMovie ( ) 语句在播放原始 swf 文件时，将 swf 文件加载到 Flash 播放器中的影片剪

60、辑中。 loadMovie (url,target,method);课题 ActionScript 语言基础) unloadMovie ( ) 语句从 Flash 播放器中删除通过 loadMovie ( ) 加载的影片剪辑。 unloadMovie (target);() with ( ) 语句with ( ) 语句用于指定一个对象，并计算该对象内的表达式和动作。 其作用是简化代码不用重复书写对象的名称或路径。 with (object)statements;with ( ) 语句用于对指定的对象执行一系列的语句，但不需要重复说明对象的名称。 如果要修改一个对象的多个属性，可以将所有属性赋值