Y2K网页制作全攻略（一）：像千禧年那样做网页 作者：蓬岸 Dr.Quest 编号：1914849977265550312 创建于：2025-06-08 01:20:25 修改于：2025-06-14 23:09:14 -------------------- 为什么？ 因为做网页比20年前更难了。2000年代初，制作个人主页曾经是在青少年中比较流行的业余制作活动。但在今天制作个人主页已经变得更加困难，即使是新手，也不得不很早就要去和复杂的CSS伪类、媒体查询、Flexbox等打交道。曾经简易的所见即所得编辑器，在现代的网站开发中已几乎不可见。这不仅仅是技术架构的变迁，更是整个Web场域业务逻辑的变迁，网页由个人制作变为专业开发，利用Web发表信息的权利被收回专业开发者，非技术用户被困在Web 2.0平台上。 但World Wide Web诞生的初衷是一种面向物理学家们的电子出版工具 (Link: https://physicsworld.com/a/electronic-publishing-and-visions-of-hypertext/)，并不是面向软件工程师的开发工具。由非技术人员在Web上发表内容曾经代表着一代人对言论自由的追求和想象。而这份文档，希望让你们夺回这项权利。 本文的目标读者是没有接触过网页制作，但随着Y2K风格个人主页复兴（这是更广泛的smol internet (Link: https://permacomputing.net/smallnet/)或smol web (Link: https://hackaday.com/2024/09/10/a-look-at-the-small-web-part-1/)潮流的一部分）而对制作网页感兴趣的业余爱好者。我希望以现代工具组建类似千禧年时的低门槛网页制作工具链，并让艺术家、作家等非技术人员能够有效使用Web进行创意表达。 符合W3C标准，SEO优化，如何盈利等等统统不是本文考虑的内容，网上有无数烂俗的文章教这些无聊的事情（同时也教会了所有AI机器人），本文关注于赋能（俗套的互联网黑话又出来了）表达的权利，而非运营。 作者在2000年Chinaren主页大巴制作其第一个网页，在2010年开始接受系统的前端训练，在HTML5成为正式标准之前就开始在工业界开发网站，见证了HTML 4.0到WebAssembly的全过程（网页里的电脑博物馆高密度使用WebAssembly）。有足够的理由、经验和素材反思今日前端开发中的那些复杂性究竟多少服务于表达，而多少服务于运营。 当代网页制作流程是反新手的 2010年，仍然有足够多所见即所得Web开发工具，除了大名鼎鼎的Dreamweaver、Frontpage（及其后续Expression Web），还有开源的W3C Amaya (Link: https://www.w3.org/Amaya/)、Kompozer (Link: https://kompozer.sourceforge.net/)，BlueGriffon (Link: http://bluegriffon.org/)等等。直到2020年，BlueGriffon仍是相当实用的网页编辑器，但2020年的macOS 11破坏了对BlueGriffon的兼容性 (Link: https://github.com/therealglazou/bluegriffon/issues/90)。Dreamweaver几乎市面上唯一仍在维护的商业级所见即所得网页创作工具。 而即使是以代码为核心的网页编辑器，千禧年时的操作也容易得多，这是HotDog 5.5，除了代码高亮之外，软件也提供了“一键式”插入HTML标签，如图片、链接等的功能和预览窗格。 (Image: https://pengan1987.github.io/images/picx/v2-fda87864104930727d760af87acbc1e8_720w.gif) 如果你用过Visual Studio Code、Sublime、Atom等现代编辑器，就会发现虽然它们是软件工业界前端开发最常用的工具，但几乎都是为熟练用户设计的，比如我最常用的Visual Studio Code，大量操作被隐藏在命令面板里，从设计之初就假定了用户对软件足够熟悉。 (Image: https://pengan1987.github.io/images/pic1/v2-208f7baf2c2e9f5da18660eba2d38d7a_720w.jpg) 组建Y2K网页工具箱 这个教程中使用的我们使用两个工具，一个是所见即所得工具SeaMonkey Composer (Link: https://www.seamonkey-project.org/)，另一个则是面向网页制作的代码编辑器Bluefish (Link: https://bluefish.openoffice.nl/)。这两个工具不仅有着纯正的Y2K起源，并且仍在维护，可以在今天的电脑上顺利运行。 2000 2025 所见即所得编辑器 Netscape Composer SeaMonkey Composer HTML文本编辑器 HotDog（曾经流行的编辑器，见 维基百科） Bluefish 主页空间提供商 Geocities Neocities SeaMonkey Composer是大名鼎鼎的网景浏览器（Netscape Communicator）中编辑器组件（Netscape Composer）的直系后代。而Bluefish则出现于1999年 (Link: https://bluefish.openoffice.nl/development.html)并延续至今，其最初目标是开发Allaire Homesite（之后被Macromedia收购，功能合并进Dreamweaver中）在Linux上的模仿者。 (Image: https://pengan1987.github.io/images/picx/v2-002d34dad52a2c4164e4956064a961c2_720w.jpg) 安装并准备SeaMonkey SeaMonkey可以在这里下载：https://www.seamonkey-project.org/ (Link: https://www.seamonkey-project.org/) Composer默认没有自己的启动图标，通常需要在SeaMonkey浏览器的窗口→Composer启动 (Image: https://pengan1987.github.io/images/pica/v2-2570bdfe83dfbecb2793c489f267cbf0_720w.jpg) 创建Composer的快捷方式（仅Windows） 如果你希望像启动独立的应用程序那样启动Composer，可以先将开始菜单中的SeaMonkey拖拽到桌面一份，然后右键→属性，在目标/Target里的命令结尾增加 -editor 参数（注意减号之前有空格），即可将其变为直接启动Composer快捷方式。 (Image: https://pengan1987.github.io/images/pic1/v2-5f608035a0625cdc9354e71887c651f9_720w.jpg) 安装并准备Bluefish Bluefish可以在这里下载： https://bluefish.openoffice.nl/index.html (Link: https://bluefish.openoffice.nl/index.html) 启用中文界面 如果你的系统默认是英文，但是想使用中文Bluefish界面，可以在Edit→Preference→User Interface里更改语言选项 (Image: https://pengan1987.github.io/images/picx/v2-9881434e911a0fbaad76803fa3bb6017_720w.jpg) 但Bluefish 2.2.17的Bug会导致无论选择哪个“中文”选项都会启动一个并不完整的繁体中文翻译，需要使用记事本修改 C:\Users\<你的用户名>.bluefish\rcfile-2.0 文件 一个快速修改该文件的办法，是使用Win+R组合启动“运行”对话框，再输入 notepad %USERPROFILE%.bluefish\rcfile-2.0 命令，就可以直接编辑rcfile-2.0文件 将 language: zh_TW 一行修改为 language: zh_CN 之后就可以启用完整的简体中文菜单了 (Image: https://pengan1987.github.io/images/pic1/v2-1f08350c5d9c665af9b73480dd4a455d_720w.jpg) 任务一：转制Word文档 你可能已经习惯使用Word、WPS或Pages制作文稿，做网页其实也一样简单！虽然包括Word在内的许多字处理软件支持保存到HTML，但生成的文件往往结构复杂、难以二次编辑，因此使用网页编辑工具重新创建文件的Web版本也是一项常见的工作。我们以使用Composer将下面的文档转换为网页形式为例子，来开始我们的第一个网页吧！ (Image: https://pengan1987.github.io/images/picx/v2-554bc7fb1b478c8a500f2d0d5dabf154_720w.jpg) 准备网页文件 我们新建一个文件夹作为网页的基础目录，比如D:\neocities\Y2KWebInstruction\misterynano 在其中新建一个 images文件夹用于存放所有图片 (Image: https://pengan1987.github.io/images/pic1/v2-49401efbcc63b316460e745079c798e2_720w.jpg) 打开Composer，然后右键，粘贴为无格式文本，将Word中的所有文本粘贴到Composer中 (Image: https://pengan1987.github.io/images/picx/v2-cabfeade8e71e224dfd9adb0408c4cd1_720w.jpg) 点击保存按钮，系统会要求给网页一个标题，这个标题对应的是浏览器标签中的标题（如红圈所示），根据文档的主题添加就好。如果你想修改已经创建的网页文件标题，可以在 格式→页面标题和属性 菜单里面修改 (Image: https://pengan1987.github.io/images/picx/v2-76414486d3d6e530bc5a3ea51c578cc9_720w.jpg) 然后将文件保存在我们计划的文件夹（目录）中，现在目录的结构如下，一个HTML文件是网页的主体，图片则全部放在images子目录下，一个组织良好的目录结构可以让网页制作过程清晰明了，也方便进一步发布到服务器上。 D:\neocities\Y2KWebInstruction\misterynano | MisteryNano.html \---images image003.jpg lemmings.gif m0sdock.png qr.png racer.png rpi_rack.png simcity.png speedball.png tangnano.png usbhub.png usb_adapter.png xenon.png 基本的文字排版 基础的文字排版和文字处理软件类似，设置标题、字体等 (Image: https://pengan1987.github.io/images/picx/v2-98fa55740170f3114a2f1a0f3edb19c5_720w.jpg) 加入链接 选中一段文字，按“链接”按钮将其转换为链接，链接地址可以与文本不同 (Image: https://pengan1987.github.io/images/pica/v2-8847c31298e4828bb7e8b953f3ba0e73_720w.jpg) 值得一提的是，链接除了用于跳转到其他文档或网址，也可以用来跳转到文档的其他部分，这对于长文档来说会很有用 (Image: https://pengan1987.github.io/images/pic1/v2-ac84cb8635ea22ae5c8b768c8a175f0d_720w.jpg) 加入图片 使用图像按钮在网页中加入图片，建议总是启用“URL和页面地址相关”（术语叫“使用相对路径”），这样保证整个网页文件夹被复制到硬盘的任何地方，图片都不会因为位置改变而失效，同时也确保上传到服务器后图片可以正确显示。 替代文本（Alt text）可以随意填写，通常是对图像内容的简单描述。虽然不填写替代文本并不影响页面显示，但该字段可以帮助使用屏幕阅读器的视障人士阅读网页，也可以帮助搜索引擎爬虫索引页面内容。 (Image: https://pengan1987.github.io/images/pic1/v2-df4b07e85a546b24f1e6533dd1cf6ebc_720w.jpg) 在“外观”选项中，“将文本与图像对齐”选项和Word中的“文字排绕”选项类似，可以将图片放置在文本旁边。而“链接”选项可以将图片设置为可点击的超级链接，也适合用来作为跳转到其他页面的按钮。 (Image: https://pengan1987.github.io/images/pic1/v2-51a8d7356c157306ba0536f20d0406ee_720w.jpg) 加入表格 选择表格按钮加入一个表格，可以设置行数、列数和初始尺寸，边界默认为1，如果为0就会生成一个隐形表格，内容位置会被表格框定，但没有表格边框 (Image: https://pengan1987.github.io/images/picx/v2-dd0f0f396907f12cf41ddfaac770c0ef_720w.jpg) 默认的表格样式为带有空心边框，内部文本为左上对齐 (Image: https://pengan1987.github.io/images/pica/v2-5109db30544dab3cc697bd3f9909d486_720w.jpg) 在表格边框上双击，或右键→表格属性，即可修改表格的样式，如果需要实心单线表格，可以将边界保留1，但间隔和填充都设置为0 (Image: https://pengan1987.github.io/images/pica/v2-e4c3f688e75315cad0e54da5d3dc7861_720w.jpg) 选中表格单元，可以右键设置表格单元属性，比如我们希望把四个格子中的内容都设置为居中，就可以在内容对齐中设置 (Image: https://pengan1987.github.io/images/pica/v2-bdd0a73f023315ea4d331c82c568136f_720w.jpg) 效果如下 (Image: https://pengan1987.github.io/images/picx/v2-5121bd539c86ba8f0c70824de05deef6_720w.jpg) 可以选中两个相邻的单元格并用右键将其合并为一个更大的单元格。但需要注意的是，合并单元格无法对表格最后一行操作，这可能是Composer的Bug，可以先在表格最后加一空行并操作合并，之后再删掉添加个空行。 图示：在表格末尾加入空行，完成最后一行的单元格合并 (Image: https://pengan1987.github.io/images/pica/v2-4a0626a6f5067a4b75f37edd711c00f3_720w.jpg) 编辑完成后删除空行，得到合并后的单元格 (Image: https://pengan1987.github.io/images/pica/v2-0c08b8e1fe60e8e3c7ee03b2ce5704e1_720w.jpg) 完成排版 交替使用图片、表格与文字工具，完成文档 (Image: https://pengan1987.github.io/images/pic1/v2-3bfda2ae5a20edd87f0529b29fb7bd8a_720w.jpg) 小提示：减少图片流量 在千禧年前后宽带网络仍不流行的时候，大量图片会导致加载时间过长，甚至电脑停止响应（死机），这种情况被称为多图杀猫 (Link: https://baike.baidu.com/item/%E5%A4%9A%E5%9B%BE%E6%9D%80%E7%8C%AB/5409822)。 压图是当时经常在论坛灌水的老筒子必学的技能，许多论坛也要求每张图片不得超过特定的容量（比如200KB）以节省服务器硬盘空间和网络带宽。 Photoshop和许多修图软件支持 存储为 Web 所用格式 (Link: https://helpx.adobe.com/cn/animate/using/save-for-web-options.html) 可以生成较小的图片。我自己日常则使用XnView (Link: https://www.xnview.com/en/)（Windows）和XnView MP (Link: https://www.xnview.com/en/xnviewmp/)（Mac） - 对于照片等色阶丰富的内容来说，优先选择JPEG（JPG）格式，虽然是有损压缩，但能够在不被观众注意到的前提下大大减少流量 - 而对于软件截图、图标等颜色较有限、尺寸较小的图片来说，使用无损压缩的PNG格式可以得到更好的图像质量。 (Image: https://pengan1987.github.io/images/picx/v2-fcd69f058de6299a2e69d8658ecf3e78_720w.jpg) 上图的展示了一幅PNG格式的视频截图被压缩为JPG后，容量从1.84MB缩小为180.49KB，刚好缩小10倍，这意味着服务器空间、流量消耗、加载时间都减少到之前的1/10。可谓好处多多。 虽然本文主要关心内容表达而非运营，但我们仍然需要理解长期以来每一个站长的核心焦虑之一：用户网络不稳定的情况（比如WiFi/手机信号弱）比想象中多得多，而网站加载时间增加的每一秒都会导致用户流失，合理的加载时间注定要在受限的质量下实现，因此网络上大部分在线观看的内容都经过有损压缩来加快加载速度、减少流量消耗并增强对不稳定网络的适应性。 续集来啦：Y2K网页制作全攻略（二）：Bling Bling的多媒体网页 (Link: https://zhuanlan.zhihu.com/p/1914854590291083923)