您的位置：360文档中心› 网页设计之滚动字幕教案

网页设计之滚动字幕教案

合集下载
相关主题
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

2015—2016学年第二学期

《网页设计之滚动字幕》教案

（公开课）

信息技术组：米畅

2016年6月22日

授课

内容

网页设计之滚动字幕课时安排1课时

教学目标要求知识与技能

会使用标签制作滚动字幕，并理解属性与属性值之间的含义。过程与方法

巩固对Dreamweaver软件中“标签”和“标签检查器”的使用。学会合理的规划滚动图片或文字的出现效果。

情感态度与价值观

本节学习将滚动字幕作为一个单独的元素进行讲解，选取更为简单易懂的案列来帮助学生掌握重点。同时引导学生注意观察周围事物，将滚动这种表现方式不仅仅局限于网页设计，而是利用Dreamweaver这个软件来实现该效果。待学生熟练掌握滚动字幕的制作后，就可以在他们的网站里自由发挥。由此引导学生理解什么是触类旁通，真正授人以渔。

教学重点难点重点：

利用滚动字幕增强网页表现力。

难点：

利用“标签检查器”为标签的各个属性设置参数。

教学

方法

手段

讲授法、演示法、任务驱动法

教学内容提纲一、新课引入

同学们，对于HTML语言的学习已有一段时间，其中我们认识了很重要的一个元素——标签。大家先跟老师一起回顾所学过的标签。【播放幻灯片】以上这些标签都是构成静态网页的基本元素，若想实现如示例所示的网页效果，我们该如何制作呢？先请同学们欣赏这几个网页，找出它们的共同点。【展示滚动字幕网页】

师将发言简单总结，确定本节课的主题——滚动字幕。

二、本课教学

师：既然同学们都见过滚动字幕，那么它到底是如何实现的呢？接下来

—1—

请大家观看一段微视频，观看的同时思考以下几个问题。【提出问题，播放视频】

①滚动字幕的标签如何表示？

②滚动字幕的标签中有哪些属性？

③该标签是否可以用来制作滚动图片？

通过微视频我想同学们对滚动字幕都有了自己的认识，那么刚才提出的三个问题心中也有了答案。哪位同学来回答第一个问题？【提问回答】

①

②behavior滚动方式、direction滚动方向、scrollamount滚动速度、scrolldelay滚动时停顿的时间

③可以

师：在微视频中学生不仅学习了一个新标签，同时也获得了如何制作滚动字幕的信息。现在，我们发布挑战一，请同学们自主完成，速度最快的两名同学可以充当小老师帮助其他同学。

挑战一：根据已给的文字素材，每位同学制作滚动字幕，表现形式不限。最先做完的三名同学将为所在大组赢得一面小红旗。【展示学生作品，并上台进行演示】

一探究竟：大部分同学已经实现文字滚动效果，在前面思考的问题中有一个“滚动字幕的标签中有哪些属性”，但是对标签的属性有多少同学能熟练运用呢？为了能让大家实现更多的滚动效果，请同学们按照老师所说的步骤，一步一步的执行，然后仔细观察网页中的文字发生了怎样的变化。【播放幻灯片】

①将behavior属性后面双引号中的内容进行修改

②将direction属性后面双引号中的内容进行修改

③将scrollamount属性后面的数值增大，接着减少

④将scrolldelay属性后面的数值增大，接着减少

简单的我们已经掌握，像游戏一样我们来提升难度。刚才思考的第三个

—2—

问题是“该标签是否可以用来制作滚动图片”，答案是当然可以。所以接下来

请同学们利用老师下发的素材包括文字、图片，挑选自己认为合适的难度任

务来完成。完成速度较快的并且充满创意的同学，可以帮助其他同学。【播放

幻灯片】

挑战二：

难度系数：一颗星

自由发挥，制作一段滚动字幕，内容自定义。

难度系数：两颗星

自由发挥，利用已给图片素材制作滚动图片。

难度系数：三颗星

自由发挥，利用已给的图片和文字素材，制作多样的滚动内容。

先将全体学生分为四个组，然后学生根据情况自由选择不同难度的挑战，并在20分钟内完成。老师检查通过后，可在所对应的大组加上相应的星星数。

最后，星星数最多的一组为获胜组。【展示学生作品】

三、课堂小结

首先，采用快问快答的方式对本节课的知识点进行一个巩固，老师提问学生集体回答。

师：最后我们一起对本节课进行一个小结。在Dreamweaver中制作滚动字幕，无需手动输入代码，可以使用HTML的标签，并设置属性即

可。标签的属性常用的有四个，分别为behavior滚动方式、

direction滚动方向、scrollamount滚动速度、scrolldelay滚动时停顿时间。

当然也可以用来制作滚动图片，只需将我们要滚动显示的单张或多

张图片排列好选中后，再添加标签并设置参数就可以了。

课外

学习要求

师：课后，请同学们利用今天所学的滚动字幕，为自己所作网站增添亮丽一笔。同时结合课本第72页至73页，自己尝试利用AP Div元素（层）布

—3—

局网页。

教学后记

这堂课我把教学内容转化为具有潜在意义的问题，让学生产生强烈的探究意识，使学生的整个学习过程成为“猜想”，继而紧张地探索，期待寻找答案和理由的一个过程。在实际情况下进行学习，可以先让学生见证网页效果，然后自己动手尝试达到同样的效果。并且教师需要引导学生将不同参数值设置的情况进行对比，发现不同加深映象，这样获取的知识，不但易于保持，而且易于迁移到陌生的问题情境中。

本课沿用了我一贯的教学手段“挑战难度任务”，同时这一环节也贯穿了始终，让学生在竞争中得到欢乐，获得知识。由易到难的制作过程，促使学生一步步掌握了滚动字幕的制作技巧，再利用到自己的网站中实现增强网页表现力这一目标。

最后的快问快答的总结形式，再一次加深了学生对新知识的记忆，更主要强调了创新的重要性。同时，温故知新对学生变相的提出了课外练习的要求，促进学生将学习过的与未学习的相互结合，自主练习，锻炼其独立性。

本节课在环节上没有太大问题，但在细节上比如前后衔接、教学用语、课堂仪态仍有一些问题需要改进。讲课语速较快，不够稳、准，还需加强练习。

—4—