Website creation: Dreamweaver v open source

Summary:Adobe's Dreamweaver is widely used by web developers, but it won't suit Linux users or those on tight budgets. Free and open-source (FOSS) alternatives are available, but how do they match up?

Recent years have seen huge changes in internet use, and therefore in the challenges presented by modern website design. Software developers are consequently racing to catch up and provide website design, creation and management tools that address these changes.

The advent of cloud computing, eCommerce, Web 2.0, the growth of mobile apps and the introduction of HTML5 — a standard that's still under development — have all had a huge impact on web design and the tools to implement it. Not only do web developers now have to deal with browser interpretation issues, but they also have to build sites that smoothly adapt to a range of different form factors. Pages must present equally well on a smartphone or tablet screen, in either vertical or horizontal mode, as they do on a large, wide-screen, desktop display.

The entire business of website creation has changed and now encompasses a range of disciplines — graphic design, web design, programming, system integration, audio editing and video editing, for example. Larger commercial web sites use Content Management Systems (CMS) such as Drupal and Joomla! along with a variety of programming tools and languages — including PHP, Ruby on Rails and JavaScript — to provide custom features.

In this context WYSIWYG web site authoring tools, such as the earlier versions of Adobe's Dreamweaver, might seem to be outmoded. In this feature we compare Dreamweaver — once an application that dominated web site creation — to a variety of open-source tools available for web design.

Dreamweaver's background

Dreamweaver began life in 1997 as a product of Macromedia, a companyacquired by Adobe in 2005. Version 1.0, a Mac-only application, was released by Macromedia in 1997. A Windows version followed in 1998, and the last Macromedia version appeared in September 2005. In 2007 Dreamweaver replaced GoLive 9 — Adobe's WYSIWYG HTML editor of the time — in the Creative Suite family, and HTML5 support was added to Dreamweaver in April 2011. The current version is Dreamweaver CS6 (a.k.a. Version 12.0) and runs on Microsoft Windows XP (SP2), Vista (SP1) and Windows 7. It is Cocoa-native optimised for better performance on Mac OS and runs on Apple Mac OS X 10.6 or 10.7.

A full boxed copy of Dreamweaver CS6 costs £301 (or £291 to download); upgrades cost £94.51 (£91.33) from CS5.5, or £190 (£184) from CS3-CS5, or it can be had on subscription for £14.29 per month. Dreamweaver CS6 is also available as part of the £1,509 Design/Web Premium and £2,223 Master Collection suites, and via a £39 per month Creative Cloud annual subscription (an introductory £22.23 per month offer is available for owners of CS3 or later products until 31 August). All prices quoted are excluding VAT.

Dreamweaver features

Dreamweaver CS6 with the Designer workspace and the page Split button selected to show the page design view on the right and the corresponding code view on the left

One of the most attractive things about Dreamweaver — and perhaps the reason for its success — is its ability to pair a WYSIWYG page view with the parallel code view. Originally Dreamweaver only supported HTML, providing all the functionality needed to build web pages by inserting tables, forms, links, images, text and so on from menu selections. The HTML code behind any page feature created in the page view was — and still is — automatically generated, but Dreamweaver also allows for direct code editing.

Since acquiring Dreamweaver seven years ago, Adobe has expanded both its code-editing abilities and its automated features. By adding multi-format site-building tools, Adobe has eliminated the need to write different versions of website code to handle different layouts or form factors. Several tools for previewing and testing Dreamweaver code provide the necessary debugging functions.

Dreamweaver is a powerful programmer's editor/IDE, with support for a wide variety of web-related languages. It's also a page-element-based design editor with automatic page code generation and preview tools. This dual personality makes it attractive to both programmers and web designers.

Dreamweaver workspaces and views
Adobe uses the concept of a workspace comprising several viewing and control panels in a number of its products. The visibility, size and position of these panels are user-adjustable, and particular configurations can even be named and saved. Adobe also provides a number of preset configurations, suited to particular tasks, which can be selected using the Views drop-down menu.

Dreamweaver's Views menu lets you select from a number of task-related Workspace presets

Further flexibility for each tabbed page is provided by four buttons — Code, Split, Design and Live — on the top left of each page below the page tab, that allow those views to be selected for individual pages.

Creating a new document and Fluid Grids

Selecting the Fluid Grid Layout in the New Document window shows the settings for multi-format layouts

There are various options when starting a new site design, but one of the most likely selections is a multi-format site design that will be readable on a range of device types. Adobe's Fluid Grid Layout greatly simplifies the setup for such a site: initially you can set grid columns appropriate to a device, with rows and divided rows in the grid defined by creating Div tags (div for division) as containers for page content. Div tag widths can be manipulated in the page view and will snap to the nearest column widths.

An introductory Fluid Grids video is available from Adobe TV.

CSS & animation with CSS3 Transitions

The Media Queries panel lets you specify different CSS files for different display formats; media queries, which can be site-wide or page-specific, are generated automatically when the default presets are selected

New in Dreamweaver CS6, support for CSS3 Transitions allows animations to be created without recourse to JavaScript. For example, CSS3 transitions can be used to create rules that automatically expand sections of a page whenever the mouse cursor hovers over them. An Adobe TV video is available that explains this in greater depth.

Editing styles directly in the page view results in Dreamweaver automatically generating an appropriate CSS file.

Dreamweaver and code editing

The Coder or Coder Plus views rearrange the Dreamweaver workspace for code writing and editing

All the code displays in Dreamweaver use colour highlights to show which portions of the code are HTML, CSS, JavaScript and so on — an approach that makes it much easier to follow and debug code. During code editing Dreamweaver provides predictive suggestions as you type, so you don't have to thoroughly memorise all the required tags, attributes, functions and syntax. Rather than accurately type long property strings, you can type just a few letters and accept a suggestion, which saves time. Built-in error checking also makes coding a lot easier. The current version of Dreamweaver includes support for HTML5, CSS3, XML, ActionScript, ASP.Net C# & VB, JavaScript, JSP, PHP and ColdFusion.

Dreamweaver and page debugging

The Dreamweaver CS6 Multiscreen preview menu

The Multiscreen preview showing a web page rendered for the three main form factors — Phone, Tablet and Desktop

The live view in Dreamweaver CS6 uses the latest WebKit open-source browser engine to render web pages as they might appear when read by a 'generic' browser. For more accurate 'real-world' views of a page, Adobe provides an online service called BrowserLab, which is integrated with Dreamweaver. Once signed in, web designers can check the appearance of their site designs in a range of browsers via a temporary upload to the BrowserLab servers.

Topics: Apps, Open Source, Reviews, Software

Kick off your day with ZDNet's daily email newsletter. It's the freshest tech news and opinion, served hot. Get it.

Related Stories

The best of ZDNet, delivered

You have been successfully signed up. To sign up for more newsletters or to manage your account, visit the Newsletter Subscription Center.
Subscription failed.