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.
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 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 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
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
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.