Dreamweaver CS3 Review
A slightly different version of this review of Adobe Dreamweaver CS3 first
appeared at CreativePro.com.
Dreamweaver slides easily into Adobe's orbit with a solid
upgrade that begins the process of integration with Photoshop, makes using
CSS even easier, and puts Web 2.0 features in the reach of any designer.
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.
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.
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.
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.
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.
