*** From the Archives ***

This article is from April 25, 2007, and is no longer current.

Review: Adobe Dreamweaver CS3

Adobe’s massive Creative Suite 3 launch brings together the programs formerly owned by Macromedia, which Adobe acquired in 2006, with Adobe’s own suite of design and Web tools. In CS3, two Adobe programs, GoLive and Image Ready, have been replaced by Dreamweaver CS3 and Fireworks CS3.
In the process of bringing Dreamweaver into the fold, Adobe has made some welcome changes to the program, but they are mostly evolutionary, not revolutionary. While Dreamweaver continues to be the tool of choice for professional Web designers, some owners of the previous version, Dreamweaver 8, may strain to justify the upgrade cost for Dreamweaver CS3.
Getting Started
To run Dreamweaver CS3, you’ll need Windows XP or Vista, or Mac OS X 10.4.8 or later. Mac users will welcome the news that Dreamweaver is now a Universal binary, which means that it runs natively on both PowerPC and Intel-based Macs. In my informal tests, I experienced a noticeable increase in performance with Dreamweaver CS3 versus Dreamweaver 8 running on the same Intel-based MacBook.
I installed Dreamweaver CS3 as part of the CS3 Web Premium package. Installation was uneventful, though it took quite a while; approximately 45 minutes on a 2.5 GHz Dual G5 Power Mac (and a similar time on my Windows machine and MacBook, which both have Core 2 Duo processors). On both Mac and Windows, you must use Adobe’s Setup application; you can’t simply drag a folder to your hard disk on the Mac, as is now the standard method of installation. If you ever want to uninstall one or more applications in the package, Adobe warns that you must use the Setup program, because simply dragging applications to the Mac Trash won’t completely accomplish the job.
For the most part, Dreamweaver CS3’s interface looks the same (Figure 1). There’s been no facelift to make it similar to its new siblings, such as Photoshop CS3.

Figure 1. Unless you have an eagle eye for user interfaces, you probably won’t notice much difference in Dreamweaver CS3’s look. To see a larger version, click on the image.
Working Well With Others
However, Dreamweaver CS3 does integrate well with Photoshop CS3. You begin by opening an image in Photoshop and copying all or a portion of the image. (A portion can be a selected part of the image, or one or more image layers.) Then you switch to Dreamweaver and paste. Dreamweaver asks how you want to save your image (Figure 2), then places it on your Web page. Dreamweaver remembers the path to the Photoshop source file; you can reopen it for modifications in Photoshop by pressing Command-double-click (Mac) or Control-double-click (Windows). This copy-and-paste integration process has also been extended to Fireworks CS3, though the older method from Macromedia Studio 8 or before still works.

Figure 2. The new Image Preview dialog appears when you paste images into Dreamweaver. It lets you choose the image’s format (GIF, JPG, PNG) and crop or scale it before it’s placed onto your Web page. To see a larger version, click on the image.
Dreamweaver uses the copy-and-paste method to place graphics from other programs besides Photoshop and Fireworks. This is where I found a bug that’s annoying, but not crippling. On the Mac version, when you copy and paste a chart from Microsoft Excel 2004, the resulting image is huge because it comes in at 300 dpi, rather than at screen resolution. The easy workaround is to use the scaling controls on the File tab of Dreamweaver’s Image Preview dialog to correct the size of the image, then place the graphic into Dreamweaver. The Windows version of Dreamweaver CS3 doesn’t exhibit the bug.
For the GoLive user looking to make the transition to Dreamweaver, Adobe provides a GoLive extension that will help translate your site structure to a format Dreamweaver can import and manage. The extension also migrates site assets, such as templates and snippets.
Design It With Style
Dreamweaver 8 was the first version to wholeheartedly embrace the use of CSS for styling and layout, and Dreamweaver CS3 makes using CSS even easier. A big hurdle for designers in using CSS for layout has been getting started; the CSS that produces good-looking layouts is often complex and requires a deep knowledge of how CSS works. Adobe has solved this problem by providing 32 layout templates with a variety of design elements. For example, you can choose between templates with one, two, or three columns, with fixed or elastic column widths, which expand or shrink to fit the width of the browser window. Many templates offer additional design elements, such as headers, footers, and sidebars (Figure 3).

Figure 3. In the New Document dialog, you have your choice of 32 useful CSS templates. Each template has a preview detailing the template’s features. To see a larger version, click on the image.
The templates are available from the New Document dialog, so it’s a snap to create a new, entirely CSS-based, page. Pages come with sample text in columns and sidebars, ready to be replaced with your own content (Figure 4). Using the unified CSS panel introduced in Dreamweaver 8, you can edit the style definitions to modify the layouts.

Figure 4. This is the page created by the template selected in Figure 3. All you need do is replace the sample text to get a completely CSS-compliant page. To see a larger version, click on the image.
A big advantage of the new CSS templates is that they provide good results regardless of your CSS expertise. If you want to work entirely in Design mode, you can just choose a layout and start building your page. If you’re a codehead and want to make more extensive modifications to the layouts, switching to Code view reveals that the templates are excellently and extensively commented, often with tips that explain how the templates work and how you can customize them (Figure 5).

Figure 5. Here’s the same page again, this time in Split view, so you can see the comments in the code with tips and explanations of the styles. To see a larger version, click on the image.
Style Management
Managing CSS styles has improved, with the ability to easily convert inline styles (styles applied to a single tag) to rules. This lets you reuse the style without inserting the style definition again. You can convert an inline style to a rule that applies to all tags of a given type, to a CSS class, or to a CSS selector. You can also choose the destination of the new rule, either in the head of the current document, or in an external style sheet.
Speaking of external style sheets, it’s now much easier to move internal styles into external style sheets. You can also move rules between external CSS files, which greatly simplifies the task of managing the styles for your site. Finally, within a single style sheet, you can now rearrange the order of the styles by dragging style names in the CSS panel, making it easy to group like styles together and to determine which style rules take precedence.
More CSS Help
Because using CSS can be tricky, Dreamweaver CS3 provides two new tools to help you catch and solve problems. Browser Compatibility Check combs through your CSS for possible rendering bugs, checking it against an internal database of Web browsers. For each bug that it finds, Dreamweaver provides an estimate of the bug’s severity and shows which browsers will have problems rendering the page (Figure 6).

Figure 6. Running the Browser Compatibility Check on this Web page tells us that the page will probably have rendering problems in Internet Explorer 6 for Windows. To see a larger version, click on the image.
You’ll also get a link to a discussion about the bug on the other new resource, the Adobe CSS Advisor Web site. This site contains a community-created database of known CSS-related problems and their solutions (Figure 7). You can search by tags, browser, or CSS property. When you find your problem, you can then see how other people were able to solve it.

Figure 7. A click in the Browser Compatibility Check window brings us to the solution for our CSS problem. To see a larger version, click on the image.
Ajax Made Easy
Many modern Web sites sport interactive features that reside on the Web but feel to the viewer more like desktop applications. These sites use a combination of JavaScript, XML, and requests to the server that are collectively called Ajax (Asynchronous JavaScript and XML). These so-called Web 2.0 applications provide rich user interfaces inside Web browsers and work well with data on the server.
It requires serious knowledge of JavaScript to build these user interfaces, which is why in 2006 Adobe created the Spry framework, a JavaScript and CSS library that allows designers to more easily add Ajax functionality to their Web sites, with a minimal amount of JavaScript knowledge required. Dreamweaver CS3 cuts that JavaScript-savvy requirement to zero with the addition of Spry widgets, Spry effects, and Spry data sets.
Spry widgets are user interface elements that you can place on your pages with a click. Initial elements include a menu bar and three ways to display a large amount of content in a small space: tabbed panels, a collapsible panel, and an accordion panel (Figure 8).

Figure 8. This Spry tabbed panel is a good way to pack a lot of content into a small space. You can see in the Property Inspector how you can add more tabs by clicking the plus button. You then name the new panel in the document window. To see a larger version, click on the image.
You can easily make Spry widgets match your site’s style by editing the widget’s CSS file. There are also a set of four Spry widgets that ensure the user properly fills out form elements, including text fields, text areas, checkboxes, and drop-down menus.
Spry effects let you add visual flash to an HTML element on your page, without resorting to, well, Flash. You can use Spry effects to highlight the element, make it appear or disappear (Figure 9), and create an animated transition. Effects are easy to apply — just select the element, then apply the effect in the Behaviors panel. Among other effects, you can make elements appear and fade, grow and shrink, highlight, or slide on and off the page.

Figure 9. After you select an image, applying the Appear/Fade Spry effect brings up this dialog so you can adjust the effect’s parameters.
Spry data sets let you and your site’s viewers work with XML data that’s stored on the server. For example, you can add a Spry table that gets its content from the server and displays it as a table that the user can sort by clicking the table’s headers. Or you can set up a table that updates data somewhere else on your page when the user clicks on an item in the table. For instance, imagine a list of movie titles in a Spry table. When the user clicks on a particular title, the movie’s synopsis appears below the table.
You’ll be able to download and install new Spry elements with the Adobe Extension Manager as they become available.
Helper Programs
When you install Dreamweaver, two other programs are installed: Adobe Bridge CS3 and Adobe Device Central. Bridge works with most of the CS3 components and acts as a central repository for project files, such as graphics. The Bridge window (Figure 10) shows thumbnails of your images, and you can drag images from Bridge and drop them on your Web pages in Dreamweaver. Bridge provides many tools for organizing your project files, including searching, sorting, and keywords. You can also use Bridge to search for, preview, and purchase stock photos from online vendors. If you’re reasonably organized, you could do without Bridge. But for the rest of us, Bridge is convenient, and it’s free.

Figure 10. The Adobe Bridge window lets you browse your computer in the left column, shows you thumbnails of your content in the center, and details of the item you have selected on the right. To see a larger version, click on the image.
Device Central, on the other hand, promises more than it delivers, at least in terms of Web pages. It’s meant to help you design pages for mobile devices, such as cell phones. It does this by keeping a database of device profiles. Theoretically, you should be able to preview a Web page you’re working on in Dreamweaver to Device Central and see how your page would render on the device. And at first glance, that’s how it works; you create a page in Dreamweaver and preview it in Device Central as you would preview in any other browser, with the content appearing on the screen of the phone (Figure 11).

Figure 11. Device Central gives you a preview of your Web page on a mobile device — but you can’t trust it. To see a larger version, click on the image.
The devil in the details is that Device Central doesn’t maintain separate emulators for all of the different Web browsers built into the many available phones. Instead, Device Central uses a single rendering engine, Opera Small Screen Rendering, to preview Web content for all devices, which may look wildly different from how the content renders on a particular phone. So at best, you have only a vague idea of your content’s appearance. Another big problem is that Device Central doesn’t include profiles for any smartphones, such as Blackberries, Treos, or Windows Mobile phones, which are the very phones most people use to surf the Web on the go. Here’s hoping that Adobe updates Device Central soon to be useful for Web designers who want to deploy their sites on mobile devices. Right now it’s better than nothing, but not by much.
Making Your Upgrade Decision
If you’re new to Dreamweaver CS3, it costs $399. Upgrade pricing for Dreamweaver alone is simple ($199 upgrade from Dreamweaver MX or later) or complex as part of the CS3 suite. (Upgrade prices range from $399 to $1,999, depending on which products you’ve previously owned. See the Adobe Web site for complete details.)
Without a doubt, Dreamweaver CS3 remains the premiere Web design program, and owners of Dreamweaver MX 2004 or earlier should upgrade as a matter of course. Dreamweaver 8 owners have a tougher decision. If you do a lot of front-line Web design and building sites from scratch, the upgrade to CS3 makes perfect sense, because the new CSS templates, CSS management, and Spry widgets will save you lots of time and quickly justify the upgrade cost.
If you’re involved more in day-to-day site maintenance, I recommend hands-on experience with Dreamweaver CS3 to help you decide whether the new features are worth the upgrade price given your particular workflow. Adobe says that a fully functional, 30-day free trial version will be available on its site for download by May or June, so you can give it a whirl then.
 

  • anonymous says:

    I design mainly for print. It was nice to have a cogent overview of the new features here on a website I have grown to like over the years. I’m especially excited about the CSS in DWCS3.
    Could have saved myself a few hours work if I’d know about the CSS templates sooner :(

  • Anonymous says:

    I think Dream Weaver CS3 Sucks. I used Macromedia Dream Weaver MX for many years and it was fast and effective. CS3 is a mess. It even enters script in your pages which prevents the pages from working correctly.

    When it was with Macromedia it was fine but Adobe killed a good product.

  • Anonymous says:

    With the release of Dream weaver CS3,now handling CSS is quite easier now for web-designers like me.I’m personally using it & have got a good experience in using this suit.But surely it helps me in solving my Ajax problem.

    Macken
    cordless electric carving knife

  • Anonymous says:

    the most shocking software in the world

    alex chen hopwood hall middleton rochdale

  • >