欢迎来到天天文库
浏览记录
ID:2016711
大小:253.00 KB
页数:24页
时间:2017-11-14
《制作网页高级特效 教案》由会员上传分享,免费在线阅读,更多相关内容在应用文档-天天文库。
1、第一章 制作菜单类特效本章任务Ø制作横向导航菜单Ø制作纵向导航菜单Ø制作树形菜单本章目标Ø会使用层DIV的display属性实现隐藏或显示Ø会使用鼠标事件实现菜单背景的切换Ø会使用CSS+DIV层制作各种菜单效果重点和难点本章重点Ø如何实现不同风格样式的导航菜单Ø通过id获取对象的语法本章难点ØCSS+DIV层实现不同风格样式的菜单效果章节思路1.简介2.制作演示案例1¬——简单的一级导航菜单1)案例分析2)相关理论回顾:页面布局、JavaScript事件、相关的背景样式3)操作步骤:如何根据提供的素材页面,编写代码实现3.制作演示案例2¬——带有二级菜单的导航菜单1)案例分析2)
2、相关理论回顾:有样式的DIV层和无样式的DIV层3)操作步骤:如何根据提供的素材页面,编写代码实现4.制作演示案例3¬——制作横向菜单1)案例分析2)操作步骤:如何根据提供的素材页面,编写代码实现5.制作演示案例4¬——制作竖向菜单1)案例分析2)操作步骤:如何根据提供的素材页面,编写代码实现24上机训练重点Ø制作制作二级菜单Ø制作横向菜单Ø制作纵向菜单Ø制作树形菜单讲授方式PPT讲授+现场演示小结本节主要学习了1.如何使用CSS+DIV层制作菜单特效?2.如何改变菜单的显示样式?3.如何获取通过ID获取页面元素?4.如何控制层的显示和隐藏?作业1.如何控制列表的显示效果?2.简述
3、鼠标事件的内容。第二章 制作广告类特效本章任务Ø制作随主页打开的弹出广告Ø制作对联广告Ø制作横幅广告Ø制作漂浮广告本章目标Ø会使用CSS+DIV层制作广告Ø会使用window.open方法制作弹出广告Ø会使用setTimeout函数实现图像的交替显示Ø会使用样式属性制作浮动广告重点和难点本章重点Ø如何使用setTimout()制作定时器Ø如何通过样式属性实现广告的动态移动效果本章难点ØsetTimeout()方法的应用Ø如何使用样式属性控制广告的移动24章节思路1.简介2.制作演示案例1¬——随主页弹出的广告1)案例分析2)相关理论回顾:window对象的open()方法3)操作步
4、骤:如何根据提供的素材页面,编写代码实现3.制作演示案例2¬——可关闭的左侧广告1)案例分析2)操作步骤:如何根据提供的素材页面,编写代码实现4.制作演示案例3¬——可关闭的随页面滚动的广告1)案例分析2)相关理论:onscroll事件、pixelTop属性与scrollTop属性3)操作步骤:如何根据提供的素材页面,编写代码实现5.制作演示案例4¬——无数字导航的横幅广告1)案例分析2)相关理论:setTimeout()方法的使用3)操作步骤:如何根据提供的素材页面,编写代码实现6.制作演示案例5¬——带数字导航的横幅广告1)案例分析2)相关理论:clearTimeout()方法
5、的使用3)操作步骤:如何根据提供的素材页面,修改代码实现7.制作演示案例5¬——页面漂浮广告1)案例分析2)相关理论:offsetWidth属性和offsetHeight属性3)操作步骤:如何根据提供的素材页面,修改代码实现1)案例分析2)相关理论:clearTimeout()方法的使用3)操作步骤:如何根据提供的素材页面,编写代码实现24上机训练重点Ø制作弹出广告Ø制作随鼠标滚动的对联广告Ø制作无数字的横幅广告Ø制作带数字导航的横幅广告Ø制作漂浮广告讲授方式PPT讲解+现场演示小结1.可以实现随主页弹出的窗口的方法。2.pixelTop和scrollTop属性的含义。3.offs
6、etWidth、offsetHeight、left和top属性的含义。作业1.简述setTimeout()和clearTimeout()的使用方法。2.如何实现自动交替显示的横幅广告?3.制作带有数字导航的横幅广告?24第三章 制作层切换和层提示特效本章任务Ø制作层信息提示特效Ø制作弹出隐藏层特效Ø制作左侧导航切换特效Ø制作上方导航切换特效本章目标Ø会使用CSS+DIV层进行页面布局Ø会使用表格+DIV层进行页面布局Ø会使用innerText动态改变文本显示Ø会使用display属性控制层的显示和隐藏重点和难点本章重点Ø如何使用通过鼠标事件以及display属性实现切换导航效果Ø如
7、何通过innerText属性动态改变文本显示本章难点ØinnerText属性的应用章节思路1.简介2.制作演示案例1¬——层信息提示1)案例分析2)操作步骤:如何根据提供的素材页面,编写代码实现3.制作演示案例2¬——弹出隐藏层1)案例分析2)相关理论:innerText属性3)操作步骤:如何根据提供的素材页面,编写代码实现4.制作演示案例3¬——左侧导航切换1)案例分析2)操作步骤:如何根据提供的素材页面,编写代码实现5.制作演示案例4¬——上方导航切换1)案例分析
此文档下载收益归作者所有