See what's in store for the next release of Adobe Dreamweaver

by Scott Fegette

Dreamweaver is officially 10 years old this year, and what a decade it has 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 new buzzword, and it was expected that by 2000 everyone would 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, but Dynamic HTML has recently made a resurgence under the umbrella of another new buzzword and movement: Ajax — using the term very loosely, and centering more on the user experience of Ajax applications as opposed to the asynchronous JavaScript and XML methodology used to marshal data between client and server, which also provided the handy acronym.

CSS, however, flourished in the last 10 years, and Dreamweaver has concentrated heavily on standards-based design over the last few releases. And although Dreamweaver has long led the pack of visual editors, there has 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 the tenth release of Dreamweaver, we knew it was time for some bold changes in workflow and new ways of visualizing web-based design projects. Dynamic, JavaScript driven interfaces aren't the exclusive domain of JavaScript engineers anymore — designers are also required to provide richer experiences for their clients and more and more often are working directly 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 jobs and how their workflows have changed in that decade since Dreamweaver 1.0 was unleashed.

I'm pleased to introduce you to the results — Dreamweaver CS4 beta, code-named Stiletto.

New look, new feel

When launching the Dreamweaver CS4 beta, 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 Adobe Creative Suite. One of the highlights of the new interface is the workspace configurator — enabling you to easily choose the right workspace for the tasks you're currently working on.

Choose the workspace that matches your tasks—or create your own

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 really lets you buy back your monitor real estate in spades. Collapse your panels onto the right side of the screen and fly them out when needed, so you can save precious monitor space for your documents.

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

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


Visual design comes alive

Now 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 — drop-down menus, sliding panels, Ajax-driven interface elements, and the like — has become more and more important. The static nature of the Dreamweaver Design view just wasn't enough.

Enter the new Live Preview mode. As opposed to the venerable Design view, Live Preview uses the WebKit rendering engine (which also powers the Safari web browser and our own 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 the various states it may require — drop-down menus open and closed, Spry accordion panels in context, and even Flash or Flex SWF movies and third-party JavaScript widgets.

By also selecting Live Code while in Live Preview mode, you can easily see how interacting with your page affects the code underneath in real time, such as the classes being added and removed to elements via JavaScript and dynamic content being inserted by Spry (or any other JavaScript framework), as well as 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 jump over to a browser.

But it's one thing to preview these states and entirely another to actually work on them effectively. By interacting with your page and then clicking the Freeze JavaScript button (or the F6 key), 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, but I suspect you'll be doing a lot less of that with Live Preview close at hand.

Supporting modern workflows

Web-based projects these days are more complex than ever before, and it's rare to find even a single page that isn't composed of a variety of assets — whether they are CSS style sheets, external JavaScript files and libraries, or even server-side includes. In related news, Stiletto has two new features that help you design and manage multi-asset sites and applications more effectively.

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

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

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


The new Code Navigator enables you to easily jump to any of your related files — and 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 Stiletto. 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 right to that file and specific line number to edit it quickly and easily — and again, without losing the visual context that's so important to effectively design interactive experiences.

Designer and developer workflow

Dreamweaver CS3 gave you the ability to paste a selection from your Adobe Photoshop documents directly into Dreamweaver, but Stiletto takes it one step further with Photoshop Smart Objects. You can now drag a PSD document directly into your web pages and applications and maintain a live link between the original PSD file and the web-optimized image in Dreamweaver. Resize the image in Dreamweaver, and the image is re-optimized for you quickly and cleanly. Change the image in Photoshop, and Dreamweaver lets you quickly resynchronize the web-optimized version. With Stiletto, you can move seamlessly between your image editing and site development.

When your projects include SWF files created with Adobe Flash or Flex, the newly updated Insert Flash feature in Dreamweaver, which now uses the open source SWFObject 2.0 codebase, enables you to visually preview your SWF file in context using Live Preview and even design the static, alternative HTML/CSS content right in Design view, too. Get complete control over your hybrid HTML/rich-media 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, such as the open source solution Subversion. Stiletto lets you connect to any existing SVN repository and manage your files directly through Subversion, enabling a smoother designer and developer workflow and much more robust overall file management.

JavaScript is a first-class citizen

As the Live Preview feature hinted, JavaScript and dynamic interfaces are becoming an expected skillset for web designers these days, and to help you be as effective with JavaScript as possible, some core functionality needed to be addressed.

In Stiletto, you can get code hinting not just for JavaScript core functionality but also for DOM functions and even custom JavaScript classes. Do you use a lot of custom JavaScript? You'll get custom code hints right in the Dreamweaver Code view, helping both seasoned pros be more efficient with their coding and less skilled designers easily introspect the code in their projects. JavaScript code hinting works in real time and with any inline or external JavaScript. Did you 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.

Code hinting has been expanded for Dreamweaver CS4 beta.

Code hinting has been expanded for Dreamweaver CS4 beta.


And so much more...

I am honestly just scratching the surface here. What you really want to be doing right now is downloading the public beta from Adobe Labs and getting your hands on Stiletto. To help with the learning curve, I shot six quick video demos of the key new features in Stiletto with our engineering team, and you can get to them from the Stiletto Welcome screen to make your transition a smooth one. You can also watch them directly on Adobe TV. Be sure to read the release notes for late-breaking news on the public beta, and by all means, let us know what you think in the Dreamweaver CS4 beta forums.

Remember: This is beta software. Expect some rough edges and bugs, while knowing we're hard at work eliminating them in the background. Also, many third-party extensions (including the Adobe Dreamweaver Developer Toolkit) do not yet support Dreamweaver CS4 beta, so we recommend keeping your copy of Dreamweaver CS3 around as a backup.

Speaking for the entire Dreamweaver team, this is one of our largest and most ambitious releases, and we hope you enjoy this public beta release as a preview of what's in store for Dreamweaver CS4.

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.