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

课题

美化网页方法多

单元

第四单元

学科

信息科技

年级

七年级

单元主题

【学情分析】

万维网是目前应用最广泛的互联网服务，网页是万维网最重要的信息载体。前一单元对万维网进行了整体介绍，讲解了人们输入网址后，互联网中的软件和硬件设备如何按照网络协议协同工作，完成数据传输任务。本单元是上一单元内容的延伸，将通过一系列剖析、制作网页的学习活动，让学生了解万维网中数据的构成，学会使用适当的数字化工具编辑网页、发布网站。

【内容结构】

学习

目标

1.信息意识：主动学习互联网知识，增强数据安全意识，进行安全防护。

2.计算思维：知道网络中信息编码、传输和呈现的原理。能通过多种手段采集、分析和呈现数据。

3.数字化学习与创新：能够使用适当的数字化工具对网页进行协同编辑和发布，增强协作和责任意识。

4.信息社会责任：在互联网应用中，知道数据安全防护的常用方法和策略，保护个人隐私，尊重他人隐私。

重点

使用HTML代码美化网页；使用串联样式表美化网页。

难点

使用串联样式表美化网页。

教学过程

教学环节

教师活动

学生活动

设计意图

激趣导入

【问题情境】

上一课，我们编写了简单的介绍科技节某个项目的网页，这好似用HTML语言搭建好了“新房屋”的结构，接下来该怎样将“新房屋”“装修”得漂亮时尚？

【建构】

想象一下：当访客打开网页时，第一眼看到的是整洁的布局、舒适的配色，鼠标滑过按钮会有微妙的动画，滚动页面时内容像画卷一样徐徐展开……这就是我们今天要学习的网页美化技巧，它能让网页从“平淡无奇”变身“科技感十足”！

现在，让我们拿起“画笔”，开始给网页注入灵魂吧！

注意、思考、讨论

吸引学生的注意力，启发学生思考。

学习活动

【学习活动】一、用HTML代码美化网页

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

【小试牛刀】

请打开之前完成的科技节网页，使用HTML标签及属性对网页进行美化，如设置网页背景、设置字号、设置字体等。

【示例】

【思考-讨论】

这种方式是否便捷？美化效果好不好？

【知识链接】

该表是常用的控制网页显示效果的代码。

【学习活动】二、用CSS美化网页

用HTML代码进行美化，美化效果往往很有限，但操作却非常烦琐。在实际应用中，人们经常用CSS来美化网页。

CSS（cascadingstylesheets，串联样式表），生活中也经常被称为级联样式表或层叠样式表。

如果将HTML代码比作建造房屋的“建筑师”，那么CSS就是装饰这间房屋的“装潢设计师”。CSS可以描述网页等文档的外观和格式，控制某类HTML标签内容的颜色、字体、宽度、高度等。

写CSS代码时，需要先指定网页中的元素，然后对元素的颜色、字体等进行描述。浏览时，浏览器会按照CSS的描述显示相应的元素。

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

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

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

【初露锋芒】

1．请参考如下代码，尝试用CSS对科技节网页文本、标题、背景等进行美化。

2．观察修改后网页显示效果的变化。

【示例】

【知识链接】

【学习活动】三、实践探究

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

注：只要把已有的HTML代码提交给模型，然后要求它使用CSS美化就可以了。

【示例】

听讲、思考、讨论

教师通过引领学生学习课程内容，促进学生学习知识。学生通过认真听讲、实践探究等方式，积极学习基础知识和相关技能。

另外，通过提问的方式引发学生思考，培养其思考和解决问题的能力。

课堂小结

知识回顾

对课堂知识进行总结和梳理，帮助学生更好地理解和掌握所学内容。

拓展-提升

【拓展-提升】

上网搜索使用HTML代码美化网页和用CSS美化网页的特点，总结出二者的区别。

自主探究

让学生通过课外拓展的形式巩固、强化所学内容，并适当拓宽其视野。