在网页中插入滚动文字公开课教案

制作网页文字滚动效果
一、教学内容分析
“制作网页文字滚动效果”是中等职业教育规划新教材《Dreamweaver网页制作》第二章的内容，该知识是学生掌握了在Dreamweaver网页中文本的插入与编辑后的内容。

学习《制作网页文字滚动效果》这一课，目的在于掌握插入滚动文字的方法，设置滚动文字的属性。

二、教学目标设计
【知识目标】
1、认识设置“滚动文字”代码。

2、掌握插入滚动文字的方法并设置滚动文字属。

【技能目标】
通过引导、欣赏、学习、操作使学生掌握插入滚动文字的方法，设置文字滚动属性，从而激发学生的学习兴趣。

并将所学的知识灵活运用，获得制作网页的愉悦。

【教学重点】
掌握滚动文字的插入方法、认识插入滚动文字代码及设置滚动文字属性。

【教学难点】
滚动文字属性的理解与设置方法。

三、教学对象分析：
本节课的教学对象是的中职二年级的学生，他们已具备计算机基本操作能力和office办公软件操作知识，并且掌握了在《Dreamweaver》网页中插入文本的相关知识。

对于“插入滚动文字”这一知识，对于基础好的学生，他能够通过老师讲解和演示后完成具体的操作，理解代码属性；但是一些基础差的学生，还要在老师的引导、讲解、示范、自己动手操作并书写笔记等过程的帮助下才能够理解掌握这部分内容。

四、教学方法设计：
为了落实重难点，我选择了“效果展示、提问、对比、讲解、演示”为主的教学方法，通过观看欣赏、思考、动手操作等方式完成本课学习任务。

为了完成目标，解决教学的重难点，我在教学中设计了以下几个教学环节：欣赏网页、引出任务→演示操作、学习新知识、学生操作、学生思考→巩固新知识→知识拓展、布置作业。

教学过程
【引入】
欣赏网页，分析网页。

（效果展示法）
【新课学习】
一、插入滚动文字
学生看学案，预习插入滚动文字的方法。

明确完成该任务需要用到代码，代码的作用。

教师演示操作在网页中插入滚动文字“大家好”，抽学生表述步骤
归纳方法：
Ⅰ、定位插入点
Ⅱ、执行“插入对象”→“标签”（提示：将自动切换到“折分”视图）
Ⅲ、选择“HTML标签”→选取“marquee”指令代码→插入
强调：“marquee”为滚动文字代码
Ⅳ、关闭对话框，在Dreamweaver窗口代码视图中“<marquee></marquee>”代码插入点处输入文字
提示：1、输入文字后，不按回车键结束，鼠标在设计视图中任意位置单击
2、在网页编辑窗口中无法显示滚动效果，需要按F12键在浏览器中查看。

讨论：文字滚动的方向是从右向左，而同学们平时欣赏的网页文字滚动方向还有其它方
式吗？（提问讨论法）
二、设置滚动文字属性
1、改变滚动文字运动方向
告诉学生，因为我们是初学者，所以我们将学习最方便，最简单的方法。

“direction”属性设置字幕内容的滚动方向。

方法：
Ⅰ、切换到“拆分”视图
Ⅱ、光标定位到“<marquee>”代码右侧，按下“空格”键，打开标签列表框
空格
Ⅲ、双击“direction”，→双击选择方向标签
down：向下滚动
left：向左滚动
right：向右滚动
up：向上滚动
老师演示操作：“大家好”文字向下滚
学生完成操作：更改“index.html”网页中已有滚动文字“温馨之家”滚动方向向上展示网页，比较网页（比较法）
2、改变文字滚动速度
“scrolldelay”属性设置文字滚动速度。

方法同与设置文字滚动方向，参数只需要输入数值
提示：参数值单位为“毫秒”，数值越大，速度越慢，反之越快
操作：将“index.html”网页中滚动文字“温馨之家”参数值分别设置为“50”和“500”，观看其效果。

【课堂小结】
先抽学生总结，后归纳总结
1、掌握在Dreamweaver中掌握插入滚动文字的方法，认识滚动文字代码
2、理解并掌握设置文字滚动方向改变文字滚动速度的方法
【作业布置】
思考：如果我希望设置滚动文字效果为鼠标指向时停止滚动，鼠标移开时继续滚动，将如何设置？
上机完成：1、插入滚动文字“黄许职业学校欢迎您”，设置滚动方向向上，滚动速度为150毫秒。

【板书设计】。