资源简介

中小学教育资源及组卷应用平台
《网页的数据呈现》教学设计
一、学习内容分析
《网页的数据呈现》是浙江教育出版社《信息科技》八年级上册第二单元第8课。本课通过学习使用CSS（层叠样式表）来设置网页样式和布局，包括认识CSS及其作用、掌握CSS的语法结构、理解CSS的优点等内容。本课是在学习了前一课《网页的数据组织》基础上，进一步学习样式美化设置，了解网页数据呈现样式的原理，为下一课更好地呈现网页交互做好准备，起到承上启下的作用。
二、学情分析
本课的学习对象是八年级学生，该年段的学生在日常学习与生活中已经能够熟练使用各种浏览器查看网页，对于网页的编辑有着浓厚的学习兴趣，并且已经掌握了HTML语言基本结构和简单属性设置，但页面效果较简陋，且HTML主要是用于描述网页的结构和内容，需要教师进一步进行引导学习。所以引入新知：CSS样式设置，让学生学习便捷的样式设计方法，通过任务活动，施展设计技能，提高制作网页的兴趣，为今后创作有价值的网页作品创造条件。
学习目标
教学目标 核心素养指向
1.通过体验CSS设置的效果，认识CSS，了解CSS的作用。2.通过在网页中添加样式的探究，掌握CSS的语法结构。3.通过链接CSS文件设置样式的体验，理解分离式CSS的便捷性。 【计算思维】用计算机科学领域的思想方法，在形成问题解决方案的过程中产生一系列思维活动。【数字化学习与创新】通过对导学单等学习支架的自主学习，提升学生的数字化学习能力。
四、教学重难点
教学重点：通过网页中添加样式，掌握样式表的基本结构。
教学难点：理解使用CSS降低网页代码耦合度所带来的便利性。
五、课前准备
学习资源：学习单、资源包（上节课作品、图片、半成品网页文档1.0和2.0、
颜色卡片图）
设计思路
问题链：
1.在这个网页中设置了哪些内容？
2.修改国家博物馆网页的样式发生什么变化？
3.两种方式有什么不同点？
4.CSS设置样式有什么优点？
5.如果有多个页面需要应用同一种样式，该怎么办呢？
七、学习过程
（一）复习回顾，引出主题
教学内容与活动 设计意图
上节课学习认识了HTML文档的基本结构，并学习使用HTML标签给网页设置标题，给网页添加各种类型的元素：文本、图像、超链接等。请同学们思考并解析下：在这个网页中设置了哪些内容？（上一节课某个学生作品） 网页的数据呈现》与前一课《网页的数据组织》是递进关系，是在学习了HTML对网页数据元素组织的基础上，进一步学习样式美化设置，为了能有效地开展新知学习，则需对前面知识进行复习回顾，以便学生扎实所学、有序前进。
（二）探究学习，动手实践
教学内容与活动 设计意图
1.问题导入我们通过浏览器来呈现这个代码文档（上一节课某个学生的无样式设置作品）的页面效果，出现了什么问题？反馈交流：思考、提出样式方案。2.对比试验探究，提出CSS优势。通过HTML标签中属性设置样式。（上节课学习）活动一：完成学案中的玩一玩和想一想活动。提问：两种方式有什么不同点？同类别的元素样式设置会出现代码重复性，造成代码冗余，当网页数据较多时，一定程度上会影响浏览器的解析（呈现）速度。3.div与css教师介绍div标签和css,观看视频。CSS全称为层叠样式表（Cascading Style Sheets）,它是一种用来描述网页样式和布局的语言，如网页中文字的字体、字号、颜色、位置以及图片的大小等。4.自主探究实践活动二：利用半成品1.0或半成品2.0，修改CSS样式中的属性和参数美化上一节课网页作品。（主要包括协调内容——修改各个div颜色、修改图片的大小、设置文本样式。）反馈交流：展示并总结主要问题与解决方法。5.深入学习体验，理解CSS便捷教师演示CSS的三种导入方式，学生深刻理解CSS的层叠性与解耦性。 以问题为导向，试图让学生分析问题、构思样式、提出方案，从中灌输思维能力的培养。通过两个代码范例呈现，让学生直观感受两种样式设置方式的区别，能够理解HTML标签属性设置样式的缺点，提出优化的设置方式，从而引出对CSS的学习。以半成品的形式来补充代码，适于初学者，便于仿照学习。通过两个任务活动，展开探究学习，实现样式的修改和添加，从中认识样式表，掌握其语法结构，以此落实本课的学习重点，同时体会样式表带来的作用效果。以问题激发学生思考，带领学生一步步探索认知CSS的其他形式，通过任务体验，切身感受应用CSS文件设置样式的便捷性，从而理解分离式CSS的优点。
（三）课堂小结，知识延伸
教学内容与活动 设计意图
课堂小结与作品展示展示作品并对作品进行自评互评，对本课所学知识进行总结。引导学生进行作品点评、课堂总结。 对本课知识进行总结，将所学的知识进行内化。同时提出作品还需要完善的地方，为后续作品的更新迭代做铺垫。
21世纪教育网 www.21cnjy.com 精品试卷·第 2 页 （共 2 页）
HYPERLINK "http://21世纪教育网(www.21cnjy.com)
" 21世纪教育网(www.21cnjy.com)

展开更多......

收起↑