第3单元第10课《左右逢源-滚动、字幕与层的使用》-教学设计清华大学版（2012）初中信息技术八年级下册

课题第3单元第10课《左右逢源--滚动、字幕与层的使用》-教学设计清华大学版（2012）初中信息技术八年级下册课时安排1课前准备XX教学内容第3单元第10课《左右逢源--滚动、字幕与层的使用》-教学设计清华大学版（2012）初中信息技术八年级下册

本节课主要内容包括：1.学习滚动字幕的制作方法；2.掌握层的基本概念及其应用；3.综合运用滚动字幕和层制作一个简单的网页特效。核心素养目标1.培养学生的信息意识，提升对信息技术在生活中的应用能力。

2.增强学生的计算思维，学会运用技术解决问题。

3.培育学生的数字化学习与创新精神，提高自主学习和探究能力。

4.增进学生的信息伦理道德意识，培养良好的网络素养。重点难点及解决办法重点：

1.滚动字幕的制作方法：重点在于理解滚动字幕的原理，掌握通过CSS设置动画效果实现滚动。

2.层的使用：重点在于理解层的基本概念和操作，能够灵活运用层进行网页布局和元素定位。

难点：

1.滚动速度和动画效果的调节：难点在于精确控制滚动速度和动画效果，需要学生掌握CSS动画属性的使用。

2.层的嵌套和交互：难点在于理解层嵌套后对网页布局的影响，以及如何实现层之间的交互效果。

解决办法：

1.通过示例演示和逐步讲解，让学生直观理解滚动字幕的制作过程。

2.结合实际案例，引导学生逐步尝试调整滚动速度和动画效果，培养动手操作能力。

3.通过小组讨论和合作学习，帮助学生解决层嵌套和交互中的问题，提升团队协作能力。教学方法与策略1.采用讲授法结合案例研究，讲解滚动字幕和层的基本概念及操作步骤。

2.设计实验活动，让学生动手实践制作滚动字幕和层，强化技能掌握。

3.通过小组讨论，鼓励学生分享制作心得，促进知识内化。

4.利用多媒体演示，直观展示动画效果和层操作，提高学习效率。

5.引入项目导向学习，引导学生完成一个综合运用滚动字幕和层的网页设计项目，提升综合应用能力。教学过程一、导入新课

（教师）同学们，大家好！今天我们要一起探索网页设计中的两个有趣元素——滚动字幕和层。你们可能已经在之前的课程中接触过网页设计的基础知识，那么今天我们将更深入地了解这些元素，并学习如何将它们应用到实际的设计中。

（学生）老师好，我们很期待学习新的网页设计技巧。

二、新课讲授

（教师）首先，我们来了解一下滚动字幕。滚动字幕是一种常见的网页元素，它可以让信息以动态的方式展示给用户。那么，同学们，你们知道滚动字幕是如何制作的吗？

（学生）不太清楚，老师。

（教师）好的，首先我们需要设置CSS样式来定义滚动字幕的外观和动画效果。我会先展示一个简单的例子，然后我们一起来分析它是如何工作的。

（教师）现在，请大家打开电脑，跟随我的步骤，尝试自己制作一个简单的滚动字幕。

（学生）好的，老师。

（教师）接下来，我们来学习层的使用。层是一种可以在网页上叠加的元素，它可以用来实现复杂的布局和交互效果。层的操作相对比较复杂，我们需要理解层的位置、大小、透明度等属性。

（教师）现在，我会演示如何创建一个层，并调整它的位置和大小。同时，我会解释如何通过层来实现一些基本的交互效果。

三、实践操作

（教师）同学们，现在我们已经了解了滚动字幕和层的基本概念，接下来是实践操作环节。我会提供一个项目，你们需要分组完成。

（学生）好的，老师，我们准备好了。

（教师）项目要求：设计一个包含滚动字幕和层的网页，滚动字幕用于展示新闻快讯，层用于展示相关图片和详细信息。

（教师）每个小组需要：

1.设计并实现滚动字幕，确保它能够自动滚动。

2.创建至少两个层，一个用于显示图片，另一个用于显示详细信息。

3.确保层能够根据用户操作（如点击）进行相应的交互。

（学生）明白了，老师。

四、小组讨论与指导

（教师）在实践操作过程中，如果遇到问题，可以随时向我提问。同时，我也鼓励你们之间进行讨论，互相帮助解决问题。

（学生）好的，老师。

（教师）在接下来的时间里，我会巡回指导，帮助你们解决遇到的问题。记得，团队合作非常重要，互相学习，共同进步。

五、展示与评价

（教师）现在，每个小组都完成了项目，接下来请你们展示一下你们的成果。

（学生）好的，老师，我们准备好了。

（教师）请大家注意，展示过程中，我会根据以下标准进行评价：

1.滚动字幕是否能够正常滚动。

2.层是否正确创建并实现交互效果。

3.网页的整体设计是否美观、实用。

（学生）明白了，老师。

六、总结与反思

（教师）同学们，今天我们学习了滚动字幕和层的使用。通过实践操作，你们应该对这两个元素有了更深入的理解。现在，请你们思考一下，你们在制作过程中遇到了哪些困难，又是如何克服的？

（学生）老师，我们在制作滚动字幕时遇到了速度调节的问题，通过调整CSS动画属性，我们最终解决了这个问题。

（教师）很好，遇到问题并积极解决是学习过程中的重要部分。同时，你们也展示了团队合作的力量。

（教师）最后，我想说的是，网页设计是一个不断学习和实践的过程。希望你们能够将今天学到的知识应用到未来的项目中，不断探索，不断创新。

（学生）谢谢老师，我们一定会努力的。

（教师）好了，今天的课程就到这里，下课！教学资源拓展1.拓展资源：

-网页动画技术：介绍网页动画技术的基本原理，包括CSS动画、JavaScript动画和Flash动画等，以及它们在不同浏览器中的兼容性。

-网页设计原则：探讨网页设计的基本原则，如对比、重复、对齐和亲密性，以及如何将这些原则应用于滚动字幕和层的设计中。

-网页布局技术：介绍网页布局的基本技术，如表格布局、框架布局和Flexbox布局，以及如何使用这些技术来优化滚动字幕和层的位置和大小。

-响应式网页设计：介绍响应式网页设计的基本概念，以及如何使用媒体查询等技术来确保网页在不同设备上都能良好显示。

2.拓展建议：

-学生可以进一步学习CSS动画的进阶技巧，如关键帧动画、动画序列和动画事件等，以提高滚动字幕的动态效果。

-通过研究不同类型的滚动字幕案例，学生可以了解如何设计吸引人的滚动信息，并学习如何优化滚动速度和动画效果。

-学生可以尝试使用JavaScript库（如jQuery）来简化滚动字幕和层的编程过程，并学习如何实现更复杂的交互效果。

-通过分析优秀的网页设计案例，学生可以学习如何将滚动字幕和层应用于实际的网页布局中，并了解它们在用户体验中的作用。

-学生可以参与在线课程或工作坊，学习最新的网页设计趋势和技术，以保持对网页设计领域的了解和兴趣。

-学生可以尝试创建自己的网页设计项目，将滚动字幕和层与其他网页设计元素结合，以展示自己的创意和技术能力。

-学生可以阅读相关的书籍和杂志，了解网页设计领域的最新发展和行业动态，以及如何将这些知识应用到实际工作中。

-学生可以参加学校或社区组织的网页设计竞赛，与其他同学交流学习，提高自己的网页设计技能。课后作业1.实践题：请设计一个包含滚动字幕和层的网页，滚动字幕用于展示校园新闻，层用于展示新闻图片和详细内容。要求：

-使用CSS设置滚动字幕的动画效果，使其在网页上自动滚动。

-创建至少两个层，一个用于显示新闻图片，另一个用于显示新闻的详细内容。

-通过层的位置和透明度调整，使得新闻图片和详细内容能够在鼠标悬停时显示。

2.分析题：阅读以下CSS代码，分析并解释它对滚动字幕动画效果的影响。

```css

#scrolling-news{

width:300px;

height:50px;

overflow:hidden;

position:relative;

}

#news-text{

position:absolute;

white-space:nowrap;

animation:scroll-news10slinearinfinite;

}

@keyframesscroll-news{

0%{left:0;}

100%{left:-300px;}

}

```

请说明动画的持续时间、方向和运动轨迹。

3.应用题：请使用JavaScript编写一个函数，该函数能够根据用户输入的滚动速度（毫秒）来控制滚动字幕的滚动速度。

4.创新题：设计一个网页特效，当用户点击网页上的某个元素时，显示一个包含滚动字幕和图片的层，其中滚动字幕展示图片的描述信息。

5.评价题：分析以下网页设计中的滚动字幕和层的使用是否合理，并提出改进建议。

-滚动字幕在网页上快速滚动，用户难以阅读。

-层中的图片和文字内容重叠，导致用户无法清晰查看。

-网页的整体布局不够清晰，滚动字幕和层的位置不够合理。

答案示例：

1.作业答案请参考学生的实际操作结果。

2.动画持续时间为10秒，方向为向左滚动，运动轨迹为从左到右。

3.函数示例：`functionsetScrollSpeed(speed){//...}`

4.创新题答案请参考学生的创意设计。

5.评价题答案：

-滚动字幕滚动速度过快，建议调整速度，使其更易于阅读。

-图片和文字内容重叠，建议优化层的位置和透明度，确保内容清晰可见。

-网页布局不够清晰，建议重新设计布局，使滚动字幕和层的位置更加合理。板书设计①滚动字幕制作

-CSS动画原理

-动画属性：`animation`,`animation-name`,`animation-duration`,`animation-timing-function`,`animation-delay`,`animation-iteration-count`,`animation-direction`

-实例代码：`#scrolling-news{...}#news-text{...}@keyframesscroll-news{...}`

②层的使用

-层的概念：`<div>`标签的`style`属性

-层属性：`position`,`top`,`left`,`width`,`height`,`z-index`

-层的嵌套与交互：`position:relative`与`position:absolute`

-实例代码：`<divid="layer"style="...">Content</div>`

③网页布局优化

-网页布局原则：对比、重复、对齐、亲密性

-布局技术：表格布局、框架布局、Flexbox布局

-响应式设计：媒体查询、视口宽度设置

-实例代码：`@mediascreenand(max-width:600px){...}`教学评价与反馈1.课堂表现：学生能够积极参与课堂讨论，对滚动字幕和层的基本概念有较好的理解。在实践操作环节，大部分学生能够按照要求完成作业，但部分学生在设置动画效果和调整层的位置时遇到困难。

2.小组讨论成果展示：小组讨论中，学生们能够分享自己的制作经验，互相帮助解决问题。在展示成果时，学生们能够清晰地向其他同学介绍自己的设计思路和实现方法。

3.随堂测试：通过随堂测试，学生对滚动字幕和层的基本概念和操作有了初步的掌握。测试结果显示，学生对CSS动画属性和层属性的理解程度较好，但在实际应用中存在一定的困难。

4.学生自评与互评：鼓励学生在课后进行自评和互评，通过反思自己的学习过程和成果，找出自己的不足之处，并从同伴那里获得改进的建议。

5.教师评价与反馈：针对学生在课堂表现