Adobe Dreamweaver CS4 in Software

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 one on top of the other.

Dreamweaver CS4 at last lets you split the Split view vertically, making far better use of today's widescreen monitors. In addition, Dreamweaver CS4 offers a range of 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 change made 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 result of your changes.

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 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 who 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. This means that when you change font, size, style, colour and alignment properties you'll update all instances of the current and 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 this approach does ensure best practice in terms of separating HTML structure and CSS style.

Rich content

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 close integration with Fireworks (see opposite), but the introduction of SmartObjects means support for Photoshop (see p40) is now similarly tight. You can insert PSD files directly, with web-optimised JPEG or GIF versions created on the fly. The clever thing here is that 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 being able to work tightly with Flash (see p50). Here the handling of SWF movie and FLV video insertion has been reworked with new