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

第10课左右逢源——滚动、字幕与层的使用教学设计-2023—-2024学年清华大学版（2012）初中信息技术八年级下册学校授课教师课时授课班级授课地点教具教学内容第10课左右逢源——滚动、字幕与层的使用教学设计-2023—-2024学年清华大学版（2012）初中信息技术八年级下册

本节课主要围绕网页设计中的滚动效果、字幕效果以及层的使用展开。具体内容包括：滚动条的添加与设置、字幕的创建与编辑、层的创建与操作等。通过学习这些内容，学生将掌握网页设计的基本技巧，提高网页的美观性和互动性。核心素养目标教学难点与重点1.教学重点

-理解并掌握滚动、字幕与层的基本概念及其在网页设计中的作用。

-能够熟练应用滚动条、字幕和层制作简单的动态网页效果。

-学会使用CSS样式表对滚动效果、字幕和层进行美化与调整。

2.教学难点

-理解滚动、字幕与层之间的协同工作原理，例如，如何使滚动条与层联动。

-CSS样式表的深入理解与应用，特别是对动画效果和层叠样式的掌握。

-破解浏览器兼容性问题，确保在不同浏览器上都能实现预期的效果。

-举例说明：

-难点一：当滚动条滚动时，如何使层中的内容同步移动，而不是简单地跟随滚动条。

-难点二：在创建字幕效果时，如何设置过渡效果，使字幕出现和消失更加平滑。

-难点三：在网页中使用层时，如何处理层之间的相互重叠和遮挡问题，确保内容的可见性和交互性。教学资源-软硬件资源：计算机教室、学生电脑、投影仪、白板

-课程平台：学校信息技术课程教学平台

-信息化资源：网页设计相关教程、在线演示文稿、CSS样式表参考手册

-教学手段：PPT演示、视频教学、实际操作示范、小组合作学习教学过程设计导入环节（5分钟）

-创设情境：展示一些具有滚动效果、字幕和层应用的网页，如新闻网站、视频网站等，引导学生观察并讨论这些网页的特点。

-提出问题：询问学生如何制作这样的网页效果，激发学生对网页设计的兴趣。

-学生回答：邀请学生分享他们已有的网页设计经验，为后续学习做铺垫。

讲授新课（20分钟）

-滚动条的使用：

-介绍滚动条的概念和作用。

-展示滚动条的HTML和CSS代码示例。

-通过实际操作演示如何添加和设置滚动条。

-字幕的创建与编辑：

-介绍字幕的概念和作用。

-展示字幕的HTML和CSS代码示例。

-通过实际操作演示如何创建和编辑字幕。

-层的使用：

-介绍层的基本概念和作用。

-展示层的HTML和CSS代码示例。

-通过实际操作演示如何创建、显示和隐藏层。

-学生互动：在讲解过程中，适时提问学生，检查他们对知识的理解程度，并鼓励学生提出问题。

巩固练习（15分钟）

-练习一：学生独立完成一个简单的滚动效果网页，包括添加滚动条、设置字幕和创建层。

-练习二：学生分组讨论，如何优化网页效果，如调整滚动速度、字幕样式等。

-学生展示：每组派代表展示他们的作品，并分享制作过程中的心得体会。

课堂提问（5分钟）

-提问一：如何解决滚动条与层联动的问题？

-提问二：在制作字幕效果时，如何设置过渡效果？

-提问三：在网页中使用层时，如何处理层之间的相互重叠和遮挡问题？

-总结本节课所学内容，强调滚动、字幕与层在网页设计中的重要性。

-拓展：鼓励学生尝试使用其他网页设计工具，如AdobeDreamweaver等，进一步探索网页设计的可能性。

教学过程设计详细流程：

1.导入环节（5分钟）

-展示网页示例（1分钟）

-提出问题（1分钟）

-学生回答（2分钟）

2.讲授新课（20分钟）

-滚动条的使用（5分钟）

-字幕的创建与编辑（5分钟）

-层的使用（5分钟）

-学生互动（5分钟）

3.巩固练习（15分钟）

-练习一（5分钟）

-练习二（5分钟）

-学生展示（5分钟）

4.课堂提问（5分钟）

-提问一（1分钟）

-提问二（1分钟）

-提问三（1分钟）

5.总结与拓展（5分钟）

-总结（2分钟）

-拓展（3分钟）

总用时：45分钟知识点梳理1.网页设计基础

-网页的基本结构：HTML、CSS、JavaScript

-网页设计原则：布局、色彩、字体、交互性

2.滚动效果

-滚动条的概念和作用

-滚动条的HTML标签：`<div>`、`<span>`、`<marquee>`

-滚动条的CSS样式：`overflow`、`scrollbar-width`、`scrollbar-color`

3.字幕效果

-字幕的概念和作用

-字幕的HTML标签：`<marquee>`、`<div>`、`<span>`

-字幕的CSS样式：`text-align`、`color`、`font-size`

4.层的使用

-层的概念和作用

-层的HTML标签：`<div>`、`<span>`

-层的CSS样式：`position`、`top`、`left`、`width`、`height`

5.CSS样式表

-CSS的基本概念和作用

-选择器：类选择器、ID选择器、标签选择器、后代选择器

-属性：字体、颜色、大小、间距、边框、背景等

6.动画效果

-CSS动画的基本概念和作用

-过渡效果：`transition`

-动画效果：`animation`

7.浏览器兼容性

-浏览器兼容性的概念和作用

-常见浏览器的兼容性问题及解决方案

-使用工具：CSS兼容性测试工具、浏览器开发者工具

8.网页优化

-网页优化的概念和作用

-网页加载速度优化：压缩图片、减少HTTP请求、使用CDN

-网页性能优化：缓存、懒加载、代码优化

9.网页安全

-网页安全的概念和作用

-防止跨站脚本攻击（XSS）

-防止跨站请求伪造（CSRF）

-防止SQL注入

10.网页设计趋势

-响应式设计：适应不同设备和屏幕尺寸的网页设计

-移动优先设计：优先考虑移动设备上的用户体验

-交互式设计：增强用户与网页的互动性

-个性化设计：根据用户需求提供定制化服务反思改进措施反思改进措施（一）教学特色创新

1.融入项目式学习：在教学中引入实际的项目案例，让学生通过完成项目来学习滚动、字幕与层的使用，提高学生的实践能力和解决问题的能力。

2.互动式教学：设计更多互动环节，如小组讨论、角色扮演等，让学生在交流中学习，增强课堂的趣味性和参与度。

反思改进措施（二）存在主要问题

1.学生对理论知识的理解不够深入：在讲解滚动、字幕与层的使用时，部分学生对于CSS样式表的概念和属性理解不够，导致实际操作时遇到困难。

2.实践环节时间分配不合理：在练习环节，由于时间限制，部分学生无法完成所有练习，影响了对知识点的全面掌握。

3.评价方式单一：主要依靠学生的课堂表现和作业完成情况来评价学生的学习效果，缺乏对学生实际操作能力的全面评估。

反思改进措施（三）改进措施

1.深化理论知识讲解：针对学生对理论知识的理解不够深入的问题，可以采用分层次的教学方法，先讲解基本概念，再逐步深入到具体的应用。

2.优化实践环节设计：在保证理论知识讲解的基础上，适当增加实践环节的时间，让学生有足够的时间去操作和练习，确保对知识点的全面掌握。

3.多元化评价方式：引入多种评价方式，如学生互评、小组评价、项目展示等，全面评估学生的学习效果，特别是实际操作能力。

4.加强与企业的合作：与企业合作，邀请专业人士来校进行讲座或实践指导，让学生了解行业动态，提高学生的职业素养和就业竞争力。

5.利用信息技术辅助教学：利用多媒体教学资源，如在线教程、视频案例等，丰富教学内容，提高学生的学习兴趣和参与度。

6.定期进行教学反思：在教学过程中，定期对自己的教学进行反思，总结经验教训，不断优化教学方法，提高教学效果。板书设计①滚动效果

-滚动条类型：水平滚动、垂直滚动

-HTML标签：`<div>`,`<span>`,`<marquee>`

-CSS样式：`overflow`,`scrollbar-width`,`scrollbar-color`

②字幕效果

-字幕类型：滚动字幕、固定字幕

-HTML标签：`<marquee>`,`<div>`,`<span>`

-CSS样式：`text-align`,`color`,`font-size`

③层的使用

-层类型：绝对定位、相对定位

-HTML标签：`<div>`,`<span>`

-CSS样式：`position`,`top`,`left`,`width`,`height`

④CSS样式表

-选择器类型：类选择器、ID选择器、标签选择器、后代选择器

-属性：字体、颜色、大小、间距、边框、背景等

⑤动画效果

-过渡效果：`transition`

-动画效果：`animation`

⑥浏览器兼容性

-常见兼容性问题：标签属性、样式属性、脚本执行

-解决方案：CSS兼容性测试、使用工具

⑦网页优化

-加载速度优化：压缩图片、减少HTTP请求、使用CDN

-性能优化：缓存、懒加载、代码优化

⑧网页安全

-XSS攻击：跨站脚本攻击

-CSRF攻击：跨站请求伪造

-SQL注入：数据库注入攻击课堂1.课堂评价

-提问环节：通过提问学生关于滚动、字幕与层的基本概念和应用，检验学生对知识的掌握程度。例如，询问学生如何实现一个简单的滚动效果，以及如何通过CSS调整字幕的样式。

-观察学生操作：在学生练习环节，观察他们的操作过程，注意他们的操作步骤是否正确，是否有创新性的应用。

-实时反馈：对于学生的回答和操作，给予及时的反馈，鼓励正确的做法，纠正错误的理解。

-小组合作评价：在小组讨论和项目中，观察学生的合作情况，评价他们的沟通能力、团队协作精神和解决问题的能力。

2.作业评价

-作业布置：根据本节课的内容，布置相应的作业，如设计一个包含滚动效果、字幕和层的网页。

-作业批改：对学生的作业进行认真批改，重点关注学生对知识的理解和应用能力。

-作业点评：在批改作业的同时，给予学生详细的点评，指出他们的优点和需要改进的地方。

-作业反馈：将作业反馈及时传达给学生，鼓励他们在下一次课堂上展示自己的作品，并与其他同学交流学习心得。

3.课堂测试

-设计测试题：根据本节课的教学内容，设计一些测试题，包括选择题、填空题和简答题，以检验学生对知识的记忆和理解。

-课堂实施：在课堂上进行测试，让学生在规定时间内完成。

-测试分析：对测试结果进