Software Review: Dreamweaver CS5

Web designers should find much to like in the new version of Dreamweaver, which adds numerous features that make it easier to set up, test and troubleshoot websites. See the video demo for an overview of Dreamweaver CS5.

You’ll notice this from the moment you create a new site: Instead of clicking through a series of boxes answering questions about the site, you just give it a name and indicate the folder in which the files reside, and Dreamweaver lets you get started.

But that’s small potatoes compared with the new CSS inspection tools, which let you quickly zero in on portions of the web page that need adjustment. When you click on the new Inspect button in the document toolbar, and then mouse over the boxes on the page, color overlays make it easy to see which parts of each box are content (aqua), padding (lavender), borders (gray) or margins (yellow).

When you click on a box, you can use the CSS Styles panel to modify the padding, margins or other properties, or temporarily disable these properties entirely to see the effect.

CSS & PHP
Designers will also welcome Dreamweaver’s new ability to follow links from within the project, so you don’t have to test them in a browser. When in Dreamweaver’s Live View mode, you can control-click on a link to open the linked page—even external ones on the web—or choose the Follow Links Continuously option so that a simple click has the same result. What’s really cool is that when you click through to an external web page, you can view its source code and related files from within Dreamweaver—a great way to get under the hood of other websites and learn more about coding.

Designers who work with PHP-based content management system such as WordPress or Drupal will appreciate the new Dynamically Related Files feature, which lets you view and edit the files associated with your website.

Adobe has also reworked the CSS starter layouts introduced in Dreamweaver CS3. These layouts include sample CSS tags with comments explaining how they work and providing tips for their use. And the program now provides built-in references on HTML, CSS, Javascript and other web technologies from O’Reilly Books.

New BrowserLab
Along with the Dreamweaver upgrade, Adobe has introduced BrowserLab, an online service that lets you preview how your web design will appear in various browsers (see the video demo). It’s great in theory—it can emulate recent versions of Internet Explorer, Firefox (Mac OS X and Windows), Chrome and Safari, and you can view the emulations side-by-side or in an “onion skin” mode that lays one on top of the other. The emulation is actually a JPEG image representing a snapshot of the page that you can view online. The image has a maximum height of 4096 pixels, so extremely long web pages are truncated.

Dreamweaver includes an extension that integrates with BrowserLab—click on the Preview button in the BrowserLab panel, and the program automatically uploads the current page and opens a browser window so you can test it. You can even upload pages with frozen Javascript rollover effects to see how they appear.

However, its execution leaves a little to be desired. For example, when emulating the Windows version of Firefox, it assumes that font smoothing is turned off, so HTML-rendered text appears jagged. At first I thought this was a bug, but after inquiring with Adobe, I was told the developers consciously chose this as “the absolute baseline experience” (their words) for Firefox users on Windows. I’d like to see the option to preview pages as if font-smoothing were turned on. I also tried previewing a few pages that have a lot of sliced graphics with Javascript rollover effects and found that BrowserLab arbitrarily dropped some of the slices, making it appear that the graphics were missing.

CS Live, Business Catalyst
BrowserLab is one of the new CS Live services, which will be available for free for a limited time. Adobe has not yet determined final pricing.

Dreamweaver also integrates with another online product called Business Catalyst that Adobe quietly acquired last year. Aimed at small businesses, Business Catalyst provides easy-to-use online tools for building e-commerce sites, complete with product catalogs, shopping carts and back-end functions such as customer list management. It has no relation to Flash Catalyst, Adobe’s new Flash-design tool—at a press briefing in January, I was told that the naming was purely coincidental. What’s really interesting about Business Catalyst is that Adobe is enlisting designers as resellers—you can set up a site for a small-business client, and then get a percentage of the monthly fee that the client pays for the service.

Dreamweaver’s new Inspect mode uses color-coding to show which portions of a box are content, padding, margins and borders. You can then adjust margin or padding properties in the CSS Styles panel:

BrowserLab is an online service that lets you preview how web pages will appear in different browsers.
When emulating the Windows version of Firefox, it assumes that font smoothing is turned off, as you can see
from these screen shots of the Firefox (top) and Internet Explorer (bottom) previews. BrowserLab lets you view
magnify the pages up to 200 percent, which makes it easier to see the difference:

Stephen Beale has been writing about computer technology since before many current Adobe employees were born. His first computer was an Osborne 1 powered by steam turbines and illuminated by gaslight, though his memory is somewhat hazy on this point. He’s the author of seven books on computer applications in the graphic arts and a former news and reviews editor for Macworld.  He’s currently editor of a website for public relations professionals in health and medicine. For more information, see his website.

Other CS5 reviews:

InDesign CS5
Illustrator CS5
Flash CS5
Fireworks CS5
Flash Catalyst CS5
Back to Creative Suite 5 Overview

Adobe Evangelists, including Russell Brown, will be on hand during the HOW Design Conference,  June 6–9 in Denver, to demonstrate the new Creative Suite 5 tools. 



 

MORE RESOURCES FOR GRAPHIC DESIGNERS

* Live and On-Demand DesignCasts
* Visit MyDesignShop.com – Your comprehensive source of books, products and tools for designers
* Sign up to receive the HOW eNewsletter.

COMMENT