大家好，这次2018级的网页设计实训结束啦，我来给大家做个全程记录。实训的核心其实就是把咱们平时在课堂上学的理论知识，直接搬到浏览器里去实操。说白了，就是要把那些零散的 HTML、CSS、JavaScript 知识点给串起来，变成一个实实在在的网站。虽然就给了一个星期时间，但在老师手把手的带领下，同学们还是顺利完成了任务。这个过程很关键，毕竟以后真要进了公司干活，能不能快速上手全看这一步。 咱们这次的主要目的是锻炼三项能力。第一是学怎么找资料，以前大家可能老觉得没素材没文案用，现在教会了大家用网站、书籍或者素材光盘去“淘”资源，以后再也不用抓耳挠腮了。第二是要把想法变成代码，也就是动手能力。拿到需求以后得先搭个 HTML 结构，再用 CSS 打扮打扮，最后让 JavaScript 动起来。第三就是解决实际问题的本事。遇到布局乱跳、响应式不兼容这种麻烦事的时候，别光说自己不会，得自己想办法或者找人一起攻克。 接下来说说具体怎么干的。刚分好组可不是直接打开编辑器写代码，大家围着白板先开了个主题讨论会。大家伙儿脑洞大开，毕业旅行、校园二手市集、AI 科普什么都有，十分钟白板上就写满了7个方案。最后投票定下了“老校区记忆”这个主题。 进入细化阶段以后就开始吵架了。有人想做大图轮播，有人想做卡片拼图。吵得脸红脖子粗的，但正因为有分歧才把页面结构理得更清楚了——这就是合作的好处嘛。 当然老师也没闲着，一直在旁边转悠着当“裁缝师傅”，只给线头不给全干的活。学生遇到 CSS 浮动塌陷卡住的时候，老师随口说句“试试 clear: both;”，进度条立马就能拉满。 最后来看看成果展示环节。学生直接在电脑上一边演示一边讲代码：这段 jQuery 是怎么实现自动轮播的；这行 media query 为啥能把侧边栏弄到手机底部；这些图标又是从哪家免费库弄来的。只有自己把代码吃透了才能写出别人看得懂的网页。 老师拿着打分表可没少点评：除了看代码质量（HTML 语义化、CSS 有没有冗余），还看设计（配色合不合适、字体大不大看），最重要的是看你会不会讲（能不能用“用户痛点”代替“我用了什么技术”）。这三重打分告诉大家一个道理：好网页不光得能跑起来，还得好用而且好讲。