网页制作高级特效课件整套电子教案.ppt

《网页制作高级特效课件整套电子教案.ppt》由会员分享，可在线阅读，更多相关《网页制作高级特效课件整套电子教案.ppt（151页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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

2、代码格式的网页通常被称为静态网页。课题课题 使用使用 Emmet 高效布局网页高效布局网页一、创建本地站点. 使用使用 Dreamweaver CS3 / CS4 创建本地站点创建本地站点. 使用使用 Dreamweaver CS5 / CS6 / CC 创建本地站点创建本地站点课题课题 使用使用 Emmet 高效布局网页高效布局网页二、Emmet. Emmet 的简介的简介Emmet 插件的前身为 Zen Coding，是一个文本编辑器的插件，使用 Emmet 可以快速生成 HTML 和 CSS 代码，从而加速 Web 前端开发。. Emmet 的安装的安装目前很多流行的文本编辑器都支持 E

3、mmet 插件。() Dreamweaver CS3() Dreamweaver CS6() Dreamweaver CC 2015课题课题 使用使用 Emmet 高效布局网页高效布局网页. Emmet 的使用的使用任何一个 HTML 文档都具有一些默认的文档结构，使用 Emmet 可以创建 HTML 文档初始结构。使用 Emmet 生成 HTML 文档初始结构课题课题 使用内嵌框架制作画中画特效使用内嵌框架制作画中画特效v 学习目标掌握内嵌框架的用法，能在内嵌框架中正确显示文本、图像、动画和 HTML 文档，实现局部刷新，形成 “画中画” 的特效。v 相关知识一、内嵌框架iframe 是 I

4、nline Frame 的缩写，也是框架的一种形式。与框架 ( frame) 不 同的是，iframe 非常灵活，可以嵌在网页的任意部分，将嵌入的文档与整个页面的内容相互融合，形成一个整体，因此 iframe 被称为内嵌框架或内联框架。课题课题 使用内嵌框架制作画中画特效使用内嵌框架制作画中画特效使用内嵌框架可以将文本、图片、动画或 HTML 文档嵌入在一个 HTML 中显示，结合数据库技术可以在静态页面中嵌入动态内容，实现数据的增加、删除、查询、修改等操作，形成 “画中画” 的效果。重载页面时不需要重载整个页面，只需要重载页面中的内嵌框架，减少了数据传输，增加了网页下载速度。课题课题 使用内

5、嵌框架制作画中画特效使用内嵌框架制作画中画特效二、内嵌框架的属性 iframe 标签的常用属性课题课题 使用内嵌框架制作画中画特效使用内嵌框架制作画中画特效 iframe 标签的常用属性课题课题 使用使用 HTML5 制作验证码特效制作验证码特效v 学习目标掌握 canvas 标签的用法，能使用 HTML5 的 canvas 标签和 JavaScript 制作 “验证码” 特效。v 相关知识“验证码” 是用一串随机产生的数字或符号生成的一幅图片，其中还会加入一些干扰像素防止 OCR (Optical Character Recognition 光学字符识别)。使用时，用户肉眼识别其中的验证码信

6、息，输入表单提交网站验证，验证成功后才能使用某项功能。使用验证码可以防止恶意破解密码、刷票、论坛灌水、刷页。不少网站为了防止用户利用机器人自动注册、登录、灌水，都采用了验证码技术。课题课题 使用使用 HTML5 制作验证码特效制作验证码特效canvas 是在 HTML5中新增的标签，用于在网页实时生成图像，并且可以操作图像内容。使用 HTML5中的 canvas 标签再结合 JavaScript 可以制作 “验证码” 特效。课题课题 使用使用 HTML5 制作验证码特效制作验证码特效一、canvas 标签canvas 的中文含义为 “ 画布”，画布的坐标原点 (0，0) 在左上角，水平方向为

7、x 轴，垂直方向为 y 轴。canvas 标签和其他标签的用法一样，语法格式如下： 画布坐标课题课题 使用使用 HTML5 制作验证码特效制作验证码特效绘制图形前，需要使用 getContext ( )方法返回一个用于在画布上绘图的环境，语法格式如下：canvas. getContext（ context ID ）其中，参数 context ID 指定了画布上绘制图形的类型，当前唯一的合法值是 “2d”，它指定了二维绘图 ( 即可以绘制直线、矩形、圆形、文本等)。目前 canvas 标签不支持三维绘图。综上所述，使用 canvas 标签绘图的基本结构如下：无标题文档 课题课题 使用使用 HTM

8、L5 制作验证码特效制作验证码特效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)；/画一条直线，结束点坐标是(150，80)ctx.lineWidt

9、h=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，40，60)；/从画布上(

10、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 制作验证码特效制作验证码特效. 画圆画圆 (弧线弧线)如果要创建

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

12、题 制作网页辅助类特效课题课题 JavaScript 语言基础语言基础v 学习目标. 了解了解 JavaScript 的概念，能编写简单的的概念，能编写简单的 JavaScript 程序。程序。. 了解常量、变量、函数、运算符和优先级等概念，能正确运用常量、了解常量、变量、函数、运算符和优先级等概念，能正确运用常量、变量、函数和运算符，能按照优先级正确书写表达式。变量、函数和运算符，能按照优先级正确书写表达式。. 了解常用内部函数的用法，能根据需要自定义函数。了解常用内部函数的用法，能根据需要自定义函数。. 了解数组的概念，能正确定义和引用数组。了解数组的概念，能正确定义和引用数组。. 掌握分

13、支语句和循环语句的使用方法，能进行顺序结构、分支结构和掌握分支语句和循环语句的使用方法，能进行顺序结构、分支结构和循环结构程序的设计。循环结构程序的设计。一、JavaScript 简介JavaScript 是一种基于对象和事件驱动的客户端脚本语言，是目前 Web 应用程序开发者使用最为广泛的客户端脚本编程语言。JavaScript 能通过 DOM ( Document Object Model，文档结构模型) 及自身提供的对象、操作方法实现所需的功能。JavaScript 采用事件驱动方式，能响应键盘事件、鼠标事件及浏览器窗口事件等，并执行指定的操作。课题课题 JavaScript 语言基础语

14、言基础二、第一个 JavaScript 程序计算机程序是指一组指示计算机执行动作或做出判断的指令，通常用某种程序设计语言编写。一般情况下，计算机程序要编译成机器语言程序后再运行。还有一种未经编译就可运行的程序，通常称为 “ 脚本程序”。JavaScript 属于客户端脚本语言，VBScript ( 主要用于ASP) 属于服务器端脚本语言。课题课题 JavaScript 语言基础语言基础客户端脚本和服务器端脚本比较编写 JavaScript 程序可选择普通的文本编辑器或集成开发环境。Dreamweaver 集成了JavaScript 开发环境，提供了强大的 JavaScript 支持。JavaS

15、cript 需要嵌入 HTML 中，即 JavaScript 的存在依赖于 HTML 文档。在 HTML 中，使用 标记引入 JavaScript ，使用 结束 JavaScript ，和 之间是 JavaScript 脚本。 可以放在 和 之间，也可以放在 和 之间。二者的区别是:) head 部分的脚本: 需调用才执行的脚本或事件触发执行的脚本放在 HTML 的 head部分。当把脚本放在 head 部分时，可以保证脚本在任何调用之前被加载。课题课题 JavaScript 语言基础语言基础) body 部分的脚本: 当页面被加载时立即执行的脚本放在 HTML 的 body 部分。放在 bo

16、dy 部分的脚本通常用来生成页面的内容。 标记有一个 language 属性，用于指明使用的语言，其值可以为 “JavaScript”“VBScript” 或者 “JScript”。 标记还有一个 type 属性，用于指明文本类型，其值为 “text / javascript”。课题课题 JavaScript 语言基础语言基础和 VBScript 不区分大小写不同，JavaScript 严格区分大小写。在编写 JavaScript 脚本语句时，用 “；” 作为当前语句的结束符。语句分行后，作为语句结束符的 “；” 可省略。也可将多个语句写在同一行中，若将多个语句写在同一行中，则语句之间的 “；

17、” 不能省略。JavaScript 中的注释采用和 Java 中类似的方式，单行注释前加 “ / / ”，多行注释放在 “ / ” 和 “ / ” 之间。课题课题 JavaScript 语言基础语言基础三、常量和变量. 常量常量常量是程序执行过程中其值保持不变的量，有数值常量和字符串常量两种。在 VBScript中，字符串常量只能使用双引号作为定界符。与 VBScript 不同，在 JavaScript 中不仅允许使用双引号和单引号作为定界符，而且允许双引号和单引号相互嵌套。课题课题 JavaScript 语言基础语言基础. 变量变量变量是程序执行过程中可能发生变化的量。使用 var 关键字对

18、变量进行显式声明，不能使用 Var 和 VAR，JavaScript 对关键字的大小写敏感 (v 和 V 是不同的字符)。声明变量的语法格式如下:var 变量 值;变量可以在声明的同时赋值，也可以在声明后使用过程中再赋值。赋值语句的语法格式如下:变量 表达式;课题课题 JavaScript 语言基础语言基础变量的有效范围称为变量的作用域。JavaScript 有局部变量和全局变量两种变量。局部变量是指只能在本变量声明的函数内部调用的变量。全局变量是指在整个代码中都可以调用的变量。JavaScript 中也可以隐式地使用变量，即不用声明，直接使用。注意，JavaScript 总是把隐式声明的变量

19、当成全局变量来使用。课题课题 JavaScript 语言基础语言基础四、函数函数是指实现某一特定功能的小程序段，JavaScript 除了提供大量实用的内部函数外，还允许用户自定义函数。. 内部函数内部函数. 自定义函数自定义函数使用自定义函数分为两个步骤: 函数定义和函数调用。一般情况下在 和 之间定义函数，在 和 之间调用函数。课题课题 JavaScript 语言基础语言基础五、运算符和优先级表达式是用运算符把常量、变量和函数连接起来的式子。一个表达式可以只包含一个常量或一个变量。运算符可以是四则运算符、关系运算符、逻辑运算符、复合运算符等。在计算表达式的值时，按照运算符的优先级从高到低依

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

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

22、cript 语言基础语言基础) 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;b

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

24、进行循环操作。for (变量 in 对象)循环体;课题课题 JavaScript 语言基础语言基础() while 循环while 循环在 “循环条件” 的值为真 (true) 时执行 “循环体”，否则结束循环。while (循环条件)循环体;课题课题 JavaScript 语言基础语言基础() do while 循环do while 循环与 while 循环类似，不同的是 do while 循环在判断 “循环条件” 的值之前先执行 “循环体”，也就是说至少会执行一次 “循环体”。do循环体;while (循环条件);课题课题 JavaScript 语言基础语言基础课题课题 JavaScrip

25、t 对象化编程对象化编程v 学习目标. 了解浏览器对象模型和文档对象模型，掌握了解浏览器对象模型和文档对象模型，掌握 JavaScript 中常用的对象中常用的对象和事件。和事件。. 能利用能利用 JavaScript 中对象的属性、事件和方法，制作数字时钟特效、中对象的属性、事件和方法，制作数字时钟特效、动态改变文本特效、打开新窗口特效、状态栏打印机特效和在状态栏设置日期动态改变文本特效、打开新窗口特效、状态栏打印机特效和在状态栏设置日期时间特效。时间特效。v相关知识JavaScript是基于对象 (Object Based) 的编程语言。基于对象与面向对象 (Object Oriented

26、) 不同，它不提供抽象、继承、重载等有关面向对象语言的功能。基于对象的编程语言仍具有一些面向对象的基本特征，可以根据需要创建自己的对象，进一步扩大语言的应用范围，编写出功能强大的 Web 文档。课题课题 JavaScript 对象化编程对象化编程一、BOM 和 DOM 结构JavaScript 以 BOM 和 DOM 中定义的对象模型及操作方法为基础，支持 BOM 和 DOM 提供的对象模型，根据其对象模型层次结构访问目标对象的属性并对对象施加相应的操作。BOM 是 Browser Odject Model 的缩写，即浏览器对象模型。BOM 提供独立于页面内容而与浏览器窗口进行交互的对象。DO

27、M 是 Document Odject Model 的缩写，即文档对象模型。DOM 是 W3C 制定的标准。课题课题 JavaScript 对象化编程对象化编程BOM 中定义了六种重要的对象:() window 对象表示浏览器中打开的窗口。() navigator 对象包含了有关浏览器的信息。() location 对象包含了浏览器当前的 URL 信息。() document 对象表示浏览器中加载页面的文档对象。课题课题 JavaScript 对象化编程对象化编程BOM 和 DOM 结构课题课题 JavaScript 对象化编程对象化编程() history 对象包含了浏览器访问网页的历史信息

28、。() screen 对象包含了客户端显示屏幕的信息。浏览器会为每一个网页自动创建 window 对象、navigater 对象、location 对象、document 对象、history 对象和 screen 对象。window 对象位于浏览器所有对象的最顶层，其他五个对象都是该 window 对象的子对象。课题课题 JavaScript 对象化编程对象化编程二、JavaScript 对象在JavaScript 中，对象是一种特殊的数据，拥有属性和方法。属性是指与对象有关的值，方法是指对象可以执行的行为 (或者可以完成的功能)。课题课题 JavaScript 对象化编程对象化编程属性与方

29、法的引用. window 对象对象window 对象对应 Web 浏览器的窗口，使用它可以直接对浏览器窗口进行操作。window 对象提供的主要功能可以分为以下 5 类: 调整窗口的大小和位置、打开新窗口、系统提示框、状态栏控制和定时操作。() 调整窗口的大小和位置课题课题 JavaScript 对象化编程对象化编程调整窗口的大小和位置的方法() 打开新窗口window 对象的 open ( )方法用于从一个窗口中新开一个窗口。课题课题 JavaScript 对象化编程对象化编程系统提示框的方法() 系统提示框() 状态栏控制window 对象的 status 属性可设置或返回窗口状态栏中的文

30、本。浏览器状态栏的显示信息可以通过 window . status 属性直接进行修改。设置在状态栏中显示文本的代码如下:window . status=显示文本在状态栏!;课题课题 JavaScript 对象化编程对象化编程课题课题 JavaScript 对象化编程对象化编程定时操作的方法() 定时操作课题课题 JavaScript 对象化编程对象化编程. document 对象对象document 对象是 window 对象的子对象，每个载入浏览器的 HTML 文档都会成为 document对象。document 对象包含当前文档的信息，如标题、背景颜色、表单、表格等。document 对象

31、常用于向浏览器输出内容或者获得当前文档中的信息。. form 对象对象form 对象是 document 对象的一个子对象，表示表单对象。一个文档中的每一个表单都是独立的、互不关联的对象，document . formName 或 document . forms index 用于获取对某个form 的引用，其中 index 的值在 0 到此文档中的 form 数减 1 之间。获取指定的 form 对象后，就可以使用它来获取 form 中的各个元素。课题课题 JavaScript 对象化编程对象化编程. screen 对象对象screen 对象包含有关客户端显示屏幕的信息。JavaScript

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

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

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

35、p 对象的语法new RegExp(pattern，attributes) 课题课题 制作表单验证类特效制作表单验证类特效. 修饰符修饰符. 方括号方括号. 元字符元字符. 量词量词. RegExp 对象属性对象属性. RegExp 对象方法对象方法. 支持正则表达式的支持正则表达式的 String 对象的方法对象的方法. 正则表达式符号总表正则表达式符号总表. 常用正则表达式常用正则表达式课题课题 制作表单验证类特效制作表单验证类特效课题课题 制作表单验证类特效制作表单验证类特效常用正则表达式课题课题 制作层切换和层提示特效制作层切换和层提示特效v 学习目标. 能制作层切换特效。能制作层切换

36、特效。. 能制作层提示特效。能制作层提示特效。v相关知识一、getElementById ( )方法getElementById ( ) 方法根据指定的 id 属性值获取对象。假如对应的为一组对象，则返回该组对象中的第一个，即 getElementById ( ) 方法可返回拥有指定 id 的第一个对象的引用。在操作文档的一个特定元素时，最好给该元素一个id 属性，在文档中为它指定一个唯一的名称，然后就可以用该 id 查找想要的元素。Elementdocument . getElementById(“id”) ;课题课题 制作层切换和层提示特效制作层切换和层提示特效二、display 属性di

37、splay 属性设置元素如何显示，其值为 “none” 时，元素不会被显示；其值为 “block”时，元素将显示为块级元素，元素前后会带有换行符。Object . style . display“none block ;课题课题 制作层切换和层提示特效制作层切换和层提示特效三、层切换和层提示制作原理. 获取对象，设置显示属性获取对象，设置显示属性. 初始时隐藏所有对象初始时隐藏所有对象. 显示对象显示对象. 隐藏对象隐藏对象. 移入时显示对象，移出时隐藏对象移入时显示对象，移出时隐藏对象课题课题 制作层切换和层提示特效制作层切换和层提示特效课题课题 制作菜单类特效制作菜单类特效v 学习目标.

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

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

40、 标签 onload 事件调用初始化函数，在 CSS 中将需要被隐藏层的 display 属性值设为 “none”，可以达到此目的。() 当鼠标移入一级菜单时，对应的二级菜单层显示。在 JavaScript 中通过鼠标移入事件 onmouseover 调用自定义的显示层函数，将层的 display 属性值设为 “block”。课题课题 制作菜单类特效制作菜单类特效() 当鼠标从一级菜单中移开时，对应的二级菜单层隐藏。在 Javascript 中通过鼠标移出事件 onmouseout 调用自定义的隐藏层函数，将层的 display 属性值设为 “none”。() 鼠标从一级菜单移到二级菜单上时，

41、二级菜单也不能隐藏，因此，对二级菜单必须将其设为: 当鼠标移入时显示当前层，当鼠标移出时隐藏当前层。课题课题 制作菜单类特效制作菜单类特效课题课题 制作广告类特效制作广告类特效v 学习目标. 能制作路径不固定、可关闭的漂浮广告特效。能制作路径不固定、可关闭的漂浮广告特效。. 能制作可关闭的对联广告特效。能制作可关闭的对联广告特效。. 能制作带数字导航的横幅广告特效。能制作带数字导航的横幅广告特效。. 能制作可折叠的商品分类广告特效。能制作可折叠的商品分类广告特效。v相关知识一、路径不固定的漂浮广告漂浮广告 (Floating Advertising) 是指漂浮在网站首页或各版块、帖子等页面的漂

42、移形式的广告。课题课题 制作广告类特效制作广告类特效漂浮路径示意图. 运动轨迹的控制运动轨迹的控制. 暂停与继续移动的控制暂停与继续移动的控制. 关闭的控制关闭的控制课题课题 制作广告类特效制作广告类特效二、对联广告对联广告是指利用网站页面左右两侧的竖式广告位而设计的广告形式。课题课题 制作广告类特效制作广告类特效可关闭对联广告. 在网站上挂对联在网站上挂对联. 对联广告随页面浏览跟随移动对联广告随页面浏览跟随移动实现对联广告随页面浏览跟随移动特效，必须获取当前页面的滚动条纵坐标，并根据用户操作动态调整滚动条纵坐标。课题课题 制作广告类特效制作广告类特效三、带数字导航的横幅广告横幅广告 (Ba

43、nner Ad) 是横跨于网页上的矩形公告牌，表现商家广告内容的图片放置在页面上，当单击这些横幅的时候，通常可以链接到广告主的网页。课题课题 制作广告类特效制作广告类特效带数字导航的横幅广告. 轮播广告轮播广告. 切换广告切换广告四、可折叠的商品分类广告在商品分类下，单击某类商品可展开该分支，再次单击该类商品可折叠该分支。课题课题 制作广告类特效制作广告类特效可折叠的商品分类广告. eval ( )函数函数. 可折叠商品广告核心代码分析可折叠商品广告核心代码分析课题课题 制作广告类特效制作广告类特效课题课题 7制作滚动类和日期类特效制作滚动类和日期类特效v 学习目标. 能制作无缝文字滚动广告特

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

45、本代码实现广告的无缝连续滚动。课题课题 7制作滚动类和日期类特效制作滚动类和日期类特效. 无缝滚动原理无缝滚动原理课题课题 7制作滚动类和日期类特效制作滚动类和日期类特效准备滚动课题课题 7制作滚动类和日期类特效制作滚动类和日期类特效滚动中. 暂停与继续滚动暂停与继续滚动设置一个实时器，当鼠标移入时清除定时器，达到暂停的目的。 当鼠标移出时，重新设置定时器，继续滚动。二、 无缝图片滚动广告无缝图片滚动广告的工作原理与无缝文字滚动广告相同，区别是滚动方向不同。 无缝文字滚动广告从下向上滚动，无缝图片滚动广告从右向左滚动。课题课题 7制作滚动类和日期类特效制作滚动类和日期类特效滚动到交界时还原制作

46、无缝图片滚动广告与制作无缝文字滚动广告有两点不同:() 需要把无缝文字滚动源程序中的 offsetTop 改成 offsetLeft ，offsetHeight 改成 offsetWidth。() 为了使图片水平排列，需要多添加一个 Div，并设置左浮动。课题课题 7制作滚动类和日期类特效制作滚动类和日期类特效无缝图片滚动广告三、 可手动控制的无缝图片滚动广告在无缝图片滚动的基础上，增加左、 右两个箭头，当鼠标单击左、 右箭头时，可以手动控制图片的滚动，当释放鼠标时，图片继续无缝滚动。. 移动宽度移动宽度. 变速移动变速移动课题课题 7制作滚动类和日期类特效制作滚动类和日期类特效可手动控制的无

47、缝图片滚动广告四、 日历显示. 年、年、 月、月、 日的获取日的获取. 时、时、 分、分、 秒的获取秒的获取. 星期的获取星期的获取. 输出日历输出日历课题课题 7制作滚动类和日期类特效制作滚动类和日期类特效日历显示特效五、 倒计时倒计时是从未来某一时间点向现在计算时间，用于表示距离某一期限还有多少时间。课题课题 7制作滚动类和日期类特效制作滚动类和日期类特效倒计时特效课题课题 8 制作网页辅助类特效制作网页辅助类特效v 学习目标. 能制作设为主页和添加收藏特效。能制作设为主页和添加收藏特效。. 能使用能使用 JavaScript 动态改变动态改变 CSS。. 能制作全国省、能制作全国省、 市

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

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

50、Flash 高级特效31课题 ActionScript 语言基础2课题 制作菜单类特效课题 制作 UI 类特效目录456课题 制作鼠标类特效课题 制作时钟类特效课题 制作 Loading 预载特效课题课题 ActionScript 语言基础语言基础v 学习目标. 能使用能使用 “动作动作” 面板创建动作。面板创建动作。. 掌握常量、掌握常量、 变量、变量、 函数、函数、 运算符的概念，能根据需要正确书写表达式，运算符的概念，能根据需要正确书写表达式，能正确自定义函数。能正确自定义函数。. 掌握分支语句、掌握分支语句、 循环语句和常用动作脚本语句，能在帧、循环语句和常用动作脚本语句，能在帧、 按