讲师版案例：班级活动报名页
这个案例为什么值得重点讲
它特别适合让学生体验“我做的网页是能拿去用的”，而不只是一个练习页面。
这个案例的亮点是：
- 视觉上像真实海报，展示效果强
- 结构简单，但成果很完整
- 学生会天然想把它改成自己班级的活动
- 传统方式下，零基础学生很难在短时间里把海报感和表单交互同时做好
适用课程
- 青少年启蒙营
- 重点适用于第 4、7、8 课
AI 风格 PPT 文件
原始素材附件
你要带着学生完成什么
- 做出一页像真实校园活动海报的报名页
- 页面包含活动介绍、亮点、时间地点和报名表单
- 提交后能给出友好反馈
- 学生能讲清楚：这页网站服务了什么活动
建议演示页节奏
| 页次 | 时间 | 目标 |
|---|---|---|
| 第 1 页 | 5 分钟 | 先展示成品页面，制造“这真的能用”感 |
| 第 2 页 | 8 分钟 | 拆出海报区、信息区、报名区 |
| 第 3 页 | 10 分钟 | 用 Codex 生成活动海报感页面 |
| 第 4 页 | 12 分钟 | 增加表单与成功反馈 |
| 第 5 页 | 10 分钟 | 根据不同班级主题做个性化改造 |
| 第 6 页 | 10 分钟 | 训练学生讲清页面价值 |
逐页演示脚本
第 1 页：先投屏成品
讲师动作：
- 直接打开一个完整活动报名页
- 展示主视觉、活动亮点和报名区域
讲师可说：
今天我们要做的不是一个“练习网页”，而是一个如果学校真的办活动，就能拿去展示的页面。
第 2 页：讲清楚页面结构
讲师动作：
- 在白板上画出三块：
海报主视觉 / 活动信息 / 报名表单 - 让学生意识到这个项目其实不复杂，只是“看起来像真的”
第 3 页：先做海报感
第一轮提示词：
text
请帮我做一个“班级活动报名页”网页。
要求：
- 顶部像真实活动海报
- 有活动标题、时间地点、亮点说明
- 风格青春、明亮、适合中学校园
- 页面手机和电脑都能看
- 先生成没有表单的展示版第 4 页：补报名交互
第二轮提示词：
text
请继续升级这个报名页：
- 增加报名表单：姓名、班级、联系方式、想参加的岗位
- 点击提交后显示报名成功卡片
- 表单区和海报区风格统一
- 输入为空时给出提示讲师动作：
- 让学生看见静态展示页如何升级成“能用”的页面
第 5 页：做成“我们班的版本”
第三轮提示词：
text
请把页面改成“校园科技节志愿者报名页”版本：
- 主色调更有科技感
- 亮点改成机器人体验、创客作品展示、编程闯关
- 岗位改成讲解员、拍摄员、秩序维护员
- 页面更适合投屏展示第 6 页：路演表达
让学生回答：
- 这个报名页想吸引谁？
- 哪一部分最能打动别人？
- 如果学校真的要用，你还会补什么？
常见卡点
- 页面好看但信息不完整
- 表单做出来了，但提交流程不清楚
- 学生会沉迷换背景图，忽视活动亮点表达
讲师提醒
- 这节课很适合做小组 PK，让不同组做不同活动主题
- 优先让学生做出“像真的”的完整页面，再谈更复杂交互