资源简介

(共22张PPT)
第三单元 第2节
编辑网页分享学习成果
（贵州版）七年级
上册
1
核心素养目标
3
新知讲解
5
拓展延伸
7
板书设计
2
新知导入
4
课堂练习
6
课堂总结
课后作业
8
01
核心素养目标
信息意识
计算思维
数字化学习与创新
信息社会责任
在网页制作与分享过程中，遵守网络道德规范，尊重他人知识产权，负责任地发布和分享有价值的学习资源。
能利用在线H5网页制作工具，制作并展示黄金分割学习成果的H5网页，通过翻页、图片等元素丰富网页内容，提升数字化创作能力。
能够分析网页元素的类型与作用，理解HTML标签的基本结构和功能，掌握制作H5网页的基本方法，形成结构化思维。
认识到网页是分享学习成果的重要载体，了解网页元素的多样性，形成利用网页展示和传播信息的意识。
02
新知导入
同学们，在第一课时中我们通过互联网探究了不同学科中的“黄金分割”，收集了丰富的学习资源。那么，如何将我们的探究成果以网页的形式分享给更多人呢？网页是互联网上最常见的信息展示方式，它可以包含文字、图片、音频、视频等多种元素。让我们一起来学习如何制作网页，分享我们的学习成果吧！
网页由哪些元素组成？
什么是H5网页？
怎样制作简单的H5网页？
让我们从认识网页元素开始，学习制作H5网页，分享“黄金分割”的探究成果！
同学们，你们平时浏览过哪些网页？网页上都有哪些类型的内容？
本节课我们将认识网页的基本元素，了解超链接的作用，学习制作简单的H5网页。
02
新知导入
编辑网页分享学习成果
主题：认识网页元素 → 了解超链接 → 制作H5网页
通过制作H5网页展示“黄金分割”探究成果
03
新知讲解
1. 认识网页元素
随着信息技术的飞速发展，网页的呈现形式越来越丰富。不同的网页元素（如文字、图片、动画、音频、视频、超链接以及动态内容）产生的效果、带来的体验均不同，用户可根据需求选择使用。
图3-2-1 在网页中展示成果
03
新知讲解
（1）网页元素的变化
常见的网页元素包括：
文字：最基本的网页元素，用于传递信息。 图片：增强视觉效果，丰富页面内容。
动画：增加网页的动感和吸引力。 音频、视频：提供多媒体体验。
超链接：将各个网页相互联系起来。 动态内容：在用户交互过程中产生的内容。
小贴士！
动态内容是在用户交互的过程中产生的，主要包括查询、留言板、论坛、在线新闻等。
03
新知讲解
超链接
网页的一大特色是提供了超链接功能。正是超链接将各个孤立的网页相互联系起来。超链接通常内嵌在文字或图片中，当用户的鼠标光标移至超链接上时会变为手指形状。通过点击超链接，用户可以跳转到其他网页或页面的不同位置。
科 学 园 地
图3-2-4 超链接示意图
03
新知讲解
活动3.2.1 分析网页元素种类的变化
1.对比图3-2-2和图3-2-3中的网页，分析网页元素种类发生的变化。
2.同样的信息可采用不同类型的载体，其表达效果不同。图3-2-3中几种不同类型的学习资源，表达效果有何不同？
将你的分析结果记录在下表中。
序号 问题 分析结果
03
新知讲解
活 动 参 考
序号 问题 分析结果
1 对比图 3-2-2 和图 3-2-3 网页，分析网页元素种类发生的变化 图 3-2-2 网页：只有文本（文字），元素单一；
图 3-2-3 网页：在文字基础上，新增图片、音频、视频、超链接等多媒体元素。
小结：网页元素由单一文本，变成文本 + 图像 + 音视频等多种多媒体元素，信息呈现更加丰富。
2 图 3-2-3 不同学习资源，表达效果有何不同 文本：适合阅读、摘抄、精读，信息准确，方便反复查看，但枯燥抽象；
图片 / 图表：直观形象，快速看懂结构、原理，简化复杂文字描述；
音频：可以边听边学，适合碎片化学习，但不方便快速回看重点；
视频：动态演示过程，生动易懂，感染力强，但占用流量，不能快速定位文字要点。
1.对比图3-2-2和图3-2-3中的网页，分析网页元素种类发生的变化。
2.同样的信息可采用不同类型的载体，其表达效果不同。图3-2-3中几种不同类型的学习资源，表达效果有何不同？
将你的分析结果记录在下表中。
03
新知讲解
（1）认识H5网页
我们平时在移动设备上看到的邀请函、贺卡、小游戏、测试题等，很多都是H5网页。H5网页是以HTML5为主要技术制作的，H5网页的互动性更强，页面显示效果更丰富，更适合在移动设备上浏览。
2. 制作简单的H5网页
小贴士！
HTML(Hypertext Markup Language，超文本标记语言)是编写网页的标准语言。如今，HTML已经发展到第5代，简称H5。
03
新知讲解
步骤1：打开在线H5网页制作工具。
步骤2：点击“模板”按钮，选择合适的模板，新建H5网页。
步骤3：在“图文”栏修改网页主题为“黄金分割-0.618”，通过模板中的图片链接更换图片。
（2）制作H5网页的步骤
图3-2-6 打开在线H5网页制作工具
图3-2-7 选择模板新建H5网页
03
新知讲解
步骤4：在“翻页设置”中选择翻页方式，如“左右翻页”。
步骤5：在工具提供的仿真环境中（如预览模式），模拟在手机上查看H5网页的效果。
步骤6：将制作好的H5网页链接分享在小组交流群中，其他组员在移动设备上查看网页效果。
（2）制作H5网页的步骤（续）
图3-2-10 预览H5网页效果
图3-2-9 选择不同的翻页方式
04
课堂练习
案 例
如何用H5网页展示“黄金分割”探究成果？
某小组完成了“黄金分割”跨学科探究活动，收集了数学、美术、自然、建筑和音乐五个学科的相关资料。组长决定用H5网页的形式将探究成果展示出来。
思考：如果你是组长，你会如何设计和制作这个H5网页？
参考答案：1.打开在线H5网页制作工具（如易企秀、MAKA等）；2.选择合适的展示类模板；3.修改网页主题为“黄金分割跨学科探究”；4.按学科分类添加图片和文字说明；5.设置翻页方式为左右翻页；6.添加小组信息页；7.预览并调整效果；8.生成链接分享给组员和老师。
图3-2-5 H5网页示例
04
课堂练习
做一做
完成以下任务：
1.打开一个在线H5网页制作工具，选择合适的模板。
2.制作一个展示“黄金分割”探究成果的H5网页，包含至少3个页面。
3.修改网页主题，添加图片和文字说明。
4.设置翻页方式，预览效果。
5.将网页链接分享到小组交流群。
参考：1.可选择易企秀、MAKA、兔展等H5制作平台；2.模板可选展示类或杂志类；3.页面内容可包括封面、数学中的黄金分割、美术中的黄金分割、自然中的黄金分割、封底等；4.翻页方式选左右翻页或上下翻页；5.预览时注意检查图片是否清晰、文字是否易读。
04
课堂练习
说一说你浏览过的网页中哪些元素给你留下了深刻印象？H5网页和普通网页相比有什么不同？
说 一 说
我觉得H5网页的翻页效果很酷，像看杂志一样！
网页中的视频元素让信息更生动，更容易理解。
超链接太神奇了，点一下就能跳到别的页面！
05
拓展延伸
活动：网页元素大搜索
浏览你常用的网站，完成以下任务：
1.记录该网页包含哪些类型的元素（文字、图片、动画、音频、视频、超链接、动态内容等）。
2.数一数网页中有多少个超链接，它们分别链接到哪里？
3.思考：为什么这个网站要使用这些元素？它们分别起到什么作用？
4.与同学分享你的发现，讨论不同类型网站的元素特点。
提示：浏览网页时注意保护个人信息，不随意点击不明链接。
06
课堂总结
1
网页元素 —— 文字、图片、动画、音频、视频、超链接、动态内容
探究要点
2
超链接 —— 将各个孤立的网页相互联系起来，内嵌在文字或图片中
3
H5网页 —— 以HTML5为技术制作，互动性强，适合移动设备浏览
4
制作步骤 —— 打开工具→选模板→改内容→设翻页→预览→分享
5
活动3.2.1 —— 分析网页元素种类的变化，比较不同载体的表达效果
1
2
3
4
5
07
板书设计
主题：编辑网页分享学习成果
核心：认识网页元素 → 超链接 → H5网页 → 制作与分享
板书设计：编辑网页分享学习成果
概念：网页元素包括文字、图片、动画、音频、视频、超链接、动态内容
核心：网页元素 ｜ 超链接 ｜ H5网页 ｜ 制作步骤 ｜ 成果分享
示例：文字+图片→基础元素；超链接→联系网页；H5→移动端互动网页
流程：认识元素 → 了解超链接 → 认识H5 → 制作H5 → 预览分享
08
课后作业
思考：网页中的超链接有什么作用？H5网页有什么特点？
实践：使用在线H5网页制作工具，制作一个展示你兴趣爱好的H5网页。
观察与发现
调查与记录
观察你常用的3个网站，记录它们使用了哪些网页元素，填写在调查表中。
调查家人或朋友使用H5网页的情况，了解他们对H5网页的看法。
https://www.21cnjy.com/recruitment/home/fine

展开更多......

收起↑