网页三剑客视频教程

2018年我录过一套《网页三剑客视频教程》，网页当时B站后台数据显示，剑客教程收藏数是视频投币数的七倍。这数据挺讽刺——大家把教程当书签存着，网页仿佛存了就会了。剑客教程但更让我意外的视频是，私信里问得最多的网页不是代码问题，而是剑客教程"老师，现在学Dreamweaver还有用吗？视频"

这话问得我愣了一下。网页三剑客——Dreamweaver、网页Fireworks、剑客教程Flash——这个说法本身就像老照片，视频泛着千禧年的网页黄。2003年我刚入行时，剑客教程这三样是视频标配。Dreamweaver拖拽表格，Fireworks切图，Flash做banner，一套流程下来，个人网站就能挂到虚拟主机上。那时候的网页设计师，本质上是个装配工。

现在呢？Dreamweaver的代码提示功能被VS Code甩出几条街，Fireworks早在2013年就停产了，Flash更是被Adobe亲手送进坟墓。你打开任何招聘网站，搜"网页设计"，要求里写的是"熟悉React或Vue"。三剑客？那是上个时代的暗号。

但我在教程里讲了另一个角度。有个学员用Dreamweaver的实时视图调CSS，半小时搞定了一个响应式导航栏。他之前用纯手写代码，同样的效果磨了一下午。工具本身不分新旧，关键看你拿它干什么。Dreamweaver的拆分视图——左边代码右边预览——这个设计至今没有替代品。你用VS Code得装插件、配浏览器同步，麻烦死了。

再说Fireworks。虽然停产了，但它的切图功能至今让我念念不忘。位图编辑和矢量编辑在一个文件里切换，导出的切片命名规律得一批。现在用Figma或Sketch，切图导出还得靠插件。我甚至见过老设计师专门装个虚拟机跑Fireworks，就为了处理那些遗留项目里的PNG切片。

Flash更不用提，它死了，但它的动画思路活着。现在网页里那些花哨的微交互，本质上是Flash时间轴理念的变种。你打开Animate——Flash的官方继承者——里面还能导出WebGL格式。我在教程里专门用Flash讲了一个逐帧动画的原理，学员拿那个思路去写CSS动画，keyframes用得比谁都溜。

所以这套视频教程，我故意没按"软件功能"来分章节。我把三剑客拆成三个维度：Dreamweaver讲布局思维，Fireworks讲图像处理流程，Flash讲时间轴认知。每个维度配两个实战案例，剩下的全靠学员自己摸索。有人看完后跟我说，原来代码和设计不是割裂的，用Dreamweaver的可视化操作反而让他理解了盒子模型的嵌套关系。

这话我信。工具会过时，但工具背后的工作流不会。你学会了用Fireworks的切片规范，到了Sketch里自然知道怎么命名图层；你理解了Flash的补间动画，写CSS transition时心里就有底。三剑客真正的价值不在软件本身，而在于它逼着你同时面对设计稿和代码——这种双重思维，现在的"拖拽建站"工具给不了你。

当然，我不会劝你专门去装个旧版Dreamweaver。时代变了，该用新工具就用新工具。但如果你在学前端时卡在某个布局上，不妨回头看看这套老教程。里面的原理没变，变的只是输入代码的方式。就像我常跟学员说的：别把三剑客当软件学，把它当思维导图用。

那套视频现在还在B站挂着，播放量二十来万。偶尔有新人留言说"这年头还有人看这个"，底下总有老学员回一句"看完再说"。前几天还有个做独立开发者的私信我，说他用Dreamweaver的站点管理功能维护了三个静态博客，比那些花里胡哨的静态站点生成器省心多了。

你看，工具这东西，用好了叫武器，用不好叫包袱。三剑客是死是活，取决于你怎么用它。