Dreamweaver CS3 Review
A slightly different version of this review of Adobe Dreamweaver CS3 first
appeared at CreativePro.com.
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.
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.
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.
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.
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. You can download a fully functional, 30-day free trial
version, so you
can give it a whirl.
