网页制作工具

我第一回做网页是网页在2008年，用记事本敲了一整晚的制作 <table> 布局。保存成 .html 文件，工具双击打开，网页浏览器里出来一个歪歪扭扭的制作导航栏，蓝色链接带着下划线，工具当时觉得挺了不起。网页现在回头看，制作那玩意儿丑得离谱，工具但正是网页这种“手搓”的过程，让我搞懂了标签和属性到底在干什么。制作

今天的工具工具早就不是记事本的天下了。Visual Studio Code 装了 Live Server 插件，网页写一行 <h1>，制作右边浏览器实时刷新。工具省了手动保存再切窗口的麻烦。但工具变聪明了，人反而容易犯懒。我见过不少新手直接拖拽 Dreamweaver 的布局网格，生成一堆嵌套的 <div>，类名全是 Layer1、Layer2。代码能跑，可一旦要改个间距，找都得找半天。工具替你做了决定，代价是你不知道它做了什么。

代码编辑器：从重量级到轻量级

Dreamweaver 当年是标杆。所见即所得，设计视图和代码视图分屏。学校机房清一色装它。但它的代码视图经常卡顿，自动补全也慢半拍。后来 Sublime Text 火了，启动快，多光标编辑舒服。再后来 VS Code 一统江湖，免费、插件多、Git 集成顺手。我现在的配置是 VS Code + Emmet，敲 ul>li*5 按 Tab，直接展开五个列表项。效率高得不像话。

不过 VS Code 也有烦人的时候。装了三四十个插件，启动要等好几秒。有回帮朋友调一个老项目，他的编辑器是 HBuilder，我愣是找不到格式化快捷键。工具这东西，顺手比强大更重要。你让一个只写静态页面的设计师去学 Webpack 配置，纯属折磨。

可视化建站：省事，但别指望它万能

Wix、Squarespace、国内的有赞、上线了。拖拽组件，选模板，填文字换图片。半小时能出一个能看的页面。我表姐开烘焙工作室，用 Wix 做了个展示页，手机端自适应，预约表单直接连邮箱。她连 HTML 是什么都不知道。这挺好。但后来她想加一个“按口味筛选蛋糕”的功能，Wix 的免费版不支持自定义查询。要么升级付费，要么换工具。可视化工具给你的是鱼，不是渔。

Webflow 是个异类。它也是可视化，但生成干净的 HTML/CSS，还能导出代码。我试过用它做一个产品落地页，调 Flexbox 布局时，右侧面板实时显示对应的 CSS 属性。对学 CSS 其实有帮助。但它的学习曲线比 Wix 陡得多，价格也不便宜。适合那种“不想手写代码，但想控制输出质量”的人。

框架和构建工具：另一种维度的“制作”

现在说“网页制作”，早就不止是写 HTML 和 CSS 了。React、Vue、Svelte，组件化开发。一个按钮是一个 .vue 文件，样式、逻辑、模板全在里面。Vite 启动开发服务器，热更新几乎无感。我去年用 Vue 3 + Vite 搭了个后台管理界面，从零到能跑，花了不到二十分钟。换作 jQuery 时代，光配环境就得半天。

但框架不是银弹。我见过一个静态博客，总共五篇文章，用 Next.js 做服务端渲染。构建一次生成一堆 chunk 文件，部署到 Vercel 还要配环境变量。杀鸡用牛刀，刀还特别重。有时候一个 <style> 标签加几行 CSS 就能搞定的事，没必要上 Tailwind。工具的选择应该跟着需求走，而不是跟着潮流走。

我的建议：先手写，再偷懒

如果你刚入门，别一上来就碰 Dreamweaver 或者 Webflow。打开 VS Code，新建一个 index.html，手敲 <!DOCTYPE html>。写一个标题，一个段落，一张图片。搞明白 src 和 alt 的区别。然后用浏览器打开，按 F12 看元素面板。这个过程不会超过半小时，但它建立的是你对网页结构的直觉。

有了这个底子，再去用那些效率工具。Emmet 帮你少敲键盘，Live Server 帮你省刷新，Figma 帮你对设计稿。工具是杠杆，但支点得你自己有。我到现在还保留着一个习惯：每学一个新 CSS 属性，先在记事本里手写一遍，再复制到项目里。笨，但记得牢。

网页制作工具没有最好，只有最合适。你今天用 Notepad 写个“Hello World”，明天用 React 搭个电商前台，都是同一件事：把想法变成浏览器里能看的东西。工具会过时，这个本质不会。