PPT 大纲

模块 A 教师 AI 备课与 Codex 基础

第 1 课 教师 AI 备课新范式：Codex 与创意课件全景图

• 为什么这一课重要
• 本课技术框架：Codex 聊天与任务模式 / 网页课件基本结构 / Markdown / 文档素材整理 / 浏览器运行环境
• 课堂案例：总览示范：一节“物理斜抛运动”如何升级成互动课件
• 课堂实作：一份《我的创意课件方向清单》与一份《首个课件项目上下文包》
• 创意扩展：把一个传统 PPT 重新拆成网页章节结构

第 2 课 非技术老师也能上手：课件开发最小技术地图

• 为什么这一课重要
• 本课技术框架：HTML / CSS / JavaScript / Vite / Three.js / MediaPipe / Electron
• 课堂案例：同题三做：数学函数课件的三种技术路线
• 课堂实作：一张《教师课件技术选型表》
• 创意扩展：把不同学科的常见课型映射成技术路线图

第 3 课 提示词、上下文包与素材清单：让 Codex 听懂教学目标

• 为什么这一课重要
• 本课技术框架：Prompt Engineering / Context Engineering / 结构化文档组织 / 素材清单模板
• 课堂案例：双案例示范：语文古诗词课与化学滴定实验课
• 课堂实作：一份标准《课件开发上下文包》
• 创意扩展：为同一节课做“普通版 + 游戏化版 + 3D 版”三套上下文包

第 4 课 用 HTML / CSS / JS 做第一个互动课件

• 为什么这一课重要
• 本课技术框架：HTML / CSS / JavaScript / Vite 本地开发
• 课堂案例：英语词汇闯关的最小网页课件
• 课堂实作：第一份本地可运行的互动网页课件
• 创意扩展：把同一个课件改成小学版和高中版两种风格

第 5 课 用 Vite 组织课件项目：页面、组件与素材管理

• 为什么这一课重要
• 本课技术框架：Vite / 项目目录结构 / 组件复用 / 静态资源管理
• 课堂案例：把数学函数课件整理成可复用项目
• 课堂实作：一套《教师课件项目目录模板》
• 创意扩展：建立按学期、按单元、按课题的目录策略

模块 B 交互式网页课件基础

第 6 课 课堂节奏设计：页面切换、动画、计时器与音效

• 为什么这一课重要
• 本课技术框架：CSS 动画 / JavaScript 定时器 / 音效触发 / 课堂节奏设计
• 课堂案例：语文古诗词背诵节奏页
• 课堂实作：一页可复用的课堂节奏控制模板
• 创意扩展：为小组竞赛加入回合计时器

第 7 课 表单、按钮、抽题与即时反馈：交互式课件基础

• 为什么这一课重要
• 本课技术框架：DOM 事件 / 表单输入 / 随机抽题 / 即时反馈 UI
• 课堂案例：化学方程配平抽题台
• 课堂实作：一个可替换题库的互动练习组件
• 创意扩展：加入班级积分和闯关机制

第 8 课 数据驱动课件：题库、错题、排行榜与学习记录

• 为什么这一课重要
• 本课技术框架：JSON 数据 / 本地存储 LocalStorage / 排行榜与记录界面 / 统计展示
• 课堂案例：英语单词闯关排行榜
• 课堂实作：一份带学习记录或排行榜的课堂互动页
• 创意扩展：做一个班级闯关墙

第 9 课 多媒体课件：音频、视频、字幕、朗读与投屏适配

• 为什么这一课重要
• 本课技术框架：HTML5 Audio/Video / 字幕与配音 / 浏览器语音合成 / 投屏适配 UI
• 课堂案例：英语情景对话听说课件
• 课堂实作：一个支持音频 / 视频 / 字幕的多媒体课件页
• 创意扩展：给语文古诗词做配乐朗读模式

第 10 课 Windows 课件工具：用 Electron 封装桌面版教学工具

• 为什么这一课重要
• 本课技术框架：Electron / 网页到桌面应用封装 / 本地文件读取 / Windows 教室环境适配
• 课堂案例：桌面版课堂计时与随机点名工具
• 课堂实作：一个最小 Windows 教学工具原型
• 创意扩展：随机点名器

模块 C 学科课件专题实战

第 11 课 语文课件一：古诗词闯关与意象互动地图

• 为什么这一课重要
• 本课技术框架：HTML/CSS/JS / 多媒体朗读 / 互动选择题 / 知识点地图
• 课堂案例：《使至塞上》意象闯关课件
• 课堂实作：一份古诗词互动课件
• 创意扩展：做成诗词飞花令小游戏

第 12 课 语文课件二：阅读理解批注台与作文灵感生成器

• 为什么这一课重要
• 本课技术框架：文本分段显示 / 批注高亮 / 写作提示生成 / 讨论引导卡
• 课堂案例：阅读理解批注与作文灵感联动课件
• 课堂实作：一套“阅读 + 写作”组合课件
• 创意扩展：做作文素材抽卡页

第 13 课 数学课件一：函数图像实验室与参数滑杆

• 为什么这一课重要
• 本课技术框架：Canvas / SVG 图像绘制 / 滑杆控件 / 函数参数可视化 / 图像联动
• 课堂案例：二次函数顶点与开口方向实验页
• 课堂实作：一份函数图像实验室课件
• 创意扩展：加入“猜一猜图像会怎么变”模式

第 14 课 数学课件二：几何证明、立体几何与三维图形演示

• 为什么这一课重要
• 本课技术框架：SVG 几何绘制 / Three.js 入门预热 / 步骤高亮 / 图形控制
• 课堂案例：圆与切线证明课件 + 立方体视角页
• 课堂实作：一份分步几何演示课件
• 创意扩展：平移、旋转、对称互动页

第 15 课 英语课件一：单词闯关、拼写竞速与听说练习

• 为什么这一课重要
• 本课技术框架：音频播放 / 发音与字幕 / 拼写输入 / 积分与闯关
• 课堂案例：单词闯关与跟读课件
• 课堂实作：一份英语单词闯关或听说课件
• 创意扩展：加入小组对抗模式

第 16 课 英语课件二：情景对话、语法诊断与 AI 角色扮演

• 为什么这一课重要
• 本课技术框架：对话卡片 / 语法反馈逻辑 / AI 角色脚本 / 语音与文本互动
• 课堂案例：校园情景对话与语法选择课件
• 课堂实作：一份英语情景对话 + 语法诊断课件
• 创意扩展：加入录音或口语跟读评分构思

第 17 课 物理课件一：运动、受力与实验数据可视化

• 为什么这一课重要
• 本课技术框架：Canvas 动画 / 图表组件 / 参数滑杆 / 实验数据展示
• 课堂案例：斜抛运动与速度分解实验页
• 课堂实作：一份运动 / 实验数据可视化课件
• 创意扩展：做受力分析拖拽页

第 18 课 物理课件二：光学、电学与交互式仿真板

• 为什么这一课重要
• 本课技术框架：SVG 路径 / 交互式示意图 / 状态切换 / 仿真板 UI
• 课堂案例：凸透镜成像与串并联电路交互板
• 课堂实作：一份光学 / 电学交互课件板
• 创意扩展：加入“错误连接演示”页

第 19 课 化学课件一：元素、分子与反应过程可视化

• 为什么这一课重要
• 本课技术框架：结构示意图 / 动画步骤页 / 颜色编码 / 可视化卡片
• 课堂案例：分子结构卡片与反应步骤可视化
• 课堂实作：一份化学微观结构与反应过程课件
• 创意扩展：加入实验安全提醒页

第 20 课 化学课件二：方程配平、实验安全与滴定模拟

• 为什么这一课重要
• 本课技术框架：交互练习页 / 步骤模拟 / 结果反馈 / 实验安全提示
• 课堂案例：方程配平挑战与酸碱滴定课件
• 课堂实作：一份化学配平或实验模拟课件
• 创意扩展：加入错题记录

模块 D 3D、摄像头与隔空交互

第 21 课 游戏化课件设计：积分、任务、关卡与班级挑战

• 为什么这一课重要
• 本课技术框架：积分系统 / 关卡结构 / 任务卡 / 排行榜与成就 UI
• 课堂案例：语数英通用闯关框架
• 课堂实作：一个游戏化课件模块
• 创意扩展：班级 boss 战

第 22 课 Three.js 3D 课件基础：把抽象知识做成立体课堂

• 为什么这一课重要
• 本课技术框架：Three.js / 相机与控制器 / 3D 对象 / 标签与讲解 UI
• 课堂案例：立体几何体与分子结构 3D 预览页
• 课堂实作：一个最小 Three.js 3D 课件页
• 创意扩展：加入切面观察

第 23 课 学科 3D 专题：分子、几何体、天体与实验装置

• 为什么这一课重要
• 本课技术框架：Three.js / 模型结构设计 / 标签系统 / 教师演示控制
• 课堂案例：三维几何体剖切 / 分子结构拆解 / 光学装置 3D 页
• 课堂实作：一份学科 3D 专题课件
• 创意扩展：加入时间轴动画

第 24 课 摄像头识别入门：MediaPipe 手势 / 姿态 / 面部关键点

• 为什么这一课重要
• 本课技术框架：Web Camera API / MediaPipe Hands / MediaPipe Pose / Canvas 覆盖层
• 课堂案例：挥手翻页与举手触发提示
• 课堂实作：一个最小手势 / 姿态识别演示页
• 创意扩展：加入动作计数

第 25 课 隔空交互课件：手势翻页、挥手答题与动作触发

• 为什么这一课重要
• 本课技术框架：MediaPipe 交互触发 / 页面状态机 / 动作映射设计 / 触发反馈 UI
• 课堂案例：隔空答题与手势翻页英语 / 物理课件
• 课堂实作：一份隔空交互课堂页
• 创意扩展：加入班级 PK 模式

第 26 课 体感教学设计：把动作捕捉真正用进课堂流程

• 为什么这一课重要
• 本课技术框架：课堂流程设计 / 动作识别稳定性 / 多人互动机制 / 设备与空间布局
• 课堂案例：数学立体几何隔空旋转 + 英语动作答题
• 课堂实作：一份完整的体感教学流程方案
• 创意扩展：设计双人合作动作课件

模块 E 游戏化、素材生产与桌面交付

第 27 课 设计师工作流给老师用：Figma / Stitch / Codex 联动做课件

• 为什么这一课重要
• 本课技术框架：Figma / Google Stitch / 设计到代码流程 / Codex 页面实现
• 课堂案例：语文阅读批注台的设计稿到网页落地
• 课堂实作：一套教师可复用的设计到代码工作流笔记
• 创意扩展：做一套班级统一课件视觉模板

第 28 课 素材生产工作流：图片、音效、配色、插画与教学 UI

• 为什么这一课重要
• 本课技术框架：图片生成提示词 / 图标与配色系统 / 音效管理 / 素材命名与复用
• 课堂案例：化学实验课件素材包与英语对话课件配色包
• 课堂实作：一套个人学科素材提示词与素材库规则
• 创意扩展：制作班级统一课件 UI Kit

模块 F 测试、部署与结营作品集

第 29 课 课件测试、课堂部署与学校设备适配

• 为什么这一课重要
• 本课技术框架：浏览器兼容检查 / 投屏适配 / 离线策略 / 课堂测试清单
• 课堂案例：学校教室环境课件上线检查
• 课堂实作：一份《教室部署与应急检查表》
• 创意扩展：为 3D 和摄像头课件做降级版

第 30 课 结营项目：完成一套学科创意课件作品集

• 为什么这一课重要
• 本课技术框架：作品集结构 / 项目说明文档 / 课堂演示脚本 / 资源打包
• 课堂案例：语数外理化跨学科创意课件作品集路演
• 课堂实作：一套教师创意课件作品集与路演说明
• 创意扩展：申报学校公开课 / 校本课程展示