第8课《网页的数据呈现》教学设计（表格式） 2024—2025学年浙教版（2023）初中信息技术八年级上册

课题名称 互联网数据———网页的数据呈现 备课教师 评课教师 年级 九年级 课时 1 教学目标 1. 通过体验CSS设置的效果，认识 样式表，了解样式表的作用。 2. 通过网页中添加样式，掌握样式表的基本结构。 3. 能理解使用 CSS降低网页代码耦合度所带来的便利性。 教学重点 通过网页中添加样式，掌握样式表的基本结构。 教学难点 理解使用CSS降低网页代码耦合度所带来的便利性。 教学过程 备注 “导”（6分钟） 老师这里有一个介绍“人工智能应用”的网页设计，请同学们思考这个页面有什么问题？内容样式不协调统一、缺乏整体性。针对这样的呈现问题，那么如何对网页的数据内容进行样式设置呢？复习上节课通过HTML标签中属性设置样式:给每个元素的标签中声明一个或多个属性来设置样式，比较直观，便于单个修改，但是缺点是同类别的元素样式设置会出现代码重复性，造成代码冗余，当网页数据较多时，一定程度上会影响浏览器的解析（呈现）速度。 引出本节课的内容：使用CSS设置样式。 “思”（12分钟） 什么是CSS呢？阅读p39页内容。 CSS的样式 字号、字体、颜色、位 置以及图片的大小...... CSS的优点 1、样式与内容分离 2、网页加载速度快 3、一致的样式设计 4、容易维护和更新 5、响应式设计 6、可扩展性 接下来我们通过任务活动来认识并学习使用CSS，在同学们的桌面上有一个“index.html”半成品网页，打开看看哪些内容的样式需要调整？怎么调整？（大标题的颜色；三个小标题的位置、字体、字号、颜色；三张图片的大小；背景色等） 任务一：修改大标题的颜色、修改图片的大小、设置三个小标题的样式。 阅读课本p41页样式表的基本结构： 1.CSS语法结构： 选择符{样式属性1：属性值1；样式属性2：属性值2；样式属性……}选择符：用来选择要定义样式的对象。 2.CSS的类型：内部样式表、外部样式表、内联样式表。 优先级：内联样式＞内部样式＞外部样式 任务二：美化页面———给三个标题单元格及网页添加合适的背景。 学习背景样式的设置。（可设置背景色，也可设置背景图。颜色可借助“颜色代码”网站来设置属性值。）展示学生作品，师生点评页面效果。 “议”（7分钟） 任务三：CSS是专门用来设置样式的，使用它可以将内容结构和样式设置分离，那么如果有多个页面需要应用同一种样式，该如何呢？以小组为单位，观察教师展示网页文件范例的代码，里面没有对元素有样式设置的代码，却有页面样式效果，讨论这是为什么？ “展”（7分钟） 教师请小组展示讨论结果：在标签中出现了一个标签，页面的样式就是通过标签这个语句来实现。这样多个页面应用同一个CSS，只要通过一句标签语句行就可以实现，且只要修改这个CSS文件，就可以更新所有页面的样式。 “评”（8分钟） 1.教师对勇于展示的同学进行鼓励，并鼓励其他学生质疑、挑战、纠错、补充。 2.师生共同总结本节课收获： ①认识了CSS（层叠样式表） ②CSS语法结构： 选择符{样式属性1：属性值1；样式属性2：属性值2；样式属性……}选择符：用来选择要定义样式的对象。 ③CSS的类型：内部样式表、外部样式表、内联样式表。 优先级：内联样式＞内部样式＞外部样式 ④分离式的CSS优点：提高网页加载速度易于维护和更新提高开发效率，利用CSS可以实现多样的页面样式效果 六、“练”（5分钟） 1. 用CSS 样式表美化网页。 2. 尝试使用图像标签，在网页里加入一张平铺模式的背景图。 教学板书 一、网页数据呈现的方式 二、CSS 三、样式表的基本结构 教学反思 本节课内容比较抽象枯燥，但也是本单元核心知识点，注意讲解与布置任务时要分解成小任务，确保学生都能学会、完成，逐步攻破难点。 ... ...