694 lines
35 KiB
Markdown
694 lines
35 KiB
Markdown
---
|
||
课时: 5
|
||
主题: 我的个人主页（下）
|
||
核心能力: [审美力, 表达力]
|
||
核心工具: [Trae IDE]
|
||
时长: 90分钟
|
||
透明化层级: 结果层
|
||
适用路线: AICODE-06（有扣子/低代码经验的学生）
|
||
---
|
||
|
||
### 1. 课程目标
|
||
|
||
**知识目标：**
|
||
- 理解"交互元素"的概念：页面不只是看的，还可以有动态效果和用户操作
|
||
- 理解"设计一致性"的概念：整个页面的配色、字体、间距要统一协调
|
||
- 理解"发布"的含义：作品从"自己电脑上看"变成"别人也能看"
|
||
|
||
**能力目标：**
|
||
- 能根据同学建议有针对性地优化页面（审美力）
|
||
- 能用自然语言描述想要的交互效果并让 AI 实现（共创力）
|
||
- 能用 3 分钟向全班展示并介绍自己的个人主页（表达力）
|
||
|
||
**情感目标：**
|
||
- 体验从"半成品"到"完整作品"的蜕变带来的成就感
|
||
- 建立"作品要经得起别人看"的产品意识
|
||
- 感受"我的作品即将发布到真实网站"的兴奋与自豪
|
||
|
||
---
|
||
|
||
### 2. 核心概念与误概念预设
|
||
|
||
**核心概念认知层级：**
|
||
|
||
| 概念 | 学生类比 | 认知层级 |
|
||
|------|---------|---------|
|
||
| 交互效果 = 页面能"动"能"响应" | 像游乐场——不是只能看的风景画，而是能坐的旋转木马 | 理解层 |
|
||
| 设计一致性 = 统一风格 | 像穿衣搭配——上衣、裤子、鞋子要搭配，不能运动衫配西裤 | 应用层 |
|
||
| 同伴反馈 = 最好的改进来源 | 自己觉得好看不算，要别人也觉得好才是真的好 | 理解层 |
|
||
| 路演 = 作品展示 + 设计思路讲解 | 像参加画展——不只是挂一幅画，还要跟观众讲你为什么这么画 | 应用层 |
|
||
| 发布 = 从"自己看"到"全世界看" | 像把日记变成公开发表的文章——内容要经得起别人看 | 迁移层 |
|
||
|
||
**典型误概念表：**
|
||
|
||
| 编号 | 误概念 | 正确认知 | 激发策略 |
|
||
|------|--------|---------|---------|
|
||
| M1 | "加特效越多越好，越炫越好" | 好的设计是克制的，3个精致的效果胜过10个花哨的 | 展示两个页面对比：一个特效堆满但杂乱，一个精致克制但高级 |
|
||
| M2 | "同学的建议不靠谱，还是自己的好" | 用户（读者）的感受比设计者的想法更重要 | 让学生用别人的电脑看自己的页面，发现"我觉得好看"和"别人觉得好看"的差距 |
|
||
| M3 | "交互效果很难，我做不了" | 用自然语言告诉 AI 就行，跟之前改样式一样简单 | 教师现场用一句话让 AI 加出 hover 效果，打消畏难情绪 |
|
||
| M4 | "发布前不用检查，能打开就行" | 发布前要完整检查：文字有没有错、图片有没有加载、手机上能不能看 | 展示一个"能打开但有明显错误"的反面案例（假文字、空白区域） |
|
||
| M5 | "路演就是把页面打开给大家看" | 路演要讲设计思路：为什么选这个主题？为什么这样设计？有什么巧思？ | 对比两段路演：一个只展示、一个讲思路，让学生投票哪个更好 |
|
||
|
||
---
|
||
|
||
### 3. 教学准备
|
||
|
||
**工具与环境：**
|
||
- 每台电脑已预装 Trae IDE，已登录校区账号
|
||
- 网络环境正常
|
||
- 学生上节课的个人主页项目文件夹仍在桌面
|
||
- 学生上节课创建的"个人主页设计师"自定义智能体仍可用
|
||
|
||
**教学资源：**
|
||
- 教师准备：1个"半成品→完成版"的 before/after 对比页面（课前用自己的个人主页做好两个版本）
|
||
- 教师准备：上节课学生互评时收集到的建议纸条/照片（备用，防止学生忘带）
|
||
- 教师准备：发布前检查清单（投屏用，打印几份备用）
|
||
- 教师准备：2-3 段验证过的交互效果代码片段（hover、轮播、滚动动画各一段，作为保底方案）
|
||
- 教师准备：路演计时器（手机倒计时或投屏计时器，3分钟）
|
||
- 学生资源：上节课的个人主页 HTML 文件 + 收到的同学建议
|
||
|
||
**教师备课体验任务：**
|
||
> 备课前，教师必须亲自完成以下操作：
|
||
>
|
||
> 1. 用自然语言分别实现 hover、滚动渐入、Tab 切换三种交互效果，记录成功率并准备保底代码片段
|
||
> 2. 做一个"半成品 vs 完成品"的 before/after 对比页面，和一个"特效堆满但杂乱"的反面教材
|
||
> 3. 练习一遍 3 分钟路演，掐好时间
|
||
> 4. 确认校区每台电脑能正常打开上节课的学生项目文件
|
||
|
||
---
|
||
|
||
### 4. 教学流程
|
||
|
||
---
|
||
|
||
**第一幕：联系 (Connect) — 10分钟** 🔗
|
||
|
||
*本幕目标：回顾上节课的成果，用 before/after 对比激发"从还行到惊艳"的升级欲望，明确今天的最终目标*
|
||
|
||
**【环节】上节课回顾 (4分钟)**
|
||
|
||
**师：** 上节课我们做了一件很重要的事——每个人都有了自己的个人主页。谁来说说，上节课你的页面上有哪些板块？
|
||
|
||
**生：** （预期：自我介绍、兴趣爱好、喜欢的东西、梦想……）
|
||
|
||
**师：** 很好。上节课我们做了三件事：第一，用内容清单把你想放的信息都整理出来了。第二，用你自己创建的"个人主页设计师"智能体生成了第一版页面。第三，你们互相看了对方的页面，每个人都收到了同学的建议。
|
||
|
||
**师：** 现在，把你上节课收到的同学建议拿出来。纸条也好、笔记也好——找到了吗？
|
||
|
||
（等待学生翻找。如果有人忘带，教师可以说"没关系，一会儿我们有办法"）
|
||
|
||
**【环节】情景导入 (6分钟)**
|
||
|
||
**师：** 在看你的建议之前，先看一个东西。
|
||
|
||
（教师投屏，左右分屏展示同一个个人主页的两个版本）
|
||
|
||
**师：** 左边，是上节课结束时的样子。右边，是经过今天这样的优化之后的样子。大家看看区别在哪里？
|
||
|
||
（逐一指出差异）
|
||
|
||
- 左边：鼠标放上去没反应 → 右边：鼠标悬停时照片放大、按钮变色
|
||
- 左边：内容一股脑全显示 → 右边：往下滚的时候内容一段段渐入
|
||
- 左边：有一段自我介绍还是 AI 编的假内容 → 右边：全部替换成了真实信息
|
||
- 左边：配色有点杂 → 右边：统一了色调，整体更协调
|
||
|
||
**师：** 右边的页面，哪里让你觉得"这个更专业"？【诊断点：探测学生对"完成品质量"的直觉判断】【理解层】
|
||
|
||
**【分支A】若学生说"鼠标放上去会动"或"有动画"：**
|
||
**师：** 你注意到了交互效果！页面不是一张静态的海报——它能"动"、能"回应"你的操作。今天我们就学怎么加这种效果。
|
||
|
||
**【分支B】若学生说"配色更好看"或"更整齐"：**
|
||
**师：** 你看出了设计一致性！就像穿衣服要搭配一样，页面的颜色、字体、间距也要搭配。今天有一个环节专门帮你检查这个。
|
||
|
||
**【分支C】若学生说不上来具体区别：**
|
||
**师：** 没关系，我帮你总结——右边比左边多了三样东西：**会动的效果**、**统一的风格**、**真实的内容**。今天我们就要把你的页面也升级到这个水平。
|
||
|
||
**师：** 今天的目标很明确：你的个人主页要**从半成品变成完成品**——一个你愿意让全校同学、让你爸妈、让全世界看到的作品。而且——你们的作品最终会发布到我们公司的网站上，真的有人会看到！
|
||
|
||
**师：** 继续用你上节课创建的"个人主页设计师"智能体。打开 Trae，打开你的项目，切到 Solo Coder，我们开始！
|
||
|
||
---
|
||
|
||
**第二幕：建构 (Construct) — 60分钟** 🛠️
|
||
|
||
---
|
||
|
||
**【分段一：响应同学建议】(15分钟)**
|
||
|
||
*本段重点：根据真实的用户反馈有针对性地改进作品，建立"用户视角"意识*
|
||
|
||
**预设误概念：**
|
||
- M2: 同学的建议不靠谱，还是自己的好
|
||
- M4: 发布前不用检查，能打开就行
|
||
|
||
**讲解与演示 (5分钟):**
|
||
|
||
**师：** 你们手上有上节课收到的同学建议。现在我问你们一个问题——你觉得同学的建议有用吗？【诊断点：检测学生是否重视同伴反馈】【理解层】
|
||
|
||
**【分支A】若学生说"有用，他说的确实是个问题"：**
|
||
**师：** 很好！你已经有产品思维了。自己觉得好不算好，**别人觉得好才是真的好**。因为你的页面不是做给自己看的——是做给别人看的。
|
||
|
||
**【分支B】若学生说"我觉得我的已经很好了，不用改"：**
|
||
**师：** 我理解。但你想一个场景——你写了一篇作文，自己读觉得很棒。但老师帮你看了之后，指出了三个你没注意到的问题。是你眼瞎了吗？不是——是因为**写的人和看的人视角不一样**。同学的建议就是"读者视角"。
|
||
|
||
**【分支C】若学生建议纸条找不到了：**
|
||
**师：** 没关系。你现在请旁边的同学看看你的页面，给你说一个优点和一个可以改进的地方。30秒搞定。
|
||
|
||
**师：** 我来演示怎么把建议变成修改。假设我收到的建议是"你的自我介绍太长了，看不完"。
|
||
|
||
（教师打开自己的个人主页项目，在 Solo Coder 中使用"个人主页设计师"智能体）
|
||
|
||
**师：** 我在 Solo Coder 里这样说：
|
||
|
||
```
|
||
同学反馈说自我介绍太长了。请把自我介绍板块改成折叠式：
|
||
默认只显示前两句话，下面有一个"展开阅读更多"的按钮，
|
||
点击后展开显示全部内容。
|
||
```
|
||
|
||
（等待 AI 生成，Accept，预览效果）
|
||
|
||
**师：** 看！建议变成了一个具体的改进。注意我做了什么——我不是简单地说"把自我介绍改短"，而是想了一个**具体的解决方案**："用折叠来解决太长的问题"。这就是把模糊的反馈变成明确的修改需求。
|
||
|
||
**师：** 现在看你的建议纸条，选 1-2 条你觉得有道理的。然后想想：**怎么改能解决这个问题？** 想好了就告诉你的智能体。
|
||
|
||
**学生实践 (8分钟):**
|
||
|
||
学生操作步骤：
|
||
1. 看同学建议，选 1-2 条要改的
|
||
2. 想出具体的解决方案
|
||
3. 用 Solo Coder + 智能体描述修改
|
||
4. Accept → 预览 → 确认效果
|
||
5. 改完一条再改下一条
|
||
|
||
**师：** 8分钟。记住——**改完一条验证一条**，不要一口气说五条修改。开始！
|
||
|
||
（教师走动观察）
|
||
|
||
（教师走动重点关注：）
|
||
- 谁在认真参考建议？谁跳过了建议直接自己改？
|
||
- 修改描述是否具体？"改好看点" vs "把标题颜色从红色改成深蓝色"
|
||
- 是否改完一条就验证效果？
|
||
- 有没有学生建议纸条丢了又不好意思问同学？主动引导
|
||
|
||
**快学生应对：** 两条建议都改完了？看看还有没有其他建议可以采纳。或者自己再审视一遍页面，找一个你不满意的地方改掉。
|
||
|
||
**慢学生应对：** 如果学生不知道怎么把建议变成修改需求，教师帮他翻译一条："同学说你的颜色太花了——你可以跟 AI 说'请把整个页面的配色统一成蓝白色调'"。
|
||
|
||
**进度同步 (2分钟):**
|
||
|
||
**师：** 根据同学建议成功修改了至少一处的举手！
|
||
|
||
**师：** 有没有人改完之后觉得"同学说得确实有道理"的？【诊断点：检测学生是否通过实践认识到同伴反馈的价值】【理解层】
|
||
|
||
**【分支A】若学生说"确实，改完好多了"：**
|
||
**师：** 对吧？别人的眼睛就是你的镜子。以后做任何作品，都找人帮你看看再发布。这叫**用户测试**——专业的产品团队每天都在做这件事。
|
||
|
||
**【分支B】若学生说"我觉得改之前也挺好的"：**
|
||
**师：** 那也没关系。有些建议你可以采纳，有些可以保留自己的想法。重要的是你**认真考虑过**了，不是没想就拒绝。
|
||
|
||
---
|
||
|
||
**【分段二：交互升级】(20分钟)**
|
||
|
||
*本段重点：学会用自然语言为页面添加交互效果，这是本课最核心的新技能*
|
||
|
||
**预设误概念：**
|
||
- M1: 加特效越多越好，越炫越好
|
||
- M3: 交互效果很难，我做不了
|
||
|
||
**讲解与演示 (7分钟):**
|
||
|
||
**师：** 现在进入今天的重头戏——**交互效果**。
|
||
|
||
**师：** 什么是交互效果？简单说就是——你的页面不只是一张"海报"，它能"动"、能"回应"你的操作。就像游乐场和风景画的区别——风景画你只能看，游乐场你可以坐旋转木马、滑滑梯、碰碰车。
|
||
|
||
**师：** 我来演示几种适合个人主页的交互效果，你看看哪个你喜欢。
|
||
|
||
**效果一：hover 悬停**
|
||
|
||
**师：** 第一种——hover 悬停。就是鼠标放到某个东西上面的时候，它会有变化。
|
||
|
||
（教师在 Solo Coder 中输入）
|
||
|
||
```
|
||
给页面上所有的兴趣爱好卡片加一个 hover 悬停效果：
|
||
鼠标放上去的时候，卡片轻微放大到 1.05 倍，同时加一个淡淡的阴影，
|
||
移开后恢复原样。过渡动画要平滑，大概 0.3 秒。
|
||
```
|
||
|
||
（Accept → 预览 → 鼠标悬停演示）
|
||
|
||
**师：** 看！鼠标放上去——卡片稍微放大了、出现了阴影。移开——恢复。就这一句话，AI 就做出来了。
|
||
|
||
**效果二：滚动渐入**
|
||
|
||
**师：** 第二种——滚动渐入。就是你往下滚页面的时候，内容不是一下子全显示，而是一段段"淡入"出现。
|
||
|
||
```
|
||
给页面加一个滚动渐入效果：
|
||
每个板块在用户滚动到它的位置时，从下方淡入出现。
|
||
还没滚到的板块先隐藏，滚到的时候用 0.6 秒的动画从下往上滑入并淡入。
|
||
```
|
||
|
||
（Accept → 预览 → 滚动演示）
|
||
|
||
**师：** 看！我往下滚——内容一段段出来，是不是比一股脑全显示更有节奏感？
|
||
|
||
**效果三：Tab 标签切换**
|
||
|
||
**师：** 第三种——Tab 标签切换。如果你的页面内容很多，可以分类放在不同的标签页里。
|
||
|
||
```
|
||
把"我的兴趣爱好"板块改成 Tab 标签切换的形式：
|
||
上面有三个标签按钮："运动"、"音乐"、"阅读"，
|
||
点不同的标签显示对应类别的内容。
|
||
当前选中的标签有高亮效果，切换时有淡入过渡动画。
|
||
```
|
||
|
||
（Accept → 预览 → 点击切换演示）
|
||
|
||
**师：** 三种效果，我每种只用了**一句自然语言**就让 AI 做出来了。跟之前改颜色、改文字是一样的流程——**说人话就能做**。
|
||
|
||
**师：** 但是！注意一个重要原则——【诊断点：主动暴露 M1 误概念】
|
||
|
||
**师：** 你觉得这三种效果，我应该全部都加到页面上吗？【识别层】
|
||
|
||
**【分支A】若学生说"全加上更酷"：**
|
||
**师：** 我来给你看一个"全加上"的反面教材。（打开一个特效堆满的页面——到处在闪、到处在动、眼花缭乱）这个好看吗？
|
||
|
||
**生：** （预期：太花了/看不清/眼睛累）
|
||
|
||
**师：** 对！好的设计是**克制的**。就像穿衣服——你不会把衣柜里最亮的10件全穿上吧？选 1-2 个最适合你页面的效果就够了。**3 个精致的效果胜过 10 个花哨的。**
|
||
|
||
**【分支B】若学生说"选适合的就行"：**
|
||
**师：** 你已经有设计师思维了！没错，选 1-2 个**最适合你内容**的效果。不是越多越好，而是越合适越好。
|
||
|
||
**师：** 现在你来选。你觉得你的个人主页最适合哪种交互效果？选 1-2 个就好。
|
||
|
||
**学生实践 (10分钟):**
|
||
|
||
学生操作步骤：
|
||
1. 从 hover 悬停、滚动渐入、Tab 标签切换中选 1-2 个
|
||
2. 参考教师演示的提示词，根据自己页面的情况修改
|
||
3. 用 Solo Coder + 智能体实现
|
||
4. Accept → 预览 → 验证效果
|
||
|
||
**师：** 10分钟。选 1-2 个效果，不要贪多。做完一个验证一个。如果效果不对，跟 AI 说"刚才加的交互效果有问题，XX不正常，请修复"。开始！
|
||
|
||
（教师走动观察）
|
||
|
||
（教师走动重点关注：）
|
||
- 学生选了几个效果？超过 2 个的要提醒"先做好这两个再说"
|
||
- 交互效果是否正常工作？hover 不生效？滚动动画卡顿？
|
||
- 有没有学生加了效果后页面布局乱了？引导描述问题让 AI 修复
|
||
- 谁还在犹豫不知道选哪个？建议从 hover 悬停开始——最简单、成功率最高
|
||
|
||
**快学生应对：** 两个效果都做好了？试试加一个更有创意的——比如"点击我的头像，弹出一段自我介绍动画"。
|
||
|
||
**慢学生应对：** 如果学生的智能体加交互效果失败了，让学生直接在 Solo Coder 里说（不通过智能体）："给页面上的卡片加一个鼠标悬停放大效果，放上去放大到1.05倍，加阴影，0.3秒过渡"。如果还是失败，教师给出保底代码片段让 AI 整合。
|
||
|
||
**进度同步 (3分钟):**
|
||
|
||
**师：** 成功给页面加了交互效果的举手！加了一个的？两个的？
|
||
|
||
**师：** 谁来演示一下你加了什么效果？
|
||
|
||
（选 1-2 个学生投屏快速演示，每人 30 秒）
|
||
|
||
**师：** 你们发现了吗？加了交互效果之后，页面的"高级感"一下子就上来了。这就是交互的魔力——页面从一张"图片"变成了一个"产品"。【诊断点：检测学生是否理解交互效果对产品品质的提升】【理解层】
|
||
|
||
**【分支A】若有学生加了太多效果导致页面卡或乱：**
|
||
**师：** 看，这位同学的页面加了好多效果——但看起来怎么样？有点乱对吧？这就是我刚才说的——**克制**。现在跟 AI 说"请去掉XX效果，只保留XX效果"，简化一下。
|
||
|
||
**【分支B】若有学生效果做得很精致：**
|
||
**师：** 大家看——这位同学只加了一个 hover 效果，但做得很精致，跟页面风格完全统一。**少而精，胜过多而杂。**
|
||
|
||
---
|
||
|
||
**【分段三：最终打磨】(12分钟)**
|
||
|
||
*本段重点：用检查清单进行系统性最终审查，建立"发布前必检查"的产品意识*
|
||
|
||
**预设误概念：**
|
||
- M4: 发布前不用检查，能打开就行
|
||
- M1: 加特效越多越好（残留）
|
||
|
||
**讲解与演示 (3分钟):**
|
||
|
||
**师：** 现在你的页面有内容、有交互了。但我问你——它能发布了吗？
|
||
|
||
**师：** 我给你看一个"能打开但不能发布"的例子。
|
||
|
||
（教师投屏一个有明显问题的页面）
|
||
|
||
**师：** 看这个页面——它能打开吗？
|
||
|
||
**生：** （预期：能）
|
||
|
||
**师：** 能打开。但你仔细看——
|
||
|
||
（逐一指出问题）
|
||
|
||
- 这里写着"在此输入你的姓名"——还是 AI 生成时的占位文字，没换成真名
|
||
- 这个板块是空的——"我的作品展示"下面什么都没有
|
||
- 标题用了蓝色，按钮用了绿色，卡片用了红色——三种颜色打架
|
||
- 这个 emoji 在这台电脑上显示不出来，变成了一个方框
|
||
|
||
**师：** 如果这个页面直接发布出去，别人看到会怎么想？
|
||
|
||
**生：** （预期：不认真/没做完/很业余）
|
||
|
||
**师：** 对。"能打开"和"能发布"是两回事。就像交作业——你不会把草稿纸交上去吧？发布之前，要做一次**完整检查**。
|
||
|
||
（教师投屏发布前检查清单）
|
||
|
||
```
|
||
📋 发布前检查清单：
|
||
|
||
1. ✅ 所有文字都是真实的我的信息（没有 AI 编的假内容、没有占位文字）
|
||
2. ✅ 图片/emoji 都能正常显示（没有方框、没有裂图）
|
||
3. ✅ 每个板块都有内容（没有空白区域）
|
||
4. ✅ 配色看着舒服、统一（不刺眼、不打架）
|
||
5. ✅ 交互效果正常工作（hover 有反应、动画能播放）
|
||
6. ✅ 从头到尾浏览一遍，没有明显问题
|
||
```
|
||
|
||
**师：** 这六条，一条条检查。发现问题就修。
|
||
|
||
**学生实践 (7分钟):**
|
||
|
||
**师：** 现在对照清单，逐条检查你的页面。发现问题就用 Solo Coder 修。
|
||
|
||
（教师投屏保持检查清单）
|
||
|
||
**师：** 9分钟。按清单一条条过。特别注意第一条——翻遍你的页面，有没有还是 AI 编的假信息？比如"热爱学习，成绩优异"——这是你自己写的还是 AI 瞎编的？如果是瞎编的，现在改成真实的。开始！
|
||
|
||
（教师走动观察）
|
||
|
||
（教师走动重点关注：）
|
||
- 有没有学生页面上还有明显的 AI 占位文字？提醒他换成真实内容
|
||
- 配色是否统一？如果一个页面用了五六种颜色，建议说"请把整个页面的配色统一成XX色调"
|
||
- 交互效果是否正常？hover 没反应的、动画卡住的，帮学生排查
|
||
- 有没有空白板块？"我的作品展示"下面什么都没有的，要么填内容要么删板块
|
||
|
||
**快学生应对：** 六条都过了？帮旁边同学检查一遍——你帮他看，往往能发现他自己看不到的问题。
|
||
|
||
**慢学生应对：** 如果问题太多改不完，优先改第1条（假内容）和第3条（空白区域）。配色不统一可以用一句话修："请把整个页面的配色统一成蓝白色调，保持简洁。"
|
||
|
||
**进度同步 (2分钟):**
|
||
|
||
**师：** 六条清单全过的举手？过了四条以上的？
|
||
|
||
**师：** 检查的时候有没有发现"天哪原来这里还有问题"的？【诊断点：检测学生是否建立了"发布前检查"的意识】【应用层】
|
||
|
||
**【分支A】若学生说"发现了好几个没注意到的问题"：**
|
||
**师：** 这就是检查清单的价值！你以为做完了，其实还有很多细节。专业的产品经理发布前要过几十条检查项呢。我们六条已经是简化版了。
|
||
|
||
**【分支B】若学生说"我的没什么问题"：**
|
||
**师：** 很好！说明你上节课就做得很仔细。但养成习惯——每次发布前都过一遍清单，哪怕你觉得没问题。因为有些问题你看习惯了就注意不到了。
|
||
|
||
---
|
||
|
||
**【分段四：路演准备与练习】(13分钟)**
|
||
|
||
*本段重点：学会结构化表达自己的作品和设计思路，为第三幕路演做准备*
|
||
|
||
**预设误概念：**
|
||
- M5: 路演就是把页面打开给大家看
|
||
|
||
**讲解与演示 (5分钟):**
|
||
|
||
**师：** 页面做好了、检查过了。最后一步——你要**把它讲给别人听**。
|
||
|
||
**师：** 这就像你参加画展。你不会只把画挂在墙上就走了吧？你得站在画旁边，跟观众说：我为什么画这幅画？我想表达什么？哪里是我最得意的地方？
|
||
|
||
**师：** 这叫**路演**。不是"展示"——展示是给你看。路演是给你看，还要**讲给你听**。
|
||
|
||
**师：** 路演 3 分钟。我给你一个标准结构：
|
||
|
||
（教师投屏路演结构）
|
||
|
||
```
|
||
🎤 路演结构（3分钟）：
|
||
|
||
1️⃣ 开场（15秒）：我是谁，这是我的个人主页
|
||
"大家好，我是XXX，今天给大家看我的个人主页。"
|
||
|
||
2️⃣ 亮点展示（90秒）：最得意的 2-3 个板块，讲设计思路
|
||
"我最喜欢的是这个板块——我放了XXX，因为我觉得……"
|
||
"这里我加了一个悬停效果，鼠标放上去会……"
|
||
|
||
3️⃣ 技术分享（45秒）：用了什么方法？踩了什么坑？
|
||
"做这个页面我用了自己设计的智能体，规则是……"
|
||
"中间有一次翻车了——我加了XX效果结果页面乱了，后来我跟AI说……"
|
||
|
||
4️⃣ 结尾（30秒）：我最想让大家记住的一点
|
||
"如果你只能记住一个关于我的事情，我希望是……"
|
||
```
|
||
|
||
**师：** 我来做一遍示范。
|
||
|
||
（教师用自己的个人主页做 3 分钟路演示范——完整走一遍四个部分，语气自然，有停顿有互动）
|
||
|
||
**师：** 看到了吗？我不是在念稿——我是在**讲故事**。讲我为什么做这个、我怎么想的、我遇到了什么问题。这比单纯展示有意思多了。【诊断点：检测学生是否理解路演和单纯展示的区别】【应用层】
|
||
|
||
**【分支A】若学生说"要讲为什么这样设计"：**
|
||
**师：** 对！"为什么"比"是什么"重要十倍。观众看到你的页面能自己判断好不好看，但他们不知道你为什么这样设计——这才是路演要讲的。
|
||
|
||
**【分支B】若学生看起来有点紧张：**
|
||
**师：** 别紧张！你就当跟好朋友聊天——"来看看我做的东西，这里我觉得特别酷因为……"。不需要背稿，用你自己的话说就行。
|
||
|
||
**学生实践 (8分钟):**
|
||
|
||
**师：** 现在准备你的路演。两件事：
|
||
|
||
1. **花 3 分钟列提纲**——在纸上或脑子里想好：开场说什么、展示哪 2-3 个亮点、分享什么技术经验、结尾说什么
|
||
2. **花 5 分钟跟同桌互练**——你讲给他听，他讲给你听。互相计时，3 分钟。超了就帮对方砍内容，不够就帮对方加内容
|
||
|
||
**师：** 提纲不用写得很详细——几个关键词就行。重要的是**练一遍**。第一次讲永远比你想象的长或短，练过一次就知道怎么控制时间了。开始！
|
||
|
||
（教师走动观察）
|
||
|
||
（教师走动重点关注：）
|
||
- 有没有学生只准备了"打开页面给你看"而没有准备讲解？提醒他路演结构
|
||
- 互练时有没有超时的？帮他们砍内容——"3 分钟，只讲最精华的 2 个亮点"
|
||
- 有没有学生完全不知道讲什么？给他一个起手句："我的页面主题是XX，我最得意的板块是XX，因为……"
|
||
|
||
**进度同步 (2分钟):**
|
||
|
||
**师：** 跟同桌互练过一遍的举手？很好。
|
||
|
||
**师：** 练完之后，你觉得 3 分钟够不够？【识别层】
|
||
|
||
**生：** （预期：有人说够/有人说不够/有人说太长了）
|
||
|
||
**师：** 3 分钟很短——所以要精挑细选，只讲最精华的。如果你什么都想讲，反而什么都讲不清楚。**少就是多。** 好，准备好了，下面就是正式路演！
|
||
|
||
---
|
||
|
||
**第三幕：反思 (Contemplate) — 15分钟** 🤔
|
||
|
||
*本幕目标：正式路演展示，通过结构化互评巩固表达力和审美力。时间比标准多5分钟，因为这是双课项目的总结*
|
||
|
||
**成果展示——路演 (10分钟)**
|
||
|
||
**师：** 现在是激动人心的路演时间！我们选 4 位同学上台，每人 3 分钟。
|
||
|
||
（选 4 位学生。选人策略：尽量涵盖不同风格——1个设计精致的、1个交互效果做得好的、1个内容很有个性的、1个迭代过程值得分享的）
|
||
|
||
**师：** 台下的同学，每个路演结束后，你要准备两样东西：
|
||
- **一个赞**：你觉得他的页面或者路演哪里最棒
|
||
- **一个建议**：如果他还能再改一轮，你觉得可以改什么
|
||
|
||
（第 1 位学生路演——3 分钟）
|
||
|
||
**师：** （路演结束后）谢谢！台下谁来说——你最喜欢他页面的哪个地方？
|
||
|
||
**生：** （收集 1-2 个"赞"）
|
||
|
||
**师：** 有没有改进建议？
|
||
|
||
**生：** （收集 1 个建议）
|
||
|
||
**师：** （教师点评——重点不只看效果，更表扬设计思路和迭代过程）
|
||
例如："我特别喜欢的是，XX同学讲了他加滚动动画的过程——第一次翻车了，他跟 AI 说了什么修好的。这个**解决问题的过程**比最终效果更值得学习。"
|
||
|
||
（依次完成 4 位学生的路演 + 互评 + 教师点评。每人约 2.5 分钟路演 + 互评）
|
||
|
||
> **拍照发群：** 拍学生路演的照片和作品截图，配文字"AI编程创新课第5课，同学们完成了自己的个人主页并进行了产品路演！每一个页面都独一无二。"发家长群。
|
||
|
||
**互评总结 (5分钟)**
|
||
|
||
**师：** 四位同学的路演都很棒。我来总结一下今天看到的几个共同的亮点：
|
||
|
||
（根据实际情况总结，以下为预设方向）
|
||
|
||
**师：** 第一，你们的页面**每一个都不一样**——有人走简约风、有人走炫酷风、有人内容为王。这说明什么？说明你们不是在"照着模板做"，而是在**表达自己**。这就是个人主页的意义。
|
||
|
||
**师：** 第二，交互效果大家都加上了。但我注意到——做得好的同学不是效果最多的，而是**效果最合适**的。XX同学只加了一个 hover，但跟他的页面风格完美统一。**克制是一种高级的审美能力。**
|
||
|
||
**师：** 第三，路演讲得好的同学有一个共同点——他们不只是说"你看我的页面"，而是说"我为什么这样做"。**讲设计思路比展示结果更有说服力。**
|
||
|
||
---
|
||
|
||
**第四幕：延续 (Continue) — 5分钟** 🚀
|
||
|
||
*本幕目标：收集作品文件，总结双课项目的完整流程，引导方法论迁移*
|
||
|
||
**收集作品 + 发布说明 (1分钟)**
|
||
|
||
**师：** 现在最重要的一步——请所有人把你的 index.html 文件提交给我。
|
||
|
||
（说明提交方式：拷贝到教师U盘 / 上传到指定文件夹 / 根据校区实际情况调整）
|
||
|
||
**师：** 你们的个人主页会发布到我们穹狼科创的网站上。**真的会有人看到！** 你的爸妈、你的朋友、其他校区的同学——都能看到你做的页面。所以，最后确认一遍——你页面上的所有信息都是你愿意公开的吗？有没有不想让别人看到的内容？有的话现在改。
|
||
|
||
**抽象总结 (2分钟)**
|
||
|
||
**师：** 我们用两节课完成了一个完整的项目。来回顾一下整个流程：
|
||
|
||
（投屏）
|
||
|
||
```
|
||
两课完整流程：
|
||
📝 第4课：内容清单 → 设计智能体 → 生成第一版 → 填入真实内容 → 视觉调整 → 收集同学建议
|
||
🚀 第5课：响应建议 → 交互升级 → 最终打磨 → 路演展示 → 发布
|
||
|
||
核心方法论：
|
||
先规划 → 再创建 → 再打磨 → 再发布
|
||
```
|
||
|
||
**师：** 这套流程——"先规划、再创建、再打磨、再发布"——除了做网页，还能用在哪里？【诊断点：检测学生能否将方法论迁移到其他场景】【迁移层】
|
||
|
||
**【分支A】若学生说"做PPT"/"写作文"/"画画"：**
|
||
**师：** 完全正确！做PPT也是先想好讲什么（规划）→做出来（创建）→改好看（打磨）→上台讲（发布）。你已经掌握了一个通用的创作方法。
|
||
|
||
**【分支B】若学生想不出来：**
|
||
**师：** 想想你上周交的作文——你是不是先想好写什么、再写初稿、再修改、最后誊抄交上去？其实就是同一套流程。这个方法用在任何创作上都好使。
|
||
|
||
**5分钟挑战 + 下节预告 (2分钟)**
|
||
|
||
**师：** 本周5分钟挑战：给你的个人主页加一个新板块——"给未来的自己的一封信"。写一段话给10年后的自己，再给这个板块加一个特别的视觉效果。具体要求课后看群里发的说明。
|
||
|
||
**师：** 下节课我们进入新的阶段。前五节课你们学了 Trae 的操作、三种模式、迭代、智能体设计、个人主页项目。接下来要挑战更有野心的东西——不只是展示型页面，而是**有真正功能的应用**。
|
||
|
||
**师：** 具体做什么？下节课揭晓。这周好好欣赏你发布在网站上的个人主页——那可是你的第一个真正发布的作品。下节课见！
|
||
|
||
---
|
||
|
||
### 5. AI助教使用指南
|
||
|
||
**教师演示用提示词：** 见教学流程分段二中的三段演示提示词（hover、滚动渐入、Tab 切换），可直接使用。
|
||
|
||
**学生保底提示词（智能体不好用时，直接在 Solo Coder 里说）：**
|
||
|
||
```
|
||
给我的页面加一个简单的效果：鼠标放到卡片上的时候卡片稍微放大，移开恢复。
|
||
```
|
||
|
||
```
|
||
给页面加滚动动画：往下滚的时候内容从下面淡入出现。
|
||
```
|
||
|
||
```
|
||
把一个板块改成标签页切换，点不同按钮显示不同内容。
|
||
```
|
||
|
||
**保底代码片段（教师验证过的交互效果代码）：**
|
||
|
||
如果 AI 生成的交互效果不生效，教师可以让学生这样说：
|
||
|
||
```
|
||
请把下面的 CSS 代码加到我的页面的 <style> 标签里，
|
||
并给所有需要 hover 效果的卡片加上 class="hover-card"：
|
||
|
||
.hover-card {
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
.hover-card:hover {
|
||
transform: scale(1.05);
|
||
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
|
||
}
|
||
```
|
||
|
||
**路演话术模板（给不知道怎么讲的学生）：**
|
||
|
||
```
|
||
"大家好，我是[名字]。这是我的个人主页。
|
||
我的主题是[XX]，因为我觉得[XX]最能代表我。
|
||
我最喜欢的板块是[XX]，你们看——[演示操作]。
|
||
这里我加了一个[XX效果]，鼠标放上去会[XX]。
|
||
做这个页面的时候，我踩了一个坑——[XX]，
|
||
后来我跟 AI 说[XX]，就修好了。
|
||
如果你只记住一件关于我的事，我希望是：[XX]。谢谢大家！"
|
||
```
|
||
|
||
---
|
||
|
||
### 6. 教师指南
|
||
|
||
**本课技术备注（含国产模型成功率）：**
|
||
|
||
| 交互效果 | 技术原理 | 成功率 | 备注 |
|
||
| --------- | --------- | -------- | ------ |
|
||
| hover 悬停 | CSS `:hover` 伪类 + `transition` | 95%+ | 最稳，优先推荐 |
|
||
| CSS 过渡/动画 | `transition`（A→B）/ `animation`（关键帧） | 85-90% | 纯 CSS，不需 JS |
|
||
| 滚动渐入 | JS Intersection Observer API | 75% | 偶尔观察器配置不对 |
|
||
| Tab 标签切换 | JS 控制显隐 | 70% | 偶尔点击不切换 |
|
||
| 图片轮播 | JS 定时器 + 索引管理 | 60% | 失败就退回 hover |
|
||
|
||
**学生翻车时的应对顺序：** 让 AI 修复 → 换更简单的效果 → 用保底代码片段 → 去掉效果恢复原状
|
||
|
||
**发布流程说明：**
|
||
- 学生提交 HTML 文件后，由教师/技术人员统一部署到公司网站
|
||
- 建议课后检查一遍所有学生的 HTML 文件：确认无不适当内容、文件能正常打开
|
||
- 发布后将链接发到家长群，配截图和说明文字
|
||
|
||
**常见问题 FAQ：**
|
||
|
||
| 学生问题 | 建议回答 |
|
||
|---------|---------|
|
||
| "交互效果加了但没反应" | 先检查——鼠标有没有放到对的元素上？有时候 hover 加在了外层容器而不是卡片本身。跟 AI 说"hover 效果加了但没反应，请检查是不是选择器写错了" |
|
||
| "页面在别的电脑上显示不一样" | 正常现象！不同电脑的屏幕大小、字体、emoji 样式都不一样。重要的是主体内容和布局没问题。以后我们会学"响应式设计"来解决这个问题 |
|
||
| "我想加背景音乐" | 可以试试，但浏览器默认会阻止自动播放音频。可以加一个"播放音乐"按钮让用户手动点击播放。如果实现有困难就暂时不加 |
|
||
| "路演 3 分钟太短了讲不完" | 说明你的内容很丰富！但路演的核心是"精选最亮的 2-3 个点"，不是面面俱到。练习砍内容——只留最想让人记住的 |
|
||
| "我不想在网站上发布" | 完全尊重你的意愿。如果有隐私顾虑，可以把真名换成昵称，或者不发布个人照片 |
|
||
| "同学的建议我都不同意" | 这很正常，设计没有标准答案。但建议你至少认真思考一下——如果3个人都说"配色太花了"，可能真的值得考虑 |
|
||
|
||
**课堂风险预案：**
|
||
- 如果学生上节课的智能体找不到了：直接在 Solo Coder 里操作，不通过智能体。教学目标不变
|
||
- 如果学生上节课的项目文件丢失了：用 Builder 快速重建一个基础个人主页（5分钟），使用保底提示词，跳过分段一直接进入分段二
|
||
- 如果路演时间不够（学生太多）：只选 3 位路演，其余学生课后录 3 分钟视频提交
|
||
- 如果AI服务不可用：让学生专注做路演准备和互评，交互效果留到下节课补
|
||
|
||
---
|
||
|
||
### 7. 5分钟日常AI挑战
|
||
|
||
**本周挑战：**
|
||
|
||
> **"给未来的自己的一封信"**
|
||
>
|
||
> **操作步骤：**
|
||
> 1. 打开你的个人主页项目
|
||
> 2. 用 Solo Coder 加一个新板块，标题是"给未来的自己"
|
||
> 3. 写一段话——你想对10年后的自己说什么？（梦想、期望、现在的心情……）
|
||
> 4. 给这个板块设计一个特别的视觉效果（信封打开动画？手写字体？老照片风格？你来决定）
|
||
> 5. 截图保存最终效果
|
||
>
|
||
> **评价标准：**
|
||
> - 基础：成功加了新板块，内容是自己写的真心话
|
||
> - 进阶：视觉效果跟页面整体风格统一，不突兀
|
||
> - 挑战：让家人读你写的信，记录他们的反应（文字或截图）
|
||
|
||
---
|
||
|
||
### 8. 拓展任务
|
||
|
||
**拓展一（推荐）：手机端适配**
|
||
> 用外部浏览器打开你的个人主页，然后按 F12 打开开发者工具，切换到手机视图。你的页面在手机上好看吗？如果不好看，跟 AI 说"请让我的页面在手机上也能正常显示，做响应式适配"。截图对比电脑版和手机版的效果。
|
||
|
||
**拓展二（挑战）：为别人做个人主页**
|
||
> 找一个家人或朋友，帮他/她做一个个人主页。你需要先"采访"他——了解他的兴趣、梦想、特长，然后用你学到的全部技能（内容清单→智能体→生成→迭代→交互→检查）做出一个完整的页面。做完后让他看，记录他的反应。这是一次完整的"为用户做产品"的体验。
|