网页制作高级特效教材全套课件教学教程整本书电子教案全书教案课件.ppt

,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,*,Click to edit Master title style,模块一,HTML,高级特效,1,2,3,课题,使用,Emmet,高效布局网页,课题,使用内嵌框架制作画中画特效,课题,使用,HTML5,制作验证码特效,目录,课题 使用,Emmet,高效布局网页,学习目标,.,了解静态网站和静态网页的概念，能正确创建静态网站，建立和测试静态网页。,.,掌握,Emmet,基本语法，能使用,Emmet,快速生成,HTML,和,CSS,代码，加快网站开发速度。,相关知识,静态网站是指全部由,HTML,代码格式页面组成的网站，完全采用,HTML,代码格式的网页通常被称为静态网页。,课题 使用,Emmet,高效布局网页,一、创建本地站点,.,使用,Dreamweaver CS3/CS4,创建本地站点,.,使用,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,文档都具有一些默认的文档结构，使用,Emmet,可以创建,HTML,文档初始结构。,使用,Emmet,生成,HTML,文档初始结构,课题 使用内嵌框架制作画中画特效,学习目标,掌握内嵌框架的用法，能在内嵌框架中正确显示文本、图像、动画和,HTML,文档，实现局部刷新，形成“画中画”的特效。,相关知识,一、内嵌框架,iframe,是,Inline,Frame,的缩写，也是框架的一种形式。与框架,(,frame,),不 同的是，,iframe,非常灵活，可以嵌在网页的任意部分，将嵌入的文档与整个页面的内容相互融合，形成一个整体，因此,iframe,被称为内嵌框架或内联框架。,课题 使用内嵌框架制作画中画特效,使用内嵌框架可以将文本、图片、动画或,HTML,文档嵌入在一个,HTML,中显示，结合数据库技术可以在静态页面中嵌入动态内容，实现数据的增加、,删除、查询、修改等操作，形成“画中画”的效果。重载页面时不需要重载整个页面，只需要重载页面中的内嵌框架，减少了数据传输，增加了网页下载速度。,课题 使用内嵌框架制作画中画特效,二、内嵌框架的属性,iframe,标签的常用属性,课题 使用内嵌框架制作画中画特效,iframe,标签的常用属性,课题 使用,HTML5,制作验证码特效,学习目标,掌握,canvas,标签的用法，能使用,HTML5,的,canvas,标签和,JavaScript,制作“验证码”特效。,相关知识,“验证码”是用一串随机产生的数字或符号生成的一幅图片，其中还会加入一些干扰像素防止,OCR,(Optical Character Recognition,光学字符识别,),。使用时，用户肉眼识别其中的验证码信息，输入表单提交网站验证，验证成功后才能使用某项功能。使用验证码可以防止恶意破解密码、刷票、论坛灌水、刷页。不少网站为了防止用户利用机器人自动注册、登录、灌水，都采用了验证码技术。,课题 使用,HTML5,制作验证码特效,canvas,是在,HTML5,中新增的标签，用于在网页实时生成图像，并且可以操作图像内容。使用,HTML5,中的,canvas,标签再结合,JavaScript,可以制作“验证码”特效。,课题 使用,HTML5,制作验证码特效,一、,canvas,标签,canvas,的中文含义为“画布”，画布的坐标原点,(,0,，,0,),在左上角，水平方向为,x,轴，垂直方向为,y,轴。,canvas,标签和其他标签的用法一样，语法格式如下：,画布坐标,课题 使用,HTML5,制作验证码特效,绘制图形前，需要使用,getContext,(),方法返回一个用于在画布上绘图的环境，语法格式如下：,canvas.,getContext,（,context ID,）,其中，参数,context ID,指定了画布上绘制图形的类型，当前唯一的合法值是“,2d,”，它指定了二维绘图,(,即可以绘制直线、矩形、圆形、文本等,),。目前,canvas,标签不支持三维绘图。,综上所述，使用,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),；,/,画一条直线，结束点坐标是,(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,，,40,，,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,制作验证码特效,.,画圆,(,弧线,),如果要创建一个圆形、半圆或弧线，可以使用,arc(),方法。,arc,的中文含义是“弧线”，,arc(),方法是用一个中心点和半径，为一个画布的当前子路径添加一条弧线。一个圆的弧线是,360,或,2,弧度,(,用,Math.PI*2,表示,),。,画圆,(,弧线,),的语法格式如下：,课题 使用,HTML5,制作验证码特效,arc,参数含义,谢谢,模块二,JavaScript,高级特效,3,1,课题,JavaScript,语言基础,2,课题,JavaScript,对象化编程,课题 制作表单验证类特效,目录,4,5,6,7,8,课题 制作层切换和层提示特效,课题 制作菜单类特效,课题 制作广告类特效,课题 制作滚动类和日期类特效,课题 制作网页辅助类特效,课题,JavaScript,语言基础,学习目标,.,了解,JavaScript,的概念，能编写简单的,JavaScript,程序。,.,了解常量、变量、函数、运算符和优先级等概念，能正确运用常量、变量、函数和运算符，能按照优先级正确书写表达式。,.,了解常用内部函数的用法，能根据需要自定义函数。,.,了解数组的概念，能正确定义和引用数组。,.,掌握分支语句和循环语句的使用方法，能进行顺序结构、分支结构和循环结构程序的设计。,一、,JavaScript,简介,JavaScript,是一种基于对象和事件驱动的客户端脚本语言，是目前,Web,应用程序开发者使用最为广泛的客户端脚本编程语言。,JavaScript,能通过,DOM,(,Document Object Model,，文档结构模型,),及自身提供的对象、操作方法实现所需的功能。,JavaScript,采用事件驱动方式，能响应键盘事件、鼠标事件及浏览器窗口事件等，并执行指定的操作。,课题,JavaScript,语言基础,二、第一个,JavaScript,程序,计算机程序是指一组指示计算机执行动作或做出判断的指令，通常用某种程序设计语言编写。一般情况下，计算机程序要编译成机器语言程序后再运行。还有一种未经编译就可运行的程序，通常称为“脚本程序”。,JavaScript,属于客户端脚本语言，,VBScript,(,主要用于,ASP),属于服务器端脚本语言。,课题,JavaScript,语言基础,客户端脚本和服务器端脚本比较,编写,JavaScript,程序可选择普通的文本编辑器或集成开发环境。,Dreamweaver,集成了,JavaScript,开发环境，提供了强大的,JavaScript,支持。,JavaScript,需要嵌入,HTML,中，即,JavaScript,的存在依赖于,HTML,文档。,在,HTML,中，使用,标记引入,JavaScript,，使用,结束,JavaScript,，,和,之间是,JavaScript,脚本。,可以放在,和,之间，也可以放在,和,之间。二者的区别是,:,)head,部分的脚本,:,需调用才执行的脚本或事件触发执行的脚本放在,HTML,的,head,部分。当把脚本放在,head,部分时，可以保证脚本在任何调用之前被加载。,课题,JavaScript,语言基础,)body,部分的脚本,:,当页面被加载时立即执行的脚本放在,HTML,的,body,部分。放在,body,部分的脚本通常用来生成页面的内容。,标记有一个,language,属性，用于指明使用的语言，其值可以为“,JavaScript,”“,VBScript,”或者“,JScript,”。,标记还有一个,type,属性，用于指明文本类型，其值为“,text,/javascript,”。,课题,JavaScript,语言基础,和,VBScript,不区分大小写不同，,JavaScript,严格区分大小写。,在编写,JavaScript,脚本语句时，用“；”作为当前语句的结束符。语句分行后，作为语句结束符的“；”可省略。也可将多个语句写在同一行中，若将多个语句写在同一行中，则语句之间的“；”不能省略。,JavaScript,中的注释采用和,Java,中类似的方式，单行注释前加“,/”,，多行注释放在“,/”,和“,/”,之间。,课题,JavaScript,语言基础,三、常量和变量,.,常量,常量是程序执行过程中其值保持不变的量，有数值常量和字符串常量两种。在,VBScript,中，字符串常量只能使用双引号作为定界符。与,VBScript,不同，在,JavaScript,中不仅允许使用双引号和单引号作为定界符，而且允许双引号和单引号相互嵌套。,课题,JavaScript,语言基础,.,变量,变量是程序执行过程中可能发生变化的量。使用,var,关键字对变量进行显式声明，不能使用,Var,和,VAR,，,JavaScript,对关键字的大小写敏感,(,v,和,V,是不同的字符,),。声明变量的语法格式如下,:,var,变量,值,;,变量可以在声明的同时赋值，也可以在声明后使用过程中再赋值。赋值语句的语法格式如下,:,变量 表达式,;,课题,JavaScript,语言基础,变量的有效范围称为变量的作用域。,JavaScript,有局部变量和全局变量两种变量。局部变量是指只能在本变量声明的函数内部调用的变量。全局变量是指在整个代码中都可以调用的变量。,JavaScript,中也可以隐式地使用变量，即不用声明，直接使用。注意，,JavaScript,总是把隐式声明的变量当成全局变量来使用。,课题,JavaScript,语言基础,四、函数,函数是指实现某一特定功能的小程序段，,JavaScript,除了提供大量实用的内部函数外，还允许用户自定义函数。,.,内部函数,.,自定义函数,使用自定义函数分为两个步骤,:,函数定义和函数调用。一般情况下在,和,之间定义函数，在,和,之间调用函数。,课题,JavaScript,语言基础,五、运算符和优先级,表达式是用运算符把常量、变量和函数连接起来的式子。一个表达式可以只包含一个常量或一个变量。运算符可以是四则运算符、关系运算符、逻辑运算符、复合运算符等。,在计算表达式的值时，按照运算符的优先级从高到低依次进行计算。优先级相同时，按照从左到右的顺序进行计算。,使用,(),可以改变计算的顺序。,课题,JavaScript,语言基础,六、数组,数组是相同类型的变量按顺序组成的一种复合数据类型，这些相同类型的变量称为数组元素。数组通过数组名加索引来使用数组的元素。,.,定义数组,var,变量,new,Array,(,元素,1,，元素,2,，,，元素,n,),；,.,引用数组,数组名,索引,.,遍历数组,在使用数组时，经常需要依次访问数组中的每个元素，这种操作称为数组的遍历。,JavaScript,中数组遍历最简单的办法是使用,for,循环并用数组长度“数组名,.length,”作为,for,循环最大限度值。除此之外也可以使用,for in,循环。,课题,JavaScript,语言基础,七、语句,.,输入与输出语句,(,),输入,(,),输出,使用,document.write(),方法在浏览器窗口输出，使用,alert(),方法在对话框中输出。,.,选择结构语句,选择结构是按照给定的逻辑条件来决定执行的顺序，有单向选择、双向选择和多向选择之分，但是程序在执行过程中都只是执行其中的一条分支。选择语句分为,if,条件语句和,switch,语句。,课题,JavaScript,语言基础,(,),if,条件语句,if(,条件语句,),执行语句,;,课题,JavaScript,语言基础,)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:,语句组,n;break;,default:,语句组,n,1;,课题,JavaScript,语言基础,.,循环结构语句,循环结构可以实现将某一段代码多次重复执行，在,JavaScript,中可以使用,for,循环、,for in,循环、,while,循环和,do while,循环四种。,(,)for,循环,for,循环语句是最常用的循环语句，一般用在循环次数已知的情况下。,for(,初始化表达式,;,循环条件,;,操作表达式,),循环体,;,课题,JavaScript,语言基础,(,)for in,循环,for in,循环用于遍历数组或者对象的属性，即对数组或者对象的属性进行循环操作。,for(,变量,in,对象,),循环体,;,课题,JavaScript,语言基础,(,)while,循环,while,循环在“循环条件”的值为真,(true),时执行“循环体”，否则结束循环。,while(,循环条件,),循环体,;,课题,JavaScript,语言基础,(,)do while,循环,do while,循环与,while,循环类似，不同的是,do while,循环在判断“循环条件”的值之前先执行“循环体”，也就是说至少会执行一次“循环体”。,do,循环体,;,while(,循环条件,);,课题,JavaScript,语言基础,课题,JavaScript,对象化编程,学习目标,.,了解浏览器对象模型和文档对象模型，掌握,JavaScript,中常用的对象和事件。,.,能利用,JavaScript,中对象的属性、事件和方法，制作数字时钟特效、动态改变文本特效、打开新窗口特效、状态栏打印机特效和在状态栏设置日期时间特效。,相关知识,JavaScript,是基于对象,(,Object,Based,),的编程语言。基于对象与面向对象,(,Object,Oriented,),不同，它不提供抽象、继承、重载等有关面向对象语言的功能。基于对象的编程语言仍具有一些面向对象的基本特征，可以根据需要创建自己的对象，进一步扩大语言的应用范围，编写出功能强大的,Web,文档。,课题,JavaScript,对象化编程,一、,BOM,和,DOM,结构,JavaScript,以,BOM,和,DOM,中定义的对象模型及操作方法为基础，支持,BOM,和,DOM,提供的对象模型，根据其对象模型层次结构访问目标对象的属性并对对象施加相应的操作。,BOM,是,Browser Odject Model,的缩写，即浏览器对象模型。,BOM,提供独立于页面内容而与浏览器窗口进行交互的对象。,DOM,是,Document,Odject Model,的缩写，即文档对象模型。,DOM,是,W3C,制定的标准。,课题,JavaScript,对象化编程,BOM,中定义了六种重要的对象,:,(,)window,对象表示浏览器中打开的窗口。,(,)navigator,对象包含了有关浏览器的信息。,(,)location,对象包含了浏览器当前的,URL,信息。,(,)document,对象表示浏览器中加载页面的文档对象。,课题,JavaScript,对象化编程,BOM,和,DOM,结构,课题,JavaScript,对象化编程,(,)history,对象包含了浏览器访问网页的历史信息。,(,)screen,对象包含了客户端显示屏幕的信息。,浏览器会为每一个网页自动创建,window,对象、,navigater,对象、,location,对象、,document,对象、,history,对象和,screen,对象。,window,对象位于浏览器所有对象的最顶层，其他五个对象都是该,window,对象的子对象。,课题,JavaScript,对象化编程,二、,JavaScript,对象,在,JavaScript,中，对象是一种特殊的数据，拥有属性和方法。属性是指与对象有关的值，方法是指对象可以执行的行为,(,或者可以完成的功能,),。,课题,JavaScript,对象化编程,属性与方法的引用,.window,对象,window,对象对应,Web,浏览器的窗口，使用它可以直接对浏览器窗口进行操作。,window,对象提供的主要功能可以分为以下,5,类,:,调整窗口的大小和位置、打开新窗口、系统提示框、状态栏控制和定时操作。,(,),调整窗口的大小和位置,课题,JavaScript,对象化编程,调整窗口的大小和位置的方法,(,),打开新窗口,window,对象的,open(),方法用于从一个窗口中新开一个窗口。,课题,JavaScript,对象化编程,系统提示框的方法,(,),系统提示框,(,),状态栏控制,window,对象的,status,属性可设置或返回窗口状态栏中的文本。浏览器状态栏的显示信息,可以通过,window.status,属性直接进行修改。设置在状态栏中显示文本的代码如下,:,window.status=,显示文本在状态栏,!;,课题,JavaScript,对象化编程,课题,JavaScript,对象化编程,定时操作的方法,(,),定时操作,课题,JavaScript,对象化编程,.document,对象,document,对象是,window,对象的子对象，每个载入浏览器的,HTML,文档都会成为,document,对象。,document,对象包含当前文档的信息，如标题、背景颜色、表单、表格等。,document,对象常用于向浏览器输出内容或者获得当前文档中的信息。,.form,对象,form,对象是,document,对象的一个子对象，表示表单对象。一个文档中的每一个表单都是独立的、互不关联的对象，,document.formName,或,document.forms,index,用于获取对某个,form,的引用，其中,index,的值在,0,到此文档中的,form,数减,1,之间。获取指定的,form,对象后，就可以使用它来获取,form,中的各个元素。,课题,JavaScript,对象化编程,.screen,对象,screen,对象包含有关客户端显示屏幕的信息。,JavaScript,程序可以利用这些信息优化它们的输出，以达到用户的显示要求。,.,JavaScript,核心对象,JavaScript,核心对象是,ECMAScript,标准定义的一些对象与函数。,课题,JavaScript,对象化编程,JavaScript,核心对象,三、,JavaScript,事件,课题,JavaScript,对象化编程,JavaScript,常用事件,课题 制作表单验证类特效,学习目标,.,能使用,JavaScript,函数实现表单验证。,.,能使用正则表达式实现即时提示错误的表单验证。,相关知识,JavaScript,可以实现在数据被送往服务器前对,HTML,表单中的输入数据进行验证。被,JavaScript,验证的典型表单数据包括,:,用户是否已填写表单中的必填项目、用户输入的邮件地址是否合法、用户是否已输入合法的日期、用户是否在数据域中输入了文本。,课题 制作表单验证类特效,.,获取表单元素的值,document.,表单名称,.,表单元素名称,.value,.,判断表单元素值是否满足条件,.,设置表单的,onsubmit,提交事件,.this,关键字,如果在,JavaScript,的“主程序”中,(,不在任何,function,中，不在任何事件处理程序中,),使用,this,，它代表,window,对象。如果在事件处理程序中使用,this,，它代表发生事件的对象。,课题 制作表单验证类特效,二、正则表达式,正则表达式,(Regular,Expression),描述了强大的模式匹配和文本检索与替换函数的方法，用于检查字符串是否含有某子串、将匹配的子串进行替换或者从某字符串抽取出符合条件的子串等。,.RegExp,对象,RegExp,对象表示正则表达式，是对字符串执行模式匹配的强大工具。,(,),直接量语法,/pattern/attributes,(,),创建,RegExp,对象的语法,new,RegExp(pattern,，,attributes),课题 制作表单验证类特效,.,修饰符,.,方括号,.,元字符,.,量词,.RegExp,对象属性,.RegExp,对象方法,.,支持正则表达式的,String,对象的方法,.,正则表达式符号总表,.,常用正则表达式,课题 制作表单验证类特效,课题 制作表单验证类特效,常用正则表达式,课题 制作层切换和层提示特效,学习目标,.,能制作层切换特效。,.,能制作层提示特效。,相关知识,一、,getElementById,(),方法,getElementById(),方法根据指定的,id,属性值获取对象。假如对应的为一组对象，则返回该组对象中的第一个，即,getElementById(),方法可返回拥有指定,id,的第一个对象的引用。,在操作文档的一个特定元素时，最好给该元素一个,id,属性，在文档中为它指定一个唯一的名称，然后就可以用该,id,查找想要的元素。,Element,document,.,getElementById,(“,id,”);,课题 制作层切换和层提示特效,二、,display,属性,display,属性设置元素如何显示，其值为“,none,”时，元素不会被显示；其值为“,block,”时，元素将显示为块级元素，元素前后会带有换行符。,Object.style.display,“none,block;,课题 制作层切换和层提示特效,三、层切换和层提示制作原理,.,获取对象，设置显示属性,.,初始时隐藏所有对象,.,显示对象,.,隐藏对象,.,移入时显示对象，移出时隐藏对象,课题 制作层切换和层提示特效,课题 制作菜单类特效,学习目标,.,能制作纯,HTML,CSS,的菜单特效。,.,能制作,JavaScript,CSS,的菜单特效。,相关知识,一、导航菜单,导航菜单是网页设计中不可缺少的部分，是人们浏览网站时从一个页面转到另一个页面的快速通道。,导航菜单的种类繁多，最基本的有三种形式,:,横向导航菜单、纵向导航菜单和下拉式菜单。,制作导航菜单的技术有很多，可以采用纯,HTML,CSS,、,JavaScript,CSS,或,jQuery,等技术制作菜单特效。,课题 制作菜单类特效,二、,HTML,CSS,二级菜单制作原理,不使用,JavaScript,，只使用,HTML,CSS,也能制作出精美的二级菜单特效，其原理是使用,:hover,伪类控制子选项的显示与隐藏。,.,增加专门用于控制导航菜单的,Div,.,一级菜单设置,.,二级菜单设置,(,),二级菜单定位与隐藏,(,),二级菜单显示,(,),二级菜单变换链接效果设置,课题 制作菜单类特效,三、,JavaScript,CSS,二级菜单制作原理,(,),每个一级菜单都对应一个层，而这个层里存放着该一级菜单对应的二级菜单。二级菜单排列形状不同，就构成了不同形式的菜单。如果排列成横向，制作出来的就是横向导航菜单；如果排列成纵向，制作出来的就是纵向导航菜单。,(,),默认情况下，二级菜单这个层是隐藏的。通过,标签,onload,事件调用初始化函数，在,CSS,中将需要被隐藏层的,display,属性值设为“,none,”，可以达到此目的。,(,),当鼠标移入一级菜单时，对应的二级菜单层显示。在,JavaScript,中通过鼠标移入事件,onmouseover,调用自定义的显示层函数，将层的,display,属性值设为“,block,”。,课题 制作菜单类特效,(,),当鼠标从一级菜单中移开时，对应的二级菜单层隐藏。在,Javascript,中通过鼠标移出事件,onmouseout,调用自定义的隐藏层函数，将层的,display,属性值设为“,none,”。,(,),鼠标从一级菜单移到二级菜单上时，二级菜单也不能隐藏，因此，对二级菜单必须将其设为,:,当鼠标移入时显示当前层，当鼠标移出时隐藏当前层。,课题 制作菜单类特效,课题 制作广告类特效,学习目标,.,能制作路径不固定、可关闭的漂浮广告特效。,.,能制作可关闭的对联广告特效。,.,能制作带数字导航的横幅广告特效。,.,能制作可折叠的商品分类广告特效。,相关知识,一、路径不固定的漂浮广告,漂浮广告,(Floating,Advertising),是指漂浮在网站首页或各版块、帖子等页面的漂移形式的广告。,课题 制作广告类特效,漂浮路径示意图,.,运动轨迹的控制,.,暂停与继续移动的控制,.,关闭的控制,课题 制作广告类特效,二、对联广告,对联广告是指利用网站页面左右两侧的竖式广告位而设计的广告形式。,课题 制作广告类特效,可关闭对联广告,.,在网站上挂对联,.,对联广告随页面浏览跟随移动,实现对联广告随页面浏览跟随移动特效，必须获取当前页面的滚动条纵坐标，并根据用户操作动态调整滚动条纵坐标。,课题 制作广告类特效,三、带数字导航的横幅广告,横幅广告,(Banner,Ad),是横跨于网页上的矩形公告牌，表现商家广告内容的图片放置在页面上，当单击这些横幅的时候，通常可以链接到广告主的网页。,课题 制作广告类特效,带数字导航的横幅广告,.,轮播广告,.,切换广告,四、可折叠的商品分类广告,在商品分类下，单击某类商品可展开该分支，再次单击该类商品可折叠该分支。,课题 制作广告类特效,可折叠的商品分类广告,.eval(),函数,.,可折叠商品广告核心代码分析,课题 制作广告类特效,课题,7,制作滚动类和日期类特效,学习目标,.,能制作无缝文字滚动广告特效。,.,能制作无缝图片滚动广告特效。,.,能制作可手动控制的无缝图片滚动广告特效。,.,能制作日历显示特效。,.,能制作倒计时特效。,相关知识,一、无缝文字滚动广告,.Marquee,标记的缺陷,制作文字滚动类特效时，可使用,Marquee,标记来实现文字在水平或垂直方向上的滚动。在文字滚动的过程中，总会有一段时间出现无滚动文字的情况，这是使用,Marquee,标记制作文字滚动类特效的一个缺陷。为了弥补这个缺陷，可使用,Div,层和,JavaScript,脚本代码实现广告的无缝连续滚动。,课题,7,制作滚动类和日期类特效,.,无缝滚动原理,课题,7,制作滚动类和日期类特效,准备滚动,课题,7,制作滚动类和日期类特效,滚动中,.,暂停与继续滚动,设置一个实时器，当鼠标移入时清除定时器，达到暂停的目的。当鼠标移出时，重新设置定时器，继续滚动。,二、无缝图片滚动广告,无缝图片滚动广告的工作原理与无缝文字滚动广告相同，区别是滚动方向不同。无缝文字滚动广告从下向上滚动，无缝图片滚动广告从右向左滚动。,课题,7,制作滚动类和日期类特效,滚动到交界时还原,制作无缝图片滚动广告与制作无缝文字滚动广告有两点不同,:,(,),需要把无缝文字滚动源程序中的,offsetTop,改成,offsetLeft,，,offsetHeight,改成,offsetWidth,。,(,),为了使图片水平排列，需要多添加一个,Div,，并设置左浮动。,课题,7,制作滚动类和日期类特效,无缝图片滚动广告,三、可手动控制的无缝图片滚动广告,在无缝图片滚动的基础上，增加左、右两个箭头，当鼠标单击左、右箭头时，可以手动控制图片的滚动，当释放鼠标时，图片继续无缝滚动。,.,移动宽度,.,变速移动,课题,7,制作滚动类和日期类特效,可手动控制的无缝图片滚动广告,四、日历显示,.,年、月、日的获取,.,时、分、秒的获取,.,星期的获取,.,输出日历,课题,7,制作滚动类和日期类特效,日历显示特效,五、倒计时,倒计时是从未来某一时间点向现在计算时间，用于表示距离某一期限还有多少时间。,课题,7,制作滚动类和日期类特效,倒计时特效,课题,8,制作网页辅助类特效,学习目标,.,能制作设为主页和添加收藏特效。,.,能使用,JavaScript,动态改变,CSS,。,.,能制作全国省、市、区三级联动特效。,相关知识,一、设为主页和添加收藏,.,设为主页,(,),通过,IE,浏览器“,Internet,选项”设置主页的方法打开,IE,浏览器工具菜单,Internet,选项常规主页,(,文本框中输入要设为主页的网址,),确定关闭浏览器。,(,),通过,JavaScript,程序代码设置主页,设为首页,课题,8,制作网页辅助类特效,.,添加收藏,收藏夹可以让用户上网时方便记录自己喜欢的、常用的网站。,收藏网页的方法有多种,:,(,),使用,IE,浏览器“收藏夹”菜单中“添加到收藏夹”命令收藏网页。,(,),使用快捷键,【Ctrl,D】,收藏网页。,(,),使用,JavaScript,程序代码收藏网页。,通过,JavaScript,程序代码添加收藏的语法格式如下,:,课题,8,制作网页辅助类特效,二、使用,JavaScript,动态改变,CSS,CSS,用于网页中样式的定义，它起到了美化网页的作用。通过,JavaScript,和,CSS,联合使用，可以动态加载不同的,CSS,样式表文件，实现同一网页显示效果的“大变脸”。,三、省、市、区三级联动,省、市、区三级联动的显示效果,:,选择省份后，自动显示该省所辖各市信息，选择城市后，自动显示该市所辖区或县信息。,课题,8,制作网页辅助类特效,谢谢,模块三,Flash,高级特效,3,1,课题,ActionScript,语言基础,2,课题 制作菜单类特效,课题 制作,UI,类特效,目录,4,5,6,课题 制作鼠标类特效,课题 制作时钟类特效,课题 制作,Loading,预载特效,课题,ActionScript,语言基础,学习目标,.,能使用“动作”面板创建动作。,.,掌握常量、变量、函数、运算符的概念，能根据需要正确书写表达式，能正确自定义函数。,.,掌握分支语句、循环语句和常用动作脚本语句，能在帧、按钮和影片剪辑上添加动作脚本语句，实现一定的动画效果。,相关知识,一、,ActionScript,简介,ActionScript,的中文名称为“动作脚本”，它是,Flash,专用的一种编程语言，用于控制,Flash,内容的播放方式。,课题,ActionScript,语言基础,二、第一个,ActionScript,程序,(,)ActionScript,3.0,和,ActionScript,2.0,不完全兼容。,(,)ActionScript,脚本代码只能添加到关键帧、按钮和影片剪辑中。与时序有关的行为,(,如到达某一时刻就执行某一行为,),必须添加到关键帧上；与事件相关的行为,(,如单击鼠标就执行某一行为,),必须添加到按钮或影片剪辑上。,(,),“动作”面板有两种不同的工作模式,:,标准模式和专家模式。,(,)trace,语句在测试模式下计算表达式并在“输出”面板中显示结果。,trace,输出的信息只能在测试影片,(.fla,文件,),时观察到，导出影片,(.swf,文件,),后就不能显示任何信息。,课题,ActionScript,语言基础,(,)ActionScript,中使用“,/”,表示单行注释，使用“,/,/”,表示多行注释，从“,/”,开始，到“,/”,结束。,课题,ActionScript,语言基础,转义符,三、常量和变量,.,常量,常量是程序运行过程中其值保持不变的量，包括数值型、字符串型和逻辑型三种类型。,(,),数值型常量,该类常量是具体的数值，常用于表示参数的值。,(,),字符串型常量,与数值型常量不同的是，该类常量必须在字符串的两端添加双引号。,(,),逻辑型常量,该类常量又称布尔型常量，它用于表明一个条件是否成立，如果成立，用,true,或非,0,值,(,如,),表示,如果不成立,，,用,flase,或,0,表示,。,课题,ActionScript,语言基础,.,变量,变量是程序执行过程中可以被改变的量。,(,),变量的命名规则,),第一个字符必须是字母、下划线或符号“”，后面的字符可以是字母、数字、下划线和符号“”的有效组合，避免使用空格和句号等。,),不能使用,ActionScript,保留的关键字，,if,、,for,等关键字不能用作变量名。,),不能使用布尔值,true,或,false,作为变量名。,),变量名尽量具有一定的含义，做到见名知义，以便于区分和记忆。在保持意义明确的同时尽可能使用短变量名。,),变量名在其作用范围内必须是唯一的。,),使用变量前要先定义再使用。