教师创意课件营
课程定位
这是一套专门面向学校老师和教研团队的 Codex + 创意课件 课程。
它不是把老师培养成传统意义上的软件工程师，而是让非技术专业的老师学会用 Codex 和相关技术，把自己的备课目标快速变成：
- 交互式网页课件
- 3D 课件
- 摄像头动作捕捉课件
- 隔空互动课件
- 游戏化课件
- 适合 Windows 教室环境的桌面教学小工具
课程最核心的承诺
这套课不要求老师先写大量代码，而是教老师用更聪明的方式工作：
- 先把教学目标、课堂节奏和素材整理成
Codex能理解的上下文包。 - 再用网页技术做出
可讲、可互动、可复用、可分享的课件。 - 在需要的时候，升级到
Three.js、MediaPipe和Electron。 - 最终沉淀成一套自己的教师创意课件作品集。
适合人群
- 中小学老师
- 学校信息化骨干教师
- 教研组长、备课组长
- 培训学校和机构老师
- 想做公开课、展示课、校本课程项目的非技术教师
课程收获
- 看懂并选对适合自己的课件技术框架
- 用
Codex独立完成网页课件 - 会做交互式、游戏化、3D、动作捕捉课件
- 能把语文、数学、英语、物理、化学内容做成更具创意的课堂作品
- 建立自己的素材库、提示词库、项目模板和作品集
技术框架总览
| 技术 | 在本课程中的角色 | 适合教师先做什么 |
|---|---|---|
| HTML / CSS / JavaScript | 网页课件基础三件套 | 导入页、讲解页、互动页、结果页 |
| Vite | 课件项目运行与目录组织 | 多页面课件、组件复用、素材管理 |
| Three.js | 3D 课件引擎 | 分子、几何体、天体、实验装置 |
| MediaPipe | 摄像头手势 / 姿态识别 | 隔空翻页、动作答题、体感互动 |
| Electron | Windows 桌面封装 | 随机点名器、计时器、离线教学工具 |
| 浏览器语音 / 音视频能力 | 听说、朗读、多媒体呈现 | 语文朗读、英语跟读、实验视频页 |
学科覆盖
- 语文：古诗词、阅读理解、作文启发、批注台
- 数学：函数图像、几何演示、立体几何、三维观察
- 英语：单词闯关、听说互动、情景对话、语法诊断
- 物理：运动仿真、实验数据、光学、电学交互板
- 化学：分子结构、反应过程、方程配平、实验模拟
模块结构
模块 A 教师 AI 备课与 Codex 基础
帮助非技术教师建立“用 Codex 做课件”的最小技术地图，先搞清网页课件、提示词、素材清单、课堂目标和项目组织方式。
- 第 1 课 教师 AI 备课新范式：Codex 与创意课件全景图：重新定义教师备课方式，建立课件项目视角与课程期待。
- 第 2 课 非技术老师也能上手：课件开发最小技术地图：把网页课件涉及到的技术框架讲清楚，帮助老师建立路线图。
- 第 3 课 提示词、上下文包与素材清单：让 Codex 听懂教学目标：把备课目标、学科知识和素材组织成 Codex 可执行的上下文包。
- 第 4 课 用 HTML / CSS / JS 做第一个互动课件：完成第一份可运行的网页互动课件。
- 第 5 课 用 Vite 组织课件项目：页面、组件与素材管理：让老师理解如何把多个课件页面和资源组织成长期可复用项目。
模块 B 交互式网页课件基础
围绕 HTML、CSS、JavaScript、Vite 和常见浏览器能力，完成交互式课件的核心搭建能力。
- 第 6 课 课堂节奏设计：页面切换、动画、计时器与音效：让课件真正服务课堂流程，而不是只有内容页面。
- 第 7 课 表单、按钮、抽题与即时反馈：交互式课件基础：建立交互式课件最常见的问答、抽题、反馈机制。
- 第 8 课 数据驱动课件：题库、错题、排行榜与学习记录：把数据结构引入课件，让课件不只是静态演示。
- 第 9 课 多媒体课件：音频、视频、字幕、朗读与投屏适配：让课件支持更丰富的多媒体表达，适合语文、英语和实验演示类课堂。
- 第 10 课 Windows 课件工具：用 Electron 封装桌面版教学工具：适当穿插 Windows 应用，让老师理解何时需要把网页课件封装成桌面工具。
模块 C 学科课件专题实战
围绕语文、数学、英语、物理、化学的真实课堂内容，把抽象知识拆成可以直接拿去讲课的互动案例。
- 第 11 课 语文课件一：古诗词闯关与意象互动地图：把语文古诗词、意象、节奏和课堂背诵做成互动课件。
- 第 12 课 语文课件二：阅读理解批注台与作文灵感生成器：做出适合阅读理解与作文启发的语文互动课件。
- 第 13 课 数学课件一：函数图像实验室与参数滑杆：通过滑杆、图像与即时变化做数学函数课件。
- 第 14 课 数学课件二：几何证明、立体几何与三维图形演示：围绕几何、立体图形和空间关系建立更直观的课件。
- 第 15 课 英语课件一：单词闯关、拼写竞速与听说练习：为英语课堂构建可互动、可听说、可竞赛的课件。
- 第 16 课 英语课件二：情景对话、语法诊断与 AI 角色扮演：让英语课堂从静态讲解升级成可演练、可反馈的对话课件。
- 第 17 课 物理课件一：运动、受力与实验数据可视化：让物理课堂中的运动与数据变化被看见、被操作。
- 第 18 课 物理课件二：光学、电学与交互式仿真板：把光路、电路和实验装置做成可交互仿真课件。
- 第 19 课 化学课件一：元素、分子与反应过程可视化：让化学中的微观结构和反应过程更直观。
- 第 20 课 化学课件二：方程配平、实验安全与滴定模拟：把练习型和实验型化学内容做成互动课件。
模块 D 3D、摄像头与隔空交互
面向更具创意性的课件形态，带老师掌握 Three.js、MediaPipe 和课堂体感交互设计。
- 第 21 课 游戏化课件设计：积分、任务、关卡与班级挑战：建立游戏化课件的设计逻辑，把课堂练习做得更有参与感。
- 第 22 课 Three.js 3D 课件基础：把抽象知识做成立体课堂：让老师掌握 Three.js 的教学用途与基本协作方式。
- 第 23 课 学科 3D 专题：分子、几何体、天体与实验装置：把 Three.js 真正落到学科知识上，做出 3D 专题课件。
- 第 24 课 摄像头识别入门：MediaPipe 手势 / 姿态 / 面部关键点：让老师理解如何把摄像头识别能力用进网页课件。
- 第 25 课 隔空交互课件：手势翻页、挥手答题与动作触发：把摄像头识别真正转成可用于课堂的隔空互动课件。
- 第 26 课 体感教学设计：把动作捕捉真正用进课堂流程：从技术展示升级到完整体感教学流程设计。
模块 E 游戏化、素材生产与桌面交付
处理游戏化课件、设计师工作流、素材产出与 Windows 桌面交付，让课件从可用走向可发布。
- 第 27 课 设计师工作流给老师用：Figma / Stitch / Codex 联动做课件：让老师借助设计工具快速组织课件视觉与页面结构。
- 第 28 课 素材生产工作流：图片、音效、配色、插画与教学 UI：帮助老师系统化产出课件需要的视觉和声音素材。
模块 F 测试、部署与结营作品集
把前面 28 节课的能力串成真正可交付的教师作品集，并能在学校设备上稳定运行。
- 第 29 课 课件测试、课堂部署与学校设备适配：让课件从好看走向稳用，适配教室投屏、浏览器和学校网络环境。
- 第 30 课 结营项目：完成一套学科创意课件作品集：把 30 节课的能力沉淀成真正可展示、可教研复用的作品集。
30 节课程总表
| 课次 | 主题 | 模块 | 技术框架 | 课后产出 |
|---|---|---|---|---|
| 第 1 课 | 教师 AI 备课新范式：Codex 与创意课件全景图 | 教师 AI 备课与 Codex 基础 | Codex 聊天与任务模式 / 网页课件基本结构 / Markdown / 文档素材整理 / 浏览器运行环境 | 一份《我的创意课件方向清单》与一份《首个课件项目上下文包》 |
| 第 2 课 | 非技术老师也能上手：课件开发最小技术地图 | 教师 AI 备课与 Codex 基础 | HTML / CSS / JavaScript / Vite / Three.js / MediaPipe / Electron | 一张《教师课件技术选型表》 |
| 第 3 课 | 提示词、上下文包与素材清单：让 Codex 听懂教学目标 | 教师 AI 备课与 Codex 基础 | Prompt Engineering / Context Engineering / 结构化文档组织 / 素材清单模板 | 一份标准《课件开发上下文包》 |
| 第 4 课 | 用 HTML / CSS / JS 做第一个互动课件 | 教师 AI 备课与 Codex 基础 | HTML / CSS / JavaScript / Vite 本地开发 | 第一份本地可运行的互动网页课件 |
| 第 5 课 | 用 Vite 组织课件项目：页面、组件与素材管理 | 教师 AI 备课与 Codex 基础 | Vite / 项目目录结构 / 组件复用 / 静态资源管理 | 一套《教师课件项目目录模板》 |
| 第 6 课 | 课堂节奏设计：页面切换、动画、计时器与音效 | 交互式网页课件基础 | CSS 动画 / JavaScript 定时器 / 音效触发 / 课堂节奏设计 | 一页可复用的课堂节奏控制模板 |
| 第 7 课 | 表单、按钮、抽题与即时反馈：交互式课件基础 | 交互式网页课件基础 | DOM 事件 / 表单输入 / 随机抽题 / 即时反馈 UI | 一个可替换题库的互动练习组件 |
| 第 8 课 | 数据驱动课件：题库、错题、排行榜与学习记录 | 交互式网页课件基础 | JSON 数据 / 本地存储 LocalStorage / 排行榜与记录界面 / 统计展示 | 一份带学习记录或排行榜的课堂互动页 |
| 第 9 课 | 多媒体课件：音频、视频、字幕、朗读与投屏适配 | 交互式网页课件基础 | HTML5 Audio/Video / 字幕与配音 / 浏览器语音合成 / 投屏适配 UI | 一个支持音频 / 视频 / 字幕的多媒体课件页 |
| 第 10 课 | Windows 课件工具：用 Electron 封装桌面版教学工具 | 交互式网页课件基础 | Electron / 网页到桌面应用封装 / 本地文件读取 / Windows 教室环境适配 | 一个最小 Windows 教学工具原型 |
| 第 11 课 | 语文课件一：古诗词闯关与意象互动地图 | 学科课件专题实战 | HTML/CSS/JS / 多媒体朗读 / 互动选择题 / 知识点地图 | 一份古诗词互动课件 |
| 第 12 课 | 语文课件二：阅读理解批注台与作文灵感生成器 | 学科课件专题实战 | 文本分段显示 / 批注高亮 / 写作提示生成 / 讨论引导卡 | 一套“阅读 + 写作”组合课件 |
| 第 13 课 | 数学课件一：函数图像实验室与参数滑杆 | 学科课件专题实战 | Canvas / SVG 图像绘制 / 滑杆控件 / 函数参数可视化 / 图像联动 | 一份函数图像实验室课件 |
| 第 14 课 | 数学课件二：几何证明、立体几何与三维图形演示 | 学科课件专题实战 | SVG 几何绘制 / Three.js 入门预热 / 步骤高亮 / 图形控制 | 一份分步几何演示课件 |
| 第 15 课 | 英语课件一：单词闯关、拼写竞速与听说练习 | 学科课件专题实战 | 音频播放 / 发音与字幕 / 拼写输入 / 积分与闯关 | 一份英语单词闯关或听说课件 |
| 第 16 课 | 英语课件二：情景对话、语法诊断与 AI 角色扮演 | 学科课件专题实战 | 对话卡片 / 语法反馈逻辑 / AI 角色脚本 / 语音与文本互动 | 一份英语情景对话 + 语法诊断课件 |
| 第 17 课 | 物理课件一：运动、受力与实验数据可视化 | 学科课件专题实战 | Canvas 动画 / 图表组件 / 参数滑杆 / 实验数据展示 | 一份运动 / 实验数据可视化课件 |
| 第 18 课 | 物理课件二：光学、电学与交互式仿真板 | 学科课件专题实战 | SVG 路径 / 交互式示意图 / 状态切换 / 仿真板 UI | 一份光学 / 电学交互课件板 |
| 第 19 课 | 化学课件一：元素、分子与反应过程可视化 | 学科课件专题实战 | 结构示意图 / 动画步骤页 / 颜色编码 / 可视化卡片 | 一份化学微观结构与反应过程课件 |
| 第 20 课 | 化学课件二：方程配平、实验安全与滴定模拟 | 学科课件专题实战 | 交互练习页 / 步骤模拟 / 结果反馈 / 实验安全提示 | 一份化学配平或实验模拟课件 |
| 第 21 课 | 游戏化课件设计：积分、任务、关卡与班级挑战 | 3D、摄像头与隔空交互 | 积分系统 / 关卡结构 / 任务卡 / 排行榜与成就 UI | 一个游戏化课件模块 |
| 第 22 课 | Three.js 3D 课件基础：把抽象知识做成立体课堂 | 3D、摄像头与隔空交互 | Three.js / 相机与控制器 / 3D 对象 / 标签与讲解 UI | 一个最小 Three.js 3D 课件页 |
| 第 23 课 | 学科 3D 专题：分子、几何体、天体与实验装置 | 3D、摄像头与隔空交互 | Three.js / 模型结构设计 / 标签系统 / 教师演示控制 | 一份学科 3D 专题课件 |
| 第 24 课 | 摄像头识别入门：MediaPipe 手势 / 姿态 / 面部关键点 | 3D、摄像头与隔空交互 | Web Camera API / MediaPipe Hands / MediaPipe Pose / Canvas 覆盖层 | 一个最小手势 / 姿态识别演示页 |
| 第 25 课 | 隔空交互课件：手势翻页、挥手答题与动作触发 | 3D、摄像头与隔空交互 | MediaPipe 交互触发 / 页面状态机 / 动作映射设计 / 触发反馈 UI | 一份隔空交互课堂页 |
| 第 26 课 | 体感教学设计：把动作捕捉真正用进课堂流程 | 3D、摄像头与隔空交互 | 课堂流程设计 / 动作识别稳定性 / 多人互动机制 / 设备与空间布局 | 一份完整的体感教学流程方案 |
| 第 27 课 | 设计师工作流给老师用：Figma / Stitch / Codex 联动做课件 | 游戏化、素材生产与桌面交付 | Figma / Google Stitch / 设计到代码流程 / Codex 页面实现 | 一套教师可复用的设计到代码工作流笔记 |
| 第 28 课 | 素材生产工作流：图片、音效、配色、插画与教学 UI | 游戏化、素材生产与桌面交付 | 图片生成提示词 / 图标与配色系统 / 音效管理 / 素材命名与复用 | 一套个人学科素材提示词与素材库规则 |
| 第 29 课 | 课件测试、课堂部署与学校设备适配 | 测试、部署与结营作品集 | 浏览器兼容检查 / 投屏适配 / 离线策略 / 课堂测试清单 | 一份《教室部署与应急检查表》 |
| 第 30 课 | 结营项目：完成一套学科创意课件作品集 | 测试、部署与结营作品集 | 作品集结构 / 项目说明文档 / 课堂演示脚本 / 资源打包 | 一套教师创意课件作品集与路演说明 |
配套资源
推荐使用方式
- 如果你是个人老师：建议按模块顺序完整学习，先做 1 个可上课的主项目，再逐步升级到 3D / 摄像头。
- 如果你是学校教研组：可以分成“基础网页课件线”和“创意课件进阶线”两条路并行推进。
- 如果你是信息化负责人：可以先组织模块 A + B + C 做 12 到 20 节内训，再从骨干老师里挑人进入模块 D + E。