全国清华大学版信息技术八年级下册第3单元第10课《左右逢源-滚动、字幕与层的使用》说课稿

全国清华大学版信息技术八年级下册第3单元第10课《左右逢源--滚动、字幕与层的使用》说课稿授课内容授课时数授课班级授课人数授课地点授课时间设计思路本节课《左右逢源--滚动、字幕与层的使用》旨在让学生掌握网页设计中滚动画面的制作、字幕的插入以及层的使用技巧。基于八年级学生的认知水平，本节课的设计思路如下：

1.以生活中的滚动字幕实例引入，激发学生学习兴趣。

2.结合教材，详细讲解滚动、字幕与层的基本概念及操作方法。

3.通过实例演示，让学生动手实践，掌握滚动画面、字幕的插入和层的使用技巧。

4.引导学生进行课堂讨论，分享制作过程中遇到的问题及解决方法。

5.课堂小结，巩固所学知识，布置课后实践作业，提高学生的实际操作能力。核心素养目标1.信息意识：培养学生主动获取、评估、使用信息的能力，通过本课学习，能独立设计并实现简单的滚动字幕和网页层效果。

2.计算思维：培养学生利用信息技术解决问题的思维，通过分析问题、设计解决方案、实践操作，掌握网页设计中滚动、字幕与层的使用技巧。

3.信息社会责任：教育学生遵循信息伦理，尊重知识产权，培养良好的信息行为习惯，在网页设计中遵循规范，提升自身信息素养。学情分析本节课面向的是八年级的学生，他们在信息技术学科方面已具备一定的知识基础和操作能力。具体学情分析如下：

1.知识基础：学生已经学习了网页设计的基本概念和简单操作，掌握了HTML和CSS的基本语法，能够创建简单的网页。

2.能力水平：学生在之前的学习中已经能够独立完成网页的搭建和简单布局，但尚缺乏动态效果的实现能力。

3.素质方面：学生具备一定的观察能力和动手操作能力，但创新意识和解决问题的能力有待提高。

4.行为习惯：学生在操作电脑时，普遍存在耐心不足、粗心大意等问题，这可能会影响到课堂实践中的效果。

5.对课程学习的态度：学生对网页设计充满兴趣，但对动态效果的制作感到有些难度，存在一定的畏难情绪。教学资源-软件资源：网页设计软件（如Dreamweaver）、HTML/CSS编辑器

-硬件资源：多媒体计算机、投影仪、白板

-课程平台：学校网络教学平台

-信息化资源：教学PPT、网页设计案例、滚动字幕和层的效果示例

-教学手段：问题驱动法、任务驱动法、小组合作法、实时反馈与指导教学过程一、导入新课

1.各位同学，大家好！今天我们将继续学习网页设计的相关内容。上一节课我们学习了网页的基本布局，那么大家想不想让我们的网页变得更加生动有趣呢？今天，我们就来学习如何使用滚动、字幕与层，让网页动起来。

二、探究新课

1.首先，我们来了解什么是滚动效果。滚动效果可以让网页内容在浏览器窗口中自动滚动，这样用户就可以在不滚动滚动条的情况下查看更多内容。请大家打开教材第10课的内容，我们一起来看看滚动效果是如何实现的。

2.请同学们跟随我的操作，在网页设计软件中创建一个新的HTML文件。然后，我们在body标签中添加一个marquee标签，设置滚动方向、速度等属性。现在，大家在自己的电脑上尝试一下，看看能不能实现滚动效果。

3.接下来，我们来学习字幕的插入。字幕可以让网页更加生动，我们可以使用＜marquee＞标签来实现字幕效果。请大家看教材上的例子，分析一下字幕是如何实现的。

4.现在，请大家在自己的电脑上尝试插入一个字幕，可以是一句话，也可以是一段文字。在操作过程中，注意观察字幕的样式、大小、颜色等属性，尝试调整它们，看看会有什么变化。

5.最后，我们来学习层的使用。层是一种用于在网页中定位元素的工具，我们可以使用＜div＞标签来创建层。请大家看教材上的例子，分析一下层是如何使用的。

6.现在，请大家在自己的电脑上创建一个层，并设置其样式。然后，尝试将一个图片或文字放入层中，看看效果如何。

三、实践操作

1.下面，我们将进行一个实践操作，请大家将之前学到的滚动、字幕与层的效果结合起来，制作一个有趣的网页。

2.首先，我们需要规划网页的整体布局，确定滚动、字幕和层的位置。请大家根据自己的想法，画出网页的布局图。

3.接下来，我们开始编写HTML代码，实现网页的布局。在编写代码的过程中，请大家注意以下几点：

-合理使用＜marquee＞标签实现滚动效果；

-适当插入字幕，丰富网页内容；

-合理使用＜div＞标签创建层，并设置样式。

4.编写完代码后，请大家预览网页效果，检查是否有需要调整的地方。如果有，请及时修改代码，直到达到预期的效果。

5.在实践操作过程中，如果遇到问题，可以随时向我请教，也可以与同学们一起讨论，共同解决问题。

四、课堂小结

1.现在，我们已经完成了本节课的学习，大家是否掌握了滚动、字幕与层的使用呢？

2.请同学们分享一下自己在实践操作中的收获和体会，也可以谈谈在操作过程中遇到的问题及解决方法。

3.最后，我要给大家布置一个课后作业：请大家结合今天所学的内容，制作一个有趣的网页，下节课我们来进行展示和交流。

4.好了，本节课我们就到这里，希望大家能够充分利用所学知识，发挥自己的创意，制作出更加精彩的网页。下课！拓展与延伸1.拓展阅读材料：

-《网页设计与制作实例教程》

-《HTML5与CSS3权威指南》

-《JavaScript高级程序设计》

2.课后自主学习和探究：

a.深入学习HTML5和CSS3的新特性，了解它们在网页设计中的应用。

b.学习JavaScript基础，掌握如何在网页中添加交互性，例如响应用户事件、动态修改内容等。

c.探索网页设计的最新趋势，如响应式设计、扁平化设计等，并尝试将这些理念应用到自己的网页设计中。

d.学习使用网页设计工具，如AdobeDreamweaver、VisualStudioCode等，提高网页开发的效率。

e.研究网页设计的最佳实践，包括用户体验（UX）设计原则、搜索引擎优化（SEO）等，以提升网页的专业性。

f.阅读并分析一些优秀的网页设计案例，了解它们是如何结合滚动、字幕和层的效果来增强网页的视觉效果和用户体验的。

g.尝试制作一个包含复杂滚动效果和动态字幕的网页项目，通过实践加深对课堂所学知识的理解和应用。

h.参与在线网页设计社区，如StackOverflow、GitHub等，与其他网页设计师交流心得，学习他们的经验和技巧。

i.定期回顾和总结所学知识，确保对HTML、CSS和JavaScript的理解不断深化，并能够灵活运用到实际项目中。板书设计①滚动效果实现

-marquee标签的使用

-滚动方向、速度、行为的设置

②字幕插入

-marquee标签的属性调整

-字幕内容、样式、大小的设定

③层的使用

-div标签的创建与定位

-层的样式设置与内容嵌入教学反思与改进在教学《左右逢源--滚动、字幕与层的使用》这节课后，我进行了深入的反思，以期评估教学效果并识别需要改进的地方。

首先，在设计滚动效果的教学环节，我发现学生们对于marquee标签的使用掌握得较快，但在设置滚动属性时，部分同学对于方向、速度和行为的理解不够深刻，导致实际操作时效果不尽如人意。为此，我计划在未来的教学中，增加一些互动环节，比如让学生自己尝试设置不同的属性值，并观察效果的变化，以此来加深他们的理解。

其次，在字幕插入的教学中，虽然学生们能够按照教材示例完成字幕的插入，但我注意到他们在调整字幕样式时，对于CSS属性的应用还不够熟练。我打算在下一节课中，专门安排一些时间让学生复习CSS的基本语法，并通过练习加强他们的实际操作能力。

再来谈谈层的使用。虽然学生们能够创建并设置层，但在层内嵌入内容时，出现了定位不准确的问题。我觉得这可能是由于理论讲解不够充分导致的。因此，我计划在后续的教学中，通过更加直观的演示和案例，帮助学生更好地理解层的定位原理。

1.增加课堂互动：在讲解每个知识点后，我会设计一些小问题和练习，让学生立即动手实践，并及时给予反馈，确保他们真正理解并掌握所学内容。

2.强化基础复习：在每个新知识点讲解前，我会安排一些基础的复习环节，帮助学生巩固已学知识，为学习新内容打下坚实的基础。

3.优化案例教学：我会选择更多贴近学生生活的案例，让他们能够更加直观地感受到网页设计的实用性和趣味