不会写代码,老师也能做交互网页:一套适用于多种 AI 工具的方法
- 2026-10-28 09:42:40
地球自西向东转。
从北极上空往下看，是顺时针，还是逆时针？
讲这句话时，可以让学生先作判断，再切换到“北极俯视”视角，看着模型验证自己的答案。
同一个知识点，除了听讲和看图，还可以多一个环节：学生先想一想，再亲手验证。
这正是交互网页值得尝试的地方。
提到制作网页，老师很容易想到代码、软件安装和复杂的技术操作。现在，借助能生成代码的 AI 工具，可以先用自然语言描述一个小任务，让工具协助实现，再通过试用把它逐步改好。
这篇文章就从这里开始：选一个教学问题，写清需求，生成网页，修改一轮，保存下来。
你可以使用熟悉的 AI 工具。下面的方法可以迁移，具体入口按当前工具界面操作。
01 先说清学生要做什么
先别急着输入“帮我做一个好看的网页”。
拿出正在备的一节课，找一个值得学生动手试一试的问题。
比如，长方形的长和宽都扩大到原来的两倍，面积会怎样变化？
可以让学生先预测，再改变条件，观察图形与数值，最后解释自己的判断。
地理中的视角切换、科学中的变量控制、语文中的材料分类，也可以这样拆解。每个功能都对应一个具体任务，教师才能判断它是否有用。
写需求之前，先补完这句话：
学生通过____操作，思考____问题，网页给出____反馈。
“操作、思考、反馈”把这三个部分连起来，网页就有了清楚的教学用途。
如果只是点击按钮，显示下一段文字，还可以追问一步：学生需要比较什么、作出什么判断？回答清楚后，再决定按钮该怎样设计。
第一件作品尽量小。做一个“面积变化探究”，或一个“地球自转方向判断”，就足够开始。
02 工具可以换 制作流程要清楚
制作交互网页，常见的工作方式有三种。
一种是在对话里生成代码。
例如使用 DeepSeek 等熟悉的对话工具，说明需求，获得完整 HTML，再保存或放进预览环境中试用。
一种是在作品面板中边看边改。
例如 Claude Artifacts、Gemini Canvas 这类环境，可以围绕作品继续提出修改。完成后，要查看当前作品支持怎样导出，是否仍然依赖平台服务。具体能力以当前账户和作品类型为准。
还有一种是直接修改本地文件。
在 Codex 等具备文件编辑能力的环境里，可以打开一个专用文件夹，让工具创建和修改其中的网页。
同一个产品也可能支持不止一种方式。初次尝试，选自己能正常访问、已经熟悉的入口即可。
先走通这条流程：
描述需求 → 生成作品 → 实际操作 → 提出修改 → 保存试用。
换工具时，把当前完整文件一起带过去，再说明“已经能做什么、这一轮只改什么、哪些功能要保留”。这样更容易在已有作品上继续修改。
03 给 AI 的需求 可以写成六句话
“做一个有趣的网页”太宽泛，AI 很难知道你的课堂重点。
把需求写成六部分，之后修改也更有依据。
**教学目标：**学生最终要学会什么？
**学习任务：**学生需要解决什么问题？
**交互行为：**学生点击、选择或调整什么？
**反馈规则：**答对、答错、没完成时，网页分别怎样回应？
**页面风格：**投屏能否看清，手机上是否方便操作？
**技术约束：**交付什么文件，在什么条件下运行？
最后一项容易被忽略。对于第一件简单作品，可以直接要求：一个完整的 HTML 文件，不使用外部脚本、字体、图片和联网接口，保存后能在浏览器里打开。
这样先控制住制作范围，遇到问题也容易定位。
04 跟着做一个面积探究网页
下面用一道容易核验的题，走一遍制作流程。熟悉之后，再换成自己的学科内容。
初始长方形长 4 个单位、宽 3 个单位，面积是 12 平方单位。
第一问：宽不变，长扩大到原来的两倍，面积是多少？
第二问：重新从初始图形出发，长和宽都扩大到原来的两倍，面积是多少？
两题分别对应 24 和 48 平方单位。网页的任务，是让学生经历预测、验证和解释，而不只是把答案展示出来。
可以把下面这段直接发给 AI：
请制作“长方形面积探究”交互教学网页，面向已经学过面积公式的小学生。
教学目标：理解只改变长、同时改变长和宽时，面积怎样变化。
学习任务：初始长 4、宽 3。任务一，宽不变，长扩大到原来的 2 倍；任务二，重新从初始图形出发，长和宽都扩大到原来的 2 倍。两题独立。
交互行为：每题先选择预测，再点击验证；未选时提示先选择。另设自由探究区，长和宽可在 1 到 8 的整数范围内调节，并提供重置按钮。
反馈规则：首次答错先给观察线索，允许重试，不立即显示答案；第二次提交或点击“查看解析”后显示结果。答对时显示计算，并追问判断理由。
页面风格：中文浅色，大字、大按钮；手机改为上下排列。用单位方格画长方形，比较图使用相同的单位长度，最大取值也要完整显示。
技术约束：一个完整 index.html，使用原生 HTML、CSS、JavaScript 和内联 SVG，不使用外部资源、联网接口或密钥，断网可运行。
先说明操作流程，再提供完整 HTML；如果能创建文件，请直接创建并说明位置。不要省略代码。
得到第一版后，先按学生的路径操作一遍。
不选答案就点击验证，会不会提醒？故意答错，会不会直接泄露答案？重置后，题目和图形能不能一起恢复？
再把自由探究区设成长 5、宽 4，核对面积是否为 20。把数值调到最大，看看图形和文字有没有被裁掉。
还有一个细节：**不同长方形的单位长度要一致。**如果两个图形分别缩放后都塞进同样大小的框里，数值虽然正确，画面却可能误导学生。
05 网页怎么改 把问题描述具体
第一次生成后，发现问题就继续修改。
“再好看一点”“反馈不够好”，都不容易让 AI 找到你真正介意的地方。
换一种说法，告诉它：怎样操作、实际发生什么、希望改成什么，以及要保留什么。
请修改当前网页的反馈逻辑。
操作：任务二首次选错，再点击验证。实际结果：立即出现面积 48 和完整解析。希望改成：首次错误只给观察线索，允许重试；第二次提交或主动查看解析后再显示答案。
保留题目、图形比例、自由调参、布局和重置功能。本轮只修改相关反馈逻辑。
能编辑文件时，请先读取并修改当前 index.html；只能输出文字时，请返回完整修改版 HTML。
每一轮集中解决一类问题。先让任务和反馈成立，再核对知识内容，最后调整字号、颜色和布局。
改完反馈逻辑，再试一次答对、答错、重试和重置。保留一份已经能用的版本，下一轮就有退路。
如果要继续做太阳系这样的三维作品，也可以小步推进：先看得见太阳，再加入行星和运动，然后增加视角、标签与知识卡，最后按需要细化材质。
在“地球自转 · 地方时与时区”和“太阳系探索课堂”这类作品中，旋转、缩放和聚焦都要服务具体问题。模型中的尺寸、距离或速度经过调整时，也应清楚标注为教学示意。
06 保存以后 再完整打开一次
如果拿到的是代码，只复制从 <!DOCTYPE html> 到 </html> 的完整内容，不把代码外的说明和三反引号一起放进去。
Windows 可以用记事本另存为 index.html，保存类型选“所有文件”，编码选 UTF-8。确认实际文件名没有变成 index.html.txt。
macOS 可以用“文本编辑”转换为纯文本后保存，保留 .html 扩展名。不要用 Word 保存网页源码。
如果使用作品面板，就检查导出的文件；如果导出的是一个文件夹，交付时把里面的资源一起保留。
然后，从最终文件或链接重新进入，亲手完成关键操作。
一个 HTML 文件，也可能需要联网。文件里如果引用了在线脚本和贴图，断网后仍可能加载失败。需要离线使用，就在目标设备上断网后重新打开验证。
课堂使用前，再看四件事：
**内容是否正确：**答案、单位、图形和解释是否一致。 **操作是否有效：**答对、答错、未选择和重置都试过。 **显示是否清楚：**投屏能读，按钮能点，小屏不遮挡。 **交付是否可用：**最终文件能打开，需要的资源都在。
还要分清两件事：网页由 AI 编写，普通动画和预设反馈也可以在浏览器里运行；网页要实时调用 AI 回答问题，则需要另外设计接入方式。自行接入时，私密密钥不应写进发给学生的 HTML。
页面运行正常后，再带进课堂小范围试用。学生能否解释判断、是否发现原先忽略的关系，才是下一轮修改的依据。
做完第一件作品，最值得留下来的，就是这套方法：把一个教学问题说清楚，让学生有机会操作、思考，再得到有帮助的反馈。
本文示例提示词可作为起点，生成后仍需按文中的操作路径试用。
欢迎感兴趣的老师进群交流
