制作网页高级特效 教案

《制作网页高级特效 教案》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第一章　制作菜单类特效本章任务Ø制作横向导航菜单Ø制作纵向导航菜单Ø制作树形菜单本章目标Ø会使用层DIV的display属性实现隐藏或显示Ø会使用鼠标事件实现菜单背景的切换Ø会使用CSS+DIV层制作各种菜单效果重点和难点本章重点Ø如何实现不同风格样式的导航菜单Ø通过id获取对象的语法本章难点ØCSS+DIV层实现不同风格样式的菜单效果章节思路1.简介2.制作演示案例1¬——简单的一级导航菜单1）案例分析2）相关理论回顾：页面布局、JavaScript事件、相关的背景样式3）操作步骤：如何根据提供的素材页面，编写代码实现3.

2、制作演示案例2¬——带有二级菜单的导航菜单1）案例分析2）相关理论回顾：有样式的DIV层和无样式的DIV层3）操作步骤：如何根据提供的素材页面，编写代码实现4.制作演示案例3¬——制作横向菜单1）案例分析2）操作步骤：如何根据提供的素材页面，编写代码实现5.制作演示案例4¬——制作竖向菜单1）案例分析2）操作步骤：如何根据提供的素材页面，编写代码实现24上机训练重点Ø制作制作二级菜单Ø制作横向菜单Ø制作纵向菜单Ø制作树形菜单讲授方式PPT讲授+现场演示小结本节主要学习了1.如何使用CSS+DIV层制作菜单特效？2.如何改变菜

3、单的显示样式？3.如何获取通过ID获取页面元素？4.如何控制层的显示和隐藏?作业1.如何控制列表的显示效果？2.简述鼠标事件的内容。第二章　制作广告类特效本章任务Ø制作随主页打开的弹出广告Ø制作对联广告Ø制作横幅广告Ø制作漂浮广告本章目标Ø会使用CSS+DIV层制作广告Ø会使用window.open方法制作弹出广告Ø会使用setTimeout函数实现图像的交替显示Ø会使用样式属性制作浮动广告重点和难点本章重点Ø如何使用setTimout()制作定时器Ø如何通过样式属性实现广告的动态移动效果本章难点ØsetTimeout()方

4、法的应用Ø如何使用样式属性控制广告的移动24章节思路1.简介2.制作演示案例1¬——随主页弹出的广告1）案例分析2）相关理论回顾：window对象的open（）方法3）操作步骤：如何根据提供的素材页面，编写代码实现3.制作演示案例2¬——可关闭的左侧广告1）案例分析2）操作步骤：如何根据提供的素材页面，编写代码实现4.制作演示案例3¬——可关闭的随页面滚动的广告1）案例分析2）相关理论：onscroll事件、pixelTop属性与scrollTop属性3）操作步骤：如何根据提供的素材页面，编写代码实现5.制作演示案例4¬——

5、无数字导航的横幅广告1）案例分析2）相关理论：setTimeout（）方法的使用3）操作步骤：如何根据提供的素材页面，编写代码实现6.制作演示案例5¬——带数字导航的横幅广告1）案例分析2）相关理论：clearTimeout（）方法的使用3）操作步骤：如何根据提供的素材页面，修改代码实现7.制作演示案例5¬——页面漂浮广告1）案例分析2）相关理论：offsetWidth属性和offsetHeight属性3）操作步骤：如何根据提供的素材页面，修改代码实现1）案例分析2）相关理论：clearTimeout（）方法的使用3）操作步

6、骤：如何根据提供的素材页面，编写代码实现24上机训练重点Ø制作弹出广告Ø制作随鼠标滚动的对联广告Ø制作无数字的横幅广告Ø制作带数字导航的横幅广告Ø制作漂浮广告讲授方式PPT讲解+现场演示小结1.可以实现随主页弹出的窗口的方法。2.pixelTop和scrollTop属性的含义。3.offsetWidth、offsetHeight、left和top属性的含义。作业1.简述setTimeout()和clearTimeout()的使用方法。2.如何实现自动交替显示的横幅广告？3.制作带有数字导航的横幅广告？24第三章　制作层切换和

7、层提示特效本章任务Ø制作层信息提示特效Ø制作弹出隐藏层特效Ø制作左侧导航切换特效Ø制作上方导航切换特效本章目标Ø会使用CSS+DIV层进行页面布局Ø会使用表格+DIV层进行页面布局Ø会使用innerText动态改变文本显示Ø会使用display属性控制层的显示和隐藏重点和难点本章重点Ø如何使用通过鼠标事件以及display属性实现切换导航效果Ø如何通过innerText属性动态改变文本显示本章难点ØinnerText属性的应用章节思路1.简介2.制作演示案例1¬——层信息提示1）案例分析2）操作步骤：如何根据提供的素材页面，

8、编写代码实现3.制作演示案例2¬——弹出隐藏层1）案例分析2）相关理论：innerText属性3）操作步骤：如何根据提供的素材页面，编写代码实现4.制作演示案例3¬——左侧导航切换1）案例分析2）操作步骤：如何根据提供的素材页面，编写代码实现5.制作演示案例4¬——上方导航切换1）案例分析