Review: Adobe Dreamweaver CS5

Pros: Supports the popular WordPress, Joomla!, and Drupal content management systems; makes working with CSS easier; improved features for coding in PHP; more page preview options.

Cons: No HTML5 or CSS3 support out of the box.

Rating: 85 out of 100

The Web is all about change, and Web designers who fail to constantly adapt to change often need to find another line of work. The nature of Web sites has evolved drastically in the past few years. Sites with static pages, edited occasionally by hand, are fading fast. Today, many commercial and personal Web sites are built with content management systems (CMSs), which build pages dynamically by pulling from databases containing HTML, code, images, and other elements. Adobe has finally recognized that shift, and Dreamweaver CS5 is now relevant in the world of CMSs. At the same time, CS5 has goodies for long-time users who never create CMS-based sites, offering better and easier control over your site’s CSS than CS4. With an addition, it will satisfy people who want to use Dreamweaver to work with sites based on emerging Web standards, such as HTML5 and CSS3.

Support for Content Management Systems
Perhaps the biggest new feature in Dreamweaver CS5 is the ability to work with sites that are built on the foundation of a Web content management system (CMS), which are applications running on a Web server that create and manage Web content. The CMS manages and controls a dynamic collection of Web material and usually (but not always) assembles and creates Web pages that are served to the user “on the fly”; that is, the page is built and sent to the user when the user requests the page. Unlike static HTML, pages that come out of a CMS often don’t exist at all before the CMS software puts together the HTML, CSS, images, and scripts, and squirts them over the Internet to a user’s waiting Web browser.

Dreamweaver CS5 supports three of the most popular PHP-based Web CMSs: WordPress, Joomla!, and Drupal. (PHP is a programming language that typically is installed and runs on Web servers.) You can now use Dreamweaver to author, edit, and test content from any of these systems. You can view dynamically generated pages on a CMS-based site inside Dreamweaver; discover the related files used by the CMS and edit them in Dreamweaver; and filter down those files to find and work on the ones you need to make changes to your site.

Because Web pages served by a CMS are assembled from many different elements (often dozens or hundreds of PHP, HTML, JavaScript, CSS, and other types of files), you often don’t know exactly what the page will look like until you preview it in a Web browser. When you set up Dreamweaver’s connection to a CMS-based site, you specify the server on which the site is running. To view a page on the dynamic site inside Dreamweaver, you use Dreamweaver’s Live View, which was introduced in Dreamweaver CS4. Live View renders pages in the Dreamweaver document window using WebKit (the same page rendering engine found in Safari, Chrome and other standards-compliant browsers). In effect, it’s like having a Web browser built into Dreamweaver.

Figure 1. This WordPress page is being read from the server and displayed in Dreamweaver’s Live View. Click the image below for a larger version.

As part of loading the page in Live View, the program works with the supported CMSs to discover all the files that go into building the page. Dreamweaver then lists them all in the Related Files toolbar. You can then open any of the related files and edit it using Dreamweaver’s tools. Dreamweaver makes it relatively easy to do something that was previously quite difficult and required serious expertise in a particular CMS: find the particular related files you need. Because there can be so many files, Dreamweaver lets you scroll the Related Files toolbar and filter the file types it shows. You can even create custom filters to display files based on parts of their names.

Figure 2. You can use the Related Files toolbar’s Filter pop-up menu when you want to display and focus on certain file types. Click the image below for a larger version.

Pages generated by a CMS are based on templates that control the site’s look and feel. Because the content of the site is separate from its presentation, you can easily change the entire look of the site by modifying or switching the site’s templates. You can now use Dreamweaver to build and modify CMS templates, then test them with your sites.

Navigating Your Sites
In CS4, Live View couldn’t follow links, so you couldn’t easily explore your sites within Dreamweaver. That problem is fixed in CS5. Live View navigation allows you to interact with server-side applications and dynamic data. You can use the new Browser Navigation toolbar to enter a URL to inspect pages from a live Web server and edit pages you’ve browsed to, as long as they exist in one of your locally defined sites (Figure 3).

Figure 3. The new Browser Navigation toolbar has an address bar and allows you to easily browse your sites without needing to resort to a separate Web browser.

Better Control Over Your CSS
Two new features make it easier to write, modify, and work with cascading style sheets (CSS), an essential task with today’s sites. Dreamweaver was already no slouch in this department, so the new features are really icing on the cake.

The first feature answers the designer’s questions, “Just what does this CSS property do? Do I need it here?” CSS Disable/Enable lets you turn individual CSS properties off and on directly from the CSS Styles panel, allowing you to easily test and see the effect of the property. This works with and without Live View on; just click next to the property in the CSS Styles panel, which toggles an icon with the circle-and-slash No symbol.

The second new feature, CSS Inspect mode, works with Live View to let you visually display the CSS box model properties (Figure 4). You can see an element’s padding, border, and margin without needing third-party tools like Mozilla Firebug. Hover over an element on your page, and it displays with an aqua background, yellow margins, lavender padding, and gray borders. But that’s not all—as you hover over various parts of your document, the CSS Styles panel (in Current mode) dynamically updates to display the rules currently in effect. If the element is generated by JavaScript or a server-side script (as would be found in a CMS-created page), you can view and modify the CSS for an element that would not normally appear in either Code or Design views.

Figure 4. In CSS Inspect mode, hovering over an element on the page visually displays its CSS properties.

If you also turn on the Live Code feature (introduced in Dreamweaver CS4), the document window splits into two panes to show you the underlying code, with the content under your mouse highlighted in both panes. Live Code highlights changes as they happen, allowing you to quickly locate the dynamically loaded data or code changes triggered by JavaScript (Figure 5). The addition of CSS Inspect to Live Code is a nice enhancement to an existing feature.

Figure 5. When you have CSS Inspect and Live Code both active, hovering over a page element is reflected in both the code and rendered views. Click the image below for a larger version.

Making Codeheads Happy
If you’re a coder, there are several new features for you. Dreamweaver CS5 expands support of Subversion version-control servers so you can move, copy, and delete files locally, and then synchronize changes with the remote depository. If you don’t like the changes, you can now revert them from within Dreamweaver.

If you’re a PHP programmer, there are many new features aimed at you. The PHP code hinting has been greatly improved, so that as you type your PHP code and press Ctrl-Spacebar, Dreamweaver pops up function names and appropriate properties (Figure 6). If you need help with syntax, you can get documentation for the function you’re entering, provided from the PHP web site.

Figure 6. Improved PHP code hinting includes help with a function’s syntax and parameters. Click the image below for a larger version.

Dreamweaver has PHP code hinting presets for WordPress, Joomla! and Drupal.

Other Enhancements
One of the most vexing problems for designers is making sure their pages will display acceptably across different browsers and computer platforms. Most of us don’t have the resources to maintain a lab of computers with different operating systems and browsers so we can test sites in the myriad potential combinations. Adobe’s online service, BrowserLab, shows you how your page will be rendered by many different browsers and versions, under several different operating systems. Adobe BrowserLab uses Flash to display its emulated page renderings in a browser. You can choose which browser or browsers you’re emulating, and you can view rendered pages in a two-up mode, viewing them side-by-side to see the rendering differences.

Dreamweaver CS5 can now preview pages directly to BrowserLab, just as if it were any other browser. When you preview to BrowserLab, Dreamweaver sends the page to the service, which then renders the page as it would appear in whatever combination of browsers and operating systems you specify.

Dreamweaver has always had starter layouts that you can use as jumping-off points for your own designs, but they’ve been improved in CS5 to use the latest CSS best practices and boast new, easy-to-understand classes and structures. The text on the starter pages now explain more about the document’s structure and how the CSS works, and when you view the code, you’ll find that it’s heavily commented with explanations of each element.

Dreamweaver CS4 introduced Ajax widgets based on Adobe’s Spry framework, which uses JavaScript, HTML, and CSS to provide interactive page elements, such as sliding panels, animated menus, and the like (Figure 7). You can add these effects to your sites in Dreamweaver, even if you know nothing about JavaScript. Besides Spry, Dreamweaver CS5 now supports elements from other popular JavaScript frameworks such as jQuery. You download and install them into Dreamweaver with the free Adobe Widget Browser, an Adobe AIR application that allows you to browse widgets that have been packaged for Dreamweaver.

Figure 7. You can use the Widget Browser to find and add new interactive elements for your Web pages. Click the image below for a larger version.

Keeping Up with the Standards-Based Joneses
One of my initial disappointments with Dreamweaver CS5 was its conspicuous lack of support for two up-and-coming Web standards: HTML5 and CSS3. Each of these standards are far from complete, but they are workable for certain browsers, and many designers are interested in using, or at least learning, their capabilities. The desire to get up to speed with these standards has been spurred by the ongoing disagreement between Apple and Adobe about Flash support on the iPhone and iPad, with Apple asserting that HTML5 is robust enough to replace Flash, and Adobe’s vehement dissent. Regardless of either side’s claims, HTML5 is here to stay, and Dreamweaver needs to be able to create and work with it.

After Dreamweaver CS5 shipped, Adobe released the free HTML5 Pack, which the company describes as a “technology preview” for working with HTML5 and CSS3 in Dreamweaver. It’s implemented as an extension, installed with the Adobe Extension Manager. . Once installed, it adds code hinting for HTML5 elements; updates the code hinting in existing HTML tags to align them with the HTML5 specification; adds code hinting for many CSS3 specifications; provides a couple of HTML5 starter layouts; and improves Dreamweaver’s Live View so that it can better render pages made with the new standards.

The HTML5 Pack is oriented mainly toward coders. For the most part, Dreamweaver hasn’t been updated to integrate the new standards into the program’s graphic interface. For example, you can’t insert a movie file using the HTML5 <video> element in the same way that you might insert other media types from Dreamweaver’s Insert menu. Instead, you can insert the tag in the Code view, and Dreamweaver will help you write the code by showing you the tag’s attributes and auto-completing the code so that you don’t have to type all of it.

Despite the improvements in Dreamweaver’s Live View, the program won’t play media files in HTML5 documents; to properly preview these files, you must use an HTML5-compliant browser. Still, the HTML5 Pack allows Dreamweaver users to take advantage of these emerging standards (Figure 8).

Figure 8. This HTML5 document contains many new tags that are part of the new specification; here, you can see hgroup, nav, section, article, figure, and video. Click the image below for a larger version.

Your Upgrade Decision
Pricing for Dreamweaver hasn’t changed: It costs $399 for new purchasers and $199 for upgrades from Dreamweaver 8 or later, or GoLive CS or later. Upgrades from the standalone product to the CS5 suite are more complex, ranging from $599 to $1,499, depending on which version of the suite you want. See the Adobe Web site for complete details.

If you currently have Dreamweaver CS3 or earlier, the decision to upgrade should be an easy one. The improvements in CS4, plus the new capabilities of Dreamweaver CS5, should increase your productivity enough to pay for the upgrade cost. On the other hand, if you have Dreamweaver CS4, don’t work with PHP, have no need to design for sites backed by a CMS, and are already a whiz with CSS, then you may want to give this version a pass.


Posted on: June 10, 2010

4 Comments on Review: Adobe Dreamweaver CS5

  1. I agree with many of your points – especially about CS3 users – the pay off is huge for them.

    However, I do think the CS5 CMS integration is overstated by many designers who use Dreamweaver. While I think Dreamweaver users who were already familiar with PHP based CMS systems (Drupal, Joomla, WordPress) and setting up L/MAMP etc on their machines/servers will enjoy it, it is really is not making those who do not know PHP – CMS experts.

    Systems like Konductor CMS have already integrated into Dreamweaver (CS3, 4 & 5) without the need to use PHP and those who know PHP are often not working in Dreamweaver anyway.

    My 2 cents.


  2. Comments seem to be well related to the wide world.

  3. Having upgraded – i am annoyed by many little changes.
    In code view – highlight a line, hit Shift+Tab – and it deletes the line instead or outdenting it one tab – highlight multiple lines and it works fine.
    And to centre align a single paragraph you have to go through a number of clicks on the top menus, rather than using the properties bar for basic text alignment – stupid and ill thought out.

  4. There are some interesting points in time in this article but I don’t know if I see all of them center to heart. There is some validity but I will take hold opinion until I look into it further. Good article, thanks and we want Palio more!

Leave a comment

Your email address will not be published.