内容摘要：把个人网站搬进课堂，最怕的就是学生对着浏览器地址栏发呆。去年我在中职学校试了一节课，四十五分钟，三十个学生，最后交上来的网页居然没有一个是用模板套的——不是他们技术多好，而是我把任务拆得太碎了。 那节

把个人网站搬进课堂，展示最怕的个人就是学生对着浏览器地址栏发呆。去年我在中职学校试了一节课，网站四十五分钟，教学三十个学生，设计最后交上来的展示网页居然没有一个是用模板套的——不是他们技术多好，而是个人我把任务拆得太碎了。

那节课的网站起点是看一个反例。我打开一个用在线生成器做的教学个人主页，满屏跑马灯和渐变边框，设计学生笑了。展示我问他们愿不愿意把简历放上去，个人所有人摇头。网站这就对了，教学教学设计的设计核心不是教标签，是教判断力。

我让学生先拿纸笔画出自己的页面草图。不碰电脑，只回答三个问题：你是谁，想给别人看什么，希望别人看完做什么。有个男生画了个极简黑底页面，只放一行字“我修东西很快”。后来他做的网页真的就白底黑字，配了张自己拆主板的照片，那个页面比任何花哨模板都像他。

技术部分只讲了两个标签：div和img。够了。真正的难点是布局逻辑——左边栏和主内容区怎么用块元素拼出来。我把这个过程比作搭积木，每个区块就是一个盒子，盒子套盒子。学生用不同背景色标出每个div的范围，屏幕上像打翻了调色盘，但每个人都在动手试。

有个女生卡在图片不显示的问题上，折腾了十分钟。我走过去，发现她把图片文件名写成了“我的照片.jpg”，但文件实际叫“我的照片(1).jpg”。这种低级错误在真实项目里太常见了，我没直接帮她改，而是让她打开文件管理器对照文件名。她盯了半分钟，突然“啊”了一声。那种顿悟比任何讲解都深刻。

后半节课允许小组互看。规矩是只能提一个修改建议，而且必须具体到某个像素或某个颜色。有个小组给另一个组提的是“你的联系按钮和背景色太接近了，色盲用户看不到”。这已经不是技术问题了，这是同理心。课堂里能长出这种东西，比考满分值钱。

快下课时我让他们用一句话描述自己的页面。有人说“像我的桌面”，有人说“比我本人正经”，还有个平时沉默的男孩说“原来我可以说清楚自己是谁”。那一刻我就知道，这节课的目的达到了——不是教他们成为前端工程师，而是让他们发现代码可以成为表达自己的语言。

作业是回家把页面部署到GitHub Pages，下节课我们直接在浏览器里互访。我知道肯定有人会卡在git操作上，但没关系，那又是下一个教学设计的起点了。