第 6 课 课堂节奏设计：页面切换、动画、计时器与音效
本课定位
把“课堂节奏”写进课件，让老师学会用动画、切换、计时和音效控制课堂注意力。
本课技术框架
- CSS 动画
- JavaScript 定时器
- 音效触发
- 课堂节奏设计
学习目标
- 理解课件为什么要配合教学节奏设计
- 掌握页面切换、倒计时、提示音等常见课堂组件
- 完成一个可用于真实课堂的节奏控制页
课前准备
- 带来一个 10 分钟教学片段
- 准备想加入的提示音或倒计时需求
课堂流程（60 分钟）
| 时间 | 环节 | 讲师动作 |
|---|---|---|
| 0-10 分钟 | 展示“普通内容页”和“有课堂节奏控制的课件”差别 | 展示“普通内容页”和“有课堂节奏控制的课件”差别 |
| 10-20 分钟 | 讲解切换、倒计时、节拍、音效和课堂注意力之间的关系 | 讲解切换、倒计时、节拍、音效和课堂注意力之间的关系 |
| 20-40 分钟 | 用 Codex 加入倒计时、音效提示和强调动画 | 用 Codex 加入倒计时、音效提示和强调动画 |
| 40-55 分钟 | 学员为自己的课件补一段真实课堂节奏页 | 学员为自己的课件补一段真实课堂节奏页 |
| 55-60 分钟 | 现场试讲 1 分钟 | 现场试讲 1 分钟 |
核心讲授点
- 老师不是在做“会动的 PPT”，而是在做“会配合课堂节奏的界面”
- 音效和动画的目标是帮助聚焦，而不是让学生分心
- 一节课的页面顺序最好对应真实教学环节：导入、讲解、提问、练习、总结
课堂案例
语文古诗词背诵节奏页
用倒计时、轮播关键词和轻提示音，把背诵和理解节奏结合起来。
Codex 提示词
提示词 1：直接生成第一版课件
text
请直接帮我生成一版“课堂节奏设计：页面切换、动画、计时器与音效”相关的可运行课件，不要只给页面策划或设计说明。
请直接把课件做出来。
这次课件的要求如下：
- 学科：初中语文七年级
- 课题：《使至塞上》朗读与意象理解
- 课堂环节：导入 2 分钟 -> 朗读 3 分钟 -> 意象讲解 8 分钟 -> 闯关 5 分钟 -> 总结 2 分钟
- 需要功能：30 秒倒计时、重点句高亮动画、轻提示音、导入页到练习页的清晰切换
- 本次要做的课件：一套适合古诗词课堂的节奏控制页和样式建议
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js提示词 2：补互动和老师控制
text
请在这个课件里补上课堂互动、即时反馈、老师控制按钮、重置功能和总结页，让老师拿来就能上课。
请直接把课件做出来。
这次课件的要求如下：
- 学科：初中语文七年级
- 课题：《使至塞上》朗读与意象理解
- 课堂环节：导入 2 分钟 -> 朗读 3 分钟 -> 意象讲解 8 分钟 -> 闯关 5 分钟 -> 总结 2 分钟
- 需要功能：30 秒倒计时、重点句高亮动画、轻提示音、导入页到练习页的清晰切换
- 本次要做的课件：一套适合古诗词课堂的节奏控制页和样式建议
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js提示词 3：升级成更完整的课堂版
text
请把这个课件再补完整一点，增加更清楚的课堂流程、互动环节和适合投屏的样式。
请直接把课件做出来。
这次课件的要求如下：
- 学科：初中语文七年级
- 课题：《使至塞上》朗读与意象理解
- 课堂环节：导入 2 分钟 -> 朗读 3 分钟 -> 意象讲解 8 分钟 -> 闯关 5 分钟 -> 总结 2 分钟
- 需要功能：30 秒倒计时、重点句高亮动画、轻提示音、导入页到练习页的清晰切换
- 本次要做的课件：一套适合古诗词课堂的节奏控制页和样式建议
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js本课交付物
- 一页可复用的课堂节奏控制模板
创意扩展
- 为小组竞赛加入回合计时器
- 为英语跟读加入节拍提示