by Scott Fegette
Designing for the web has always been a mixture of right-brain and left-brain disciplines. Over the years, Dreamweaver has strived to recognize and support that. To balance these often-conflicting mindsets, our Dreamweaver development team talks to many, many customers each product cycle to find out what's working, what isn't, and what types of workflows and technologies are most important to them. As a result, a few things became very apparent as we started the planning process for Adobe Dreamweaver CS5.
First, PHP-based open-source content management systems are steadily becoming a de facto way of delivering content-rich sites for clients, but designing CSS-based themes for these systems isn't exactly an intuitive process.
In addition, although Live View in Dreamweaver CS4 reduced the need to constantly switch back and forth to a web browser, there are still many times — especially when working with CSS visualization — that application switching is necessary.
Finally, we heard that our first entry points into Dreamweaver – the New Document dialog box and the Site Definition dialog box — can be daunting for new users and casual web designers.
With Dreamweaver CS5, we tackled all three of these issues.
The rise of open-source PHP-based content management systems such as Drupal, WordPress, and Joomla! has presented a new challenge for basic web designers who are looking to centralize their content. And increasingly, clients are asking for frameworks like these by name. Designers don't always have time to learn new technologies from scratch, especially when they are pressed for time. In Dreamweaver CS5, we haven't necessarily reinvented the wheel, but instead, we have expanded upon existing Dreamweaver features to make them more relevant for designing and creating themes for web applications.
Dreamweaver CS5 turns Live View into a mini browser that enables you to navigate an application through different design states, such as a blog posting, comment form, or search results page (see Figure 1). You can navigate Live View by following links, and even view (and inspect using the rich CSS tools in Dreamweaver) the remote source markup and CSS directly.
Figure 1. Dreamweaver CS5 Live View browser.
It can be tough to always track down the exact file you need in a dynamic application. The Dynamically Related Files feature in Dreamweaver CS5 tracks down all those references for you in the Related Files bar, and even sorts them based on your preferences. No more digging around for that one file you need. Now you can easily find it in the Related Files bar.
Now designers can design custom applications and frameworks such as WordPress, Drupal, and Joomla easily within Dreamweaver using the world-class CSS tools they've come to know and love — just as easily as they would with a static website.
Although Live View in Dreamweaver CS4 certainly reduced the need to jump back and forth to a browser, you still don't get much more than a browser preview to help you debug complex CSS layout issues. If the box model has ever vexed you, you'll be happy to know that in Dreamweaver CS5 you can enable CSS Inspect mode (see Figure 2) and get visual box model hints in context in Live View. CSS Inspect shows all the details on whatever element your mouse is hovering over in Live View as an overlaid box model (so you can view padding, margin, or border settings in real time), as well as directly in the CSS panel. Simply select an element and start styling. This is a very intuitive way to work with your CSS designs.
Figure 2. CSS Inspect mode
Do you sometimes need to experiment with a CSS rule? Now you can disable editable CSS rules temporarily by clicking the icon to the left of the rule in the CSS panel's list view (see Figure 3) to quickly iterate your design. And of course, you can use all these tools on both local files as well as on files you've navigated to using Live View's new browsing mode. You can then easily enable all disabled rules or remove all the disabled rules completely and optimize your CSS code — whatever works best for you. It's all about convenience.
Figure 3. CSS panel style editor.
Once your local design looks good, you need to ensure it will render consistently across multiple browsers and platforms. Dreamweaver CS5 integrates smoothly with Adobe BrowserLab (see Figure 4), Adobe's new service for cross-browser and operating system previewing. Either visit browserlab.adobe.com and enter a URL for testing, or send any local design in Dreamweaver directly to BrowserLab for preview. Using Live View (and new navigation features), you can drive any web page, site, or application to a given design state, pause it, and then send that state of the page to BrowserLab directly.
Figure 4. Adobe BrowserLab preview palette.
Two often-overlooked areas of Dreamweaver are the Site Definition and New Document dialog boxes. In Dreamweaver CS5, we wanted to make sure that these critical areas of your workflow are as smooth and direct as possible (see Figure 5).
Figure 5. Simplified site setup.
Although Dreamweaver does need to know about your site to do much of its magic at the page level, often you won't have all the information you need (such as client hosting information, ports, and so forth) when you first get started — so we made the new Site Setup window much simpler and more intuitive. All you need to do is enter a name for your site and the location for its files on your local hard drive. Dreamweaver then lets you start working. As you work, if you ask Dreamweaver to do something it doesn't know how to do, such as uploading your site to a remote server, it will ask you for the information it needs quickly and concisely, and then let you get back to work.
We have also completely revised the starting point for CSS layouts, thereby simplifying the CSS rules and making them far more approachable and easy to understand (see Figure 6). Not only is the CSS layout code commented heavily for educational purposes, but additional context, details, and suggestions about the layouts are included in the pages themselves so you can not only get up and running fast, but you can also feel confident making layouts on your own.
Figure 6. New CSS layout window.
These are just the highlights of Dreamweaver CS5. In addition to these new features, Dreamweaver CS5 offers tons of small enhancements, fixes, tweaks, and improvements. We hope that instead of noticing them specifically, you simply notice that Dreamweaver is smoother and more comfortable to use than ever before. If it's not, be sure to let us know.
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.