1、
授课年级
职二
授课班级
计38
授课节次
1课时
授课人
胡灿红
教学课题
制作滚动文字
教学目标
1.知识目标：掌握代码的输写方法；掌握滚动文字代码。
2.能力目标：⑴培养学生独立完成学习任务的自学能力。
⑵培养学生遇到问题、解决问题的信息处理能力。
⑶培养学生的实践能力。
3.发展目标：⑴培养学生创新、团结协作的能力。⑵培养学生自主学习的能力。
⑶培养学生利用信息技术进行其他学科学习和终身学习的可持续发展能力。
4.情感目标：⑴培养学生严谨务实的作风、认真学习的态度和探索新知识的兴趣。
⑵培养学生尊重他人的思想感情。⑶进一步培
2、养学生对网页制作技术的兴趣。
重 点
难 点
1.教学重点：
●代码的输写方法。
●滚动文字代码。
2.教学难点：
●滚动文字代码的选项；浏览中出现一些问题的解决方法
教学资
源准备
课件、多媒体教学环境，计算机机房
教学活动流程设计
一.复习导入
1．教师点评学生上次做的作业。
2．教师通过“蝴蝶谷”网站的教学案例导入新课
二．展示课件，导入新课
（一）展示课件，呈现学习目标：让学生明确当前所学知识主题，积极参与到知识的主动探求中来。
●代码的输写方法。
●滚动文字代码。
研究问题 建构新知
（二）创设情景，提出驱动任务
3、分析、导入知识点一：
1、滚动文字代码：
2、 滚动文字代码选项说明：
①marquee是html中的滚动效果代码，它以结束，中间放置滚动内容 。
②scrollamount：设置内容滚动的速度。
③direction：设置内容滚动的方向。
4、④width ：设置内容滚动的背景宽度。
⑤height：设置内容滚动的背景高度。
⑥onmouseover=this.stop():鼠标放在上面，则内容停止滚动；
⑦onmouseout=this.start():鼠标移开，则内容又继续滚动；
【任务一】初步探索
1、 打开“gd.html”网页，将“欢迎您，我的老师”文字设置向左水平滚动。
2、 将表格中的文字设置成向上垂直滚动。
学生活动：思考、讨论、实践，完成任务一。
教师活动：巡视、答疑、辅导。
师生共同小结，解决任务一：
（1） 代码须在拆分窗口的源代码中输写。
（2） 输入滚动文字的步骤：
①将光
5、标移到要设置滚动文字的前面（在设计窗口中）。
②进入到拆分窗口，在文档源代码窗口中激活光标（鼠标单击）。
③在文字的前面输入代码部分（半角英文状态下）。
④部分输入完后，将光标移到文字滚动的内容的最后，输入(结束代码的输入）。
（3）讲述输入代码的注意事项。
（4）滚动的方向：left、right、up、down(一般为left、up) 若省略该项时，默认为向左滚动。
（5）解决浏览中出现如下问题的方法:
①文字能滚动，但方向与要求的方向不一致：则只需修改方向一处（即direction项)。
②若文字不能滚
6、动，则检查“marquee”是否输入正确，或者是“onmouseover=this.stop() onmouseout=this.start()”代码是否输入正确。
（三）提出驱动任务，分析、导入知识点二：
【任务二】美化网页（marquee中哪些选项可以省略，哪些不可以省略）
1、打开tt文件夹下的bg.html网页，将“欢迎光临我的个人主页”文字设成向左水平滚动。
2、打开bg文件夹下的tp.html网页，将“人员介绍”表格中的文字设成向上垂直滚动。
学生活动：思考、讨论、实践，完成任务二。
教师活动：巡视、答疑、辅导。
师生共同小结，解决任务二：
（1）滚动速度
7、值：一般为1——3，省略该项时默认为6（一般不省略）
（2）Width:设置滚动文字背景的宽度（一般情况下可以省略）；height:设置滚动文字滚动背景的高度，设置垂直滚动文字时，一定要设置滚动文字滚动的背景高度。
（3）水平向左滚动:可以省略direction、width、height项
垂直滚动：只能省略width项
（四）课堂练习
打开index.html网页，将“欢迎您来到蝴蝶谷，欣赏美丽的蝴蝶！”文字设成向左水平滚动；将“本站公告”中的文字设成向上垂直滚动。
（五）归纳总结
本节课要点：（利用幻灯片逐条显示）
l 正确在文档的源代码窗口中输写代码
l 滚动文字的代码
l 水平向左滚动:可以省略direction、width、height项
l 垂直滚动：只能省略width项
（六）效果评价
利用大屏幕进行展示，先请同学互评。然后教师给予肯定，指出其中还需要提高的地方，并鼓励学生在课后继续学习。
三．课后作业：
1、熟记文字滚动代码
2、思考：能让一组图片进行滚动吗？若能滚动，如何操作？
教学反思：
浙ICP备2021020529号-1 | 浙B2-20240490 
