Dreamweaver CS5 First Impressions

Dreamweaver CS5, just announced today as part of Adobe’s Creative Suite 5 (CS5), has actually been doing duty in my web design business for several months now—I’m a beta tester for several Adobe products including Dreamweaver. Perhaps the best compliment I can pay Dreamweaver CS5 is that it has performed like a shipping product from the first day I got it. Dreamweaver CS4 users will not find too many differences between that application and Dreamweaver CS5, but there are some major improvements in handling CSS and working with dynamically-generated webpages, such as those created by PHP-based content management systems (CMS).

Dreamweaver CS5 is included with the Design Premium, Web Premium and Master Collection suites as well as a standalone product.

Improvements for CSS

Cascading Style Sheets (CSS) have been the primary method for controlling websites’ designs and Dreamweaver has emphasized it for a few years now. The application gets a few new CSS-related features with every release, and Dreamweaver CS5 is no different:

• A new Inspect button produces colored overlays that help visualize the margins, widths, padding and other properties of the CSS box model. If your paragraphs or divs have any of these properties, click Inspect and then hover over the elements with your mouse to reveal these properties. The CSS Styles panel will also highlight the particular rules you are hovering over, which is handy.
• CSS styles can now be disabled or enabled in the CSS Styles panel—hover over a property in the panel and click the icon, and Dreamweaver CS5 will comment out the rule in the CSS code. I find this to be more useful than the Inspect feature, because you can toggle properties and get immediate feedback on what they do. Designers who constantly check their CSS changes in browsers or Live View can now disable CSS properties and see the results in Design view or Live View.
• The CSS-based starter layouts have been redesigned to use simpler CSS classes and include more comments in the code and the actual page text. Ironically, there are significantly fewer layout templates in Dreamweaver CS5 than in its predecessor. I don’t use these canned layouts myself because I prefer to build mine from scratch, but intermediate and beginner CSS users will benefit from their educational value and even expert CSS users can get a jump-start on a project with these layouts.

You can click the “no-smoking” icon in the CSS Styles panel to enable and disable styles. The colored overlay on the paragraph shows the width, padding and margins for that element.

Improvements for PHP-based CMSes

The most game-changing improvement in Dreamweaver CS5 is its support for PHP-based content management systems such as WordPress, Joomla! and Drupal. The new Dynamically Related Files feature basically compiles all the CMS-related PHP files and use them and Live View to generate dynamic pages just like the CMS would. You can navigate pages like you would in any other browser, work with JavaScript-powered navigations and move from page to page on internal and external servers. Dreamweaver CS5 even can bring data into pages from external databases.

This image shows the prompt to “discover” dynamic files (inset left), the list of files after discovery (inset right) and Dreamweaver CS5′s ability to render a dynamic page (background). Click the image for a better view.

I tested these new CMS-related features at Adobe in January and they work very well for the common PHP-based CMSes like WordPress. I want to do some further testing for my upcoming review because I actually prefer to use a paid PHP-based CMS called ExpressionEngine and my first attempt to use Dynamically Related Files with an EE-based website did not work. I will figure out what I did wrong and report back in my full review.

PHP coders will enjoy the new custom class code hinting and site-specific code hinting available in Dreamweaver CS5. Dreamweaver now provides hinting—even for code that hasn’t been saved yet—for PHP core functions, objects and site-specific hints for customized code like those for blog themes and content management systems.

You can get code hinting on a site-specific basis, based on its CMS…

…and you can also get PHP code hinting.

Other than that…

…there aren’t a lot of major features beyond those for CSS and CMS handling:

• Those who read and liked my piece on Adobe BrowserLab will be glad to hear Dreamweaver CS5 has an integrated BrowserLab preview. BrowserLab, like similar services, will take a snapshot of a webpage previewed with one of a variety of web browsers. The service is now improved because there are more browsers available and you can also freeze JavaScript interactions in Live View and preview them with BrowserLab.
• New support for the open-source version-control application Subversion lets users move files and synchronize changes with the remote depository. You can also revert to previous versions of a file.
• One change that I particularly appreciate is a redesigned Site Definition dialog box. Every website designed with Dreamweaver is first set up in this dialog box and it hasn’t always been user-friendly. There’s not really many improvements to this other than a new look and feel, but some new prompts and the ability to start a site without having every detail filled in makes this dialog box an improvement over the one in Dreamweaver CS4.

My first impression

The quantity of new features in Dreamweaver CS5 is not large, but what is included are improvements vital to the way web designers and developers work today. Dynamic websites powered by content management systems are all around us and Dreamweaver needed to address the lack of tools and interface to handle these sites. The Webkit-powered browser within Dreamweaver and introduced in CS4 was a catalyst for the improvements in Dreamweaver CS5, and interaction has now become as manageable as images and layouts.