(共35张PPT)
第二单元 第5课
创意表达，互动交流
（教科版）七年级
下
1
核心素养目标
3
新知讲解
5
拓展延伸
7
板书设计
2
新知导入
4
课堂练习
6
课堂总结
课后作业
8
01
核心素养目标
。
信息意识
计算思维
数字化学习与创新
信息社会责任
制作H5时核查数据、打码隐私，用正能量展现乡村文化，规避敏感词与虚假信息。
掌握短视频/H5等形式的优势与适用场景，能根据研学主题选择最佳呈现方式。
能够以新媒体方式向全校展示最终方案，了解多种多媒体表现形式的特点。
能判断新媒体传播价值，根据研学需求选H5整合素材，理解动态可视化提升信息效率的作用。
02
新知导入
聚焦
用短视频、朋友圈九宫格或直播，把你们的乡村研学成果变成全校热转的爆款！组队交创意方案，最佳小组能解锁航拍器！
02
新知导入
聚焦
03
新知讲解
在
太好了，我肯定能做出好的作品。
探索
可是用什么方式更适合展示方案呢？
在
我在朋友圈里看到过很多有意思的作品，去找找资料吧！
03
新知讲解
探索
传统媒体（报纸/广告牌/收音机/电视）像老大哥，而新媒体是更会玩的“第五代酷媒体”！它有4种超能力。
像抖音那种随看随滑的小视频。
短视频
用图片+文字讲清楚复杂事情。
图解新闻
边玩边学知识点
互动游戏
可以点着玩的动态页面
H5动画
03
新知讲解
能量加油站
不同的新媒体形式
短视频 ：用手机就能拍的迷你小电影（15秒-3分钟）
例子：抖音快手上的校园趣事/手工教程
技能：随手拍+APP剪辑=全班狂转
图解新闻：把复杂新闻变成漫画+图表
例子：学校公众号的"防疫指南"四格漫画
特点：像看连环画一样轻松学知识
03
新知讲解
能量加油站
不同的新媒体形式
交互小游戏：边玩游戏边学知识点
例子：微信里"垃圾分类大作战"小游戏
神奇点：手指点点就懂环保知识
H5交互页：会动的智能海报（手机一滑就玩）
例子：航天日刷屏的"太空探险"动态页
超能力：带音效/动画/答题，班级群疯传
四种新媒体表现形式各有特点。请各小组结合以上介绍，上网检索其优势、不足、应用场景以及制作难度，结合“探寻美丽休闲乡村”研学活动方案，讨论哪种类型更适合展示研学方案，并填写下面的新媒体表现形式对比表。
03
新知讲解
议一议
类别 优势 不足 应用场景 制作难度
短视频 手机随手拍，动态展示稻田插秧、古村探秘 需要学剪辑，太长会被划走 记录研学过程，发抖音/视频号
图解新闻 用美图+手写文字做乡村手账 纯静态不够酷，年轻人可能不爱看 整理乡村历史、特产数据发朋友圈
小游戏 设计答题闯关游戏学农具知识 要会编程或找模板，容易卡bug 科普课堂互动（需老师帮忙）
H5动画 点击触发动画，像翻书一样展示全村地图 需要电脑操作，手机预览可能变形 汇报成果时做高级版PPT
03
新知讲解
探索
H5页面就像个万能盒子，能把视频、照片、地图全装进去，最适合展示你们的乡村研学成果，其他形式也能混合着用。
为什么选择H5
① 啥都能塞：拍的短视频、画的路线图、村民采访录音，一页搞定
② 操作简单：用网站模板（如易企秀），像做PPT一样拖素材就行
③ 全校炫技：生成链接发班级群，还能投屏到礼堂大屏幕！
互联网上可供免费使用的 H5 交互页制作工具有很多，它们功能丰富各具特点。除了可添加文字、图片、声音和视频外，还有一些互动功能组件。以小组为单位，浏览所选H5 交互页制作工具的界面，查看其提供的表单、图片效果、活动、特效等的展示和交互组件，在下面的 H5 互动组件列表中列出其功能。
03
新知讲解
写一写
组件名称 功能
弹幕按钮 让文字像子弹一样飞过屏幕
地图热区 点击地图标记弹出内容
滑动拼图 手指左右滑看对比图
投票表单 让同学选最喜欢的研学路线
全景旋转 360°看老宅内部
答题红包 答对农具知识题解锁小动画
制作H5交互页需完成策划、素材整理到发布全流程，各组需结合前期方案，从乡村介绍、路线导航到互动功能等维度设计宣传内容，填写策划表。
03
新知讲解
设计
作品名称 现代化农业宣传 所选音乐 希望的田野上
页面数 页面名称 内容介绍 准备素材 互动功能
第1页 动态封面 无人机航拍稻田+小组卡通头像 稻田全景图1张、成员自拍3张 自动轮播图+点击播放音乐
第2页 乡村名片 三句话介绍村庄历史/特色（例：300年古井） 古井老照片、手绘村徽、特产九宫格 弹幕飘过村民方言金句
第3页 研学地图 标出探访路线和宝藏打卡点 手绘地图、地标实拍图5张 点击地标弹出对比图/短视频
第4页 趣味任务站 发布农活体验挑战（插秧/采茶） 任务卡手绘图、完成者照片墙 滑动选择任务+生成打卡证书
第5页 互动留言墙 收集同学最想体验的项目 预设选项图标（农具/美食/风景） 投票器+弹幕式评论框
作品参考
03
新知讲解
设计
请以小组为单位制作景点介绍H5交互页。
03
新知讲解
设计
设计要点
适配手机浏览：内容精简、风格统一，自上而下快速展示核心信息；
触发情感共鸣：融入热门元素，吸引碎片化浏览注意力；
创意编排互动：用趣味滑动、点击动画等交互设计替代枯燥堆砌，结合点赞、弹幕等功能促进分享传播。
巧妙添加点赞打卡、弹幕刷屏、趣味答题等互动玩法——这些社交裂变设计将成为H5作品的流量密码，驱动同学主动转发扩散。
实践
H5网站制作流程
03
新知讲解
03
新知讲解
能量加油站
H5内容审核必守“三要三不准”
三要：
内容真实（如乡村历史需有据可查）
保护隐私（村民人脸需打码）
弘扬正能量（展现乡村新风貌）
三不准：
不碰政治红线（禁用敏感词/地图）
不传虚假谣言（如夸大特产功效）
不放暴力内容（包括血腥农具演示）
拓展
随着H5工具不断升级互动效果和操作体验，现在制作页面更流畅、内容审核也更严格，但同学们在实际创作时是否遇到过模板太少、动画设置太复杂、手机上传素材卡顿等问题？请结合你们组的制作经历，说说希望H5平台增加哪些实用功能。
03
新知讲解
我们希望H5平台能增加更多校园风模板（比如手账贴纸、动漫特效），简化动画设置步骤，最好能一键把照片变漫画！还希望内置农活小游戏模板（比如插秧版切水果），这样就能让我们的研学成果既酷炫又好传播啦！
单元作品展示与交流
1. 以小组为单位，对本单元完成的 H5 交互页作品“探寻美丽休闲乡村研学”活动方案进行展示。
03
新知讲解
单元作品展示与交流
2.填写作品评价表，对本单元完成的作品进行评价。
03
新知讲解
作品评价表 学生自评（ ）分 同学互评（ ）分 教师评价（ ）分 评价维度 评价标准 分值 得分
主题 作品紧扣任务主题，内容完整，能够展示方案全部内容 5
作品与主题相关，内容基本完整，能够展示方案内容 4
作品与主题相关度不大，内容不太完整，结论存在少量错误 3
作品跑题，或内容不完整，或结论有多处错误 2
单元作品展示与交流
03
新知讲解
评价维度 评价标准 分值 得分
技术 能选择合适的技术获取信息制订方案，呈现的方案具体、 清晰、美观，交互性好 5
能使用技术获取部分信息制订方案，方案能够呈现出主要内容，呈现方式清晰，交互性一般 4 能使用技术获取少量信息制订方案，方案能够呈现出少量内容，呈现方式整齐，交互性有待提升 3 方案的呈现内容和效果有待改进 2 创意 运用H5呈现方案，形式丰富，观赏效果与交互体验好 5
运用H5呈现方案，形式多样，观赏与交互体验一般 4 运用H5呈现方案，形式单一，观赏与交互体验稍差 3 运用H5呈现方案，能够正常观看，缺乏交互 2 合作 小组成员分工明确，任务分配合理，作品展示效果好 5
小组成员有分工，能完成分配任务，作品展示顺利 4 小组成员分工不明确，任务分配不太合理，效果一般 3 小组成员分工不合理，有成员未参与，展示效果不好 2 单元内容小结与概念图
1.同学们，你们已经制订出一份完整的“探寻美丽休闲乡村”研学活动方案，并以 H5 交互页的形式向其他同学进行了展示。请回顾本单元你学习和掌握了哪些原理和技术。
我学会的原理：①手机优先设计：内容要精简，重点信息放最前面②情感触发法则：用表情包/方言梗抓住注意力③互动传播逻辑：点赞、投票能促使人转发
我掌握的技术：①用易企秀套模板，加弹幕、滑动拼图等互动组件②用美图秀秀压缩图片，剪映剪辑15秒短视频③用醒图APP给乡村照片加“青禾”滤镜统一风格
我可以使用这些原理和技术解决的问题：①把枯燥的村史变成点击触发老照片对比动画②让研学路线图升级成可互动的藏宝图三把同学留言变成emoji弹幕墙
03
新知讲解
单元内容小结与概念图
2.根据在本单元项目实践中学到的知识，将概念图补充完整。
03
新知讲解
实践项目
根据需要和难度，以小组为单位在以下两个项目中选取一个来完成。
1.学校下个月要组织外出实践活动，目前有科技馆、公园、博物馆三个意向目的地。请你为学校设计一个H5交互页作品，用于展示到三个目的地的实践活动方案，并对同学们的意向进行调查，最终确定目的地。
2.请设计并制作一个 H5交互页作品，向世界展示你的学校。
03
新知讲解
04
课堂练习
一、判断正误，正确的画”√“，错误的画”X“。
制作H5交互页必须学会编程才能添加互动组件。（ ）
短视频的时长建议控制在15秒到3分钟以内。（ ）
图解新闻的缺点是动态效果太多导致加载缓慢。（ ）
互动小游戏制作难度低，适合所有学生独立完成。（ ）
H5页面中的“地图热区”功能可实现点击标记弹出内容。（ ）
√
√
X
X
X
04
课堂练习
二、选择题
1、制作H5交互页时，能同时整合短视频、地图和弹幕功能的优势是（ ）
A. 操作完全免费
B. 适合打印成纸质报告
C. 多种素材一页展示
D. 无需网络即可播放
2、使用“易企秀”制作H5页面时，可直接添加的互动组件是（ ）
A. 村民身份证号码采集器
B. 滑动拼图对比图
C. 自动生成虚假数据
D. 隐藏敏感词检测
3、H5内容审核“三要”原则包含（ ）
A. 虚构历史故事吸引流量
B. 村民人脸照片必须打码
C. 使用夸张特效掩盖真相
D. 允许随意标注军事基地
C
B
B
05
拓展延伸
数字叙事艺术
跨媒介叙事引擎
多平台内容联动重构故事边界（如小说→短视频→互动游戏的多维叙事）。
非线性叙事革命
分支剧情设计赋予用户选择权（如点击触发不同结局的交互式纪录片）。
05
拓展延伸
信息可视化进阶
实时数据流剧场
动态图表自动更新呈现事件演变（如疫情地图随时间推移的扩散动画）。
故事化数据图谱
将复杂数据转化为可探索的叙事空间（如滑动查看历史事件的因果链动效）。
05
拓展延伸
交互设计心理学
直觉式操作法则
费茨定律优化点击热区布局（如按钮大小/间距符合手指触控习惯）。
情感化反馈机制
多巴胺触发设计提升参与度（如完成任务时音效+动效的双重奖励反馈）。
06
课堂总结
1
引入新知内容
2
了解H5表达的特点
3
掌握简单H5作品的制作
4
完成课堂练习
5
进行相关知识拓展
1
2
3
4
5
创意表达，互动交流
07
板书设计
创意表达，互动交流
1、进行新知引入
2、了解H5表达的特点
3、掌握简单H5作品的制作
4、完成课堂练习
5、进行知识拓展
课后作业。
1、为什么“探寻美丽休闲乡村”研学方案更适合用H5交互页展示？
08
课后作业
1. H5页面中让文字像子弹飞过屏幕的组件叫________。
2.制作H5前需要将图片压缩，这是________流程的关键步骤。
3.在H5中设计“答对农具知识题解锁动画”需使用_______组件。
答题红包
素材整理
弹幕按钮
08
课后作业
2、简答题
为什么“探寻美丽休闲乡村”研学方案更适合用H5交互页展示？
① H5可整合视频、地图、图片等多种素材，集中展示研学成果；
② 使用模板工具操作简单，生成链接便于班级群分享传播。
https://www.21cnjy.com/recruitment/home/fine
