Dreamweaver made its debut more than a decade ago—and oh, what a decade it's been. When version 1.0 was released in November 1997, the challenge was to provide a better visual experience for web designers regardless of how they coded their pages. DHTML was the buzzword at the time, and by 2000 everyone was expected to be coding interactive HTML experiences with JavaScript. And CSS, having recently been implemented in Internet Explorer 4.0, was the new emerging paradigm for visual design.

We've come a long way.

Looking back, the death of DHTML was an expected casualty of the browser wars and incompatible DOMs between Netscape and Internet Explorer. However, Dynamic HTML has had a resurgence under the umbrella of a new buzzword and movement: Ajax (using the term very loosely, and centering more on the user experience of Ajaxian applications as opposed to the asynchronous JavaScript and XML methodology used to marshal data between client and server, which provided the handy acronym).

CSS, by contrast, has flourished for the last 10 years, and Dreamweaver has concentrated heavily on standards-based design over the last few releases. And although Dreamweaver has established itself as the marketleader among visual editors, there's also been a significant focus on strengthening the code-centric tools that today's web designers and developers require. But 10 years is a long time, and both industries and workflows can change quickly.

When faced with the daunting task of planning this new release of Dreamweaver, we knew it was time for some bold changes in workflow as well as new ways of visualizing web-based design projects. Dynamic, JavaScript-driven interfaces aren't just the exclusive domain of JavaScript engineers anymore. Designers are also required to provide richer experiences for their clients, and they are working increasingly with engineering teams to design complex application experiences. After Dreamweaver CS3, the product team met with tons of web designers and developers, examining how they do their job, and how their workflows have changed in the decade since Dreamweaver 1.0 was unleashed.

I'm pleased to introduce you to the results of our efforts: Dreamweaver CS4 (see Figure 1).

Figure 1. Meet Dreamweaver CS4 beta.

New look, new feel

When launching Dreamweaver CS4, the first thing you'll notice is that it now features a user interface that fits in smoothly with the rest of its colleagues in the Creative Suite. One of the highlights of the new interface is the workspace configurator, allowing you to easily choose the right workspace for the tasks you're currently working on (see Figure 2).

Figure 2. Choose the workspace that matches your tasks—or create your own.

We've taken a stab at some of the most common workspaces, but feel free to create your own custom workspaces as well, including the new compact mode for your panels, which lets you save precious monitor space for your documents—collapse your panels over onto the right side of the screen and fly them out when needed (see Figure 3).

Figure 3. Revamped collapsible panels give you more real estate to work with.

Visual design comes alive

Let's face it, visual design tools always have slight differences from the browsers they're emulating. And as JavaScript-driven interactivity has become more popular in recent years, the need to accurately design the states of your page (including drop-down menus, sliding panels, Ajax-driven interface elements and the like) has become increasingly important, and the static nature of the familiar Design view just didn't meet users' needs anymore.

Enter the new Live View mode (see Figure 4). As opposed to the venerable Design view, Live View uses the WebKit rendering engine (which also powers the Safari web browser, Google Chrome, and the Adobe AIR runtime) to give you an exact preview of your page, just as a browser would render it. But that's not all. You can also interact with your page directly within Dreamweaver, and view all of the various states it may require: open and closed drop-down menus, Spry accordion panels in context, even Flash or Flex SWF movies and third-party JavaScript widgets.

Figure 4. Live View enables you to interact with your pages.

When you select Live Code while in Live View mode, you can easily see how interacting with your page affects the code underneath in real time, the classes being added to and removed from elements via JavaScript, dynamic content being inserted by Spry (or any other JavaScript framework), how your interaction with the page actually affects the DOM in a browser, and much more. For those new to JavaScript, this mode is invaluable for learning how a page can be manipulated, and for JavaScript experts, it's a fantastic, integrated way to debug interactive projects without needing to constantly switch to a browser.

However, it's one thing to preview these states, and entirely another to actually work effectively upon them. By interacting with your page and then selecting the Freeze JavaScript option from the View pop-up menu (or just pressing F6) your page will "freeze" in its particular state (for example, with a drop-down menu locked open and a mouse hover effect in place), so you can then edit those interactively displayed elements directly in Dreamweaver. Sure, you can still use the Preview in Browser feature (F12) to kick the page over to your preferred web browser and preview interactivity that way, but I suspect you'll be doing a lot less of that now, with Live View close at hand.

Supporting today's workflows

These days, web-based projects are more complex than ever before, and it's rare to find even a single page that isn't comprised of a variety of assets, be they cascading style sheets, external JavaScript files and libraries, or even server-side includes. Dreamweaver CS4 has two new features that help you be much more effective designing and managing multi-asset sites and applications.

First, the Related Files bar now runs across the top of your document window, just below the document tabs (see Figure 5). The document tabs still reflect the current document you're working on, but the Related Files bar will show you all the various files that combine to create your finished page: JavaScript, CSS, and SSI files. You can now also switch between them using the Related Files bar without losing the visual preview of their parent page. Design view (or Live View) will always show the parent file, but you are now free to edit any of the related files without losing that critical visual context.

Figure 5. The Related Files bar shows you the various files that are part of your finished page.

The new Code Navigator heads-up display allows you to easily jump to any of your related files (including the specific rules within) that combine to create the final, rendered display of your selected element. If you've ever beat your head against the wall looking through multiple style sheets to find that one, specific rule you're looking for, it's just a contextual menu-click away in Dreamweaver CS4. You can hover over each of the rules in the Code Navigator window to see which properties are being defined by it, and then just click to jump to that file and specific line number to edit it quickly and easily. Again, you can do this without losing the visual context that's so important to effectively design interactive experiences.

Designer/Developer workflow

In Dreamweaver CS3 we gave you the ability to paste a selection from your Photoshop documents directly into Dreamweaver, but in Dreamweaver CS4 we've taken it one step further with Photoshop Smart Objects. You can now drag a PSD document directly into your web pages, and maintain a live link between the original PSD and the web-optimized image in Dreamweaver. Resize the image in Dreamweaver and the image is reoptimized for you quickly and cleanly. Change the image in Photoshop and Dreamweaver will let you quickly resynchronize the web-optimized version. With Dreamweaver CS4 you can move seamlessly between image editing and site development.

Working with Flash or Flex SWF files in your projects? The newly updated Insert Flash feature of Dreamweaver CS4 now uses the popular open source SWFObject 2.0 codebase for embedding SWF-based content. This allows you to visually preview your SWF file in context using Live View, and even design the static, no-Flash alternative HTML/CSS content right in Design view, as well. Get complete control over your hybrid HTML/Flash projects and every aspect of their visual characteristics.

Many Dreamweaver-based designers are either working with larger development teams or, as individual developers, learning the benefits of maintaining their projects in version control systems, most commonly the open-source solution Subversion. Dreamweaver CS4 lets you connect to any existing SVN repository and manage your files directly through Subversion, enabling a smoother designer/developer workflow and much more robust file management overall.

JavaScript is a first-class citizen

JavaScript and dynamic interfaces are becoming an expected skill set for web designers these days, and in order to help you be as effective with JavaScript as possible, some core functionality needed to be addressed.

In Dreamweaver CS4, you can get code hinting for not just JavaScript core functionality, but DOM functions and even custom JavaScript class hinting as well. Using a lot of custom JavaScript? You'll get custom code hints for it in the Code view, helping both seasoned pros be more efficient with their coding and less skilled designers to easily introspect the code in their projects. JavaScript code hinting works in real time, and with any inline or external JavaScript. Change a method in your external JavaScript class? That change is available via code hinting to any open document that subscribes to it—you don't even need to save the JavaScript file first.

Figure 6. Code hinting has been expanded for Dreamweaver CS4.

And so much more ...

Any quick overview article like this can't possibly convey the immense changes we've added in Dreamweaver CS4. I hope you've either had the chance to download the Dreamweaver CS4 public beta, or the Dreamweaver CS4 trial version and try it out for yourself. We feel that Dreamweaver CS4 really benefitted from its public beta earlier this year, so thanks to everyone who downloaded it, took it for a spin, and gave us your feedback. We couldn't incorporate everything we heard, but without your help Dreamweaver CS4 wouldn't be nearly as solid as it is today. Thanks! If you haven't been exposed to the new features yet, however, we shot six quick video demos of the key new features in Dreameaver CS4 with our engineering team, and you can access them from the Dreamweaver Welcome screen to make your transition to Dreamweaver CS4 a smooth one. You can also watch these videos directly on Adobe TV. Also be sure to keep checking the Dreamweaver Developer Center for new and updated tutorials that show you how to make the most of Dreamweaver CS4.

This is probably one of our largest and most ambitious releases in a while, and we sincerely hope you enjoy this new version of Dreamweaver. Get ready for a new experience when designing and building web sites and applications.

 

About the author