资源简介

中小学教育资源及组卷应用平台
第1课时教学设计
课题 第三单元第2节 编辑网页分享学习成果（第1课时） 单元 第三单元 学科 信息科技 年级 七年级 上册
教材分析 本节是第三单元“利用互联网探究与分享”的第2节，主要内容包括网页元素的认识、超链接的功能、H5网页的制作方法。学生在第1节已经学习了利用搜索引擎获取资源、使用在线文档进行协同编辑，具备了一定的数字化学习基础。本节课从认识网页元素入手，逐步深入到H5网页的制作，为下一节学习HTML代码编辑网页奠定基础，培养学生的信息意识和数字化学习与创新能力。
学习目标 1.信息意识：认识到网页是分享学习成果的重要载体，了解网页元素的多样性，形成利用网页展示和传播信息的意识。
2.计算思维：能够分析网页元素的类型与作用，理解HTML标签的基本结构和功能，掌握制作H5网页的基本方法，形成结构化思维。
3.数字化学习与创新：能利用在线H5网页制作工具，制作并展示黄金分割学习成果的H5网页，通过翻页、图片等元素丰富网页内容，提升数字化创作能力。
4.信息社会责任：在网页制作与分享过程中，遵守网络道德规范，尊重他人知识产权，负责任地发布和分享有价值的学习资源。
重点 重点：认识网页元素的类型，理解超链接的作用，掌握制作H5网页的基本步骤。
难点 难点：理解H5网页的工作原理，熟练运用在线工具制作有创意的H5网页。
教学过程
教学环节 教师活动 学生活动 设计意图
导入新课
（3分钟） 1.情境导入(PPT第4页)：展示不同类型的网页截图，提问学生平时浏览过哪些网页，网页上有哪些类型的内容。引导学生回忆上网经历，激发学习兴趣。
2.主题呈现(PPT第5页)：引出本课主题——编辑网页分享学习成果。展示本节课学习目标，明确学习任务。引导学生思考：如何将黄金分割探究成果以网页形式分享给更多人？ 1.观看网页截图，回忆自己的上网经历。
2.思考教师提出的问题，积极回答。
3.明确本节课的学习目标和任务。 通过情境导入，激发学生的学习兴趣，引出本节课主题，帮助学生明确学习目标。
讲授新课
（10分钟） 1.讲解网页元素的概念(PPT第6页)：介绍网页元素的定义和常见类型，包括文字、图片、动画、音频、视频、超链接和动态内容。结合教材图3-2-1说明网页在展示成果中的作用。
2.分析网页元素的变化(PPT第7页)：对比早期网页和现代网页，引导学生分析网页元素种类的发展变化。介绍小贴士：动态内容是在用户交互过程中产生的，包括查询、留言板、论坛、在线新闻等。
3.讲解超链接(PPT第8页)：在科学园地栏目中介绍超链接的概念和作用，说明超链接将各个孤立的网页相互联系起来。超链接通常内嵌在文字或图片中，鼠标光标移至超链接上时会变为手指形状。结合图3-2-4进行讲解。 1.认真听讲，理解网页元素的概念和分类。
2.对比不同网页，分析网页元素的发展变化。
3.理解超链接的作用和特点。 通过系统讲解和对比分析，帮助学生认识网页的基本元素，理解超链接的重要作用，为后续学习打下基础。
4.组织活动3.2.1(PPT第9页)：布置活动任务——分析网页元素种类的变化。让学生对比教材图3-2-2和图3-2-3中的网页，分析网页元素种类发生的变化，思考不同类型载体的表达效果有何不同。组织学生分组讨论，填写活动记录表。巡视指导，引导学生深入思考。 6.讲评活动3.2.1参考答案(PPT第10页)：对照活动参考表讲评——图3-2-2网页只有文本（文字），元素单一；图3-2-3网页在文字基础上新增图片、音频、视频、超链接等多媒体元素；文本适合精读但枯燥，图片直观形象，音频适合碎片化学习，视频生动易懂但占用流量。 1.阅读活动要求，明确任务。
2.分组讨论，对比分析网页元素的变化。
3.填写活动记录表，记录分析结果。 通过活动探究，培养学生的观察分析能力和合作学习能力，加深对网页元素的理解。
5.讲解H5网页(PPT第11页)：介绍H5网页的概念——以HTML5为主要技术制作的网页。说明H5网页的特点：互动性更强、页面显示效果更丰富、更适合在移动设备上浏览。举例说明H5网页的应用场景，如邀请函、贺卡、小游戏、测试题等。 HTML(Hypertext Markup Language，超文本标记语言)是编写网页的标准语言。如今，HTML已经发展到第5代，简称H5。 6.讲解制作H5网页的步骤(PPT第12-13页)：分步骤详细讲解H5网页的制作过程：步骤1打开在线H5网页制作工具；步骤2选择模板新建H5网页；步骤3修改网页主题和更换图片；步骤4设置翻页方式；步骤5预览效果；步骤6分享链接。结合图3-2-6至图3-2-10进行演示说明。 1.了解H5网页的概念和特点。
2.学习H5网页的制作步骤，记录操作要点。
3.观看教师演示，理解每一步的操作方法。 从理论到实践，循序渐进地讲解H5网页制作方法，为学生的实践操作奠定基础。
课堂练习
（10分钟） 1.案例分析(PPT第14页)：展示案例——如何用H5网页展示黄金分割探究成果。引导学生阅读案例，思考设计思路。组织学生讨论案例中的设计方法。公布参考答案，结合参考答案进行讲评——1.打开在线H5网页制作工具（如易企秀、MAKA等）；2.选择合适的展示类模板；3.修改网页主题为"黄金分割跨学科探究"；4.按学科分类添加图片和文字说明；5.设置翻页方式为左右翻页；6.添加小组信息页；7.预览并调整效果；8.生成链接分享给组员和老师。
2.做一做(PPT第15页)：布置课堂练习任务——设计一个H5网页的结构框架。要求学生独立思考，完成练习。巡视指导，对有困难的学生进行个别辅导。提供参考方案，供学生对照学习——参考：1.可选择易企秀、MAKA、兔展等H5制作平台；2.模板可选展示类或杂志类；3.页面内容可包括封面、数学中的黄金分割、美术中的黄金分割、自然中的黄金分割、封底等；4.翻页方式选左右翻页或上下翻页；5.预览时注意检查图片是否清晰、文字是否易读。
3.说一说(PPT第16页)：组织学生进行说一说活动，讨论网页中哪些元素印象最深刻，H5网页和普通网页相比有什么不同。鼓励学生积极发言，分享自己的看法——如"H5网页的翻页效果很酷，像看杂志一样""网页中的视频元素让信息更生动，更容易理解""超链接太神奇了，点一下就能跳到别的页面"。 1.阅读案例，思考分析案例中的设计思路。
2.完成课堂练习，设计H5网页结构框架。
3.参与讨论，积极发言，分享自己的观点和看法。 通过案例分析、动手练习和讨论交流，巩固所学知识，培养学生的设计思维和表达能力。
拓展延伸
（4分钟） 布置拓展活动——网页元素大搜索(PPT第17页)：让学生课后浏览常用网站，记录网页元素类型，数一数超链接的数量和链接目标，思考不同网站的元素特点。提示学生注意网络安全，保护个人信息，不随意点击不明链接。 明确拓展任务要求，课后完成拓展活动，记录自己的发现。 将课堂知识延伸到课外，培养学生的观察能力和信息素养，激发学生的探究兴趣。
课堂小结
（3分钟） 课堂总结(PPT第18页)归纳本课5点要点：1.网页元素——文字、图片、动画、音频、视频、超链接、动态内容；2.超链接——将各个孤立的网页相互联系起来，内嵌在文字或图片中；3.H5网页——以HTML5为技术制作，互动性强，适合移动设备浏览；4.制作步骤——打开工具→选模板→改内容→设翻页→预览→分享；5.活动3.2.1——分析网页元素种类的变化，比较不同载体的表达效果。结合“认识网页元素→了解超链接→认识H5网页→制作H5网页→分享成果”的知识脉络整体回顾。 跟随教师回顾本节课内容，梳理知识脉络，整理笔记，提出疑问。 系统总结本节课知识，帮助学生形成完整的知识结构，巩固学习成果。
板书设计 主题：编辑网页分享学习成果
核心：认识网页元素 → 超链接 → H5网页 → 制作与分享
概念：网页元素包括文字、图片、动画、音频、视频、超链接、动态内容
核心：网页元素 ｜ 超链接 ｜ H5网页 ｜ 制作步骤 ｜ 成果分享
示例：文字+图片→基础元素；超链接→联系网页；H5→移动端互动网页
流程：认识元素 → 了解超链接 → 认识H5 → 制作H5 → 预览分享
（见PPT第19页板书设计） 通过板书呈现本节课知识框架，帮助学生整体把握知识结构，加深理解和记忆。
课后作业 布置课后作业(PPT第20页)：思考：网页中的超链接有什么作用？H5网页有什么特点？
实践：使用在线H5网页制作工具，制作一个展示你兴趣爱好的H5网页。
观察与发现：观察你常用的3个网站，记录它们使用了哪些网页元素，填写在调查表中。
调查与记录：调查家人或朋友使用H5网页的情况，了解他们对H5网页的看法。 分层布置作业，巩固所学知识，提升学生的实践能力和信息素养。
21世纪教育网 www.21cnjy.com 精品试卷·第 2 页 （共 2 页）
21世纪教育网(www.21cnjy.com)中小学教育资源及组卷应用平台
第2节 编辑网页分享学习成果（第1课时）· 课堂练习单
姓名：______________ 班级：______________ 日期：______________
一、填一填（网页元素与超链接）
网页元素　超链接　H5网页　HTML　动态内容　文字　图片　视频
术语 含义（填一填）
网页元素
超链接
H5网页
HTML
二、连一连（将下列概念与其含义连线）
概念 含义
文字 将各个孤立的网页相互联系起来
超链接 最基本的网页元素，用于传递信息
图片 在用户交互过程中产生的内容
动态内容 增强视觉效果，丰富页面内容
三、填一填（H5网页制作步骤）
H5网页制作步骤 填一填
步骤1：打开在线（　）网页制作工具
步骤2：点击（　）按钮，选择合适的模板
步骤3：修改网页（　），更换图片
步骤4：在翻页设置中选择（　）方式
步骤5：在（　）模式中查看网页效果
四、判一判（判断对错，正确打√，错误打×）
网页只能包含文字和图片，不能有音频和视频。（　）
超链接可以将各个孤立的网页相互联系起来。（　）
H5网页只能在电脑上浏览，不能在手机上查看。（　）
HTML是编写网页的标准语言，已经发展到第5代。（　）
动态内容是在用户交互过程中产生的。（　）
五、说一说（你喜欢的网页元素有哪些）
网页元素 我喜欢的原因（说一说）
文字
图片
视频
超链接
第2节 编辑网页分享学习成果（第1课时）· 探索活动单
姓名：______________ 班级：______________ 日期：______________
活动一：分析网页元素种类的变化（活动3.2.1）
对比教材图3-2-2和图3-2-3中的网页，分析网页元素种类发生的变化，记录在下表中。
对比项目 早期网页（图3-2-2） 现代网页（图3-2-3）
包含的元素类型
视觉效果
互动性
活动二：制作H5网页（活动3.2.2）
按照以下步骤制作一个展示黄金分割学习成果的H5网页，记录每一步的操作和效果。
步骤 操作内容 效果记录
1 打开在线H5网页制作工具
2 选择合适的模板，新建H5网页
3 修改网页主题，更换图片
4 在翻页设置中选择翻页方式
5 在预览模式中查看网页效果
6 将H5网页链接分享到小组交流群
活动三：H5网页创意设计
设计一个主题为'我的兴趣爱好'的H5网页，规划网页的页面结构和内容，记录在下表中。
页面 页面主题 主要内容
第1页（封面）
第2页
第3页
第2节 编辑网页分享学习成果（第1课时）· 课后调查单
调查人：______________ 调查对象：______________ 日期：______________
亲爱的同学，请在家长的指导下，调查3个常用网站的网页元素使用情况，记录它们的特点，比较不同网站的异同。
序号 网站名称 网页元素类型 特点 超链接数量
1
2
3
4
5
6
提示：关注文字、图片、视频、音频、超链接、动态内容等元素的使用。
我的发现与感想
家长评价
家长签名：______________ 日期：______________
评价（√）： ☆ 优秀 ☆ 良好 ☆ 继续努力
21世纪教育网(www.21cnjy.com)

展开更多......

收起↑