中小学教育资源及组卷应用平台 第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美化就可以了。【示例】 听讲、思考、讨论 教师通过引领学生学习课程内容，促进学生学习知识。学生通过认真听讲、实践探究等方式，积极学习基础知识和相关技能。另外，通过提问的方式引发学生思考，培养其思考和解决问题的能力。 课堂小结 知识回顾 对课堂知识进行总结和梳理，帮助学生更好地理解和掌 ... ...
~~ 您好，已阅读到文档的结尾了 ~~
