资源简介

中小学教育资源及组卷应用平台
第2课《探秘网页与代码》教学设计
课题 探秘网页与代码 单元 第一单元 学科 信息科技 年级 七年级下
核心素养目标 信息意识:了解常用HTML标签的作用，在探究网页与代码的过程中，学生能够敏锐察觉网页信息的多样性、真实性及潜在风险。计算思维:能使用HTML语言制作简单的网页，能根据实际需求灵活应用HTML语言制作网页，展示文字、图片、音频或视频等。数字化学习与创新:积极主动地利用数字化工具，如浏览器的开发者工具、网页制作软件等，进行网页的学习与制作。信息社会责任:树立正确的网络价值观，认识到个人在网络空间的言行对网络安全和网络生态的重要影响。
教学重点 1. 深入理解 HTML 语言的基本概念、常用标签及其功能，全面掌握基本的网页制作流程，包括明确网页主题、规划页面结构、编写 HTML 代码实现页面内容展示、运用开发者工具调试代码以及发布网页等环节。
2. 熟练掌握使用浏览器开发者工具查看、分析和编辑网页代码的操作技巧，能够通过开发者工具观察网页代码与页面显示效果之间的关联，利用该工具进行代码调试和优化。
3. 了解网页制作工具的多样性，掌握至少一种网页制作工具（如记事本、在线网页制作工具等）的基本使用方法，能够根据实际需求选择合适的工具进行网页制作。
教学难点 1. 引导学生理解网页代码与页面显示效果之间的内在联系，使学生能够根据页面需求准确编写和修改代码，实现预期的页面效果，培养学生的代码理解和应用能力。
2. 帮助学生掌握网页制作过程中的细节和常见问题的解决方法，如文件保存格式、图片路径设置、代码语法错误排查等，提升学生的实践操作能力和问题解决能力。
3. 培养学生在网页制作中的创新思维和审美能力，鼓励学生设计出具有个性和创意的网页作品，避免网页设计的千篇一律。
教学过程
教学环节 教师活动 学生活动 设计意图
导入新课 板书课题。讲述壮壮上网搜集 “三月三” 内容时，被网页丰富的呈现效果所吸引，从而对网页实现方式产生好奇的故事。提问学生是否也有类似的好奇，引导学生思考网页是如何制作出来的，激发学生的学习兴趣。
2. 展示一些风格各异、内容丰富的网页，涵盖不同主题，如旅游、美食、科技等，让学生观察这些网页的视觉布局、交互设计和内容呈现等方面的特点，提问学生对这些网页的感受，引出本节课 “探秘网页与代码” 的主题。 1. 认真倾听故事，结合自身经历思考老师提出的问题，分享自己对网页制作的初步想法和好奇点。
2. 仔细观察展示的网页，分析其特点，积极回答老师的提问，表达自己对不同网页的感受，对网页制作产生浓厚兴趣。 1. 通过生动有趣的故事和多样化的网页展示，吸引学生的注意力，引发学生的共鸣，使学生快速进入学习状态。
2. 引导学生观察和思考，为后续教学内容的展开奠定基础，激发学生的学习主动性和求知欲。
讲授新课 新知讲解：探究
1. 指导学生用浏览器打开本地的 HTML 文件，讲解如何按下 “F12” 键或在浏览器工具栏中找到 “开发者工具” 并打开，展示开发者工具的界面，介绍其主要功能区域。
2. 让学生用鼠标在 “开发者工具” 窗口进行移动和点击操作，观察浏览器窗口内容的变化。提出问题：“同一个网页文件在浏览器窗口和开发者工具窗口的显示内容有何不同？各有什么特点？” 引导学生对比观察并思考。
3. 展示网页中部分文本内容在浏览器窗口和开发者工具窗口的对应区域，提问学生有何发现，引导学生总结 HTML 代码与网页显示文本之间的联系。
HTML 语言基础
1. 讲解 HTML（超文本标记语言）的基本概念，强调 HTML 标签是 HTML 中最基本的单位，通过一系列标签对网页内容进行格式定义。
2. 详细介绍常用的 HTML 标签，如、、、