Dreamweaver CS4 review

Dreamweaver CS4 supports the Spry Framework 1.6.1 for Ajax and offers three new interconnected features that tie into this approach to web design: Related Files, Code Navigator, and Live View. The Related Files bar appears under the document tab as a series of clickable filenames, listed in the order in which they are included or linked in the source file. When working in split view you can thus quickly see where to make changes to the CSS code and then, by rendering the page in design view, see how this will affect the page in a browser.

Code Navigator reveals all the associated code sources for a selected item. The navigation element became apparent when we were able to click on any of the code source links and jump straight to the selected code for some quick editing. We could display the impact our editing had under real-world web browsing conditions using Live View rendering. This is a really powerful feature, taking advantage of the WebKit HTML rendering engine to preview sites. It makes it possible to view the complex Ajax functionality of XML-powered interactive Master/detail relationships on web pages, directly in Dreamweaver’s Design View.

Live View can be used in conjunction with Live Code, which has the useful ability to track and highlight in the code any object you select in Design View. Pressing F6 freezes the JavaScript so that the code for a particular state, such as hover, is displayed in Live Code. Then you can use the Code Navigator to locate the CSS rule that governs a particular tag in a specific state and modify the code precisely. It all adds up to a far more intuitive way of tweaking and editing page designs.

Users of your site can edit pages if you choose to create regions with the new InContext Editing tool. This designates regions users can alter by adding an editable attribute to the surrounding

tag. Removing options in the Properties panel, such as the background colour or paragraph styles, allows you to keep some consistency to the design of the page. This feature should be ideal for creating blog pages, especially as there’s a button to change the editable region into a repeating region. To further control the design of the editable content, you can ensure that users have access to only certain CSS styles.

CSS rule creation and modification is a big deal in this version. The updated Property inspector, now known as the Properties Panel, offers a separate CSS mode when dealing with text, which lets you concentrate on the formatting controls, and a CSS Rules menu to work with, modify or create CSS rules in the current cascade. Common properties like format, class and link can be accessed when in HTML mode of the Properties panel.

There’s also a shortcut to create HTML data sets. In another standout feature, the Spry framework has a wizard to integrate data in tags or unordered lists into a dynamic table, complete with sortable columns, a master-detail layout, or other complex Ajax elements.

Close integration

Integration between CS4 applications has been heightened – just inserting a Photoshop PSD file into a Dreamweaver page now creates a Smart Object image. Add a SWF file to your document, and Dreamweaver adds two external dependent files and in-page code that detects the player version and installs it, if necessary.

As it does across CS4, the Workspace Switcher offers a variety of custom views, but is probably more useful in this instance given the requirements of the different players involved in web design these days. For example, when choosing Coder from the Switcher, the document opens in full code view with a tabbed group of Files, Assets, and Snippets panels displayed on the left.

The Coder Plus option, meanwhile, has an additional set of options for Insert panel, CSS panel, and AP Elements added to the right in Iconic mode. The interface also benefits from spring-loaded panels that expand with a single click for quick access and collapse when no longer needed. Panels can also be reduced to icons, in order to maximise document workspace.

OUR VERDICT

Web design these days is a far cry from simple HTML pages, typically using CSS external style sheets, JavaScript libraries, or server-side code to create a interactive web document. The new features in Dreamweaver CS4 make this a lot simpler, with those based around the Spry framework in particular being highly useful.

Find the best price

Best prices today

Retailer Price Delivery

Price comparison from , and manufacturers