资源简介

第8课《网页的数据呈现》教学设计
【课标内容要求】
了解常用互联网应用中数据的构成，能够使用适当的数字化工具对网页进行编辑和发布。初步了解互联网协议，知道网络中数据的编码、传输和呈现的原理。
【教学内容分析】
本课属于“互联网应用与创新”模块，是2023浙江省版八上第二单元第八课的教学内容。本课通过学习使用CSS（层叠样式表）来设置网页样式和布局，包涵认识CSS及其作用、掌握CSS的语法结构、理解CSS的优点等内容。本课是在学习了前一课《网页的数据组织》基础上，进一步学习样式美化设置，了解网页数据呈现样式的原理，为下一课更好地呈现网页交互做好准备，起到承上启下的作用。
【教学目标】
1.通过体验CSS设置的效果，认识CSS，了解CSS的作用。
2.通过在网页中添加样式的探究，掌握CSS的语法结构。
3.通过链接CSS文件设置样式的体验，理解分离式CSS的便捷性。
重点：通过CSS修改和添加样式，认识CSS，掌握CSS的语法结构。
（理由：CSS是一种常用的网页样式设计方式，学生初识CSS，若仅从样式表这个抽象的概念去解说，是不能对CSS有较清晰的认知，可以通过学习探究样式的修改、添加等任务，切身体验感知，结合教师解说，认识CSS及其作用：是一种用于描述网页样式和布局的语言，并掌握CSS的使用即语法规则。）
难点：理解分离式CSS的优点。
（理由：为什么要使用CSS设置样式，它能带来哪些效益，需要在一系列的学习活动中，去体验了解分离式CSS的形式，感知它的便捷性，从而理解分离式CSS的优点。）
【核心素养指向】
1.能够借助学习资源，自主动手解决问题，掌握核心技术。（信息意识）
2.用计算机科学领域的思想方法，在形成问题解决方案的过程中产生一系列思维活动。（计算思维）使用数字化学习工具，开展探究性学习，创造性地解决问题。（数字化学习与创新）
【学情分析】
学生在学习了上一课《网页的数据组织》，认识了HTML（超文本标记语言）,掌握了HTML文档的基本结构，会使用HTML的常用标签初步编辑网页的内容和简单样式，但页面效果较简陋，且HTML主要是用于描述网页的结构和内容。为此引入新知：CSS样式设置，让学生学习便捷的样式设计方法，通过任务活动，施展设计技能，提高制作网页的兴趣，为今后创作有价值的网页作品创造条件。
【设计构想】
1.整体设想
以无样式页面效果呈现的问题，引出样式设置需求。先以学生已知的HTML标签中属性设样式的方式来呈现代码范例，察觉这种方式的缺点，再引出优化的方式：CSS设置样式，从而展开新知学习：使用CSS设置样式。通过两个活动任务，实现给半成品网页修改和添加样式，从中认识CSS，掌握CSS的语法结构，以此落实本课的教学重点。通过体验应用外部.css文件设置样式，从中感受分离式CSS的便捷性，从而理解分离式CSS的优点，以此实现本课的教学难点。
2.教法学法
采用对比分析、任务探究、实践体验、演示讲解、归纳总结等教学方法。
3.情境与任务
展示无样式页面效果，呈现问题：内容样式不协调统一、缺乏整体性。引出解决问题需求，从而提出课题：《网页的数据呈现》。以学生已有的学习认知：通过HTML标签中属性设样式来展开，引导思考其中的问题缺点，提出优化的方式——使用CSS设置样式。
任务一：协调内容——修改大标题颜色、修改图片大小、设置三个小标题样式。任务二：美化页面——给三个小标题单元格及网页添加合适的背景。
任务三：体验方式连接外部.css文件，进行样式效果的应用。4.学生活动
活动1：对比两种样式设置方式的区别，理解CSS设置样式方式相较于HTML标签属性设置样式方式的优势。
活动2：借助导学稿中“CSS属性说明”表，自主学习探究样式的修改和添加，实践体验，示范解说。
活动3：探讨：多页面应用同一种样式，该如何实现？体验链接外部.css文件应用样式，修改css文件查看网页效果，感受分离式CSS的便捷性。
4.核心素养的落实
本课通过问题设置，引发学生思考，进而促使学生观察、分析、构思等一系列思维活动，并带领学生探究、验证、优化问题的解决，即培养计算思维素养。借助学习资源，使用代码编辑器开展学习实践，尝试解决问题并加以美化，即培养数字化学习与创新素养。利用各种学习平台延伸后续学习，实现多样化的样式设计，即培养信息意识素养。
5.评价设计
过程性评价：课堂中设置问题，学生通过观察、分析、理解等活动，进行反馈和交流，评价学生学习认知。在任务活动过程中，对学生学习探究中遇到的知识、技能和解决方法等问题加以帮助和评价，然后个别学生上台广播示范并作相应解说，引导台下学生思考和评价。
终结性评价：对学生最终作品进行点评，采用师生共评，让评价多样化，全面且客观。学生自评、互评时，需理性评价自己和他人的学习成果，依据下表开展实施。
评价标准 自评 互评
标题样式是否协调 ☆☆☆ ☆☆☆
图片样式是否统一 ☆☆☆ ☆☆☆
页面色彩是否和谐 ☆☆☆ ☆☆☆
【教学环境及资源准备】
安装Notepad软件、课件、范例网页
学生用：导学稿、index.html半成品文件、css文件夹、“颜色代码”网站
【教学活动设计】
一、复习回顾
上节课学习认识了HTML文档的基本结构，并学习使用HTML标签给网页设置标题，给网页添加各种类型的元素：文本、图像、超链接等。
老师这里有一个介绍“人工智能应用”的网页设计，我们先来查看下它的HTML代码（ppt呈现index0.html的代码），请同学们思考并解析下：在这个网页中设置了哪些内容？
生：思考、分析内容结构。网页标题；网页正文中有图、大字号标题、表格、水平线、制作者信息等。
（预设回答）
师：补充解说，如表1中三列编辑了三个标题，表2中三列编辑了三张图。
【设计意图】《网页的数据呈现》与前一课《网页的数据组织》是递进关系，是在学习了HTML对网页数据元素组织的基础上，进一步学习样式美化设置，为了能有效地开展新知学习，则需对前面知识进行复习回顾，以便学生扎实所学、有序前进。
二、问题导入(引出学习需求)
我们通过浏览器来呈现这个代码文档（index0.html：无样式设置）的页面效果，出现了什么问题？生：内容样式不协调统一、缺乏整体性。
针对这样的呈现问题，如何解决？
生：思考、提出样式方案。如：文字的字体字号颜色、位置；图片和表格的大小、位置布局；网页背景等。（预设回答）
是的，网页设计不仅是对数据内容的组织，还需要对数据内容的呈现效果进行样式设置。——课题：《网页的数据呈现》
【设计意图】以问题为导向，试图让学生分析问题、构思样式、提出方案，从中灌输思维能力的培养。从学生中提炼学习需求（样式方案），指明样式设置的大体方向，为落实后面的学习任务做好铺垫。
三、对比设置方式，提出CSS优势。（提出学习内容）
那么如何对网页的数据内容进行样式设置呢？这里介绍两种设置方式。方式一：通过HTML标签中属性设置样式。
在HTML常用标签表中我们会发现：直接在HTML标签中定义属性可以来实现样式设置。我们来看下这个网页文件范例：index1.html的代码，里面的数据内容是通过HTML标签中属性来设置样式的。
师：简要解说。例如：头图的大小设置
；
主标题的居中设置

走进人工智能

等。
标签属性的语法结构：
<标签属性1=”属性值1”属性2=”属性值2”……>（单标签）
<标签属性1=”属性值1”属性2=”属性值2”……>（双标签）
这种方式是给每个元素的标签中声明一个或多个属性来设置样式，比较直观，便于单个修改，但有什么缺点吗？
生：思考。（提示：index1.html代码中同类别的元素样式设置，如三个标题，三张图片）
缺点：同类别的元素样式设置会出现代码重复性，造成代码冗余，当网页数据较多时，一定程度上会影响浏览器的解析（呈现）速度。
方式二：使用CSS设置样式。
我们再来看下这个网页文件范例：index2.html的代码，与index1.html的网页效果一样，但index2.html的中只组织了内容结构，而在标签中多了 置于标签中 应用于当前页面
外部样式表 置于标签中 应用于多个页面
内联样式表 <标签style=”样式属性1：属性值1；样式属性2：属性值2；样式属性……”> 置于标签中 应用于单个元素
优先级：内联样式＞内部样式＞外部样式
④分离式的CSS优点：提高网页加载速度易于维护和更新提高开发效率
利用CSS可以实现多样的页面样式效果（ppt展示网页设计效果图），我们可以在课余时间借助学习平台来学习CSS多样化的样式设置。
附：学习网站
CSS教程_w3cschool
CSS教程(.cn)
https://navnav.co/
【设计意图】围绕本课的学习重点和难点来总结知识内容，简明扼要地提炼知识框架，同时补充知识链接，完善知识体系，助于学生对知识能有清晰地认知和理解。提供学习平台，便于今后的延伸学习。
板书设计：
网页的数据呈现
CSS？：层叠样式表，是一种用于描述网页样式和布局的语言。
CSS的语法结构：选择符{样式属性1：属性值1；样式属性2：属性值2；样式属性……}分离式CSS的类型：内部样式表、外部样式表
分离式CSS的优点：提高网页加载速度
易于维护和更新提高开发效率

展开更多......

收起↑