编者注:本文最初发表于 2016 年 3 月,并已更新以反映最初推荐的几种工具的变化。
就在几年前,互联网上的几乎每个网页在某种程度上都是通过手工精心设计的。这很困难,而且在 CSS 真正流行起来并在大多数常见浏览器中得到良好支持之前,通常需要通过以从未真正设想支持的方式使用 HTML 表格来拼凑布局。
虽然一些设计师开发了完全基于手动编辑原始 HTML 文件的工作流程,但 WYSIWYG(所见即所得)编辑器开始成为数百万业余和专业设计师的赋能工具,他们不知道,或者至少没有掌握超文本标记语言的艺术。
CoffeeCup、HotDog、FrontPage、GoLive 和许多其他类似的产品充斥市场,许多基于 Web 的 WYSIWYG 编辑器也应运而生。其中更成功的是 Macromedia(后来的 Adobe)Dreamweaver,它多年来一直是我个人的最爱之一。
这些网页创作工具不仅仅是关于 WYSIWYG 编辑;即使对于那些熟悉直接创作标记语言的人来说,这些工具也提供了模板控制、文件管理以及简化创建功能代码所需时间的优势。
但正如这些有用的编辑器正在扩大网页创作的访问范围一样,其他事情也在发生。Drupal 和 WordPress 等内容管理系统(以及它们之前的许多其他系统)取代了普通内容生产者编辑原始 HTML 的需求。您可以轻松制作一个功能齐全的网站,而无需担心底层标记。
那么内容管理系统的兴起是否改变了网络?当然。它是否消除了手动编写 HTML 的需求?嗯,对于某些人来说,是的。但是,随着网络从内容集合发展成为应用程序平台,标记语言的应用也出现了许多新的机会。每个软件即服务应用程序、每个社交媒体网络,甚至许多移动应用程序都依赖 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 世纪可 hack 的文本编辑器”。由 GitHub 开发,它开箱即用地支持 HTML 和 CSS,并提供许多其他插件。
- Brackets 是由 Adobe 开发的基于 JavaScript 的文本编辑器,用于网页设计 和前端开发。它标榜其内联编辑器、实时预览和预处理器支持功能,使在浏览器中进行网页设计更加容易。
- Vim 或 Emacs。在不参与这两个传统文本编辑器之间的圣战的情况下,我可以肯定地说,两者都有许多可用于 Web 编辑的增强功能。因此,如果您已经是终端爱好者,请随意选择。或者,如果这些不能满足您的需求,请尝试以下 Emacs/Vim 替代品之一。
这些解决方案中有任何一个是 Dreamweaver 或其他专有工具的功能对等复制品吗?当然不是。它们的设计目的不是那样。它们各自有自己的路线图和目标,以及自己的优点和缺点。网页设计是一个广阔的世界,有许多应用程序和许多方法。花时间找到满足您需求的工作流程。试用一个新工具,看看您喜欢和不喜欢它的哪些方面,并在评论中与更广泛的社区分享您的反馈。
您是否有兴趣阅读更多类似的文章?注册我们的每周电子邮件新闻通讯。
51 条评论