网页设计之滚动字幕教案.docVIP

2015—2016学年 第二学期 《网页设计之滚动字幕》教案（公开课） 信息技术组：米畅 2016年6月22日 授课 内容 网页设计之滚动字幕 课时安排 1课时 教学 目标 要求 知识与技能 会使用marquee标签制作滚动字幕，并理解属性与属性值之间的含义。 过程与方法 巩固对Dreamweaver软件中“标签”和“标签检查器”的使用。学会合理的规划滚动图片或文字的出现效果。 情感态度与价值观 本节学习将滚动字幕作为一个单独的元素进行讲解，选取更为简单易懂的案列来帮助学生掌握重点。同时引导学生注意观察周围事物，将滚动这种表现方式不仅仅局限于网页设计，而是利用Dreamweaver这个软件来实现该效果。待学生熟练掌握滚动字幕的制作后，就可以在他们的网站里自由发挥。由此引导学生理解什么是触类旁通，真正授人以渔。 教学 重点 难点 重点： 利用滚动字幕增强网页表现力。 难点： 利用“标签检查器”为marquee标签的各个属性设置参数。 教学 方法 手段 讲授法、演示法、任务驱动法 教 学 内 容 提 纲 一、新课引入 同学们，对于HTML语言的学习已有一段时间，其中我们认识了很重要的一个元素——标签。大家先跟老师一起回顾所学过的标签。【播放幻灯片】 以上这些标签都是构成静态网页的基本元素，若想实现如示例所示的网页效果，我们该如何制作呢？先请同学们欣赏这几个网页，找出它们的共同点。【展示滚动字幕网页】 师将发言简单总结，确定本节课的主题——滚动字幕。 本课教学 师：既然同学们都见过滚动字幕，那么它到底是如何实现的呢？接下来请大家观看一段微视频，观看的同时思考以下几个问题。【提出问题，播放视频】 滚动字幕的标签如何表示？ 滚动字幕的标签中有哪些属性？ 该标签是否可以用来制作滚动图片？ 通过微视频我想同学们对滚动字幕都有了自己的认识，那么刚才提出的三个问题心中也有了答案。哪位同学来回答第一个问题？【提问回答】 marquee behavior滚动方式、direction滚动方向、scrollamount滚动速度、scrolldelay滚动时停顿的时间 可以 师：在微视频中学生不仅学习了一个新标签，同时也获得了如何制作滚动字幕的信息。现在，我们发布挑战一，请同学们自主完成，速度最快的两名同学可以充当小老师帮助其他同学。 挑战一：根据已给的文字素材，每位同学制作滚动字幕，表现形式不限。最先做完的三名同学将为所在大组赢得一面小红旗。【展示学生作品，并上台进行演示】 一探究竟：大部分同学已经实现文字滚动效果，在前面思考的问题中有一个“滚动字幕的标签中有哪些属性”，但是对marquee标签的属性有多少同学能熟练运用呢？为了能让大家实现更多的滚动效果，请同学们按照老师所说的步骤，一步一步的执行，然后仔细观察网页中的文字发生了怎样的变化。【播放幻灯片】 将behavior属性后面双引号中的内容进行修改 将direction属性后面双引号中的内容进行修改 将scrollamount属性后面的数值增大，接着减少 将scrolldelay属性后面的数值增大，接着减少 简单的我们已经掌握，像游戏一样我们来提升难度。刚才思考的第三个问题是“该标签是否可以用来制作滚动图片”，答案是当然可以。所以接下来请同学们利用老师下发的素材包括文字、图片，挑选自己认为合适的难度任务来完成。完成速度较快的并且充满创意的同学，可以帮助其他同学。【播放幻灯片】 挑战二： 难度系数：一颗星 自由发挥，制作一段滚动字幕，内容自定义。 难度系数：两颗星 自由发挥，利用已给图片素材制作滚动图片。 难度系数：三颗星 自由发挥，利用已给的图片和文字素材，制作多样的滚动内容。 先将全体学生分为四个组，然后学生根据情况自由选择不同难度的挑战，并在20分钟内完成。老师检查通过后，可在所对应的大组加上相应的星星数。最后，星星数最多的一组为获胜组。【展示学生作品】 三、课堂小结 首先，采用快问快答的方式对本节课的知识点进行一个巩固，老师提问学生集体回答。 师：最后我们一起对本节课进行一个小结。在Dreamweaver中制作滚动字幕，无需手动输入代码，可以使用HTML的marquee标签，并设置属性即可。marquee标签的属性常用的有四个，分别为behavior滚动方式、direction滚动方向、scrollamount滚动速度、scrolldelay滚动时停顿时间。marquee当然也可以用来制作滚动图片，只需将我们要滚动显示的单张或多张图片排列好选中后，再添加marquee标签并设置参数就可以了。 课外 学习 要求 师：课后，请同学们利用今天所学的滚动字幕，为自己所作网站增添亮丽一笔。同时结合课本第72页至73页，自己尝试利