编者注：本文最初发表于 2016 年 3 月，并已更新以反映最初推荐的几种工具的变化。
就在几年前，互联网上的几乎每个网页在某种程度上都是由手工精心设计的。 这很困难，并且在 CSS 真正流行起来并在大多数常用浏览器中得到良好支持之前，它通常涉及通过以从未真正设想支持的方式使用 HTML 表格来拼凑布局。
虽然一些设计师开发了完全基于手动编辑原始 HTML 文件的工作流程，但 WYSIWYG（所见即所得）编辑器开始成为数百万不了解或至少没有掌握超文本标记艺术的业余和专业设计师的赋能工具。
CoffeeCup、HotDog、FrontPage、GoLive 和许多其他类似产品充斥市场，并且也涌现了许多基于 Web 的 WYSIWYG 编辑器。 其中更成功的是 Macromedia（后来的 Adobe）Dreamweaver，多年来它一直是我的个人最爱之一。
这些 Web 创作工具不仅仅是关于 WYSIWYG 编辑； 即使对于那些熟悉直接创作标记语言的人来说，这些工具也提供了模板控制、文件管理以及简单地减少创建功能代码所需时间的优势。
但是，正如这些有用的编辑器正在扩展对网页创建的访问权限一样，其他事情也正在发生。 像 Drupal 和 WordPress 这样的内容管理系统（以及它们之前和之后的许多其他系统）取代了普通内容生产者编辑原始 HTML 的需求。 您可以轻松地创建一个功能齐全的网站，而无需担心底层的标记。
那么内容管理系统的兴起是否改变了 Web？ 绝对是。 它是否消除了手动编写 HTML 代码的需求？ 嗯，对某些人来说，是的。 但是，随着 Web 从内容集合发展成为应用程序平台，标记的机会也随之增加。 每个软件即服务应用程序、每个社交媒体网络，甚至许多移动应用程序都依赖 HTML 和 CSS 来呈现其显示。 那些内容管理系统呢？ 它们仍然需要模板才能运行。
尽管存在许多有用的库来标准化和简化 Web 开发过程，但 Web 编码在短期内不会被取代。 专有工具仍然很常见，但那里有丰富的开源替代品集合。 以下是一些您应该考虑的。
1. BlueGriffon
BlueGriffon 是一个开源 WYSIWYG 编辑器，由为 Mozilla Firefox 开发的渲染引擎 Gecko 提供支持。 BlueGriffon 是现已停止开发的 HTML 编辑器 NVU 的几个衍生产品之一，是唯一积极开发的 NVU 衍生产品，它支持 HTML5 以及 CSS 的现代组件。 如果您的目标是尽可能少地编写实际的 HTML，那么 BlueGriffon 就是您想要的工具。 它是一个真正的拖放式 WYSIWYG 网站设计器，甚至包括双视图选项，因此您可以查看设计背后的代码，以防您想编辑它或只是从中学习。
它还支持 EPUB 电子书格式，因此您不必只发布到 Web：您可以为读者提供他们可以随身携带的内容下载。 BlueGriffon 在 MPL、GPL 和 LGPL 下获得许可，提供适用于 Linux、Windows 和 Mac 的版本。
2. Aptana Studio
Aptana Studio 是一个“开放 Web 的开源开发工具”，实际上，这意味着它更像是一个专门从事 Web 开发的高级 IDE。 Aptana Studio 基于开源 Eclipse 项目，具有辅助 HTML 和 CSS 创作的工具，包括代码着色和完成、调试以及文档大纲。 它的主要卖点是其 JavaScript 支持，使其成为开发更复杂的 Web 应用程序的强大工具。
3. NetBeans
NetBeans 是一个广泛使用的软件开发平台，用于使用 Java、JavaScript、HTML5 等构建 Web、移动和桌面应用程序。自 1999 年以来一直得到 Oracle（及其前身 Sun）的支持，并于 2016 年 10 月移交给 Apache 基金会进行开放治理，并简化和精简了社区贡献。 Netbeans 不完全是拖放式 Web 设计应用程序，但它是一个强大的 Web 感知 IDE。 如果您正在开发 Web 应用程序，或者只是喜欢为 Web 编码，那么它是一个不错的选择。
4. SeaMonkey
SeaMonkey 是曾经是 Mozilla 制作的互联网应用程序套件的社区延续。 虽然 Mozilla 决定将其重点缩小到单个项目，但 SeaMonkey 继续定期发布其完整套件，其中包括 SeaMonkey Composer，一个简单的 WYSIWYG HTML 编辑器。 您很难使用 Composer 进行高级布局（例如，您无法调整 CSS display 或属性来创建两列文本和图像对，但必须使用无响应表），但对于零代码编写的基本页面，这是一个现实的选择。
5. Aloha Editor
Aloha Editor 是一个基于 JavaScript 的 WYSIWYG HTML5 编辑器，它 允许 用户在读者查看内容的同一布局中编辑内容。 这是一种非常独特的模型，因为它本身不是一个应用程序，而是将编辑器嵌入到您的 HTML 页面中。 它需要 Node.js 堆栈，因此如果您不是熟悉 Javascript 的开发人员，则可能难以配置。 但是，如果您是一位站点管理员，正在为您的用户寻找一个简单的编辑界面以快速更新他们的页面，那么您应该对 Aloha 说“aloha”。
6. Wordpress
开源内容管理服务 (CMS) 和博客平台 Wordpress 具有结构化但灵活的页面布局界面。 它让您可以创建博客文章和页面，并具有足够的灵活性来让您的创造力蓬勃发展，并具有足够的限制来确保您的作品在所有浏览器中正确呈现。 使用 Wordpress，您可以在每个步骤选择您想要的复杂程度。 您可以使用他们的 著名的 5 分钟安装 方法自行托管，或者您可以从 Wordpress.com 购买托管。 您可以使用拖放式设计器创建页面，也可以自己修改 HTML 和 PHP。 您可以选择贡献主题，也可以设计和创建自己的主题。 对于任何想要运行网站的人来说，它都是一个很好的资源。
7. 尝试高级文本编辑器
虽然不一定是初学者的最佳选择，但许多文本编辑器提供了额外的功能，这些功能对于编辑 HTML/CSS 文档的人来说非常有用。 当与具有内置调试工具的现代浏览器并排使用时，您可能会像使用更专业的解决方案一样高效。 我们的一些最爱包括
- Atom 将自己描述为“21 世纪的可破解文本编辑器”。 它由 GitHub 开发，开箱即用地支持 HTML 和 CSS，并提供许多其他插件。
- Brackets 是由 Adobe 开发的基于 JavaScript 的文本编辑器，用于 Web 设计 和前端开发。 它标榜其内联编辑器、实时预览和预处理器支持功能，使其更容易在浏览器中进行 Web 设计。
- Vim 或 Emacs。 在不参与这两个传统文本编辑器之间的圣战的情况下，我可以安全地说，这两个编辑器都有许多用于 Web 编辑的增强功能。 因此，如果您已经是终端迷，请选择您喜欢的。 或者，如果这些不能满足您的需求，请尝试以下这些 Emacs/Vim 替代品。
这些解决方案中有任何一个是 Dreamweaver 或其他专有工具的功能对等复制品吗？ 当然不是。 它们并非旨在如此。 它们各自有自己的路线图和目标，以及自己的优势和劣势。 Web 设计是一个广阔的世界，有许多应用程序和许多方法。 花时间找到满足您需求的工作流程。 试用新工具，看看您喜欢和不喜欢它的哪些方面，并在评论中与更广泛的社区分享您的反馈。
您有兴趣阅读更多类似的文章吗？ 注册我们的每周电子邮件新闻通讯。
51 条评论