Adobe's Dreamweaver CS5 In Review

June 13, 2010 9:39 pm

Tags: Adobe, CS5, Dreamweaver, product review, web design

file_454332.jpgProduct Review: Adobe Dreamweaver CS5

The new features in Adobe Dreamweaver CS5 may at first seem minor, and some even barely noticeable (like Incremental Pagination), especially to the novice web designer. However, the experienced web designer will appreciate the many time-saving features and shortcuts built into this new version to enable them to work faster and smarter.

Incremental Pagination

New to Dreamweaver CS5 is "Incremental Pagination," which allows for quicker pre-viewing of minor changes made to your pages. Dreamweaver CS5 now divides the visualization of a site into two distinct operations: pagination (configuring the layout of page fundamentals) and rendering (displaying the actual visual properties).

In past versions of Dreamweaver, the program would paginate and render at the same time, resulting in longer page refresh times. With the new Incremental Pagination, when minor changes are made to your design, Dreamweaver will render those changes instead of re-rendering the whole page. This results in a quicker workflow. A small change with an overall big benefit, saving time!

Live View Navigation and Live View Changes

Improvements have been added to the Dreamweaver CS5 Live View Navigation, allowing designers to not only view all aspects of a site as it appears online, but also to view and make changes on the code within a specific page using Live Code.

Another helpful new feature is that Live View (and Live Code) allows Dreamweaver to open sites other than your own, by merely inserting the web's URL in the new Browser Navigation Toolbar. Although changes are not allowed within the code or design of another's site, a web designer will be able to study the intricate coding details of a site that they admire, which makes this new feature an invaluable educational device.


CSS Disable/Enable

The new CSS Disable/Enable function is another web designer's cannot-live-without feature. By simply clicking next to a CSS property (within the CSS Styles dropdown menu), the CSS Disable/Enable function allows the designer to temporarily remove those specific CSS properties within a page…without permanently removing the property.


When you disable a CSS property using the CSS Disable/Enable function, the CSS property still remains within your site's code, but it is grayed-out with a comment inserted stating that it is disabled. Important note: always toggle the Disable/Enable feature on and off, as deleting or rewriting the code will cause problems.

code before disabled ~ code with disabled applied ~ code enabled again ~ enabling or accepting all changes

Once you are ready to make your changes permanent, right click on any of the CSS properties that you disabled, and accept or reject all the changes within the dropdown menu with one click.

CSS Inspect

CSS Insect lets the designer easily view (and make modifications to) specific elements within a page, by turning a page into color-coded elements. To fully understand the functionality of this feature, first click the Inspect Button and hover your cursor over the page. Areas that turn turquoise are the actual height and width of a specific element, while yellow displays the margins, and pink represents the padding.

Knowing exactly where each element is within your page allows for effortless design modification, as each CSS element can then be changed within the CSS Style Panel. In Split Mode, designers can also view (and modify) the page within the code associated with the visual element, or click on a specific tag in the Tag Selector and change the elements in the CSS Style Panel.



My favorite new Dreamweaver feature is the Adobe Widget Browser. Although widgets were available in Dreamweaver CS4, the ease of acquiring them has greatly improved in Dreamweaver CS5, within the Adobe Widget Browser.


Within the Widget Browser, is the Adobe Exchange. In the Exchange is an array of the current OpenAjax widgets available on the Adobe Exchange. The widgets are created by Adobe, third-party-developers, as well as Adobe Community members. Here you preview, tryout, and save the widgets of your choice into your "My Widget" folder for future use.

New Widgets are continually being created and added to the Adobe Exchange. You also have the option of creating and sharing your own widget creations with other Adobe Community members.

Business Catalyst

The direct link within Dreamweaver CS5 to Adobe's new Business Catalyst is imperative for those of you who work with and design e-commerce and business sites. Currently, the sign-up is free, and the service is an invaluable, powerful hosted application to enhance both small and large business sites.

Browser Lab

Last year, Adobe introduced Browser Lab, and this year they have added a gateway to this amazing program, within Dreamweaver CS5. Browser Lab allows the designer to view a site design in a variety of browsers, without having to actually install the browser (for an in depth view of Browser Lab, see my previous Browser Lab review). Although Browser Lab is not new to Adobe, the ability to easily toggle between Browser Lab and Dreamweaver CS5 is.

Adobe Illustrator Native Files

Adobe introduced the ability to insert an Adobe Photoshop file (in its native format) directly into Dreamweaver CS4 as a smart object. Dreamweaver CS5 takes the integration of Adobe software programs a step further. Now, native Adobe Illustrator files can be imported and converted directly into Dreamweaver CS5.

Other Additional New Features

"Integrated CMS support" allows designers to author and provide the ability for testing support for content management system frameworks (WordPress, Joomla!, Drupa).

The "PHP custom class code hinting" and "Site-specific code hinting" allow designers to write accurate code by displaying the proper syntax for custom PHP functions, as well as in Dreamweaver's nonstandard files and directories.

In Summary

With the majority of new features in Dreamweaver CS5 geared toward the advanced web designer, it is very apparent that Dreamweaver is no longer a mere WYSIWYG editor. Although many of the new features in Dreamweaver CS5 are designed to make work flow with time-saving benefits, there is no mistaking that Adobe's Dreamweaver CS5 is a serious program for serious designers.

In some ways I miss the simplicity of earlier "Macromedia" versions. There are times that I just want to toss a site together for the fun of it. I don't want to worry about viewing code or CSS properties. Perhaps Adobe will create an alternative to the industry powerhouse that Dreamweaver has become, and offer a functional, yet stripped down, Dreamweaver version, similar to Photoshop Elements.

For those of you who are longtime Dreamweaver users…or at the very least, have a basic knowledge of HTML and CSS…you will really enjoy the new and enhanced Dreamweaver CS5. If you are unsure if this version offers all the features that you can't live without, be sure to take it for a free test drive.


All supporting images are copyright, and cannot be
copied, printed, or reproduced in any manner without written permission

Get to know industry leaders and professionals
as they sit down and talk candidly with
Contributing Columnist, Dee-Marie,
Author of "Sons of Avalon: Merlin's Prophecy"

June 14, 2010

Please note: If you find the color of the text hard to read, please click on "Printer-friendly" and black text will appear on a white background.

Related Articles:

Article Comments

No article comments have been posted. Sign In or Register to share your thoughts.