资源简介

中小学教育资源及组卷应用平台
第18课 美化网页方法多 教学设计
课题 美化网页方法多 单元 第四单元 学科 信息科技 年级 七年级
单元主题 【学情分析】万维网是目前应用最广泛的互联网服务，网页是万维网最重要的信息载体。前一单元对万维网进行了整体介绍，讲解了人们输入网址后，互联网中的软件和硬件设备如何按照网络协议协同工作，完成数据传输任务。本单元是上一单元内容的延伸，将通过一系列剖析、制作网页的学习活动，让学生了解万维网中数据的构成，学会使用适当的数字化工具编辑网页、发布网站。【内容结构】
学习目标 1. 信息意识：主动学习互联网知识，增强数据安全意识，进行安全防护。2. 计算思维：知道网络中信息编码、传输和呈现的原理。能通过多种手段采集、分析和呈现数据。3. 数字化学习与创新：能够使用适当的数字化工具对网页进行协同编辑和发布，增强协作和责任意识。4. 信息社会责任：在互联网应用中，知道数据安全防护的常用方法和策略，保护个人隐私，尊重他人隐私。
重点 使用HTML代码美化网页；使用串联样式表美化网页。
难点 使用串联样式表美化网页。
教学过程
教学环节 教师活动 学生活动 设计意图
激趣导入 【问题情境】上一课，我们编写了简单的介绍科技节某个项目的网页，这好似用HTML 语言搭建好了“新房屋”的结构，接下来该怎样将“新房屋”“装修”得漂亮时尚？【建构】想象一下：当访客打开网页时，第一眼看到的是整洁的布局、舒适的配色，鼠标滑过按钮会有微妙的动画，滚动页面时内容像画卷一样徐徐展开 ……这就是我们今天要学习的网页美化技巧，它能让网页从 “平淡无奇” 变身 “科技感十足”！现在，让我们拿起 “画笔”，开始给网页注入灵魂吧！ 注意、思考、讨论 吸引学生的注意力，启发学生思考。
学习活动 【学习活动】一、用HTML代码美化网页用 HTML 语言编写网页时，通过简单的标签代码，可以设定网页的文字大小、背景颜色等。【小试牛刀】请打开之前完成的科技节网页，使用 HTML 标签及属性对网页进行美化，如设置网页背景、设置字号、设置字体等。【示例】【思考-讨论】这种方式是否便捷？美化效果好不好？【知识链接】该表是常用的控制网页显示效果的代码。【学习活动】二、用CSS美化网页用HTML代码进行美化，美化效果往往很有限，但操作却非常烦琐。在实际应用中，人们经常用CSS来美化网页。 CSS（cascading style sheets，串联样式表），生活中也经常被称为级联样式表或层叠样式表。如果将HTML代码比作建造房屋的“建筑师”，那么CSS就是装饰这间房屋的“装潢设计师”。CSS可以描述网页等文档的外观和格式，控制某类HTML标签内容的颜色、字体、宽度、高度等。写CSS代码时，需要先指定网页中的元素，然后对元素的颜色、字体等进行描述。浏览时，浏览器会按照CSS的描述显示相应的元素。CSS语句由选择器和声明两部分构成。选择器指向需要改变样式的网页元素。一个选择器对应的声明可以有多条，每条声明由属性和值组成，属性和值之间用冒号分开。每条声明以分号结束，所有声明用一对大括号括起来。【初露锋芒】1．请参考如下代码，尝试用CSS对科技节网页文本、标题、背景等进行美化。2．观察修改后网页显示效果的变化。【示例】【知识链接】【学习活动】三、实践探究尝试使用在线人工智能模型，美化已有的HTML代码。注：只要把已有的HTML代码提交给模型，然后要求它使用CSS美化就可以了。【示例】 听讲、思考、讨论 教师通过引领学生学习课程内容，促进学生学习知识。学生通过认真听讲、实践探究等方式，积极学习基础知识和相关技能。另外，通过提问的方式引发学生思考，培养其思考和解决问题的能力。
课堂小结 知识回顾 对课堂知识进行总结和梳理，帮助学生更好地理解和掌握所学内容。
拓展-提升 【拓展-提升】上网搜索使用HTML代码美化网页和用CSS美化网页的特点，总结出二者的区别。 自主探究 让学生通过课外拓展的形式巩固、强化所学内容，并适当拓宽其视野。
21世纪教育网 www.21cnjy.com 精品试卷·第 2 页 （共 2 页）
HYPERLINK "http://www.21cnjy.com/" 21世纪教育网(www.21cnjy.com)(共30张PPT)
（义务教育版）七年级
全一册
第18课
美化网页方法多
学习目标
激趣导入
学习活动
思考-讨论
实践探究
课堂小结
拓展-提升
单元主题
单元主题
单元名称 课名称 核心内容
第四单元 校园活动线上展 第16课　探秘网页与代码 网页与HTML代码、HTML标签、网页数据的呈现
第17课　制作网页展活动 标签格式、用HTML代码制作网页
第18课　美化网页方法多 HTML代码美化网页、串联样式表美化网页
第19课　多人协同效率高 多人协同制作网页、Markdown代码
第20课　组建网站跟我做 网站建设流程、发布网站
学习目标
激趣导入
【问题情境】
上一课，我们编写了简单的介绍科技节某个项目的网页，这好似用HTML 语言搭建好了“新房屋”的结构，接下来该怎样将“新房屋”“装修”得漂亮时尚？
激趣导入
【建构】
想象一下：当访客打开网页时，第一眼看到的是整洁的布局、舒适的配色，鼠标滑过按钮会有微妙的动画，滚动页面时内容像画卷一样徐徐展开 ……这就是我们今天要学习的网页美化技巧，它能让网页从 “平淡无奇” 变身 “科技感十足”！
现在，让我们拿起 “画笔”，开始给网页注入灵魂吧！
学习活动
学习活动
用HTML代码美化网页
一
学习活动
一、用HTML代码美化网页
用 HTML 语言编写网页时，通过简单的标签代码，可以设定网页的文字大小、背景颜色等。
学习活动
一、用HTML代码美化网页
小试牛刀
请打开之前完成的科技节网页，使用 HTML 标签及属性对网页进行美化，如设置网页背景、设置字号、设置字体等。
学习活动
一、用HTML代码美化网页
【示例】
学习活动
一、用HTML代码美化网页
【思考-讨论】
交流讨论：这种方式是否便捷？美化效果好不好？
学习活动
一、用HTML代码美化网页
【知识链接】
学习活动
用CSS美化网页
二
学习活动
二、用CSS美化网页
用HTML代码进行美化，美化效果往往很有限，但操作却非常烦琐。在实际应用中，人们经常用CSS来美化网页。
CSS（cascading style sheets，串联样式表），生活中也经常被称为级联样式表或层叠样式表。
学习活动
二、用CSS美化网页
如果将HTML代码比作建造房屋的“建筑师”，那么CSS就是装饰这间房屋的“装潢设计师”。CSS可以描述网页等文档的外观和格式，控制某类HTML标签内容的颜色、字体、宽度、高度等。
学习活动
二、用CSS美化网页
写CSS代码时，需要先指定网页中的元素，然后对元素的颜色、字体等进行描述。浏览时，浏览器会按照CSS的描述显示相应的元素。
学习活动
二、用CSS美化网页
CSS语句由选择器和声明两部分构成。
选择器指向需要改变样式的网页元素。
一个选择器对应的声明可以有多条，每条声明由属性和值组成，属性和值之间用冒号分开。每条声明以分号结束，所有声明用一对大括号括起来。
学习活动
二、用CSS美化网页
学习活动
二、用CSS美化网页
学习活动
二、用CSS美化网页
初露锋芒
1．请参考右侧代码，尝试用CSS对科技节网页文本、标题、背景等进行美化。
2．观察修改后网页显示效果的变化。




学习活动
二、用CSS美化网页
【示例】
学习活动
二、用CSS美化网页
学习活动
实践探究
三
学习活动
三、实践探究
尝试使用在线人工智能模型，美化已有的HTML代码。
只要把已有的HTML代码提交给模型，然后要求它使用CSS美化就可以了。
学习活动
三、实践探究
【示例】
课堂小结
拓展-提升
上网搜索使用HTML代码美化网页和用CSS美化网页的特点，总结出二者的区别。
同学们可以通过绘制表格来呈现。
https://www.21cnjy.com/recruitment/home/fine

展开更多......

收起↑