VERDICT Simple HTML editing becomes a distant memory as Dreamweaver CS4 concentrates on advanced CSS and JavaScript handling for today’s complex compound web pages.

The secret behind Dreamweaver’s original rise to dominance as the professional’s web page authoring tool of choice was its introduction of the Split view showing editable layout and code views side-by-side – or rather top-to-bottom. Now Dreamweaver CS4 at last lets users split the Split view vertically making far better use of today’s widescreen real estate. In addition Dreamweaver CS4 offers a range of new preset workspaces, including a Dual Screen option, and the ability to collapse panels to spring-loaded icons ready to open with a single click.
Otherwise the most obvious difference to the Dreamweaver interface, and indeed to its whole working approach, is the introduction of a new Related Files bar below the document tab. This lists all files referenced in the current HTML source file allowing instant access to all linked CSS, JavaScript, template and library files. A nice touch is that, in split view, the design window still shows the web page itself so that you can edit your external CSS file, for example, and simply click below to see the resulting effect of your changes.

New compound file and CSS handling changes the nature of web page editing in Dreamweaver CS4.

Having all the files in today’s compound web pages immediately to hand is a major step forward, but it’s only the start. What you really need is to be able to find relevant code wherever it is in all those files. This is especially important when dealing with CSS rules that can be defined inline, in the page element or in multiple external CSS files. That’s where the new Code Navigator feature comes in. Simply Alt+click in your Code or Layout window and a dialog appears indicating all the code sources relevant to the current selection with all rules ordered by their specificity. Hold your cursor over a listed CSS rule and you can see its properties while clicking on it takes you directly to the relevant code.
The Code Navigator is great for users that prefer editing their CSS code directly, but that’s not compulsory. You can still use the CSS Styles panel to quickly change relevant properties wherever they are and, with Dreamweaver CS4, you can also now use the main Properties panel to edit CSS. In the past this panel was focused solely on HTML and you can still add structural heading, list and link tags along with class attributes in the panel’s HTML mode. However all formatting properties have now been moved to the panel’s new CSS mode. Now when you change font, size, style, colour and alignment properties you’ll update all instances of the current most specific CSS rule. Hit the Targeted Rule dropdown and you can select any other rule in the current cascade or, if there isn’t a current rule for your current selection, a dialog will appear in which you can create one. It takes a bit of getting used to, but the new split mode does ensure best practice in terms of separating HTML structure and CSS style.
CSS is great for handling the appearance of the page and its text, but you also need to be able to handle graphics. For bitmap-based images, Dreamweaver has always enjoyed tight integration with Fireworks (see page ), but now the introduction of SmartObjects makes the support for Photoshop (see page ) similarly tight. You can now insert PSD files directly with a dialog appearing in which you can create a web-optimised JPEG or GIF version. The link to the PSD is maintained making it simple to edit the original and automatically update the optimised output.
For more advanced web media, Dreamweaver has the great advantage of working tightly with Flash (see page xx). Here the handling of SWF movie and FLV video insertion has been reworked (again) with new