老师如何用DeepSeek做网页，从原理到实操这个教程请收藏！

    “我又不是程序员，学这个干嘛？”——这话三年前成立，但AI时代教师的新答案：“你是教学设计师，AI才是你的技术苦力。”

那这一切，普通老师如何才能实现AI编程做出各种有用的小工具？

一、核心四步：把创意变成网页的流水线

在给出具体实操案例之前，先告诉你这个流程是如何运转的~

1. 说需求→ 像点菜一样告诉AI工具功能
2. 拿代码→ 复制生成的HTML“配方”
3. 存文件→ 粘贴到记事本改后缀
4. 双击看→ 浏览器自动“烹饪上菜”

 

技术本质揭秘：
HTML = HTML就是用电子标签把文字、图片、链接等教学内容装订成能在浏览器打开的”数字教案”。

 

CSS/JS = 加样式（相当于教案美化），JS加互动（相当于课堂活动设计）。

了解了这些我们来看个实操案例！

二、实战案例：1分钟解决照片命名噩梦

场景：在你通过问卷工具收集到了50位学生的照片，同时也导出照片和学生姓名、电话等信息一一对应的Excel表，现在上级要求这些照片需要按照【班级-学号-姓名】命名后提交，请问你如何处理？

操作流程：

1. 说需求（下方👇是提示词模板，可以复制粘贴给DeepSeeK一起尝试）：

“你是一个Web设计师，使用纯html语言帮我写一个网页，这个网页的功能如下：
1、在一个文件夹里，有多张没有命名的图片和一份有【班级-学号-姓名-照片编号】的Excel表，现在我需要将所有的图片命名，按照表格中的内容，以“班级-学号-姓名”的格式，对所有图片重命名
2、需要有两个文件上传窗口，一个是图片所在文件夹，一个是Excel表

1. 拿代码：
   复制DeepSeek生成的代码块

1. 存文件：
   在电脑上新建TXT文件 → 粘贴代码 → 改名照片重命名.html

 

注：若看不到.txt后缀，需在文件夹设置中开启扩展名显示

1. 双击看：
   浏览器打开即用，双击选择自己电脑上的默认浏览器打开，这时候你会看到网页上出现两个文件上传入口，按照提示上传照片和excel表格，立刻就可得到结果。

按照要求上传后，下载的压缩包解压后，我们就看到图片按照我们要求的格式全部重命名完成，如下图所示。

三、教学场景拓展：你的课堂急需这些神器

 

避坑提示：

• 需求描述越精准，工具越听话（例：“转盘抽签需显示中奖动画+音效”）
• 首次运行若失败，用截图问DeepSeek：“这段代码报错如何修复？”

当你在课堂打开自制的实验网页，那份碾压PPT的成就感——才是技术解放教育的真谛。