编者注:本文最初发表于 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 提供支持。作为现已停止开发的 HTML 编辑器 NVU 的少数衍生产品之一,BlueGriffon 是唯一积极开发的 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 条评论