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

课题名称

教学设计互联网数据——网页的数据呈现

教学设计

备课教师

评课教师

年级

九年级

课时

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分钟）

教师请小组展示讨论结果：在head标签中出现了一个link标签，页面的样式就是通过link标签这个语句来实现。这样多个页面应用同一个CSS，只要通过一句link标签语句行就可以实现，且只要修改这个CSS文件，就可以更新所有页面的样式。

“评”（8分钟）

1.教师对勇于展示的同学进行鼓励，并鼓励其他学生质疑、挑战、纠错、补充。

2.师生共同总结本节课收获：

①认识了CSS（层叠样式表）

②CSS语法结构：

选择符{样式属性1：属性值1；样式属性2：属性值2；样式属性……}选择符：用来选择要定义样式的对象。

③CSS的类型：内部样式表、外部样式表、内联样式表。

优先级：内联样式＞内部样式＞外部样式

④分离式的CSS优点：提高网页加载速度易于维护和更新提高开发效率，利用CSS可以实现多样的页面样式效果

六、“练”（5分钟）

1.用CSS样式表美化网页。

2.尝试使用图像标签，在网页里加入一张平铺模式的背景图。

教学板书

一、网页数据呈现的方式

二、CSS

三、样式表的基本结构

教学反思

本节课内容比较抽象枯燥，但也是本单元核心知识点，注意讲解与布置任务时要分解成小任务，确保学生都能学会、完成，逐步攻破难点。