网页设计与制作教案

我教这门课第七年了。网页每年第一堂课，设计总有学生问我同一个问题：老师，制作Dreamweaver还够用吗？教案我通常不直接回答，而是网页让他们打开浏览器，按F12键。设计那一瞬间，制作满屏的教案代码像瀑布一样倾泻下来，有人惊呼，网页有人皱眉，设计有人默默关掉了面板。制作这就是教案第一课最好的开场——网页设计的真相，从来不在可视化界面里，网页而在你敢于直视源代码的设计那一刻。

教案的制作第一章节，我命名为"拆解一只麻雀"。让学生用三天时间，把一个新闻网站的首页拆成二十个区块，标注出每个区块的HTML结构、CSS样式和JS交互。这比任何理论灌输都有效。有个学生拆到第八个区块时突然举手："老师，原来导航栏不是画出来的，是列表改的。"全班都笑了，但那个瞬间我知道，他真正理解了语义化标签的意义。

课程进度上，我刻意放慢了CSS的讲授节奏。市面上大多数教材用两周讲完Flexbox和Grid，我偏要用四周。为什么？因为布局思维不是背出来的，是摔出来的。我设计了一个"迷宫修复"练习：给出一段完全打乱的CSS代码，让学生在不改变HTML的前提下，仅通过调整选择器和属性顺序，让页面恢复成设计稿的模样。这个练习没有标准答案，每个学生的修复路径都不同。有个女生用了一种极其诡异的排列方式，但页面效果完美——她发现了代码注释里隐藏的提示，用注释行作为锚点重新组织了样式表。这种创造性解决问题的方式，比任何考试分数都珍贵。

JavaScript部分，我引入了一个特殊项目：给班级做一套"匿名提问箱"。学生需要实现表单验证、数据存储（用localStorage）、消息列表的动态渲染，还要处理XSS攻击的防御。当有学生提交了一段恶意脚本，页面弹出假警告框时，全班沸腾了。那个写攻击代码的男生后来成了网络安全方向的狂热爱好者，而其他学生也从此对用户输入产生了近乎偏执的警惕。

期中作业我从不布置网页仿写。太无聊了。我让学生观察校园里一个真实存在的"问题场景"——比如食堂排队、图书馆占座、快递驿站取件混乱——然后设计一个解决该问题的网页工具。有个小组做了"食堂窗口实时排队状态页"，用简单的轮询请求模拟实时数据，虽然技术上很粗糙，但他们在页面底部加了一行小字："数据每30秒刷新一次，如果等太久，建议先去买杯奶茶。"这种带着温度的细节，是模板永远教不出来的。

期末考核分两个环节。第一环节是限时编码，四小时，给设计稿和JSON数据文件，完成一个响应式页面。第二环节是代码走查，我坐在学生旁边，让他们逐行解释自己写的代码。为什么用div而不用section？为什么这个变量名是tempData而不是list？很多学生在这个环节卡壳，支支吾吾说"当时觉得这样写能跑就行"。我会追问：那如果下个月你自己回来改这个页面，还能看懂吗？代码是写给人看的，顺便让机器执行——这句话我每学期重复不下十遍，但真正听懂的人，往往是在自己debug到凌晨三点，对着三个月前写的代码骂自己笨蛋的时候。

课程最后一周，我删掉了所有PPT。带学生去机房做了一件事：关掉显示器，在纸上手写一个网页的完整HTML结构。半小时后，有人交了一张皱巴巴的纸，上面只有十几行代码，但结构清晰，注释完整，甚至标注了CSS的类名命名规范。我问他为什么写这么少？他说："老师，我先把骨架搭对，剩下的细节我脑子里已经跑完了。"那一刻我意识到，教案上所有教学目标的达成，都比不上这一张纸带来的踏实感。