第 5 课 做出第一个能投屏的网页课件：从一页课件开始
本课定位
这节课最重要的不是做得复杂，而是让老师第一次看到“自己那节课真的跑起来了”。
学习目标
- 会用 Codex 直接生成一个最小网页课件
- 知道怎样检查第一版是否能上课用
- 建立继续往下做的信心
阅读方式
建议按下面的“60 分钟顺序”往下阅读。每个时间段里，都已经把本段任务、参考资料、可直接使用的模板和阶段成果编排在一起，方便老师顺着一节课的节奏阅读，不必在不同板块之间来回查找。
学习目标拆开来看
会用 Codex 直接生成一个最小网页课件
这一项目标放在本课里，主要是帮助老师把“会用 Codex 直接生成一个最小网页课件”这件事落到真实课堂和真实页面里，而不是只停留在概念上。读这一课的时候，重点不是把这句话记住，而是顺着后面的 60 分钟节奏去看：这一项能力会在什么时间点出现，最后会沉淀成什么课堂成果。
放到创意课件这条产品线里，它对应的不是单纯会不会做页面，而是老师能不能把课堂目标、页面动作和学生体验真正接起来。只要这一层想清楚，后面的资料、模板和实操就会顺很多。
知道怎样检查第一版是否能上课用
这一项目标放在本课里，主要是帮助老师把“知道怎样检查第一版是否能上课用”这件事落到真实课堂和真实页面里，而不是只停留在概念上。读这一课的时候，重点不是把这句话记住，而是顺着后面的 60 分钟节奏去看：这一项能力会在什么时间点出现，最后会沉淀成什么课堂成果。
放到创意课件这条产品线里，它对应的不是单纯会不会做页面，而是老师能不能把课堂目标、页面动作和学生体验真正接起来。只要这一层想清楚，后面的资料、模板和实操就会顺很多。
建立继续往下做的信心
这一项目标放在本课里，主要是帮助老师把“建立继续往下做的信心”这件事落到真实课堂和真实页面里，而不是只停留在概念上。读这一课的时候，重点不是把这句话记住，而是顺着后面的 60 分钟节奏去看：这一项能力会在什么时间点出现，最后会沉淀成什么课堂成果。
放到创意课件这条产品线里，它对应的不是单纯会不会做页面，而是老师能不能把课堂目标、页面动作和学生体验真正接起来。只要这一层想清楚，后面的资料、模板和实操就会顺很多。
课前准备
- 带上上一课定好的页面脚本
- 准备这一页要显示的文字和图片
- 明确这一页里学生要做的一个动作
按 60 分钟顺序展开
0-10 分钟
本段任务
用《一页最小课件需要的元素》开场，让老师先进入 做出第一个能投屏的网页课件：从一页课件开始 这个具体教学场景。
本段重点
- 关联目标：会用 Codex 直接生成一个最小网页课件
- 关键提醒：第一份网页课件只需要解决一件事：能不能顺畅地完成这个课堂动作。
教学意图
开头先把课堂情境和真实需求立住。只要老师先看见“这和我的课堂有什么关系”，后面的页面和技术动作就不会显得漂浮。
本段参考资料
一页最小课件需要的元素
1. 标题或问题句
2. 一段核心内容或一张关键图片
3. 一个明确的学生动作
4. 一个老师收束用的结果区先把这份资料读一遍，先看清楚场景、对象和任务，再进入后面的整理和修改。读的时候重点留意：哪些信息必须保留，哪些地方还需要老师自己补判断。
阶段成果
- 老师已经能说清楚：这节课真正要解决的课堂问题是什么。
10-20 分钟
本段任务
把本课最关键的判断线讲清楚，先帮助老师看见这一类课件最容易做偏在哪里。
本段重点
- 关联目标：知道怎样检查第一版是否能上课用
- 关键提醒：第一版最好从一页开始，做顺以后再扩成多页。
教学意图
这一段的重点不是堆知识点，而是把“该先抓哪一条主线”讲清楚。只有先把判断线立起来，后面的执行模板和页面实现才更容易稳住。
本段参考资料
课件第一版检查清单
- 打开速度是否够快
- 后排学生能否看清
- 按钮和文字是否好点、好读
- 老师讲课时会不会被页面打断先把这份资料读一遍，先看清楚场景、对象和任务，再进入后面的整理和修改。读的时候重点留意：哪些信息必须保留，哪些地方还需要老师自己补判断。
阶段成果
- 老师已经知道：这类课件最值得先抓住的主线和最容易失手的地方。
20-35 分钟
本段任务
讲师现场示范一轮，把老师最关心的这一页或这一组页面先做出来。
本段重点
- 关联目标：建立继续往下做的信心
- 关键提醒：老师第一次验证的是“课堂能不能用”，不是“做得够不够炫”。
教学意图
示范段的意义是让老师看见第一版通常怎样开工、怎样收住，而不是看一个远离自己课堂的完美案例。
本段可直接使用的模板
直接帮我做出第一份网页课件
请直接帮我做一个初中语文《春夜喜雨》的一页网页课件，不要先讲方案。
这一页的任务很简单：
1. 标题是《春夜喜雨》
2. 页面上要有诗句分段显示
3. 学生点一下“看意象”，页面要出现“好雨、春、夜、花、江船”这几个关键词解释
4. 底部要有一个“老师追问”区域，显示：诗里最先打动你的画面是什么？
请直接给出完整的 `index.html`，浏览器打开就能用，页面适合投屏，字要大，按钮要清楚。正式使用前，先把年级、课题、页面要求和课堂动作换成自己的真实信息。第一版跑出来以后，先看课堂顺不顺，再看细节和风格。
阶段成果
- 老师已经完整看过一轮示范，知道第一版通常怎样跑起来。
35-50 分钟
本段任务
老师拿自己的课题或材料跟做一轮，先做出一版可继续修改的结果。
本段重点
- 关联目标：建立继续往下做的信心
- 关键提醒：老师第一次验证的是“课堂能不能用”，不是“做得够不够炫”。
教学意图
真正形成能力的关键，往往就在这一段。先做出第一版，再回头调整页面、素材和老师说法，通常比一开始就求全更稳。
本段可直接使用的模板
在第一版上继续补一层课堂互动
我已经有了一页初中英语单词课件，页面能显示单词和图片。
现在我想再加一层简单互动：
1. 点一下按钮就播放单词读音
2. 学生点“拼写挑战”以后，出现一个输入框
3. 拼对了显示“做得好”，拼错了给一个提示
请你直接把这层互动补进网页里，并把完整代码一次给出来。正式使用前，先把年级、课题、页面要求和课堂动作换成自己的真实信息。第一版跑出来以后，先看课堂顺不顺，再看细节和风格。
阶段成果
- 老师已经拿自己的材料做出一版结果，并知道接下来优先改哪里。
50-60 分钟
本段任务
快速点评、收束方法，并把本课成果收成 第一份可运行的网页课件。
本段重点
- 关联目标：建立继续往下做的信心
- 关键提醒：老师第一次验证的是“课堂能不能用”，不是“做得够不够炫”。
教学意图
最后这一段不再加新东西，而是把今天的方法收回到老师自己的工作里，知道哪些成果值得带走、哪些地方下次还要继续打磨。
阶段成果
- 老师已经带走本课产出：第一份可运行的网页课件
关键讲授点
讲授点 1
第一份网页课件只需要解决一件事：能不能顺畅地完成这个课堂动作。
这一个讲授点在课堂里最好先讲“为什么重要”，再讲“老师最容易在哪一步失手”，最后再回到今天的页面、材料和课堂动作里。只要这三层能对上，老师通常会更容易把这一节真正带回自己的课。
讲授点 2
第一版最好从一页开始，做顺以后再扩成多页。
这一个讲授点在课堂里最好先讲“为什么重要”，再讲“老师最容易在哪一步失手”，最后再回到今天的页面、材料和课堂动作里。只要这三层能对上，老师通常会更容易把这一节真正带回自己的课。
讲授点 3
老师第一次验证的是“课堂能不能用”，不是“做得够不够炫”。
这一个讲授点在课堂里最好先讲“为什么重要”，再讲“老师最容易在哪一步失手”，最后再回到今天的页面、材料和课堂动作里。只要这三层能对上，老师通常会更容易把这一节真正带回自己的课。
本课最容易踩的坑
最常见的误区
这类任务最常见的问题，不是完全不会做，而是容易一上来就做太满、做太散，或者把应该由老师自己最后判断的部分也一起丢掉了。做出第一个能投屏的网页课件：从一页课件开始 这一课的关键，就是把这条界线和处理顺序重新拉清楚。
更稳妥的做法
- 先从自己最熟的一页或一个场景开始，不要一上来就做完整大项目。
- 先把第一版跑出来，再逐项检查课堂节奏、知识点准确度和页面可用性。
- 如果需要升级技术，先确认课堂价值和设备条件，再决定要不要继续往上加。
本课产出
- 第一份可运行的网页课件
课后任务
- 把自己的第一份网页课件跑通并截 2 张图。
- 写一句：这份课件上课时最先想放在哪个环节。
自学阅读顺序
- 先顺着 60 分钟顺序快速读一遍，先建立本课节奏感。
- 第二遍回看本课两段可直接使用的模板，把其中的年级、课题、页面要求换成自己的真实内容。
- 最后只保住一个最值得先做的页面或一个最小版本，先把它跑通。
讲师提醒
- 这一课一定要让老师看到“能跑起来”的结果。
- 不要鼓励一上来做太大，先保住能用。
下一课衔接
下一课会继续推进到 第 6 课 用 Vite 组织课件项目：多页面、素材和组件怎么放，把今天形成的结果往下一步课程里接起来。