Home
Subscribe
KSDD.com
First Look: Adobe Dreamweaver CS3
The old dog has a few new tricks
With the announcement of the brand spankin' new CS3 line, we now know that Dreamweaver has replaced GoLive as the visual Web editor of record for Adobe's bundled products. So what can long time and first time users alike expect from Dreamweaver CS3? Let's peel back the curtain and take a gander at some of the new and notable items in Dreamweaver CS3.
In a nutshell, most of the noticeable additions to Dreamweaver CS3 can be placed in one of two categories: Ajax and CSS. And then there's a couple points we'll just throw on the miscellany pile. So let's break things down thusly:
First, the random hits
The big question for both Mac and Windows users alike concerns the latest and greatest hardware and software. Mac users will no doubt rejoice in knowing that Dreamweaver CS3 (along with the rest of the CS3 suite, naturally) will now run natively on Intel Macs (and PowerPC ones, in keeping with the promise of Universal Binary applications). Windows users looking to move to Vista might also be pleased to hear that Dreamweaver (again, along with the rest of the CS3 line) is ready to roll on the new OS from Redmond.
With the system requirements out of the way, you may be wondering what Dreamweaver CS3 looks like now that it's an Adobe product. The answer is that it looks pretty much exactly the same as it did when it was a Macromedia product (fig. 1). No facelift, no "CS3 look" as pioneered in the Photoshop CS3 Public beta and extended to the former Macromedia Flash. Is that good or bad? Depends on what you're expecting, of course. Long-time Dreamweaver folk don't have to re-train themselves, but those who may be coming from GoLive might be frustrated at having to learn a different interface. While the lack of an interface refresh may a debatable point, Dreamweaver CS3's first law ("respect the code") is definitely still the Prime Directive. Furthermore, standards-based design, a hallmark of previous versions of Dreamweaver, is not only retained but extended upon, as we'll see shortly.
Figure 1
One item to mention before we dive into the CSS and Ajax portions of our program today is how Photoshop CS3 and Dreamweaver CS3 work together. It goes a bit like this: copy a portion of your Photoshop image ("a portion" could mean a single layer or a section spanning multiple layers), switch over to Dreamweaver, and paste it in. Dreamweaver will then ask you how you'd like to save your image (fig. 2). Dreamweaver notes the original source file and allows you to edit the original at any time directly through the selection of the optimized image you made by copying a portion of the source image.
Figure 2
Ajax—it's not just for programmers anymore
Adobe's announcement of an updated version of the Spry framework back in December was somewhat overshadowed by the release of the Photoshop CS3 public beta around the same time, but for those who were paying attention, you now know what Adobe was hinting at back then. The Spry framework (which, to be brief, is a designer-friendly way for mere mortals to create Ajax-based sites) is deeply embedded in Dreamweaver CS3 (fig. 3), and provides several categories of JavaScript-y goodness.
Figure 3: The Spry Framework gets its own tab in the Insert panel.
Spry Widgets. Dreamweaver CS3 ships with a slew of ready-made interface components, ranging from menu bars (fig. 4) to tables and lists to accordion panels to validating form elements. Many of these widgets can be fed content via XML, which allows for interesting live data possibilities.
Figure 4
Spry Effects. If you've ever seen a page slide or fade elements in and out without resorting to Flash, you've seen the types of eye candy that Dreamweaver CS3's Spry Effects provide easy access to. It's as simple as selecting an element on your page, applying an effect through the Behaviors panel (fig. 5), and testing the final effect in a browser.
Figure 5
Spry Data. The "X" in Ajax stands for XML, and as such plays an integral part in Dreamweaver CS3's implementation of the Spry framework. The process consists of designating an XML file to serve as your data set (fig. 6), and then adding one or more of the aforementioned Spry widgets to display the data according to your specifications. A simplified description, but that's the gist of it.
Figure 6
What goes for all the various Spry categories is that when you use any of the elements of the Spry Framework in your Web pages, Dreamweaver CS3 will alert you to the fact that extra files will be added to your site structure (fig. 7).
Figure 7
As you may have guessed, these files consist of standard JavaScript and CSS, so you're free to dive in and modify things if you're feeling saucy. And yes, you can edit the CSS (either in Dreamweaver or the editor of your choice) to, for example, change the stylings of the Spry widgets to more closely match your page. Speaking of CSS...
CSS here, CSS there, CSS everywhere
Dreamweaver was one of the first visual editors to embrace liberal (and correct) use of CSS for page styling, and the tradition continues in CS3. CSS improvements come in several forms and flavors, so here's the rundown:
Browser Compatibility Check. If you have a feeling that certain browsers may object to what you're doing with your CSS styles, just head for the Browser Compatibility Check panel, check your code, and anything Dreamweaver sees as suspicious is flagged (fig. 8).
Figure 8
CSS Advisor. To follow on that last point, Dreamweaver CS3 is integrated with Adobe's CSS Advisor Web site (which was also unveiled last December in the long shadow of Photoshop CS3). When the Browser Compatibility Check finds certain problems, you're presented with a View Solutions link (fig. 9, top), which takes you the relevant page on the CSS Advisor site (fig. 9, bottom).
Figure 9
CSS-based templates. Dreamweaver CS3 ships with a dizzying number of CSS templates to start from, covering a myriad of standard layout types and providing several flavors of each (fig. 10). What's more, each template is meticulously commented, providing those who may be newer to CSS-based layouts a thorough explanation of what's going on behind the scenes (fig. 11).
Figure 10
Figure 11
CSS management. Gone are the days of manually moving CSS around between documents, as Dreamweaver CS3 offers several features for keeping tabs on where your styles travel around the various pages in your site. For example, you can move rules on your page to new or existing style sheets (fig. 12), convert inline styles to rules, or simply reorder styles via drag-and-drop in the CSS Styles panel.
Figure 12
Wrapping up
Longtime Dreamweaver users may lament that not a lot has changed, which could be either good or bad depending on your perspective. However, Dreamweaver CS3 does add a few meaty new features in "high value" areas, so even the jaded old-timers will likely find something of value. Dreamweaver CS3 is expected to ship sometime in April, and you can get a hold of it in several ways:
- As a standalone product ($399 new or $199 upgrade from Dreamweaver MX or later)
- As part of the following suites:
- CS3 Web Standard ($999 new, $799 upgrade from Dreamweaver MX or later, or $399 upgrade from Macromedia Studio MX or later)
- CS3 Web Premium ($1599 new, $1399 upgrade from Dreamweaver MX or later, or $499 upgrade from Macromedia Studio MX or later)
- CS3 Design Premium ($1799 new, $1599 upgrade from Dreamweaver MX or later, or $599 upgrade from Macromedia Studio MX or later)
- CS3 Master Collection ($2499 new or $1999 upgrade from Macromedia Studio MX or later)
Of course, I urge you to visit Adobe's Web site for the full product offering and upgrade pricing matrices. And naturally, we'll check back in after the various CS3 suites ship with a full review of the actual released product, so stay tuned.
Got Feedback? to send an email. I'll do my best to answer. Really.
