4.18美化网页方法多（教学设计）-七年级信息科技全一册（人教版2024）.pdf

3.18《美化网页方法多》教学设计

核心素养教育目标：

信息意识：学生用HTML代码简单美化网页的操作方法。知道串联样式表的作用。

计算思维：学生初步学会用它美化网页。

数字化学习与创新：引导学生体验制作网页，培养学生的创新意识和实践能力。

信息社会责任：体验用人工智能技术制作网页，认识科技创新的意义。

教学重难点：

重点：掌握用HTML代码简单美化网页的操作方法。知道串联样式表的作用。

难点：学会用它美化网页。

教学方法：

任务驱动法、分组讨论法、演示法

教学准备：

多媒体网络教室、课件

教学过程：

【复习导入】

上节课我们编写了简单的介绍科技节某个项目的网页，这好似用HTML语言搭建好了“新

房屋”的结构，接下来要想办法对“新房屋”进行装修美化。本课将介绍如何用HTML代码和

CSS（cascadingstylesheets，串联样式表）美化网页。

CSS(CascadingStyleSheets，层叠样式表），是一种用来为结构化文档（如HTML文档

或XML应用）添加样式（字体、间距和颜色等）的计算机语言，CSS文件扩展名为.css。

通过本节课的学习，我们解决以下两个问题：①怎样用HTML代码美化网页？②怎样用

CSS美化网页？

【新知探究】

一、用HTML代码美化网页

1、用HTML语言编写网页时，通过简单的标签代码，可以设定网页的文字大小、背景颜色

等。

2、学习活动1

打开上一课完成的介绍科技节某个项目的网页，使用HTML标签及属性对网页进行美化，

如设置网页背景、设置字号、设置字体等。

学生交流讨论：这种方式是否便捷？美化效果好不好？

二、用CSS美化网页

1、用HTML代码进行美化，操作非常烦琐，美化效果也很有限。在实际应用中，人们经常

用CSS来美化网页。

如果将HTML代码比作建造房屋的“建筑师”，那么CSS就是装修房屋的“装潢设计师”。

CSS可以描述网页等文档的外观和格式，控制某类HTML标签内容的颜色、字体、宽度、高度

等。

2、CSS语句由选择器和声明两部分构成。

选择器指向需要改变样式的网页元素。

一个选择器对应的声明可以有多条，每条声明由属性和值组成，属性和值之间用冒号分开。

每条声明以分号结束，所有声明用一对大括号括起来。

网页内的CSS可以放在style/style之间

3、学习活动2：尝试用CSS设计美化网页

（1）观看老师提供的关于CSS的相关资料，了解CSS的书写规则和常用指令。

（2）用编辑器打开制作的网页，尝试用CSS对网页文本、标题、背景等进行美化。

（3）保存网页文件，然后重新浏览它，看看修改后显示效果的变化。

（4）交流讨论使用CSS美化网页的心得。

【拓展与提升】

尝试用在线人工智能模型，美化已有的HTML代码。

【课堂小结】

请同学们对照本章的学习目标进行总结，看看自己掌握了那些知识。

1．用HTML代码可以美化网页。

2．CSS可以让网页呈现出效果一致的美化风格。

3．使用CSS美化网页，效果更好。