第18课 美化网页方法多 教案 义务教育版（2024）七年级下册信息科技.docxVIP

课题

第18课美化网页方法多

课型

新授课

教学内容及教材分析

本节课是人教版《初中信息技术七年级（下册）》第四单元《校园活动线上展》第18课，课题为《美化网页方法多》。这一课的教材内容围绕网页美化的实用技巧和设计原则展开，通过丰富的案例和实践指导，为学生提供了网页设计的具体方法和步骤。教材在介绍HTML和CSS基础的同时，强调了色彩、布局、字体和图片等设计元素的重要性，旨在帮助学生构建一个系统化的网页设计知识框架。然而，教材在处理一些高级CSS技巧和设计工具的使用时，可能需要教师根据学生的实际情况进行适当补充和调整，以确保学生能够跟上教学进度并有效吸收和应用所学知识。

课标要求

知道用HTML代码简单美化网页的操作方法。知道串联样式表的作用，初步学会用它美化网页。能根据需求，分析不同方法的特点并合理选择，提高解决问题的效率。

核

心

素

养

目

标

信息意识：学生能够认识到美化网页对于提升信息展示效果的重要性，主动关注网页设计的趋势和方法。

计算思维：通过网络实验，通过分析网页美化的需求，运用HTML和CSS代码进行逻辑思考和问题解决。

数字化学习与创新：学生学会运用数字化工具和技术进行网页美化，培养创新意识和实践能力。

信息社会责任：在网页制作过程中，注重版权意识和信息安全，合理运用网络资源。

教学重点

掌握用HTML代码进行简单的网页美化，如设置字体、颜色等。理解CSS的作用，学会用CSS美化网页

教学难点

灵活运用CSS选择器和属性进行复杂的网页布局和样式设置。理解HTML和CSS的关系，能够协同使用两者美化网页。

教学方法

任务驱动法、演示讲解法

学习方法

自主学习、合作学习。

教学工具

具多媒体教室，安装网页制作软件（如Dreamweaver等）。

教

学

过

程

教

学

过

程

教学内容

复习巩固：

上节课我们编写了简单的介绍科技节某个项目的网页，这好似用HTML语言搭建好了“新房屋”的结构，接下来要想办法对“新房屋”进行装修美化。本课将介绍如何用HTML代码和CSS（cascadingstylesheets，串联样式表）美化网页。

新课导入：

CSS(CascadingStyleSheets，层叠样式表），是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，CSS文件扩展名为.css。

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

新课教学：

用HTML代码美化网页

一、用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美化网页的心得。

课堂

练习

课堂练习:

课程练习书本上的内容

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

对网页进行美化，如设置网页背景、设置字号、设置字体等，交流讨论：这种方式是否便捷？美化效果好不好？

2.尝试用CSS设计美化网页

课堂

小结:

课堂小结:

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

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

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

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

作业

布置

作业布置:

1.怎样用HTML代码美化网页？

2.怎样用CSS美化网页？