内容摘要：网站的创建教案 我教学生建站的第一课，从不打开编辑器。先让他们关掉手机，盯着白纸看五分钟。然后问：“你想给谁看？他为什么来？”——技术永远排在需求后面。去年有个学生想做宠物殡葬网站，上来就挑炫酷的粒子

网站的网站创建教案

我教学生建站的第一课，从不打开编辑器。建教先让他们关掉手机，网站盯着白纸看五分钟。建教然后问：“你想给谁看？网站他为什么来？”——技术永远排在需求后面。去年有个学生想做宠物殡葬网站，建教上来就挑炫酷的网站粒子特效模板，我让他先写出十个真实客户的建教悼念留言。他写了三天，网站最后把首页改成一张简单的建教黑白照片，配一行字：“它来过，网站你爱过。建教”那个网站没任何特效，网站转化率却比同班任何作品都高。建教

第二步是网站搭骨架。HTML不是语言，是房子的承重墙。别急着学标签，先画框：头部、导航、主体、侧栏、底部。拿纸笔画出来，标上“这里放什么、那里为什么”。一个常见的错误是新手把导航做成下拉三层，用户点两次才能找到“联系我们”。我的规则很简单——如果一张纸画不下你的信息架构，那就是你想得太复杂了。

等结构清晰了，才轮到写代码。我要求每写一行都念出声：“header 是头部，nav 是导航，main 是主角。”声音能帮大脑建立连接。有学生总把 div 当万能膏药，到处贴，最后页面像打满补丁的旧床单。我让他数数：一个页面超过二十个 div，说明结构没想清楚。改用语义化标签后，他惊讶地说：“原来代码自己会说话。”

样式是皮肤，但皮肤会骗人。CSS 的坑在于，你调了三个小时的字号，最后发现是没写单位。我让学生先做灰度版本，把所有颜色去掉，只留黑白灰。这时候才能看出间距是否均匀、层次是否分明。有个学生把按钮做得巨大，红色背景金色字，我说你这不是按钮，是警报器。改成灰底黑字后，反而有人点击了——因为看起来像可点的东西，而不是在喊“快来按我”。

交互是灵魂，但灵魂很容易被遗忘。JavaScript 不是必须的，如果你能用静态页面说清楚事，就别加动画。我见过太多网站，鼠标滑过时元素跳来跳去，像喝了咖啡的跳蚤。真正的交互是：用户知道自己在哪，知道能去哪，知道已经去了哪。一个简单的返回顶部按钮，比十种 hover 效果更实用。

最后是发布。别用那些花哨的托管平台，买个域名，租个最便宜的服务器，用 FTP 传上去。这个笨拙的过程能让你理解“网站”到底是什么——一堆文件放在别人的电脑上，别人通过地址来访问。当学生第一次在手机浏览器里输入自己的域名，看到页面加载出来的瞬间，那种眼神比任何考试分数都真实。

教学这么多年，我发现一个规律：做得快的往往做得差，做得慢的反而走得更远。有个女生花了六周做一个美食博客，每周只加一道菜的做法页。她反复调整图片大小，研究不同浏览器下的显示差异。结课时她的网站不算惊艳，但每个按钮的位置都经过深思熟虑。后来她真的去做了餐饮内容运营，面试时直接打开自己的网站给主管看，当场被录用。

建站不是学技术，是学思考。你怎样组织信息，怎样引导视线，怎样用布局表达态度——这些才是核心。代码会过时，框架会更新，但“为他人而设计”这个原则永远不会变。所以下次你打开代码编辑器之前，先问问自己：我到底想告诉世界什么？如果答不出来，关掉电脑，出去走走。