by Scott Fegette
We've come a long way.
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.
I'm pleased to introduce you to the results — Dreamweaver CS4 beta, code-named Stiletto.
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
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.
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.
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.
Code hinting has been expanded for Dreamweaver CS4 beta.
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.