第 5 课 做出第一个能投屏的网页课件：从一页课件开始逐页 PPT 正文

第 1 页 封面

• 标题：第 5 课 做出第一个能投屏的网页课件：从一页课件开始
• 副标题：从一页最小课件开工，让老师真正看到网页课件跑起来。

第 2 页 本课为什么重要

这节课最重要的不是做得复杂，而是让老师第一次看到“自己那节课真的跑起来了”。

第 3 页 今天要带走什么

• 会用 Codex 直接生成一个最小网页课件
• 知道怎样检查第一版是否能上课用
• 建立继续往下做的信心

第 4 页 先看一个真实情境

一页最小课件需要的元素

1. 标题或问题句
2. 一段核心内容或一张关键图片
3. 一个明确的学生动作
4. 一个老师收束用的结果区

第 5 页 这类任务最容易在哪儿失手

第一份网页课件只需要解决一件事：能不能顺畅地完成这个课堂动作。

• 第一版最好从一页开始，做顺以后再扩成多页。

第 6 页 讲师示范模板

直接帮我做出第一份网页课件

请直接帮我做一个初中语文《春夜喜雨》的一页网页课件，不要先讲方案。

这一页的任务很简单：
1. 标题是《春夜喜雨》
2. 页面上要有诗句分段显示
3. 学生点一下“看意象”，页面要出现“好雨、春、夜、花、江船”这几个关键词解释
4. 底部要有一个“老师追问”区域，显示：诗里最先打动你的画面是什么？

请直接给出完整的 `index.html`，浏览器打开就能用，页面适合投屏，字要大，按钮要清楚。

第 7 页 学员跟做模板

在第一版上继续补一层课堂互动

我已经有了一页初中英语单词课件，页面能显示单词和图片。

现在我想再加一层简单互动：
1. 点一下按钮就播放单词读音
2. 学生点“拼写挑战”以后，出现一个输入框
3. 拼对了显示“做得好”，拼错了给一个提示

请你直接把这层互动补进网页里，并把完整代码一次给出来。

第 8 页 本课产出

• 第一份可运行的网页课件

第 9 页 课后任务

• 把自己的第一份网页课件跑通并截 2 张图。
• 写一句：这份课件上课时最先想放在哪个环节。