最近外出分享 AI 。我没有直接播放 PPT，而是让 AI 把同一份内容做成了一个网页放映台。
作为讲师使用的演示课件，我可以在讲解时随手点开解析、复制提示词、播放视频、跳转工具链接，整个演示不用在多个文件和窗口之间来回切。
现场效果比我预想得好。以前放在 PPT 里的内容主要负责“看”，换成网页后，我可以边讲边操作，页面也会跟着讲解发生变化。
这次真正改善的，是我作为讲师的操作和演示体验：用起来更顺手，讲起来更直观，课堂呈现也更有趣。
网页放映台全貌：侧栏目录、翻页控制和页码进度都在同一个界面
▌ PPT 和网页，差别在哪
传统 PPT 更像一组按顺序播放的页面，适合讲述和展示；HTML 的每一页本身就是网页，可以响应点击、复制内容、播放视频、打开链接、承载长文字。两者不是谁更高级，而是载体不同，擅长的事情也不同。
如果内容只需要顺着讲完，PPT 已经足够。但当讲师需要现场演示、即时复制提示词、完整播放操作、快速跳转工具时，网页会更自然。
我这次做的事情，可以理解为把“静态课件”变成了一个方便讲师现场操控的演示工具。
从静态页面到可交互网页，改变的是课件的承载方式
▌ 这 6 个交互，真的好用
我把这次课件中实际使用的交互盘点了一遍，主要有这 6 类：弹出、复制、视频、翻转、超链、滚动。下面逐个看看它们怎样方便我操作课件、完成现场演示。
6 类交互：弹出、复制、视频、翻转、超链、滚动
① 弹出｜答案需要时再出现
点击题目卡片后，页面会弹出答案和解析。上课时，我可以先抛出问题，留一点思考时间，再点开答案继续讲；补充信息不用提前挤在页面上，讲解节奏也更容易控制。
GIF 1｜点击后弹出答案解析
② 复制｜提示词一键拿走
提示词旁边放一个“一键复制”按钮，点一下，整段内容就进入剪贴板。我可以直接粘贴到 AI 对话框里做现场演示，不用提前把提示词放在另一个文档里，也不用讲到一半再用鼠标框选。
GIF 2｜点击按钮，一键复制提示词
③ 视频｜操作过程直接播放
演示视频可以直接放在当前页面，点击就开始播放。我讲到某个步骤时，可以马上展示完整操作，不用退出课件再去文件夹里找视频，整个讲解会连贯很多。
GIF 3｜点击页面中的视频开始播放
④ 翻转｜一张卡片放两层信息
卡片正面放问题，点击后翻到背面显示答案。我可以先讲正面的内容，再用翻转补充答案；页面多了一点恰到好处的变化，演示会更有趣，又不会显得太花哨。
GIF 4｜点击卡片，翻面查看答案
⑤ 超链｜点击按钮直达工具
工具入口可以做成按钮，点击直接打开目标页面。现场演示时，我不用复制网址，也不用提前开一排浏览器标签；讲到哪个工具就点开哪个工具，再回到课件继续讲。
GIF 5｜点击按钮，直接打开目标网页
⑥ 滚动｜长内容有自己的空间
长提示词、案例原文可以放进固定高度的滚动区域。页面整体仍然清爽，我讲到哪里就滚到哪里，不用为了塞下长内容把字号缩得很小。
GIF 6｜在固定区域内查看完整长文
▌ 放映台本身也更顺手
除了页面里的 6 类交互，放映台的外壳也是 HTML 做的。我给它加了可折叠侧栏、页码进度、键盘翻页、触屏滑动和全屏自适应，现场可以快速跳到任意一页，不必一直按顺序翻。
翻页时还用了双 iframe 交叉淡入，减少页面切换时的黑屏；课件打开第二份时也会自动处理，避免重复运行。这些细节看起来不起眼，但真正站在台上讲课时，稳定和顺手比炫技更重要。
▌ 让 AI 帮你做，分 3 步
做成网页，并不意味着你要先学会写前端代码。我的实际做法是把需求讲清楚，让 AI 先把框架跑起来，再一页页填入内容，最后按需要加入交互。讲师负责内容、讲解节奏和现场判断，AI 负责把想法落成能运行的页面。
- 1. 搭骨架：先生成带侧栏、主舞台、翻页控制、页码进度和全屏按钮的放映台。
- 2. 填内容：把每一页的标题、要点、案例交给 AI，逐页生成对应网页。
- 3. 加交互：根据内容加入弹出、复制、视频、翻转、超链、滚动。
后面要改内容，也不用整套推倒重来。直接告诉 AI 哪一页要改、保留什么、增加什么，它就可以继续迭代；完成后把项目文件夹打包，对方双击启动文件就能使用。
上手 3 步：搭骨架、填内容、加交互
下面这段是我整理的通用搭框架提示词，可以直接复制给 AI：
你是一名前端工程师和培训课件设计师。 请用 HTML、CSS、JavaScript 帮我搭建一个“可交互网页放映台”骨架。 要求： 1. 创建一个主文件 deck.html，结构包括左侧可折叠目录、主舞台、底部翻页、页码、进度条和全屏按钮。 2. 支持键盘翻页、触屏滑动和全屏展示。 3. 每一页使用独立的 slide-XX.html，按 1280×720 设计，画布等比缩放。 4. 翻页使用双 iframe 交叉淡入，减少黑屏。 5. 预留 6 类交互示例：弹出、复制、视频、翻转、超链、滚动。 6. 整体配色保持简洁，主舞台以白色为主。 7. 提供清晰的“添加新页”说明。 请输出完整可运行的项目文件夹结构，并说明如何启动。
当然，不是每一份 PPT 都需要改成网页。如果只是一次简单汇报，PPT 更省事；当讲师需要现场点击、复制、播放、跳转和滚动，需要把操作过程直接演示出来时，网页放映台才更能发挥价值。
对我来说，这次最大的收获不是又做了一个新课件，而是发现：同一份内容，换一种载体，会改变我作为讲师的操作和演示方式。
课件更顺手，演示更直观，课堂也会多一点有趣的变化。如果你也想做这样的网页课件，可以先从一个最需要的效果开始，不用一口气把所有功能都塞进去。
还有什么有意思的交互模式？欢迎留言告诉我。后面我也会继续拆解这套网页放映台的实际制作过程。
-END-
⬇️点关注，不迷路
欢迎『点赞 转发 在看 评论』，感谢喜欢🩷
感恩遇见！一同探索AI的更多可能性！
