第 19 次课：把学习经验做成网页

一、上节课回顾

上节知识要点：

• 上节课做了校园活动海报，学会了「需求五要素、两版选向、四项文字核对」。
• 核对的习惯这节课继续用：网页一屏一句正文，错一个字滚动时特别显眼。
• 今天连做四个经验分享网页，把「分屏规划、生成、逐屏检查」练熟。

二、本节课任务与安排

本课交付

用同一套流程把四份经验分别做成 12-15 屏的单文件网页：首屏有钩子，中间一屏一个要点，结尾屏有行动清单。浏览器打开，往下滚动就能一屏一屏看。

你会得到四个能直接打开演示的网页，其中两个附互评改版和发布检查记录；下节课挑一个逐屏转成 30 秒视频。

顺序	环节	学生产出	时间
回顾	上节课回顾	想起生成后逐字核对	5分钟
交付	看四个网页成品	知道本课交四个网页	3分钟
理论	理论基础：网页即一串屏	会分屏会拆内容	8分钟
案例1	🔧 案例1：职场生存指南十四屏	14 屏单文件网页	13分钟
案例2	🔧 案例2：期末复习指南十二屏	12 屏单文件网页	13分钟
案例3	🔧 案例3：面试经验互评改版	13 屏网页加 v2 改版	13分钟
案例4	🔧 案例4：实习避坑两道检查	14 屏网页加检查记录	13分钟
收尾	展示与下节课衔接	能说出每屏对应什么	5分钟
机动	等待与排错	补齐必做成果	7分钟
扩展	扩展任务：为自己的经验做网页（选做）	自己经验的单文件网页	15分钟

上课前完成课前准备，素材从课程资料逐个下载。

环境：Windows 10/11，WorkBuddy 桌面端（安装登录教程）；本课用 WorkBuddy 内置的网页生成能力，不需要安装新技能；本机课程目录为 D:\AIGC\lesson-19。软件版本与机房路径由教师在开课前核对：[课前演练补充]。

三、理论基础：网页即一串屏

先想一个问题：一条 30 秒的视频和一串往下滚的网页，哪个好做？今天你会亲手把网页变成视频的素材池——往下滚动一次换一屏，正好是一帧一个镜头；先有这串屏，下节课的视频才有东西可挑。

网页就是一串屏。 往下滚动一次换一屏内容，和短视频一帧一帧往下播是一个道理。首屏像店铺招牌：一句钩子让人停下来；中间每屏只放一个要点，像食堂窗口一窗一个菜；结尾屏收个尾，告诉读者「照着做，第一步是什么」。

十几屏是素材池。 十几屏的网页读下来大约一分钟，内容量正好够支撑一条 30 秒视频；但下节课转视频时不是逐屏硬塞，而是从这十几屏里挑出 5-6 个最有吸引力的镜头重新排序。12-15 屏是合格线，四个案例分别压在这条线的不同位置。

发布前两道检查。 隐私检查：真名、学号、宿舍号、公司内部信息一律不放；文字检查：错字、绝对化用语（「最好」「第一」）逐屏过一遍。网页要滚动着读，错字比图文卡片更显眼。

四、实操环节

案例1：职场生存指南十四屏

任务目标：

老师带练走完「分屏规划 → 人工核对 → 生成网页 → 逐屏检查」全流程，做出 14 屏单文件网页。分屏大纲已内嵌在提示词里，不依赖其他案例。

实操步骤

1. 粘贴分屏大纲，生成 14 屏规划（4分钟）

1. 打开 WorkBuddy 新建任务，工作目录选 D:\AIGC\lesson-19。

2. 分屏大纲不到 500 字，已完整写进下面的提示词，整段复制发送：

   请按下面的分屏大纲，为 14 屏网页做分屏规划：
   第 1 屏写钩子；
   第 2 屏写痛点；
   第 3 屏到第 12 屏每屏一个要点；
   第 13 屏给行动清单；
   第 14 屏写一句结尾。
   输出分屏表：每屏一句屏标题和不超过 60 字的正文，先列出来我确认。
   输入素材：
   主题：职场新人生存指南。读者：大三学生，半年后进公司实习。
   痛点：学校没人教汇报、存文件、要反馈，每一件都能让新人加班到深夜。
   要点1：文件命名带日期和版本号，如 实习周报-0925-v2.docx。
   要点2：重要文件先存工作目录再发群里，聊天记录只当备份。
   要点3：接任务当场复述一遍，确认交付时间和验收标准。
   要点4：汇报先说结论再说过程。
   要点5：每天下班前写三行工作日志，周报直接拼素材。
   要点6：遇到问题先自己查十分钟，再带着方案去问。
   要点7：群消息别只回「收到」，补一句预计完成时间。
   要点8：会议必带笔记本，散会十分钟内发出纪要。
   要点9：犯错第一时间上报，不拖到被别人发现。
   要点10：每周主动找带教老师要一次反馈。
   行动清单：改文件名、写日志、约反馈。
   输入素材结束。

   执行后你会看到：对话给出 14 行分屏表，每屏职责清晰、字数达标。

2. 人工核对分屏表（3分钟）

1. 逐屏读一遍：每屏是不是只讲一件事、大白话有没有讲到位；把「向上管理」这类职场术语换成更好懂的说话，然后确认分屏表。

   分屏表里的职场术语再口语化一点，每屏正文不超过 60 字。
   确认后作为最终分屏表。

   执行后你会看到：14 屏分屏表最终定稿，每屏一句标题加一小段正文。

3. 生成网页并逐屏检查（6分钟）

1. 分屏表确认后，用下面的提示词生成网页文件：

   请按刚才确认的分屏表，生成单文件网页 index.html：
   14 个 section，每个占满一屏，滚动翻页；
   风格简洁、字号大、适合投影和手机阅读；
   所有样式和内容都写在这一个文件里。
   生成后告诉我文件位置和打开方法。

   执行后你会看到：本课目录出现 index.html。

2. 在文件管理器里双击 index.html 用浏览器打开，从第 1 屏滚到最后一屏，逐屏检查：首屏钩子抓不抓人、每屏是不是一个要点、文字有无错漏，发现问题让 AI 修改。执行后你会看到：14 屏依次满屏滚动，文字完整、顺序正确。

   查什么	合格的样子
   屏数达标	从第 1 屏滚到第 14 屏，每屏占满整个窗口
   结构清晰	钩子屏、痛点屏、十个要点屏、行动清单屏、结尾屏各就各位
   文字正确	逐屏朗读检查，无错字漏字

扩展练习（选做）

网页检查通过、时间还有富余再做：给这 14 屏加一套深色科技感样式，为下节课可能的产品视频风格做一次预演。

1. 复制下面的提示词发送：

   请保持 index.html 的 14 屏文字与顺序完全不变，只改样式：
   换成深色科技感配色，正文与背景对比度要够；
   每屏标题用主题色突出，正文保持易读字号；
   样式仍全部写在同一个文件里，不引入外部资源；
   另存为「index_dark.html」，不覆盖原文件。

2. 执行后你会看到：本课目录出现 index_dark.html，浏览器打开后 14 屏文字与原版逐字一致，只有配色和标题样式变了。时间不够直接进入案例2。

问题与注意事项

• 首屏钩子平淡：让 AI 用疑问句、数字句、反差句三种句式各起一版钩子再选一个。
• 单屏文字太多：把该屏正文删到 60 字以内重新生成，不要缩小字号硬塞。
• 屏数凑不够：把一个大要点拆成「做法」和「例子」两屏，不要注水复制。

案例2：期末复习指南十二屏

任务目标：

换一份素材证明「换主题，方法不变」：期末复习经验只有八个要点，带练把网页压到 12 屏合格线下限。案例2素材已内嵌，不需要案例1的成品。

实操步骤

1. 粘贴复习大纲，生成 12 屏规划（5分钟）

1. 新建一个对话，工作目录仍选 D:\AIGC\lesson-19。

2. 复习大纲已完整写进下面的提示词，整段复制发送：

   请按下面的分屏大纲，为 12 屏网页做分屏规划：
   第 1 屏写钩子；
   第 2 屏写痛点；
   第 3 屏到第 10 屏每屏一个要点；
   第 11 屏给行动清单；
   第 12 屏写一句结尾。
   输出分屏表：每屏一句屏标题和不超过 60 字的正文，先列出来我确认。
   输入素材：
   主题：期末复习指南。读者：同校大一学生，两周后期末考。
   痛点：平时没听课，书翻开像新的一样；通宵背到天亮，考场全忘。
   要点1：先翻往年卷，考什么复习什么，不从头看书。
   要点2：把章节分成必考、常考、可以放弃三堆。
   要点3：每科只精做一套题，错题标日期。
   要点4：错题当天重做一遍，第二遍才是学会的时候。
   要点5：背诵放在早上，理解放在晚上。
   要点6：手机开专注模式留在宿舍，去图书馆只带纸质资料。
   要点7：找同学互相讲一遍，讲得出来才是真会。
   要点8：考前一晚只过错题和公式，不开新内容。
   行动清单：找往年卷、章节分三堆、错题本建起来。
   输入素材结束。

   执行后你会看到：12 行分屏表，要点屏一个不多一个不少。

2. 生成网页并逐屏检查（8分钟）

1. 确认分屏表后发生成提示词：

   请按刚才确认的分屏表，生成单文件网页 review-guide.html：
   12 个 section，每个占满一屏，滚动翻页；
   风格简洁、字号大、适合手机阅读；
   所有样式和内容都写在这一个文件里。

   执行后你会看到：本课目录出现 review-guide.html。

2. 双击用浏览器打开，从第 1 屏滚到第 12 屏逐屏检查：结构是否照分屏表落位、12 屏有没有凑数注水的屏。发现哪屏内容空，就指名让 AI 重写该屏。执行后你会看到：12 屏内容扎实、顺序正确，没有注水屏。

   查什么	合格的样子
   屏数压线	恰好 12 屏，不多不少，每屏占满窗口
   屏屏有货	每屏一个要点且内容具体，没有复制注水的屏
   文字正确	逐屏朗读检查，无错字漏字

扩展练习（选做）

12 屏网页检查通过、时间还有富余再做：给网页加一屏「考前七天倒计时」，练习局部增屏而不是整页重生成。

1. 复制下面的提示词发送：

   请保持 review-guide.html 前 11 屏内容与顺序不变，做两处修改：
   在行动清单屏后新增一屏「考前七天倒计时」；
   用七天的每日一个小任务排版，不虚构具体日期；
   原结尾屏顺延为第 13 屏，文字保持不变；
   样式沿用原版，仍保存为单文件 review-guide.html。

2. 执行后你会看到：网页从 12 屏变 13 屏，新增屏有七天任务，其余各屏文字与改前逐字一致。时间不够直接进入案例3。

问题与注意事项

• 屏数少不等于内容少：每个要点屏都要有具体做法，空话屏宁可并掉。
• 案例2和案例1的提示词只差文件名和屏数：让学生自己对比两条提示词，确认「换主题，方法不变」。

案例3：面试经验互评改版

任务目标：

第三个案例完整走「生成 → 同桌互评 → 按反馈改版」：先做出面试经验网页，再用互评三问交换反馈，改出 v2 版本。案例3的面试大纲已内嵌，互评记录模板课前已放进本课目录。

实操步骤

1. 粘贴面试大纲，生成网页（6分钟）

1. 新建一个对话，工作目录仍选 D:\AIGC\lesson-19。

2. 面试大纲已完整写进下面的提示词，整段复制发送：

   请按下面的分屏大纲，为 13 屏网页先生成分屏表：
   每屏一句屏标题和不超过 60 字的正文，先列出来我确认。
   输入素材：
   主题：社团面试通关经验。读者：想进社团但不敢面试的大一新生。
   痛点：站上讲台脑子空白、说话发抖，准备好的话一句没说出来。
   要点1：提前把一分钟自我介绍写成稿，练到脱稿。
   要点2：开场先报姓名班级和一句我来做什么。
   要点3：说话放慢三分之一，紧张时停一秒再接。
   要点4：眼神看面试官眉心，不看地面也不死盯眼睛。
   要点5：提前查社团的活动记录，说得出它去年办过什么。
   要点6：被问缺点，讲一个真实的小缺点加一个改进动作。
   要点7：没听懂问题就复述一遍请对方确认。
   要点8：结尾主动说希望能参加面试后的活动。
   要点9：面试完当天发一条感谢消息，一句就够。
   行动清单：写自我介绍稿、查社团活动、对着镜子练三遍。
   输入素材结束。

   执行后你会看到：13 行分屏表返回。

3. 确认分屏表后，发送执行提示词：

   分屏表确认，请按它生成单文件网页 interview.html：
   13 个 section，每个占满一屏，滚动翻页；
   风格简洁、字号大，样式全部写在这一个文件里。

   执行后你会看到：本课目录出现 interview.html，13 屏可滚动。

2. 互评三问（3分钟）

1. 与同桌交换网页，按三问给反馈：第一眼看懂要讲什么吗？哪一屏信息最多？滚到底知道第一步做什么吗？
2. 把收到的反馈写进 互评记录.txt，每人至少一条具体到屏的修改建议。执行后你会看到：互评记录里有了明确到「第几屏、改成什么」的反馈。

3. 按反馈改出 v2（4分钟）

1. 让 AI 把反馈整理成修改清单，再按清单修改，另存新版本不覆盖原文件：

   请把「互评记录.txt」里收到的反馈整理成修改清单：每条对应哪一屏、改成什么。
   确认后按清单修改 interview.html 对应屏幕，未涉及的屏幕保持原样。
   另存为「interview_v2.html」，不覆盖原文件。

   执行后你会看到：v2 版本解决了反馈提到的问题，v1 与 v2 同时保留，滚动对照能看出改了哪里。

   查什么	合格的样子
   反馈具体	互评记录含至少一条可执行、指明屏号的修改建议
   改版生效	v2 版本对应屏幕已按清单更新
   版本可溯	v1 与 v2 同时保留，对照能看出改了哪里

扩展练习（选做）

v2 改版完成、互评签字后还有时间再做：给 interview_v2.html 补一版手机适配，练习「同一内容换设备检查」。

1. 复制下面的提示词发送：

   请检查 interview_v2.html 在手机竖屏下的显示：
   每屏文字在窄屏不溢出、不横向滚动；
   字号和行距按手机阅读放大调整；
   13 屏的文字、顺序保持不变，只改样式；
   仍保存为单文件 interview_v2.html。

2. 执行后你会看到：把浏览器窗口缩窄到手机宽度，13 屏依然每屏满屏、文字不溢出。时间不够直接进入案例4。

问题与注意事项

• 反馈全是「挺好的」：请对方至少回答三问中的一问，指出一屏最想跳过的。
• 改版后风格跑偏：提醒 AI 保持 v1 的配色与字体，只改指出的内容。

案例4：实习避坑两道检查

任务目标：

第四个案例完整走「生成 → 隐私检查 → 文字检查 → 修正闭环」：做出实习避坑网页，用两道检查守住发布底线，并填好检查记录。案例4的避坑大纲已内嵌，检查记录模板课前已放进本课目录。

实操步骤

1. 粘贴避坑大纲，生成网页（5分钟）

1. 新建一个对话，工作目录仍选 D:\AIGC\lesson-19。

2. 避坑大纲已完整写进下面的提示词，整段复制发送：

   请按下面的分屏大纲，为 14 屏网页先生成分屏表：
   每屏一句屏标题和不超过 60 字的正文，先列出来我确认。
   输入素材：
   主题：实习避坑经验。读者：半年后进公司实习的大三学生。
   痛点：新人不敢问、不敢拒、不敢留证据，最后吃哑巴亏。
   要点1：入职当天确认试用期时长和工资构成，白纸黑字。
   要点2：口头承诺不算数，重要约定留一条聊天记录。
   要点3：加班要有审批记录。
   要点4：交接文件走邮件或办公系统，不靠私聊。
   要点5：涉及本人信息的材料只交必要项，复印件注明用途。
   要点6：不在朋友圈吐槽公司，不在工位聊同事八卦。
   要点7：离职通知按劳动合同约定的程序办理。
   要点8：工资条每月核对一次，少一分都要问。
   要点9：每周五核对任务清单，范围外的事先确认再做。
   要点10：拿不准的事先问带教老师，再查员工手册。
   行动清单：核合同、留记录、建工作日志。
   输入素材结束。

   执行后你会看到：14 行分屏表返回。

3. 确认分屏表后，发送执行提示词：

   分屏表确认，请按它生成单文件网页 internship.html：
   14 个 section，每个占满一屏，滚动翻页；
   风格简洁、字号大，样式全部写在这一个文件里。

   执行后你会看到：本课目录出现 internship.html，14 屏可滚动。

2. 两道检查并填记录（5分钟）

1. 隐私检查：逐屏确认无真名、学号、宿舍号、单位内部信息；再让 AI 辅助扫一遍：

   请读取「发布检查记录.txt」的格式要求，对照「internship.html」逐屏列出：
   是否出现个人信息、是否有绝对化用语。
   读不准的屏幕标注「待人工确认」，最终以我肉眼核对为准。

2. 文字检查：错字与绝对化用语（最好、第一、100%）各逐屏查一遍，把两道检查结果填进 发布检查记录.txt。执行后你会看到：检查记录逐屏打勾，AI 辅助结果只作对照，结论以自己肉眼为准。

3. 修正闭环（3分钟）

1. 检查发现的问题当场让 AI 修正并重新保存，修正后把改过的屏再检查一遍，检查记录同步更新。执行后你会看到：发现问题全部闭环，检查记录与最终网页对应。

   查什么	合格的样子
   隐私干净	全网页无真名、学号、宿舍号、单位内部信息
   文字合格	无错字，无「最好／第一」类绝对化用语
   记录闭环	检查记录已填，发现的问题已修正并复查

扩展练习（选做）

两道检查闭环、时间还有富余再做：给 internship.html 的要点屏加编号徽章和滚动进入动画，为下节课的视频镜头感做预演。

1. 复制下面的提示词发送：

   请保持 internship.html 的 14 屏文字与顺序完全不变，只改样式：
   十个要点屏左上角加统一的数字徽章；
   每屏滚动进入视口时淡入上移一次，动画要克制、不循环播放；
   仍保存为单文件 internship.html，不引入外部资源。

2. 执行后你会看到：刷新网页后滚动时每屏轻淡入一次，要点屏带编号徽章，文字与改前逐字一致。时间不够直接进入课后巩固。

问题与注意事项

• 隐私问题零容忍：涉及实习单位的内容一律用自己重述的文字，不存侥幸。
• AI 说「没有问题」不算数：读图读文都可能漏，两道检查必须自己逐屏过。

扩展任务：为自己的经验做网页（选做）

任务目标：

把本课流程用到你的真实经验上：老师先带全班用「实习第一周沟通指南」完整走一遍，你再换成自己的经验改写同一条提示词。选做不计入必做时间；做完保留，下节课可以挑它转成视频。

实操步骤

1. 先复制下面的提示词，给「实习第一周沟通指南」生成分屏表：

   请按下面的分屏大纲，为 13 屏网页先出分屏表：
   每屏一句屏标题和不超过 60 字的正文，先列出来我确认。
   输入素材：
   主题：实习第一周沟通指南。读者：即将开始第一份实习的大三学生。
   痛点：第一周不敢开口，任务接了没懂，进度也不敢报。
   要点1：报到当天认识带教老师和直系小组，记下称呼。
   要点2：接任务当场复述，确认交付时间和验收标准。
   要点3：不懂的先集中记下来，攒够三个再挑整块时间问。
   要点4：每天下班前发三行进度：做了什么、卡在哪、明天做什么。
   要点5：需要延期时提前一天说，并给出新的交付时间。
   要点6：会议先听再记，散会后按要点复述给带教老师确认。
   要点7：同事帮忙后当天说一句具体感谢。
   要点8：周五主动约带教老师十分钟，问下周要注意什么。
   行动清单：记称呼、复述任务、发三行进度。
   输入素材结束。

   执行后你会看到：13 行分屏表返回。

2. 确认分屏表后，发送「分屏表确认，请生成单文件网页 my-page.html：13 个 section 满屏滚动，样式写进同一个文件」。执行后你会看到：本课目录出现 my-page.html。

3. 按案例1的验收表逐屏检查，再做一遍隐私与文字两道检查；不通过就让 AI 修正。执行后你会得到：一个检查通过的网页，可直接用于下节课的视频素材。

4. 想做自己的经验，就把提示词里「输入素材」到「输入素材结束」之间换成你自己的真实经验（高数复习法、社团面试经验都行），再从第 1 步走一遍。

五、总结与巩固

把四个网页投屏，全班用三问快评：看懂了吗、哪屏想跳、第一步是什么。

回想四个案例：主题换了四次、屏数压了三档、后两个还加了互评和检查，流程始终是同一条——给出大纲 → 分屏规划 → 人工核对 → 生成网页 → 逐屏检查。下次换你自己的经验，还是这五步。

说一说：你的网页滚到最后，想让读者记住哪一句？

保留四个网页与互评、检查记录；下一课把网页逐屏转成视频，再学两个视频生成技能。

六、资料与下载

• 课前准备：软件、工作目录、下载位置和自查。
• 课程资料：课件与习题包；四份分屏大纲已内嵌讲义提示词，只需下载互评与检查记录模板。

延伸视频

推荐观看：HTML 与 CSS 快速上手，理解本课网页即一串屏背后的页面结构。