制作网页高级特效 教案.doc

第一章制作菜单类特效本章任务 制作横向导航菜单 制作纵向导航菜单 制作树形菜单本章目标 会使用层DIV的display属性实现隐藏或显示 会使用鼠标事件实现菜单背景的切换 会使用CSS+DIV层制作各种菜单效果重点和难点本章重点 如何实现不同风格样式的导航菜单 通过id获取对象的语法本章难点 CSS+DIV层实现不同风格样式的菜单效果章节思路1.简介2.制作演示案例1简单的一级导航菜单1）案例分析2）相关理论回顾：页面布局、JavaScript事件、相关的背景样式3）操作步骤：如何根据提供的素材页面，编写代码实现3.制作演示案例2带有二级菜单的导航菜单1）案例分析2）相关理论回顾：有样式的DIV层和无样式的DIV层3）操作步骤：如何根据提供的素材页面，编写代码实现4.制作演示案例3制作横向菜单1）案例分析2）操作步骤：如何根据提供的素材页面，编写代码实现5.制作演示案例4制作竖向菜单1）案例分析2）操作步骤：如何根据提供的素材页面，编写代码实现上机训练重点 制作制作二级菜单 制作横向菜单 制作纵向菜单 制作树形菜单讲授方式PPT讲授+现场演示小结本节主要学习了1. 如何使用CSS+DIV层制作菜单特效？2. 如何改变菜单的显示样式？ 3. 如何获取通过ID获取页面元素？4. 如何控制层的显示和隐藏?作业1. 如何控制列表的显示效果？2. 简述鼠标事件的内容。第二章制作广告类特效本章任务 制作随主页打开的弹出广告 制作对联广告 制作横幅广告 制作漂浮广告本章目标 会使用CSS+DIV层制作广告 会使用window.open方法制作弹出广告 会使用setTimeout函数实现图像的交替显示 会使用样式属性制作浮动广告重点和难点本章重点 如何使用setTimout( )制作定时器 如何通过样式属性实现广告的动态移动效果本章难点 setTimeout( )方法的应用 如何使用样式属性控制广告的移动章节思路1.简介2.制作演示案例1随主页弹出的广告1）案例分析2）相关理论回顾：window对象的open（）方法3）操作步骤：如何根据提供的素材页面，编写代码实现3.制作演示案例2可关闭的左侧广告1）案例分析2）操作步骤：如何根据提供的素材页面，编写代码实现4.制作演示案例3可关闭的随页面滚动的广告1）案例分析2）相关理论：onscroll事件、pixelTop属性与scrollTop属性3）操作步骤：如何根据提供的素材页面，编写代码实现5.制作演示案例4无数字导航的横幅广告1）案例分析2）相关理论：setTimeout（）方法的使用3）操作步骤：如何根据提供的素材页面，编写代码实现6.制作演示案例5带数字导航的横幅广告1）案例分析2）相关理论：clearTimeout（）方法的使用3）操作步骤：如何根据提供的素材页面，修改代码实现7.制作演示案例5页面漂浮广告1）案例分析2）相关理论：offsetWidth属性和offsetHeight属性3）操作步骤：如何根据提供的素材页面，修改代码实现1）案例分析2）相关理论：clearTimeout（）方法的使用3）操作步骤：如何根据提供的素材页面，编写代码实现上机训练重点 制作弹出广告 制作随鼠标滚动的对联广告 制作无数字的横幅广告 制作带数字导航的横幅广告 制作漂浮广告讲授方式PPT讲解+现场演示小结1. 可以实现随主页弹出的窗口的方法。2. pixelTop和scrollTop属性的含义。3. offsetWidth、offsetHeight、left和top属性的含义。 作业1. 简述setTimeout()和clearTimeout()的使用方法。2. 如何实现自动交替显示的横幅广告？3. 制作带有数字导航的横幅广告？第三章制作层切换和层提示特效本章任务 制作层信息提示特效 制作弹出隐藏层特效 制作左侧导航切换特效 制作上方导航切换特效本章目标 会使用CSS+DIV层进行页面布局 会使用表格+DIV层进行页面布局 会使用innerText动态改变文本显示 会使用display属性控制层的显示和隐藏重点和难点本章重点 如何使用通过鼠标事件以及display属性实现切换导航效果 如何通过innerText属性动态改变文本显示本章难点 innerText属性的应用章节思路1.简介2.制作演示案例1层信息提示1）案例分析2）操作步骤：如何根据提供的素材页面，编写代码实现3.制作演示案例2弹出隐藏层1）案例分析2）相关理论：innerText属性3）操作步骤：如何根据提供的素材页面，编写代码实现4.制作演示案例3左侧导航切换1）案例分析 2）操作步骤：如何根据提供的素材页面，编写代码实现5.制作演示案例4上方导航切换1）案例分析2）操作步骤：如何根据提供的素材页面，编写代码实现上机训练重点 制作层信息提示 制作弹出隐藏层 制作右侧导航切换 制作上方导航切换显示讲授方式PPT讲解+现场演示小结本节主要学习了1. 层的显示或隐藏是通过什么属性来控制的？2. innerText属性如何使用？3. 制作弹出层特效的实现步骤。4. 制作左侧导航切换特效的实现步骤。 作业1. 请描述DIV层在网页设计中的相关作用。2. 简述实现导航切换的基本原理。3. 制作点卡切换的页面特效第四章制作文字滚动类和日期类特效本章任务 制作文字滚动特效。 制作无缝的连续滚动广告。 制作日历显示特效。 制作倒计时特效。本章目标 会使用MARQUEE标记实现文字滚动类特效。 会使用DIV层、setInterval( )方法和clearInterval ( )方法来修改无缝的连续滚动广告。 能读懂日历显示特效源代码，然后基于此修改日历的外观样式。 能读懂倒计时特效源代码，然后基于此修改倒计时牌的外观样式重点和难点本章重点 如何使用标签实现滚动图文特效。 如何使用Date对象，来获取或设置指定的时间。 如何使用CSS样式来定制各种漂亮的时钟。本章难点 setInterval( )方法和clearInterval ( )方法的应用。 Date对象及其方法的灵活运用。章节思路1.简介2.制作演示案例1文字滚动特效1）案例分析2）相关理论：MARQUEE标记的用法2）操作步骤：如何根据提供的素材页面，编写代码实现3.制作演示案例2无缝的连续滚动广告1）案例分析2）相关理论：setInterval( )方法、clearInterval ( )方法3）操作步骤：如何根据提供的素材页面，编写代码实现4.制作演示案例3日历显示特效1）案例分析 2）相关理论回顾：Date日期对象、数组Array对象3）操作步骤：如何根据提供的素材页面，编写代码实现5.制作演示案例4倒计时特效1）案例分析2）相关理论回顾：setTimeout（ ）方法、Math对象3）操作步骤：如何根据提供的素材页面，编写代码实现上机训练重点 制作无缝滚动的广告文字 制作水平滚动的相片展示 制作精美的日历特效 制作倒计时特效讲授方式PPT讲解+现场演示小结 MARQUEE标记不仅可以在网页中时下文字和图片的滚动，还可以实现表格等其他对象的滚动。 setTimeout()方法只执行亦次指定的方法或一段代码，用来制作定时器时，通过设定延时间隔实现页面元素的动态效果。 setInterval()方法在执行玩一次指定的方法或一段代码之后，进过指定的时间间隔之后，它会自动重发执行。 clearInterval()方法取消被setInterval()方法设置的一个时间。 innerHTML属性用来设置或获取位于对象起始和结束标签内的HTML。 Date对象是亦个系统对象，主要用来实现时间的读取和设置。 Array()数组是用来表达一组同类型有序数据的集合。 Math对象的属性是数学中的一些常见的常数值。 作业1. 请简述MARQUEE标记的语法格式。2. 请解释setInterval()与setTimeout()方法的区别。3. Date对象有哪像常用的方法？并说明其含义。4. 请回答Array( )数组三种语法形式，并举例加以说明。第五章制作网页辅助类特效本章任务 制作防拷贝特效。 制作主页收藏特效。 制作动态改变页面风格特效。 制作省市级联效果。本章目标 能通过临摹别人的代码，来制作防拷贝特效。 能通过临摹别人的代码，来制作主页收藏特效。 能读懂CSS样式代码、HTML代码和JavaScript代码，然后基于此修改页面风格。 能读懂省市级联特效代码，然后基于此修改省市的名称。重点和难点本章重点 如何使用鼠标和键盘相关事件制作防拷贝特效。 如何使用setHomePage和AddFavorite方法制作主页收藏特效。 如何使用数组修改省市级联中的省份和城市名称。本章难点 动态改变页面的风格。章节思路1.简介2.制作演示案例1防拷贝特效1）案例分析2）相关理论：alert( )方法、oncontextmenu、onkeydown和onselectstart事件2）操作步骤：如何根据提供的素材页面，编写代码实现3.制作演示案例2主页收藏特效1）案例分析2）相关理论：超链接调用JavaScript代码、DHTML的behavior属性3）操作步骤：如何根据提供的素材页面，编写代码实现4.制作演示案例3动态改变CSS风格特效1）案例分析 2）相关理论回顾：CSS样式、下拉列表框3）操作步骤：如何根据提供的素材页面，编写代码实现5.制作演示案例4省市级联特效1）案例分析2）相关理论回顾：列表框、数组Array对象3）操作步骤：如何根据提供的素材页面，修改代码实现上机训练重点 制作主页收藏、防拷的特效 制作动态改变样式的特效 制作学期关联特效 制作统计访问次数的特效讲授方式PPT讲解+现场演示小结本节主要学习了1. 检测鼠标右键的时间是oncontextmenu,onkeydown检测键盘的案件按下事件，onselectstart是使用鼠标开始选择文本时发生的事件。2. setHomePage()方法可以用来设置主页，AddFavorite()方法可以实现添加收藏功能。3. 常用的背景属性有font-size和color。4. 下拉列表框使用和两个标签，其常用的事件有onChange,当选项发生该表时触发。 等内容，希望同学们多多理解掌握。作业1. 请分别说出禁用鼠标右键、禁用Ctrl键和禁用鼠标左键选中文本对应的事件名称。2. 请编写一段代码把“搜狐”设为当前主页？3. 请简述动态改变CSS风格特效的实现思路。有哪几种方式可以为数组元素赋值？n 第二部分：Flash高级特效第一章图像显示特效本章任务 制作边闻边尝 制作放大镜下的西湖 制作照片自动切换 制作看图写单词本章目标 掌握点语法的规则 会添加帧标签 会设置实例名称 会为帧、按钮和影片剪辑添加动作脚本 会使用stop、play、goto、getURL方法控制影片 会使用startDrag、stopDrag函数 会使用ifelse条件判断重点和难点本章重点 为帧、按钮和影片剪辑添加动作脚本 会使用ifelse条件判断本章难点 为帧、按钮和影片剪辑添加动作脚本 会使用ifelse条件判断章节思路1.简介 1）ActionScript的定义及作用2.演示案例1分析3.相关理论：1）什么是ActionScript2）利用ActionScript能够做些什么3）ActionScript与JavaScript的区别4）动作面板的使用5）添加动作6）按钮事件7）影片剪辑事件8）使用stop、play、goto、getURL控制影片4.演示案例1制作5.演示案例2分析6.相关理论：1）轻松掌握ActionScript的语法2）setMask方法3）使用startDrag、stopDrag函数7.演示案例2制作8.演示案例3分析9.相关理论：为按钮添加动作10.演示案例3制作上机训练重点 制作听看闻尝 制作个人相册 制作看图写单词第二章屏保特效本章任务 制作飞舞的雪花 制作黑客帝国 制作春意盎然屏保本章目标 会使用for循环 会使用while循环 会使用onClipEvent事件处理函数 会使用duplicatemovieclip和removeMovieClip函数 掌握运算符、数组（Array） 掌握Math类重点和难点本章重点 for循环 while循环 onClipEvent事件处理函数 duplicatemovieclip和removeMovieClip函数 运算符 数组（Array） Math类本章难点 for循环 while循环章节思路1.简介 1）循环的定义及作用2.演示案例1分析3.相关理论：1）运算符2）for循环3）数组（Array）4）this的用法5）duplicatemovieclip和removeMovieClip函数4.演示案例1制作5.演示案例2分析6.相关理论：1）onClipEvent事件处理函数2）Math类7.演示案例2制作8.演示案例3分析9.相关理论：1）while循环2）fscommand 函数3）break 语句10.演示案例3制作上机训练重点 制作海底世界 制作雨一直下 制作荷花上的露珠第三章组件和UI界面本章任务 制作视频播放器 制作用户注册页面 制作产品展示页面本章目标 会熟练运用Flash中的几种类型的组件 会运用组件制作产品列表 会制作可以提交的表单 会添加音频、视频文件到Flash页面重点和难点本章重点 组件的类型，常用组件的使用方法 组件的实例化和方法 添加音频、视频组件本章难点 运用组件制作表单和信息列表，通过AS脚本实现表单递交功能章节思路1.简介 1）组件和UI的定义及作用2.演示案例1分析3.相关理论：1）FLVPlayback组件2）视频控制按键3）参数设置4.演示案例1制作5.演示案例2分析6.相关理论：1）按钮（Button）组件2）文本标签（Label）组件3）文本域（TextArea）组件4）复选框（CheckBox）组件5）单选按钮（RadioButton）组件6）下拉列表框（CombBox）组件7）列表（List）组件8）on(click)用法9）with语法7.演示案例2制作8.演示案例3分析9.相关理论：1）滚动条（UIScollBar）组件2）加载（Loader）组件3）MediaController媒体控制组件4）MediaDisplay媒体显示组件5）MediaPlayBack媒体回放组件6）useCodepage7）LoadVars类10.演示案例4制作上机训练重点 制作通讯录 制作汽车网站设计第四章猜数字和计算器本章任务 制作简易计算器 制作猜数字 制作剪刀石头布本章目标 会使用if else编写程序 会使用switch case编写程序 会编写多重和嵌套条件语句重点和难点本章重点 ifelse语句结构 switchcase语句结构 多重条件语句 嵌套条件语句本章难点 if语句中嵌套switch语句章节思路1.简介 1）条件判断的定义及作用2.演示案例1分析3.相关理论：1）if else条件语句2）并列使用if条件语句3）条件表达式4.演示案例1制作5.演示案例2分析6.相关理论：ifelse if多重条件语句7.演示案例2制作8.演示案例3分析9.相关理论：1）if 嵌套条件语句2）switch case语句10.演示案例3制作上机训练重点 制作猜硬币游戏 制作用switch语句实现计算器 制作迷路的小孩第五章导航和鼠标特效本章任务 制作伸缩导航菜单 制作浮动导航菜单 制作鼠标跟随特效本章目标 会使用if else语句编写程序 会使用for循环语句编写程序 会制作鼠标特效 会制作菜单并实现缓动效果重点和难点本章重点 制作鼠标特效 制作带缓动的动感导航菜单 综合运用if条件语句和for循环语句 运用AS脚本新建影片剪辑、动态设置影片剪辑属性本章难点 运用帧循环，通过函数创建影片剪辑，实现鼠标特效章节思路1.简介 1）导航菜单和鼠标特效的定义及作用2.演示案例1分析3.相关理论：1）onEnterFrame函数2）createEmptyMovieClip函数3）hitTest碰撞函数4）_root的点用法和“”用法4.演示案例1制作5.演示案例2分析6.相关理论：1）onClipEvent2）updateAfterEvent3）_currentframe7.演示案例2制作8.演示案例3分析9.相关理论：1）duplicateMovieClip2）setProperty10.演示案例3制作上机训练重点 制作鼠标特效 制作时尚图片菜单 制作动感导航菜单第六章倒计时、时钟特效本章任务 制作未来时钟 制作日历时钟 制作奥运倒计时本章目标 会使用Date类的构造函数创建一个Date对象 会调用Date类的方法，调用当前日期和时间 会使用rotation指定影片剪辑的旋转角度 会使用setInterval函数在指定时间内重复执行代码重点和难点本章重点 调用Date类的方法，调用当前日期和时间 使用rotation指定影片剪辑的旋转角度 使用setInterval函数在指定时间内重复执行代码本章难点 使用rotation指定影片剪辑的旋转角度章节思路1.简介 1）如何实现时钟特效2.演示案例1分析3.相关理论：1）Date类2）_rotation属性3）setInterval函数4.演示案例1制作5.演示案例2分析6.演示案例2制作7.演示案例3分析8.演示案例3制作上机训练重点 制作金色时钟 制作梦幻时钟 制作生日晚会倒计时第七章Loading预载本章任务 制作简单预载页面 制作扇形Loading 制作骏马图片本章目标 会制作简单的Loading预载页面 会制作带基本刻度的进度条 会制作带有动态下载数据的鱼在页面 会运用组件实现Loading预载重点和难点本章重点 制作简单进度条 制作带基本刻度的进度条 制作带有动态下载数据的预载页面 运用组件制作进度条本章难点 制作扇形Loading进度条，通过遮罩实现进度条动画章节思路1.简介 1）Loading预载的定义及作用2.演示案例1分析3.相关理论：1）getBytesTotal2）getBytesLoaded4.演示案例1制作5.演示案例2分析6.相关理论：getTimer7.演示案例2制作8.演示案例3分析9.相关理论：1）组件Loader2）组件ProgressBar10.演示案例3制作上机训练重点 制作可口可乐 制作仙境漫游记 制作可爱小猫第八章实验模拟课件本章任务 制作奥运知识问答 制作平抛斜抛实验 制作看图识物本章目标 会制作考试课件 会制作实验类课程F