Software News - netfordownload.com

Adobe Dreamweaver CS4

A shift of focus to advanced CSS and JavaScript handling, but Dreamweaver is beginning to look old-fashioned.

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 code in the page and a link to a supporting JavaScript file, which manages different player and browser scenarios. The benefits are that users will be able to upgrade their Flash players without having to leave the page, and that the code is recognised as valid XHTML.

Another important change in current web design practice has been the move to dynamic content handling. The secret behind this is Ajax, which combines JavaScript, CSS and XML to update page content live within the browser without requiring a new page request.

Dreamweaver CS3 introduced such handling with its support for the Spry Ajax framework; CS4 greatly extends its scope, starting with a major reworking of the core Spry Dataset component. Previously this was limited to working with advanced XML data such as RSS feeds, but it can now accept data, including images, from simple HTML tables or lists, and provides a wizard to set up such simple data sets.

It’s not just input handling that’s been enhanced, you can now output the data as stacked containers, a sortable table or a master/detail relationship - all excellent ways of dealing with large amounts of repetitive data onscreen.

Dreamweaver CS4 also lets you move beyond Spry handling with its support for other web widget frameworks. Connect your page to a YUI calendar, for example, and you can link your data set to it. This isn’t for the faint-hearted, but Dreamweaver CS4 adds support for JavaScript code-hinting of custom classes to help things along. And once you’ve connected up your inputs and output, there’s a new Externalize JavaScript command that allows you to cleanly remove such logic from your pages. By installing Dreamweaver
CS4’s AIR extension you can also repackage interactive data handling as
a standalone cross-platform desktop app.

Live and interactive

Previously, to see the results of such interactive JavaScript-based handling in action you needed to preview your page in your browser, but not any more. Hit the Live View command and your layout window provides a view of your current page just as it would appear in a browser, complete with all JavaScript-based interactivity, media playback, and so on. In fact, under Live View your layout window effectively becomes a real browser; Adobe has integrated the open source WebKit engine directly into Dreamweaver CS4.

Having such browser-based rendering immediately to hand is particularly helpful when you need to make changes to code that is state-dependent. For example, to see the effect of changes to a CSS-based rollover, you only need to click the Refresh button. Even better, by clicking the Live Code button you can see how the source code generated by the browser changes as you interact with the page. Click the Freeze JavaScript command and you can use the Code Navigator to see just which CSS rule is determining the current hover state, and jump directly to it.

It’s all impressive stuff, and Dreamweaver CS4 again redefines the standard for hands-on web page authoring. However, redefining the standard causes its own problems. To begin with, this release sees support for a whole host of previous staples such as Layout Mode, Flash Text, Web Services, Site Map view and Timelines deprecated. That will disappoint some users, but Dreamweaver’s range of support for other web technologies remains extraordinary. In fact, you could argue that it’s too wide, adding complexity and losing focus. Certainly Microsoft Expression Web’s (web ID: 197913) concentration on a few modern standards makes it seem comparatively fresh, simple and streamlined.

The problem for Dreamweaver goes deeper still. The nature of the web is changing radically: it’s moving away from Dreamweaver’s core focus on web pages crafted by the central designer towards data-driven web applications and third-party content creation. In both cases Dreamweaver still has a role to play, but it’s much less central.

Ultimately Dreamweaver CS4 is a strong release and strengthens its position as the most powerful web page authoring package available. However, this role is both more complex and less important than it once was.

Source: pcpro.co.uk