While humans automatically structure data when reading a website, programs like web crawlers or screen readers have to rely on special labeling in order to grasp sematic relationships. This additional information can be embedded in HTML code through a corresponding markup for structured data. Website owners have four formats at their disposal for this task: Microformats, RDFa, Microdata, and...
Macromedia released the first version of Dreamweaver in 1997 for the Mac OS 8 operating system. Only three months later – with version 1.2 – the Microsoft Windows version came out. Ten years later the web development software was taken over by Adobe and added to the Creative Suite (now replaced by the Creative Cloud) to take over for the GoLive editor. Those looking to use this extensive application for creating and designing responsive web applications either have to sign up for a single product subscription or rent the complete Creative Cloud package. This means that Dreamweaver software is primarily used by professionals.
This guide first explains the specific features of the Adobe programme and then presents interesting, mostly free alternatives to Dreamweaver.
How Adobe Dreamweaver works
Dreamweaver scores points with its typical Adobe interface that users of Photoshop, InDesign, Illustrator, and other Creative Cloud programs are already familiar with. The range of functions for the HTML editor, which is the measure of all things in terms of WYSIWYG, has grown considerably since the publication of the Creative Cloud, turning code writing into child’s play. For example, it is possible to review all changes in real-time without reloading the page or to edit CSS code directly in the HTML file using an inline editor. The implemented coding engine also helps you write clean code by automatically completing snippets with Emmet support, creating automatic indents, and coloring related elements. In addition, Dreamweaver offers the following features:
- Code validation
- Support for CSS processors (Sass, Less)
- Support for PHP (from PHP 5.4)
- Multiple cursors for the simultaneous writing and editing of different code lines
- Integrated CSS framework Bootstrap for responsive web design
- Access to license-free photos and vector graphics from Adobe Stock
- Easy access to your own graphics, designs, and other assets on the Creative Cloud
What free alternatives to Dreamweaver are there?
If you have access to all of the products on the Creative Cloud and have tried out Dreamweaver, you’ll know that not much is wrong with Adobe software. But for developers with a limited budget there are good Dreamweaver alternatives that are free to use. We will present five interesting options in the following paragraphs by not only presenting their features and any peculiarities, but also discussing the differences and similarities to Adobe’s software. The usability of the different available tools will be discussed in detail.
The Composer/Nvu successor BlueGriffon from Disruptive Innovations uses the rendering engine Gecko, which is written in C++ and used mostly in the web browser Firefox as the basis for the implemented WYSIWYG editor. This makes it possible to create and edit sites using HTML 4, HTML 5, and XHTML, making it possible to examine them during the creative process by opening a preview version. The user interface is available in 20 languages including English, Spanish, German, and French. BlueGriffon runs on the newer Windows systems (from Windows 7 and on) and macOS systems (from 10.8), as well as Linux distribution Ubuntu (from 16.04) – which Dreamweaver does not. The web editor also includes the following features:
- Easy integration of HTML5 forms, videos, and audio files
- CSS editor (allows 2D and 3D transformation techniques)
- SVG editor
- Font manager for FontSquirrel and Google Fonts
- Syntax highlighting and autocomplete
- Customisable menu options and keyboard shortcuts
- Accessibility through ARIA (Accessible Rich Internet Applications)
|✔ Controlled by HTML5||✘ Missing PHP support|
|✔ Own SVG editor||✘ Complex user interface|
|✔ High compatibility|
|✔ Many available extensions|
The web developing software KompoZer originated in the Mozilla project Nvu and so is based on the Gecko engine. At first, KompoZer provided small optimisations of the Nvu software, but it eventually became a stand-alone web editing program under the free licenses GNU GPL (GNU General Public License), GNU LGPL (GNU Lesser General Public License), and MPL (Mozilla Public License). The team from Mozilla stopped development in 2010, but the software is now usable on all common Windows and macOS systems as well as Ubuntu (version 14.04 or higher). Now more than 20 different language packs exist for KompoZer, including German, English, French, Italian, and Spanish.
Even if KompoZer isn’t one of the Dreamweaver alternatives that can keep up with the function range and complexity of the Adobe program, the open source application offers users some features that allow for the design of professional web pages:
- High-performance WYSIWYG editor that enables easy switches from code to preview
- Integrated CSS editor including import function for previously existing style sheets
- Customisable menu options
- Autocorrect and syntax highlighting
- Tabs for simultaneous work on multiple pages
- Form Wizard
- Integrated markup cleaner that checks projects for W3C compliance
- FTP site managers including drag-and-drop function for media files (i.e. pictures)
The program also has a handful of useful extensions – like, for example, a link checker that can be used to check the validity of integrated links. As a possible Dreamweaver alternative, KompoZer is still missing support for PHP as well as for new web standards such as CSS3 and HTML5. All download versions for the different platforms as well as detailed documentation can be found on the official project website. You also have the opportunity there to report detected program errors or to submit suggestions for new functions.
|✔ Quick-working WYSIWYG editor with preview function||✘ Missing PHP support|
|✔ Available in over 20 languages||✘ No more new development|
|✔ Program files only a few MB||✘ Doesn’t support modern internet standards like HMTL5 or CSS3|
In this Dreamweaver alternative you can see previews of your code in the standard form, not in the programme. You also have the option to view the preliminary results of your web project at any time in Google Chrome. For this you have to install the Chrome web browser first, if indeed you don’t have it already. Three fundamental features of Brackets enhance the development tool for modern web editors:
- Support of preprocessors: The code editing in this free alternative to Dreamweaver is not only fast, but the possibility to use Less and SCSS files – thanks to the support of the CSS Less and Sass preprocessors. With their simplified syntax, which Brackets knows how to deal with, you can write and edit your stylesheets even faster.
|✔ Permanent development through the community||✘ Missing PHP support|
|✔ Supported by CSS preprocessors||✘ Limited functions in the Linux version|
In addition to its broad range of supported programming languages and platforms, the web editor also contains the following core features:
- Deployment wizard: With its deployment wizard, Aptana Studio offers a tool that supports uploads, downloads, and synchronization of your web project files via FTP, SFTP, and FTPS.
- Version control: You can easily link your web project with Git and ensure the secure, collaborative work on the source code that is possible online at GitHub.
- Integrated command line tool: A built-in terminal allows you to execute system commands directly in Aptana Studio.
- Flexible development environment: You’re free to configure Aptana Studio however you want, and expand the basic options by adding scripts for standard commands and shortcuts to get reach optimal convenience.
Thanks to its close association, this free alternative to Dreamweaver also offers the basic functions of Eclipse. Among which are included a visual syntax highlighter, intelligent code completion, and the automatic closing of opened tags. This also includes support in Aptana Studio for the newest web standards like HTML5. Installation files for all platforms as well as the Eclipse plugin can be found on the official homepage. On GitHub, the source code for core components as well as various plugins for the web editor are available for download.
|✔ Supports diverse programming languages like Perl, Python, PHP, and Ruby||✘ Numerous dependencies on Java, Git, and Eclipse (in the plugin variant)|
|✔ Version control with the help of Git||✘ Installation only works with Node.js installed, which is not indicated by Aptana|
|✔ Supports the newest web technologies||✘ User interface is very complex|
- Integrated package manager: Atom operates with its own package manager (aptly named the Atom Package Manager) that makes the integration and installation of packages a breeze.
- Automatic completion: Depending on which programming language you’re working with, Atom offers suggestions for the completion of your code. These recommendations can be added at the push of a button. You can also expand the range of possible suggestions with your own code snippets.
- Syntax highlighter: For installed programming languages, the Dreamweaver alternative offers a syntax highlighter for the most important rules. These will automatically be colored if you choose to use the tool.
- Version management: Atom, as a GitHub application, implements the version control tool Git as one would expect. This helps you keep track of changes to your web project. For example, you can set the tool to automatically highlight any altered lines for visual tracking.
- File system browser: File system browsers allow you to easily search for and open individual files, a complete project, or multiple projects, all in one window.
- Command palette: With a simple key combination, you can access a search mask to find available commands and easily access them.
In addition to the high user comfort, which considerably simplifies coding, it’s the extensibility of Atom that makes the modular web editor a top Dreamweaver alternative. More than 90 packages as well as 13 UI themes (as of December 2016) already gives the standard installation a large and diverse range of functions including the previously mentioned excellent language compatibility. If you’re missing a feature you can take a look at the extension directory on Atom’s homepage: Here you’ll have access to thousands of packages and themes developed and released by the user community. For example, you can find a package that complements the web editor with a live preview function of your HTML code.
Metrics and exception reporting are two debatable core packages. The first transmits data to Google Analytics and the second directs unusual program operations (crashes, errors, etc.) to the Atom developer team via bugsnag.com. Even if both packages are only intended to improve the Atom software, it is recommended to deactivate them in the settings. You can download current and old versions of the GitHub program for Windows, macOS, and Linux (64-bit Ubuntu, Debian, Fedora) on the official homepage or from the GitHub registry.
|✔ Highly expandable||✘ Questionable (though easily deactivated) standard packages for data gathering|
|✔ Integrated solutions for package management and version control|
The best Dreamweaver alternatives from the open source area: Conclusion
Adobe Dreamweaver offers novice programmers a complete, comprehensive package for the developments of websites that, thanks to the numerous features and direct connection to the Creative Cloud, undoubtedly offers you everything you need to create a successful and artistically designed website. But it comes with a high level of complexity and continual costs, not-to-mention that the Adobe software is not exactly a resource-saving solution. Experienced developers usually rely on editors that offer them greater freedom.
The open source alternatives to Dreamweaver presented in this guide find the middle ground between the modular principle of the Adobe program and the blank programming by means of an ordinary text editor. The main reason is to find the freely available programme code that gives open source web editors high levels of flexibility. You can use a program like Atom either as a minimalistic editor with syntax highlighting and code auto-completion or as a full-fledged development environment that is only a few points behind the commercial Dreamweaver.
On the other hand, you can’t expect a similar level of stability out of a free solution as the Adobe product promises. Professional software like Dreamweaver is constantly being developed, keeping it prepped for the current web standards. Often times – as is the case with Dreamweaver – this software is also a comprehensive package that has matured over decades. If you come across problems with the software or need help with a project, the professional software has competent support at the ready, as do some open source services such as the paid version of BlueGriffon. But for free alternative solutions you need to rely on the community for help – whether you’re asking for help with technical problems with the program or just need assistance with the overall development.
|available for||HTML5 and CSS3||PHP||Special features|
|Atom||Windows, macOS, Linux||yes||yes||Integrated package manager|
|BlueGriffon||Windows, macOS, Ubuntu||yes||no||SVG editor, commercial additional features|
|KompoZer||Windows, macOS, Ubuntu||no||no||Small file sizes|