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.
Improvements for PHP-based CMSes
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.
Other than that…
…there aren’t a lot of major features beyond those for CSS and CMS handling:
- 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.