第7课 网页的数据组织 教学设计 2023—2024学年浙教版（2023）初中信息技术八年级上册

Word文档版

学考宝(xuekaobao.com)友情提醒：html格式不完整，如有需要请根据文末提示下载并进行二次校对Word文档。

第7课《网页的数据组织》教学设计
【课标内容要求】
网络是《课程标准》的六条逻辑主线之一，互联网模块从互联网视角关注信息科技对学生学习、生活和未来发展的影响，强调学生适应互联网环境发展的新形态、新业态，抓住社会变革带来的基于，提升对“没有网络安全就没有国家安全”的认识。通过本模块的学习，学生能加深对互联网及相关新技术本质的认识，初步具备利用互联网基础设施和计算思维方法解决学习和生活中各种问题的能力。
【教学内容分析】
《网页的数据组织》选自浙江教育出版社2023年出版的初中信息科技八年级上册第二单元《互联网数据》里的第七课。本课内容属于“互联网应用于创新”模块，在本单元的学习中，学生从生活中真实的互联网体验入手，理解互联网中数据编码、传输和呈现的原理，初步掌握使用HTML语言等数字化工具对网页进行编辑和发布，分享数字作品，贡献有价值的数字资源，培养信息意识，发展计算思维。本节课主要内容为了解网页的数据组成，初步掌握HTML文档的基本结构，能够编辑较为简单的HTML网页代码，同时理解超链接的作用，承上启下，也为后面更为复杂的网页设计的学习奠定了基础。
【教学目标】
1.通过观察，了解网页的数据组织方式，初步认识HTML语言。
2.探究网页代码，掌握HTML文档的基本结构及标签格式，能简单使用HTML标签优化页面。
3.通过网页编辑实践，理解超链接的作用，感受文档互联、网站互联等带来的便捷，加深对互联网相关技术本质的认识和网络安全的责任感。
重点：探究网页代码，掌握HTML文档的标签设置及基本结构，能初步编辑HTML网页代码。通过网页编辑实践，理解超链接的作用，掌握超链接的编写格式。
理由：本课内容不需要复杂的语言结构和算法设计，学生只要熟悉基本格式，掌握了标签的设置便能对网页进行初步的编辑，而超链接是实现文档、网页、网站等互联的关键技术。因此，掌握和熟悉HTML文档的基本结构，理解超链接作用是本课的重点。
难点：探究网页代码，掌握HTML文档的标签设置及基本结构，能初步编辑HTML网页代码。通过网页编辑实践，理解超链接的作用，掌握超链接的编写格式。
理由：学生第一次接触HTML,编写时的缩进等文档基本结构，以及标签所涉及的英文单词、符号、位置等，对于初二学生而言还是存在一定难度，尤其对基础薄弱的学校学生有一定的困难。超链接格式中的链接位置因链接对象不同而不同，对于学生而言需要进行仔细的辨别和适当的处理。
【核心素养指向】
1.认识到互联网（网页信息）对社会发展的影响，善于使用信息科技（HTML标记语言）解决学习和生活中的问题。（信息意识）
2.在观察和探究网页代码中了解网页的数据组织，分析提取数据组织的基本特征，对网页编辑任务中存在的问题进行抽象、分解、建模，制定解决方案，并能有效执行，及时反思和优化。（计算思维）
3.按照任务需求，选择合适的平台和资源，合作完成数字化创新活动的创意、规划与实施，并能在学习中受到互联网创新发展的启示。（数字化学习与创新）
4.在合培养良好的协作意识与习惯，在网页编辑中自觉遵守相关法律法规，掌握必要的安全防护常识，强化网络安全、自主可控对国家安全的重要性的认识。（信息社会责任）
【学情分析】
本课的授课对象为八年级学生，作为高段学生已具备一定的认知水平和操作技能，抽象思维也日渐完善，在小学阶段的学习中，学生已对身边的网络应用大环境有了体验和经历，并有一定的编程基础。本课前几章内容的学习也已让学生对互联网应用已有了较为全面的认识，具备了网络搜索，通过互联网进行数字作品创作并分享等操作技能。以上对于学生本课内容的学习都有一定的帮助，但因为课程之间时间较长，本课内容又涉及HTML编写，作为初中以来的第一次程序编写，对于很多学生而言还是存在较多的挑战。需要充分利用学生的好奇心和好胜心，合理设计任务，激发学生学习积极性，做好辅助文档，帮助学生突破重难点。
【设计构想】
1.整体设想
本课教学本着“以学为中心”的理念，以解决如何设计人工智能网页任务为情境主线，在网页文档代码的查看和探究中引出HTML语言，结合视频观看，让学生感知网页的数据组织方式，由此联系到网站、网页是如何存放、管理、组织数据，呈现出丰富的网页内容。接着结合刚才内容，让学生自主探究，掌握HTML文档的基本结构和标签的使用，通过小组合作，初步编辑出网站首页，分享解决的步骤和思路，展示作品。随后，发动学生开展网站优化讨论，小组制定优化方案，参考书本内容，进行网站的美化（图片插入、居中、背景色、字体格式等修改），并展示。超链接实现了网页之间的跳转，让一张张网页犹如珍珠般串联在一起，因此超链接技术作为网页设计中的技术升华，放在最后进行实现。除了网页之间链接，还可以实现文档互联等，让学生深刻体会到网页浏览过程中蕴含的技术本质，理解技术可控的重要性，进一步培养学生计算思维、创新意识、安全意识。最后，以含有网页效果（CSS设置效果）的页面进行对比，给学生留下思考空间，为下一节课的学习做好铺垫。
2.教法学法
以任务驱动和问题引导为主要教学方法，激发学生学习兴趣，培养学生自主探究的学习习惯和意识，结合演示法和讲授法，提高学生对于重难点的突破和知识的掌握。
3.情境与任务
以设计人工智能网页为项目，在该项目的真实情境下，将项目进行抽象分析，根据主要实现目标进行分解，对分解后的内容进行建模，学生对该项目的实施制定合理的方案，并结合方案进行探究和实践。在设计网页的主线任务下，分设认识HTML语言及基本结构、编辑HTML文档初步完成主页、添加HTML标签优化网页、添加超链接实现页面跳转等四大块任务。学生在完成任务掌握新知识、突破重难点、完成学习目标。
4.学生活动
学生通过课前实情体验导入、情境探索、项目实战等环节，一步步深入理解超文本标记语言的概念、意义、特点及其在网页编辑制作中的各项应用，最后通过超链接的设计，体会页面、文档等数据互联的重要性，感受网络设计中的计算思维、创造性思维解决问题的有效性，激发对网络学习的欲望。
5.核心素养的落实
学生通过完成设计网站首页项目，对日常生活中的网页数据如何进行有效组织等问题进行分析，认识到HTML超文本标记语言的作用，能判断生活中网页的数据组织方式，借助HTML文档的基本结构和标签的使用方式，能够将HTML标记语言的相关知识进行迁移，解决日常生活中的一系列问题，同时感受网络安全的重要性。
6.评价设计
学生自评指标：是否了解数据结构在现实生活中的应用，能否理解并掌握栈、队列和数组的基本概念、在生活中理解、应用栈、队列和数组的基本操作，了解数据结构在信息技术发展和应用中的重要作用，能够正确使用数据结构为社会服务，能否运用学到的知识，进行创新思考和实践探究。
过程性评价：以认识HTML语言及基本结构、编辑HTML文档初步完成主页、添加HTML标签优化网页、添加超链接实现页面跳转等四个内容为评价学生四个过程性阶段，每个阶段进行描述、展示、评价，结合任务单，判断学生是否逐个掌握。
终结性评价：学生是否掌握了HTML文档的基本结构，能否通过标签优化网页，并能判断生活中HTML语言的应用情况和价值。
【教学环境及资源准备】
HTML半成品文件、供参考网址、帮助文件、能上网的计算机
【教学活动设计】
学习任务 学习过程 设计意图（写出一个环节的设计意图，包括： 用时
（各环节） 本环节学生学习情况 的检测，核心素养的渗透，重难点的落实） （单位：分钟）
教师活动 学生活动
一、情境导入 回顾上节课的人工智能网页设计方案，让学生用浏览器打开下发的HTML半成品文档查看。 思考如何完善半成品网页，实现组织有序且包含丰富文本、图像、视频等内容的网页。 打开半成品网页，思考网页是通过什么来设计、组织的。明确今天上课任务。 回顾上节课网页设计方案，提出如何制作网页的问题，引起学生思考，快速引出HTML语言和今天要完成的主要任务。 3
引出HTML语言，提出今天要完成的小项目：初步搭建人工智能首页。
二、初识HTML语言及其基本结构 在刚才打开的半成品网页中按F12，引导学生观察网页显示内容和对应的HTML代码。 结合书本P33页内容，鼓励学生自主观察和探究，寻找HTML标签与网页对应的内容。 引导学生阅读P34页HTML标签，让学生用文本打开html，尝试修改网页的标题为“人工 学生打开网页后，按F12查看HTML代码，观察网页显示的内容和对应的HTML代码。 结合书本知识，自主探究，完成任务单中HTML语言的认识。 学生阅读标签，并描述特点，尝试修改网页的标题为“人工 通过半成品网页“开发人员工具”查看，初步认识HTML语言，通过自主探究，了解HTML语言的作用，找到网页显示内容和对应的HTML代码。通过初步编辑，了解HTML基本结构及标签，初步掌握本课的重点内容，为接下去的网页编辑设计做好铺垫。 10
智能主题网站”（仅文字），内容为“走进人工智能”（标签加文字） 4.教师小结HTML结构和标签概念。 智能主题网站”，内容为“走进人工智能”并展示，阅读解释代码。
三、熟悉标签，优化网页 小组合作，讨论提出网页网页优化方案，并选择其中现阶段可行的内容进行修改。 教师汇总方案，由浅入深优化网页。并对图片地址进行提示说明。 展示学生作品，并做评价，讲解并展示其他标签。 学生讨论，并提出可行的修改方案。 小组合作，探究其他标签的使用。 主要为：字体居中，标题变大，插入图片三个 通过小组讨论，提出优化方案，激发学生自主性和积极性，培养学生计算思维和数字化创新意识。通过其他标签的插入编辑，提升学生对HTML语言的认识，通过教师演示、小组合作探究突破本课难点，进一步帮助学生掌握重点，挖掘网页呈现的本质。 10
四、添加超链接，完善网页功能。 一张网页无论我们怎么去丰富完善，总有其局限性，询问学生如何扩展网页的功能？引出超链接 引导学生通过自主探究了解超链接标签的格式，小组合作在代码的8,9行添加链接元素“发展”“历史”，链接到相应的文档。3.展示学生作品，提示超链接标签的格式及要点，对链接位置进行说明。让学生修改后进行编辑 提升：在第10行添加链接元素“搜索”，链接到百度网页。 4.再次展示，让学生描述编辑过程，想法，以及对超链接的认识和意义。 探究超链接标签格式 通过探究合作完成超链接元素的插入。 思考超链接的作用和意义。 超链接实现了网页的跳 转，使得文档、网站互联，学生通过超链接标签的设置，体会网页互联后的强大，提升学生对自主可控技术重要性的认识。 10
五、总结 引导让学生讨论，并小组为单位总结今天网页设计项目的完成情况，归纳完成过程中所学到的知识和处理过程。 教师总结今日内容。提出网页安全防护、网页内容遵守相关法律法规，网页的自主可控等信息社会责任。 3.打开电子科技博物馆网站，按F12查看HTML代码，思考讨论如何让网页内容实现更好的显示效果，引出CSS等概念。 小组讨论总结归纳，并回答 打开电子科技博物馆网站，查看源代码，寻找自己熟悉的标签，并思考如何让网页内容有更好的现实效果。 小组回顾、反思、总结学习过程，提高信息社会责任意识，通过其他优秀网站的源代码查看，激发好奇心，为夏一节课的内容学习做好铺垫。 5
板书设计

图片资源预览