Part of Adobe’s latest Creative Suite, Dreamweaver CS4 has enjoyed both a tightening up of its core features and an expansion with several well-timed additions.
When you first start it you’ll notice some the cosmetic changes that bring it even further into line with other parts of the suite. As with InDesign, you can now collapse all the palettes into small icons at the edge of your screen to free as much work area as possible. There’s also the ability to have the split screen command show code and design mode vertically beside each other instead of one above the other, a nice addition in a world where not all web pages are flat and wide any more.
Dreamweaver also now has the application bar you’re used to from other CS4 tools, and the whole thing has been overhauled slightly to make it look more part of the family and a little more modern.
The biggest group of changes address the continuing trend towards dynamic page behaviour, which Adobe says most of their customers were adopting. Until now Dreamweaver was behind the times, unable to display real-time behaviours like rollovers — you’d have to preview the result in a browser and hunt through the source code to find your error.
But as no website document file is an island, every time you open a file the names of every other file that impacts on it (from javascript to CSS files or includes) appears in the Related Files bar above the main window. A single click opens that file’s code into the Code View window while your current document remains in the Design View pane, refreshing to reflect the change when you save the script or CSS file.
Live render editing
In fact, real-time preview is something Adobe has taken seriously. Live View loads any external behaviours right there in your Print View pane so you can see them as they happen, a great addition because until now Dreamweaver couldn’t show you (for example) ‘on’ states for rollovers. If you want to change a colour or other property, clicking on something in Live View takes you straight to the corresponding code for further tinkering.
You might still want to preview in a browser just to make sure, but there’s more. Beside Live View in your toolbar is the Live Code button. Click it and all the code turns yellow. Look closer and you’ll see that there’s a lot more HTML in your mark-up (if you’re working with a dynamic page). The reason is because Dreamweaver is loading the behaviours, states and whatever else impacts on the page from the Related Files and displays them as if it was the source code your browser would show. If you decide to make a change to any behaviour or attribute simply open the relevant file using the Related Files bar, save the change in the CSS and the Live View window will reflect it straight away.
Taking the identification of related files one step further is the Code Navigator. It’s a small window you can bring up by right clicking on an object in Design View or a piece of code in Code View and reveals all related behaviours, states or attributes. Just double click on the one you want to edit and the code in the relevant file is loaded into Code View for you to make your change.
I Spry
Spry is a javascript framework built into Dreamweaver that allows you to import static content into a dynamic object such as browser-generated AJAX code. Most of us would simply start again when programming a dynamic object, but if the data is already in another HTML file you’re double handling it.
Spry’s most compelling use is a wizard that lets you extract the relevant data from that flat HTML file and recode it in a dynamic form, ready to drop into your new page wherever you want it.
If you update the original flat file the Spry data will update too which is cool, but ‘breaking’ the relationship between them once you’re done isn’t obvious enough, so you’ll be constantly worried someone will accidentally update your dynamic data against your wishes if they update the original.
As far as the demands on your system, Dreamweaver’s built for a powerful machine. We tested it on a last generation G5 Mac, and there were a few glitches as the software asked for more than the processor had to give. For one thing, we had to click the code, design and split view buttons several times each to get them to react.
But Dreamweaver had some catching up to do to address new trends and working environments and it’s done both admirably.