第 4 课 用 HTML / CSS / JS 做第一个互动课件
本课定位
通过最小项目让老师真正看到：网页课件不是高不可攀，它就是内容、样式和交互的组合。
本课技术框架
- HTML
- CSS
- JavaScript
- Vite 本地开发
学习目标
- 完成第一份可点击、可翻页、可投屏的网页课件
- 理解内容、样式、交互三层结构
- 掌握与 Codex 分步骤协作开发的方式
课前准备
- 带来第 3 课完成的上下文包
- 选定一个最简单的课题作为首个小项目
课堂流程（60 分钟）
| 时间 | 环节 | 讲师动作 |
|---|---|---|
| 0-10 分钟 | 讲师演示一个最小互动课件：导入页 + 知识页 + 问答页 | 讲师演示一个最小互动课件：导入页 + 知识页 + 问答页 |
| 10-20 分钟 | 解释 HTML / CSS / JS 在课件中的分工 | 解释 HTML / CSS / JS 在课件中的分工 |
| 20-40 分钟 | 用 Codex 生成并运行第一版网页课件 | 用 Codex 生成并运行第一版网页课件 |
| 40-55 分钟 | 学员修改标题、主题色和按钮逻辑 | 学员修改标题、主题色和按钮逻辑，完成个性化调整 |
| 55-60 分钟 | 现场投屏验收 | 现场投屏验收 |
核心讲授点
- 老师先学会做一个“可用的小成品”，比一开始追求大项目更重要
- 网页课件开发的最小单元是页面和组件，不是整站
- 每做完一步就本地运行，是避免焦虑和报错堆积的关键
课堂案例
英语词汇闯关的最小网页课件
通过词汇卡片、翻页按钮和即时反馈，做出第一个让老师有成就感的互动成品。
Codex 提示词
提示词 1：直接生成第一版课件
text
请直接帮我生成一版“用 HTML / CSS / JS 做第一个互动课件”相关的可运行课件，不要只给页面策划或设计说明。
请直接把课件做出来。
这次课件的要求如下：
- 学科：初中英语七年级
- 课题：校园问路 Asking for directions
- 教学目标：学生会使用 go straight, turn left, next to 等表达完成问路对话
- 页面结构：封面页、关键词页、对话练习页、互动选择页
- 视觉要求：适合投屏、按钮大、颜色清爽、适合 40 人班级同时观看
- 本次要做的课件：一个最小可运行的 HTML/CSS/JS 互动课件
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js提示词 2：补互动和老师控制
text
请在这个课件里补上课堂互动、即时反馈、老师控制按钮、重置功能和总结页，让老师拿来就能上课。
请直接把课件做出来。
这次课件的要求如下：
- 学科：初中英语七年级
- 课题：校园问路 Asking for directions
- 教学目标：学生会使用 go straight, turn left, next to 等表达完成问路对话
- 页面结构：封面页、关键词页、对话练习页、互动选择页
- 视觉要求：适合投屏、按钮大、颜色清爽、适合 40 人班级同时观看
- 本次要做的课件：一个最小可运行的 HTML/CSS/JS 互动课件
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js提示词 3：升级成更完整的课堂版
text
请把这个课件再补完整一点，增加更清楚的课堂流程、互动环节和适合投屏的样式。
请直接把课件做出来。
这次课件的要求如下：
- 学科：初中英语七年级
- 课题：校园问路 Asking for directions
- 教学目标：学生会使用 go straight, turn left, next to 等表达完成问路对话
- 页面结构：封面页、关键词页、对话练习页、互动选择页
- 视觉要求：适合投屏、按钮大、颜色清爽、适合 40 人班级同时观看
- 本次要做的课件：一个最小可运行的 HTML/CSS/JS 互动课件
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js本课交付物
- 第一份本地可运行的互动网页课件
创意扩展
- 把同一个课件改成小学版和高中版两种风格
- 为课件增加“教师备注”抽屉