第 19 课 化学课件一：元素、分子与反应过程可视化
本课定位
把元素、分子结构、反应路径和课堂解释做成更可视化的网页课件，为后面的 3D 分子课做铺垫。
本课技术框架
- 结构示意图
- 动画步骤页
- 颜色编码
- 可视化卡片
学习目标
- 做出一份化学可视化课件
- 让学生更容易理解分子、离子和反应变化
- 形成化学课件中适合解释“微观世界”的页面模板
课前准备
- 准备一个元素或反应过程主题
课堂流程（60 分钟）
| 时间 | 环节 | 讲师动作 |
|---|---|---|
| 0-10 分钟 | 展示化学反应过程和分子结构可视化案例 | 展示化学反应过程和分子结构可视化案例 |
| 10-20 分钟 | 讲化学课件中的颜色、结构、步骤与安全提示 | 讲化学课件中的颜色、结构、步骤与安全提示 |
| 20-40 分钟 | 用 Codex 制作元素 / 分子 / 反应过程页面 | 用 Codex 制作元素 / 分子 / 反应过程页面 |
| 40-55 分钟 | 学员替换成自己的知识点和讲解逻辑 | 学员替换成自己的知识点和讲解逻辑 |
| 55-60 分钟 | 讨论如何避免过度复杂 | 讨论如何避免过度复杂 |
核心讲授点
- 化学课件的难点，是把看不见的微观结构解释给学生看
- 步骤化展示和颜色编码特别适合化学知识点
- 安全提示和实验边界同样应该写进课件
课堂案例
分子结构卡片与反应步骤可视化
把微观结构和反应过程放进一套清晰的课件节奏中。
Codex 提示词
提示词 1：直接生成第一版课件
text
请直接帮我生成一版“化学课件一：元素、分子与反应过程可视化”相关的可运行课件，不要只给页面策划或设计说明。
请直接把课件做出来。
这次课件的要求如下：
- 学科：初中化学九年级
- 课题：水分子、二氧化碳分子与甲烷分子结构可视化
- 教学目标：理解分子结构与颜色编码，并能解释简单反应过程
- 页面需求：结构卡片、步骤动画、概念解释区、安全提示
- 本次要做的课件：微观结构与反应过程可视化课件
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js提示词 2：补互动和老师控制
text
请在这个课件里补上课堂互动、即时反馈、老师控制按钮、重置功能和总结页，让老师拿来就能上课。
请直接把课件做出来。
这次课件的要求如下：
- 学科：初中化学九年级
- 课题：水分子、二氧化碳分子与甲烷分子结构可视化
- 教学目标：理解分子结构与颜色编码，并能解释简单反应过程
- 页面需求：结构卡片、步骤动画、概念解释区、安全提示
- 本次要做的课件：微观结构与反应过程可视化课件
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js提示词 3：升级成更完整的课堂版
text
请把这个课件再补完整一点，增加更清楚的课堂流程、互动环节和适合投屏的样式。
请直接把课件做出来。
这次课件的要求如下：
- 学科：初中化学九年级
- 课题：水分子、二氧化碳分子与甲烷分子结构可视化
- 教学目标：理解分子结构与颜色编码，并能解释简单反应过程
- 页面需求：结构卡片、步骤动画、概念解释区、安全提示
- 本次要做的课件：微观结构与反应过程可视化课件
请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js本课交付物
- 一份化学微观结构与反应过程课件
创意扩展
- 加入实验安全提醒页
- 把同类反应做成可切换卡片集