《web前端设计》教案14.pdfVIP

教案

授课时间2016年6月2日第14周第1-4节

课程内容项目四JavaScript与CSS交互（display、visibility）

授课班级2014多媒体设计与制作1、2班授课地点Y404

知识目标掌握visibility和display属性

教学目标能力目标会运用visibility和display属性控制网页元素的显示与隐藏

素质目标具备独立学习并自我解决问题能力的素质。

重点

使用display属性控件网页元素的显示与隐藏。

重点难点难点

解决方法onmouseover事件及处理代码

重点内容采用详述、多举实例方式讲解；难点内容以原理剖析、动画演示、操作演示等直

观的方式进行讲解。

1、梳理教材，备课，整理教学素材，标记书本重难点，理顺教学思路，修订完善课件。

2、提前发布教学视频，提醒学生登录教学平台自主观看视频，进行课前预习。课前统计

教学准备

并掌握学生的整体学习进度。

3、检查机房的广播设备。

课后作业书本课后练习

能力训练项

任务制作Tab切换效果

目

教学过程

（根据教学设计延续）

一、任务引入

1、复习上一节课（任务）内容，思考：如何实现如图所示的页面效果？提示：设置图片、层等元素的

显示和隐藏。引入本节课任务——制作Tab切换效果。

2、教师展示任务的效果。

二、任务内容

制作两个Tab按钮，当鼠标放到Tab按钮时，根据设定显示不同的内容。

三、任务分析

实现思路：

1、制作Tab按钮和对应要显示的内容，内容放置在div里

2、只显示一个div，其余div隐藏。

3、给Tab按钮添加onmouseover事件和代码

四、知识讲解

详见授课PPT。

五、任务实施方法

六、学生实训

学生根据任务实施方法，访照例子上机实训。

七、教师指导

1、教师引导学生实训，对学生上机实训过程中出现的问题进行纠正。

2、解答学生实训过程中出现的疑问。

3、引导学生进行思考，学会通过调试的方法找出代码中的错误，培养独立思考解决问题的能力。

八、拓展提高

对学习好、提前完成任务的学生，引导其思维向更高层次思考以下效果怎么实现。

任务提高：

（1）互换两个tab对应的内容

（2）默认显示右边的tab

（3）用HTML制作原内容区（图片）的内容，并美化。

九、点评总结

1、总结学生上机实训过程中出现的共性问题。

2、讲解拓展与提高任务的操作方法，并在网络教学平台上公布参考代码实现。

3、总结本次课所学习的内容，提出本次知识点的学习技巧和注意要点。

4、提醒学生预习下次课内容，并布置作业。

1、教师在课堂上要营造宽松融洽的课堂氛围，良好的心态更加有利于学生投入学习。

2、工作任务的设计要根据学生的能力设计，不能太难，也不能太易。每个工作任务都要

设计拓展与提高任务。拓展与提高任务一般设计4个小点为易，围绕工作任务的改进，由

教学体会：易到难。让学有余力的学生有发挥的余地，实行因材因材施教，分层教学，让所有学生都

不能闲着。否则，能力好的学生做完任务后无所事事，能力差的学生不会做，也无所事事。

3、教师要规定什么时间做什么事情，让学生有时间压迫感，引导学生一步一步完成拓展

与提高任务，充分进行鼓励与表扬，提升学生的成就感，激发学生间的竞争。