为网页加入动态效果 教学设计

课题：为网页加入动态效果

课时：1课时

教学目标：1、使学生学会在网页中插入滚动字幕

2、使学生学会在网页中插入交互式按钮

3、培养学生自主探究的能力和创新能力

4、培养学生的审美意识和对网页制作的兴趣

教学重点：在网页中插入滚动字幕和交互式按钮

教学难点：设置滚动字幕的速度

教学方法：自主探究学生演示任务驱动

教学过程

一、导入

师：今天老师送给大家一首歌曲，大家想不想听？

生：想听！

师：老师提议会唱的同学跟着一起唱！

（教师播放歌曲《新年好》）

师：这首歌的名字是……..？大家一起说！

生：《新年好》！

师：对！那老师想问问，大家喜欢过年吗？

生：喜欢！

师：那为什么喜欢过年呢？

生：因为过年可以收压岁钱、放鞭炮（提醒学生注意安全）、吃饺子、吃年糕、穿新衣服、贴对联、拜年、挂灯笼、家人团聚（可以在一起看春晚）……

师：噢！老师明白了为什么大家这么想过年了！老师也非常喜欢过年，那我们这节课就一起来制作一个关于新年的网页好不好啊？

生：好！

师：首先，请大家欣赏一下老师的新年网页！（教师打开网页）有哪位同学说一下在老师的网页中用到了我们前面所学的什么知识？

生：插入文字、艺术字、图片、表格、背景………..

师：这两位同学回答的都很好！这个新年网页是老师用三分钟的时间做出来的，那大家有没有信心也在三分钟之内做出一个这样漂亮的新年网页呢?

生：有！

师：好！现在就开始做，利用老师在E：盘为大家准备的新年网页素材，争取把自己的新年网页设计的整洁、美观、又有创意！

二、讲授新课

１、滚动字幕

（1）自主探究

师：好，三分钟到！老师看大部分同学对自己的新年网页已经有了大体的设计，而且设计得相当不错，看来同学们对学过的知识已经掌握牢固了！回到老师的屏幕。（出示加入滚动字幕后的网页）大家有没有发现在老师的网页中又有了什么新的变化呢？

生：添加了滚动字幕！（教师板书：滚动字幕）

师：那大家想想，为什么叫它滚动字幕啊？

生：因为它是滚动着的字…………..

师：对！我们之所以叫它滚动字幕，是因为这些字可以滚动，非常的形象！有了滚动字幕，网页确实漂亮了许多，你们想不想在自己的网页中也插入滚动字幕呢？

生：想！

师：好！下面老师给大家一个提示：首先选中要变为滚动字幕的文字，然后利用“插入”菜单中的“Web组件”命令，同位之间讨论如何在网页中插入滚动字幕！

（学生自主探究约三分钟）

（2）学生演示

师：大家做出来了吗？噢！这么多同学做出来了！很好，看来大家真得动脑筋了！都是些聪明的孩子！下面，老师请一位同学上来给大家演示一下！老师有两个要求：1、演示时要加以讲解2、讲解时声音要洪亮。

（让学生上台给大家演示如何插入滚动字幕，教师在一旁作一定的指导，同时对学生的操作情况进行及时的鼓励和表扬。）

学生演示：选中要设置成滚动字幕的文字→单击“插入”→“Web组件”→在“组件类型”中选择“动态效果”→在“选择一种效果”中选择“字幕”→单击“完成”→出现“字幕属性”对话框→在“方向”框中选择自己喜欢的方向，“左”表示字幕从右往左滚动，“右”表示字幕从左往右滚动→在“速度”框中设置速度，一般采用默认值即可→在“表现方式”框中有三种表现方式：滚动条、幻灯片、交替，我们可以选择自己喜欢的字幕表现方式→在“大小”框中选择滚动字幕的高度和宽度，→在“重复”框中可以“连续”或规定重复的次数→在“背景色”框中选择自己喜欢的背景颜色→单击“确定”，则滚动字幕插入到了网页中→单击“预览”观看字幕的效果。

师：操作的很好！大家看明白了吗？

生：看明白了！

师：刚才XXX同学说滚动字幕的表现方式有三种：滚动条、幻灯片、交替，为了让同学们更加形象的看出这三种表现方式的不同效果，下面，我们请他给大家演示一下这三种效果，好不好啊？

生：好！

学生演示：滚动条——字幕沿一个方向循环滚动，文本到字幕边界后逐渐消失。

幻灯片——字幕沿一个方向滚动，文本到字幕边界立即停止。

交替——字幕中的文本来回滚动，当到达一个边界时，立即往回滚动。

师：这位同学操作得很熟练！那同学们知道如何插入滚动字幕了吗？

生：知道了！

师：大家看出三种表现方式的不同了吗？

生：看出来了！

师：快过年了，你想对访问你新年网站的朋友们说些什么呢，用滚动字幕展示给大家！看谁设计得最快、最漂亮。！

（3）学生实践，体验成功

（学生练习，教师在机房内巡回指导，并对学生操作中存在的问题进行总结。）

（4）发现问题，解决问题

师：好，回到老师的屏幕！刚才，老师发现有的同学在设置滚动字幕的时候出现了这种效果，（教师展示课件）大家看看，你能够从中发现什么问题？

生：第一个速度太慢，第二个速度太快，看不清楚……

师：对！那如何改进呢？小组之间进行讨论，等会老师请一位同学上来给大家演示一下！

（三分钟后，学生演示，教师在一旁叙述过程）

师：好！演示得不错！请回！为了让同学们记住滚动字幕的速度如何设置，老师给大家总结一下！——延迟越大，数量越小，则速度越慢，延迟越小，数量越大，则速度越快。下面，把速度的设置方法说给你的同位听，并且把网页中滚动字幕的速度设置适中。

（学生练习1-2分钟）

２、交互式按钮

（１）自主探究

师：同学们，老师的网页又有了新的进展，大家仔细观察一下这几个按钮，当把鼠标移到上面时，它有什么变化啊？

生：字体的颜色变了！

师：对！当老师单击它，它又有什么变化？

生：它会链接到另一个页面！

师：回答得非常好！具有这种动态效果的按钮就是我们这节课要学的交互式按钮。（教师板书：交互式按钮）

师：老师想问问大家，加入交互式按钮的网页漂亮吗？

生：漂亮！

师：那你们想不想在自己的网页中插入这样既漂亮又动态的按钮啊？

生：想！

师：好！那老师再提示你们一下，利用“插入”菜单的“Web组件”命令，同样能够帮你插入交互式按钮，同位之间进行讨论，看看能不能做出同样的效果！

（２）学生演示

师：大家做出来了吗？

生：做出来了！

师：好！有哪位同学愿意上来给大家演示一下呢？老师还是有同样的要求：1、演示时要加以讲解2、讲解时声音要洪亮。

操作步骤：单击“插入”→“Web组件”→在“组件类型”中选择“动态效果”→在“选择一种效果”中选择“交互式按钮”→单击“完成”→出现“交互式按钮”对话框→在“按钮”选项卡中选择自己喜欢的按钮样式，输入按钮要显示的文本，单击“浏览”选择按钮要链接的其它页面→在“字体”选项卡中设置按钮字体的属性以及对齐方式→在“图像”选项卡中通过“高度”和“宽度”设置按钮的大小，→单击“确定”完成按钮的插入。

（３）学生实践

师：大家看明白了吗？

生：看明白了！

师：那为了使你的春节网页更加充实、更加吸引人，老师提议把你春节想做的事情在网页中制成交互式按钮，并做到结构设计合理，颜色搭配美观，看谁设计的最出色，最有创意！

３、作品评价

师：好了，到现在为止，老师发现大家的作品已经非常漂亮了，接下来到了我们欣赏优秀作品，共同提高的阶段，老师通过观察，发现…….同学的作品尤为出色，我们来一起欣赏一下！

师：首先请XXX同学介绍一下自己的作品！

（学生介绍自己的作品，其它学生评价学生作品）

（在欣赏过程中，教师鼓励全体同学积极发言，对作品中的亮点和不足都要进行说明，教师在一旁要进行必要的补充。）

着眼以下几点：（１）颜色搭配（2）网页布局（３）字幕速度（4）按钮大小与颜色（５）学生的创意（6）字幕的颜色搭配（７）知识性

４、巩固练习

师：在大家的作品中老师还发现有很多的优秀作品，由于时间的关系，我们就不去一一欣赏了，更多的优秀作品会在下节的欣赏课上一一亮相，到时候我们会收获更多。下面，我们来做两道练习题，巩固一下我们这节课所学的知识。

（1）下列各项中，哪些属于网页的动态效果？（BD ）

A、艺术字

B、滚动字幕

C、图片

D、交互式按钮

（2）关于滚动字幕速度的说法，正确的是：（ A ）

A、延迟越大，数量越小，则速度越慢

B、延迟越大，数量越小，则速度越快

三、总结

师：回答得很正确！这节课大家表现非常好，相信你们也学到了不少的知识，下面，我们一起来总结一下这节课的收获，有哪位同学愿意给大家说一下！

生：１、如何插入滚动字幕

２、如何插入交互式按钮

３、过年要做得好多有意义的事情

４、网页布局要合理、大方、美观

师：大家总结得很全面，但是这些知识的熟练掌握需要你们课下多加练习，大家能做到吗？生：能！

师：好！让我们在歌声中结束我们的学习！预祝大家新年快乐，天天进步，下课！