back

The evolution and revolution of
Adobe Dreamweaver CS3

by Scott Fegette

It's always a balancing act to release new versions of a mature application like Adobe® Dreamweaver®. On one hand, you want to continue refining the application — making it easier to use, more streamlined, and more responsive to the variety of personalities and workflows that use it. On the other hand, you want to keep innovating and adding new features to push that cutting edge. Dreamweaver CS3, in my opinion, attempts to do both and quite capably finds a strong balance between evolutionary changes and revolutionary updates.

When I started using Dreamweaver, it was at version 1.2 and, at the time, table-based layouts were the de facto way to create a website — CSS style sheet support was nascent at best. By Dreamweaver 8, the various panels and tools dedicated to managing CSS were unified but, at a fundamental level, the code itself still had some issues. Sometimes supporting best practices by separating styles from your HTML/XHTML markup was unwieldy, and the starting points provided to kick-start a CSS project were visually rich but not necessarily the best examples of CSS in practice. So, in many ways, Dreamweaver CS3 has taken the industry-leading toolset for standards-based design and refined it to help you create code that not only looks nice in a browser but also performs well under the hood.

Evolutions

screenshot

Figure 1: CSS layouts

Kick-starting standard-based development

Building a robust site on a shaky foundation can be an unnerving experience. Dreamweaver CS3 ships with a completely revamped set of CSS layouts — a wide variety of the most common layouts, including one column, two column with header, three column with header and footer, and nearly every possible variation — to get you started fast and effectively (see Figure 1). Not only were these rock-solid, standards-compliant layouts built specifically for Dreamweaver by the Web Standard Project's (WaSP's) Stephanie Sullivan, but they include extensive comments to help you build your pages on a strong foundation and also understand how they were built. You can work visually for fast development but easily flip to Code view to see exactly how the code was put together — and how to customize it further to fit the specific goals of your project. These new Starter Pages are a great example of the current best practices for standards-based development.

Managing CSS with style

Keeping your CSS styles in a separate style sheet is considered the most efficient way to develop standards-based websites but, in reality, your HTML/XHTML is often littered with style information. Styles can also live in the <head> section of your document or, even worse, as inline styles within the tags in your document's region. Dreamweaver 8 didn't do much to help you consolidate these styles, but Dreamweaver CS3 lets you drag styles between your document head and any attached style sheets as well as automatically migrate any inline or document-based styles to either an existing or a new style sheet — along with all the comments. It's simple. If you're nitpicky about your code, you can now specify exactly how your CSS code is formatted, and you can drag styles in the CSS panel to rearrange them, no matter where they live in your document (even including your comments). Whether you work in Code view or Design, Dreamweaver CS3 has your CSS housekeeping needs covered.

screenshot

Figure 2: Browser compatibility

Reliable rendering and debugging

Although prior versions of Dreamweaver rendered pages more closely to the way Internet Explorer does (despite wild rumors that Opera was actually used as the rendering engine in Dreamweaver, which were never true), Dreamweaver CS3 doesn't suggest a specific browser anymore. Instead, it concentrates on rendering your pages more closely to the W3C specifications. How does this affect you as a web designer or developer? You can write your code to the letter of the specifications and more accurately see where browsers differ in small ways from the specs themselves.

Should you run into problems debugging cross-browser rendering issues, Dreamweaver CS3 has more tricks up its sleeve. With the new Browser Compatibility Check feature (see Figure 2), you can quickly review your document for many of the most common cross-browser rendering issues and check out the publicly maintained CSS Advisor website to get solutions quickly. Since the web is a rapidly evolving medium, CSS Advisor is a great way both to maintain and update these rendering issues and solutions, as well as to add new ones as they're discovered. Have you tracked down a particularly nasty cross-browser bug? Come to CSS Advisor and share your wisdom, while helping the rest of the web design community stay up to date.

Revolutions

screenshot

Figure 3: Spry menu

Rich development with Spry framework for Ajax

The website experience has come a long way since Dreamweaver 1.0. Building a rich visual user interface for your clients isn't just a static experience anymore but instead takes advantage of dynamic elements. Loading new content into areas of your pages without browser page refreshes — as well as adding dynamic user interface elements such as collapsing panels and accordion elements, drop-down menus, and rich effects — are commonplace. But these features are difficult to code if you're not a JavaScript wizard. The Spry framework was released as a free download on Adobe Labs more than a year ago and subjected to public opinion for four full releases before it was integrated into Dreamweaver CS3. (You can still use Spry as a free framework even if you do not use Dreamweaver.)

Spry framework for Ajax covers three areas: the Spry data model, which lets you load XML data from a server and refresh areas of your page dynamically; Spry Widgets, which provide standards-based rich user interface elements such as drop-down menus, accordion and collapsible panels, and more in an easy-to-customize format; and Spry Effects, which enable you to add behaviors such as fades, collapsing, visibility management, and more to elements on your page. With Spry, you can make elegant user interfaces for your pages that enable much richer presentation of the content within.

If you're familiar with server-side development in Dreamweaver, the drag-and-drop data functionality of Spry should be familiar and comfortable, and the visual properties of Spry Widgets are simply standards-compliant CSS that you can customize at will to create exactly the look and feel you're after (see Figure 3). Spry Effects help tie everything together with robust behaviors to enhance your pages. And if you're a code jockey, there's even more to discover with Spry. Because Spry lives independently on Adobe Labs, it will continue to evolve and become more robust and powerful. Upcoming releases will include JavaScript Object Notation (JSON) support, unobtrusive JavaScript support, HTML datasets, and more. Keep a close eye on Spry (no rhyme intended).

Photoshop: Dreamweaver's new best friend

When the Dreamweaver team talked to designers over the last product cycle, a common pain point was the number of steps it took to get from the Photoshop comps and designs to actually placing images — or parts of an image — in a Dreamweaver page. My personal workflow was a bit painful as well: I had to merge layers in Photoshop and marquee-select the area I wanted to export; copy it; create a new image and paste in the image data; use the Photoshop Save For Web feature to optimize it into a GIF, JPEG, or PNG file and save it to my local site directories; and then switch to Dreamweaver and insert the image. You probably got tired just reading that.

Dreamweaver CS3 works more the way you'd expect. Just select the area of the image in Photoshop, copy it (or use the Photoshop CS Copy Merged feature to select multiple layers of information and flatten them automatically), switch to Dreamweaver and set your cursor where you want the image, and choose Paste. You'll be prompted with the Fireworks® optimization dialog box, where you can select the format and settings for your placed image. When you click Save, your image is placed in Dreamweaver. It takes only a couple of steps, and the workflow feels natural — just the way you'd expect to work between Photoshop and Dreamweaver.

Get Adobe Flash Player

Donald Booth of the Dreamweaver quality engineering team talks about his favorite features in Dreamweaver CS3.

Future-proofing Dreamweaver

Some revolutionary steps are less visible but more fundamental to making sure you can fight the good fight in the foreseeable future, and Dreamweaver CS3 has several other enhancements to keep you productive as the landscape of web development evolves. Dreamweaver CS3 is compatible with both Intel Macs and Windows Vista™, and it supports the IPv6 protocol, which means Dreamweaver will continue to work seamlessly as new IP addressing spaces are rolled out across the Internet.

Are your web projects expanding to cover browsing on mobile devices? Well Dreamweaver CS3 has you covered there, too, by supporting preview in Adobe Device Central CS3, the new CS3 suite mobile emulator that emulates many of the most popular phones and handheld devices. (New profiles will be added regularly.) Just choose Preview In Device Central instead of your normal browser options, and your page will be kicked over to Device Central to preview what the mobile experience will be like for your clients and end users.

As you can see, Dreamweaver CS3 is a groundbreaking release in a number of respects. I've been using it for production work since early beta, and at this point, you couldn't pay me to go back to Dreamweaver 8. This really is a more solid and productive application. I hope you enjoy it as well.


Scott Fegette is the Technical Product Manager for Dreamweaver at Adobe - focusing on web standards, community outreach and developer relations. After hours, Scott is a professional musician and photographer.