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

本课定位

帮助老师用“够用而不吓人”的方式理解 HTML、CSS、JavaScript、Vite、Three.js、MediaPipe、Electron 各自负责什么。

本课技术框架

• HTML
• CSS
• JavaScript
• Vite
• Three.js
• MediaPipe
• Electron

学习目标

• 知道各技术框架分别解决什么问题
• 能根据课堂目标选择普通网页、3D 网页、体感网页还是桌面应用
• 形成自己的技术选型判断表

课前准备

• 准备第 1 课的课件创意清单
• 圈出其中 3 个最想实现的方向

课堂流程（60 分钟）

时间	环节	讲师动作
0-10 分钟	用生活类比讲清七种技术的职责分工	用生活类比讲清七种技术的职责分工
10-25 分钟	演示“同一课题”用普通网页、3D 网页、摄像头互动三种方式呈现的差别	演示“同一课题”用普通网页、3D 网页、摄像头互动三种方式呈现的差别
25-40 分钟	让学员把自己的点子映射到合适技术路线	让学员把自己的点子映射到合适技术路线
40-50 分钟	讲什么时候该简单做	讲什么时候该简单做，什么时候该升级到 Three.js 或 MediaPipe
50-60 分钟	完成一张个人技术选型卡	完成一张个人技术选型卡

核心讲授点

• HTML 负责内容骨架，CSS 负责样式，JavaScript 负责交互，Vite 负责项目运行与组织
• Three.js 适合让抽象对象立体化，MediaPipe 适合让摄像头和动作进入课堂
• Electron 适合把网页课件包装成 Windows 桌面工具，但不是每节课都必须用

课堂案例

同题三做：数学函数课件的三种技术路线

展示函数图像既可以做普通滑杆课件，也可以做 3D 立体坐标系，还可以做动作控制的函数闯关，让老师理解“技术服务表达”而不是“技术越多越好”。

Codex 提示词

提示词 1：直接生成第一版课件

请直接帮我生成一版“非技术老师也能上手：课件开发最小技术地图”相关的可运行课件，不要只给页面策划或设计说明。

请直接把课件做出来。

这次课件的要求如下：
- 示例创意 1：七年级英语“校园问路”情景对话课件
- 示例创意 2：八年级数学“二次函数图像参数拖拽实验室”
- 示例创意 3：九年级化学“甲烷分子 3D 旋转观察页”
- 示例创意 4：公开课用“挥手翻页、举手揭晓答案”的摄像头互动页
- 示例创意 5：Windows 教室里的“随机点名 + 倒计时”桌面教学工具
- 本次要做的课件：一张老师能看懂的技术选型判断表

请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js

提示词 2：补互动和老师控制

请在这个课件里补上课堂互动、即时反馈、老师控制按钮、重置功能和总结页，让老师拿来就能上课。

请直接把课件做出来。

这次课件的要求如下：
- 示例创意 1：七年级英语“校园问路”情景对话课件
- 示例创意 2：八年级数学“二次函数图像参数拖拽实验室”
- 示例创意 3：九年级化学“甲烷分子 3D 旋转观察页”
- 示例创意 4：公开课用“挥手翻页、举手揭晓答案”的摄像头互动页
- 示例创意 5：Windows 教室里的“随机点名 + 倒计时”桌面教学工具
- 本次要做的课件：一张老师能看懂的技术选型判断表

请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js

提示词 3：升级成更完整的课堂版

请把这个课件再补完整一点，增加更清楚的课堂流程、互动环节和适合投屏的样式。

请直接把课件做出来。

这次课件的要求如下：
- 示例创意 1：七年级英语“校园问路”情景对话课件
- 示例创意 2：八年级数学“二次函数图像参数拖拽实验室”
- 示例创意 3：九年级化学“甲烷分子 3D 旋转观察页”
- 示例创意 4：公开课用“挥手翻页、举手揭晓答案”的摄像头互动页
- 示例创意 5：Windows 教室里的“随机点名 + 倒计时”桌面教学工具
- 本次要做的课件：一张老师能看懂的技术选型判断表

请按下面这些要求直接生成代码：
- 请直接把完整代码写出来，不要只写思路、页面说明或大纲
- 页面里的课题、知识点、题目和文案都写完整、写具体
- 页面要适合教室投屏：字号大、按钮大、对比清晰、老师在教室后排也能看清
- 页面里要有真实课堂可用的互动，不要只做成静态展示页
- 请直接给出一个打开浏览器就能运行的单文件网页课件
- 默认输出一个完整的 index.html，如果确实需要，也可以拆成 style.css 和 script.js

本课交付物

• 一张《教师课件技术选型表》

创意扩展

• 把不同学科的常见课型映射成技术路线图
• 做一页“什么时候不用复杂框架”的反例清单

相关素材

• framework-selection-matrix.txt

建议搭配案例

• 案例 3 数学函数图像实验室
• 案例 9 化学分子结构与 3D 反应装置课件