Few people, if anyone, believed that GoLive would survive Adobe's acquisition of Macromedia. Dreamweaver was always the stronger, more widely-used product, commanding over three quarters of the market for professional web design. It has been the Gold Standard for some time, and was probably second only to Flash on Adobe's shopping list when it approached Macromedia with a merger in mind.It appears in three suites: Design Premium, Web Premium and Web Standard, showing how key web-based output is in this post-page-bound world. It is also a part of the Master Collection.Fireworks, also covered here, appears only in the two Web-prefixed suites and the Master Collection, as its intended use has subtly changed. Many expected it to disappear altogether in the face of competition from Photoshop and the embedded ImageReady optimisation tools. However, rather than being a simple editing and compression suite, Fireworks has a new, important role in prototyping site designs before they are fully coded in Dreamweaver.
DreamweaverIf you're a first-time switcher from design to code view, there are plenty of helpful notes hidden behind the scenes. The code of the templated layouts is not only fully commented to explain best practice, but also full of tips and helpful hints, written in plain English. For example, 'Since the side columns em-based sizing is based on the user's default font size, you will want to be sure that background graphics in the columns take that into account. Built correctly, this is more accessible for those that need larger font sizes, since the width of the columns remains proportionate. If this is undesirable with your design, simply change the width to a pixel size and be sure to change the margins on the #mainContent div accordingly.'Other comments explain why some code, which may seem rather superfluous, is included, such as 'In the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs that may occur.'As a bonus, coding problems are now highlighted with green wavy underlines, like grammatical errors in Microsoft Word.
There are no big surprises in Dreamweaver CS3's interface, which largely resembles previous versions. The Insert Bar at the top of the screen had some new additions, though, including a tab for the Spry framework for working with Ajax.Dreamweaver now makes it easier to change the way you're working in the middle of a job. If you started by defining your CSS inside your page, or you opened an existing page from another site and wanted to copy the formatting to your new site in the form of an external stylesheet, a dedicated button lets you shift the styling information our of your active page and into an attached document. The regular excellent reference work remains in place, with books from O'Reilly covering HTML, CSS, ASP.Net and other languages embedded into the application itself. There is also a powerful validation tool that links to Adobe's own CSS Advisor site, which both diagnoses problems and suggests solutions.
A comprehensive CSS advisory site hosted on Adobe's servers bolsters Dreamweaver's in-built help system. The level of detail is impressive.None of this is particularly groundbreaking stuff. Neither is it a massive advance on what we already had in the last release. The real draw for serious developers, though - and the reason why it's worthy of an upgrade - is the newly-integrated Spry framework.
I Spry...Spry is a JavaScript library written to simplify integrating Ajax features in a web page. It works to bind together a coded page and an underlying XML source, providing the kind of interactivity you'll have experiences through Gmail and Google Docs.This works in part through the familiar Bindings palette, which as with previous versions is where you set up symbolic links between your pages and a database, and through the Behaviours palette, through which you can add on-screen effects to various elements on your page.
Adding Web 2.0-style effects to page elements is simple, as a palette-based system lets you direct the results to alternative elements on your page.There are already competing frameworks, such as Ruby on Rails, which are used for developing Web 2.0 sites, but having Spry built right inside Dreamweaver is an enormous boon, as it allows you to tweak settings from a series of menus and drop-downs, rather than through code.Once an XML data source is attached to the page, it works in the same way as any other database, but by combining it with interactive page elements, such as accordion boxes, or objects that grow and shrink as you mouse over can - if used wisely - help pack a lot of information onto the page without overloading the visitor.
Working hand in handAs you'd expect, integration with other applications in the suite is excellent. You can now copy and paste directly from Photoshop and Fireworks, and Dreamweaver is intelligent enough to keep track of the originating application, so that when you want to make it change it will re-open the embedded graphic in the appropriate app. Previous releases had adopted a one-size-fits-all approach, and opened graphics in specified default applications regardless of their origin.Once on the page, you can also make a wide range of changes in situ, the most impressive of which is an extensive image optimisation tool which, combined with cropping tools, means you can now bypass much of the image processing stage for early site mock-ups, by tailoring pictures within Dreamweaver in a similar manner to the way you may in InDesign.
Extensive borrowing from other applications in the Adobe stable substantially extends the features available to Dreamweaver, which now has enhanced image editing tools built in, and excellent hooks into Photoshop.Its ties to Device Central CS3 let you simulate various mobile browsing environments, and preview your site on an emulated handset straight from the Dreamweaver interface. However, integration here is not as extensive as it is between Device Central and Flash, Photoshop or Illustrator, as you can neither create new mobile documents, nor emulate Flash Lite content. You are therefore restricted to previewing and testing existing mobile content and learning about the devices on which you want to deploy your completed site.Of course, it goes without saying that you can manage your assets and documents through Bridge. Likewise, Contribute CS3 is fully gemmed up on how to handle Dreamweaver's templates, for easy collaborative team-working.
FireworksFireworks should now be your first step in designing a rich media site. It was once only used to save bandwidth by knocking greedy images into shape before they were laid on the page, but it's now a prototyping tool, albeit one that has lost none of its former functionality.How does it do this? It introduced a new multi-page working mode, in which a single Fireworks file can contain several prototyped pages, each of a different size, settings and image resolutions. In itself that's not so radical, but the ability to share layers across several pages at once, effectively making their contents the equivalent of elements on a master page in InDesign.It maintains PNG as its native file format, resisting the temptation to switch to Photoshop PSD, but does take a lead from its big brother in introducing a new heirarchical layer structure, whereby document elements can be stored in collapsible folders, rather than just a flat single structure. Organising elements this way also means that whole sections can be hidden and revealed at once, saving you a lot of individual clicking and guesswork when you want to focus on just one specific object and hide everything else.It also now incorporates Photoshop's layer styles, so will be immediately familiar to any first-time users who previously worked solely in Photoshop. Likewise, seven of Photoshop's layer blending modes have made the transition, but sadly not the full set, so hard light and soft light, among others, are missing.Yet as ever it is the features you wonder why nobody thought of before that are the most impressive. Intelligent scaling is top of this list, as it lets you scale graphic elements, such as rendered text boxes, without distorting either the pixel-based letters or the corners of the box. It's a simple tweak, but it delivers immeasurably more professional results.
After converting an image to a symbol, you can activate 9-point guides, which allow for intelligent scaling that will preserve the integrity of corners and text.The live optimisation mode has real 'wow' factor, for while it was previously necessary to complete your design and then switch to the save for web tool to preview the compressed results, you can now work directly in a split-screen window that shows both your original work and the optimised results, complete with read-outs of the file size, format, palette information and how long it would take to download.
This may look like the familiar image optimisation screen, where you can compare a variety of image compression settings side by side, but as it is now a part of the creative interface, these images are now live, and output file sizes update on the fly as you edit your pictures.If you're the kind of person who buys DVD box sets just so you have every episode in the same packaging, then you're also the kind of person who would upgrade from the most recent Dreamweaver and Fireworks to these new iterations. However, while there are many impressive new features here, it feels with both of them that the focus has been on integrating them into the Creative Suite, rather than blowing us away with a radical feature overhaul. As such, we still rate them highly, but not so much as we do Photoshop, Illustrator and InDesign. They're good - very good - but not essential buys.
Read reviews of the other applications in Creative Suite 3- Photoshop CS 3: Smart Filters for non-destructive editing + Movie features
- Illustrator CS 3: Intuitive Eraser + Great colour control
- InDesign CS 3: Richer styles and effects + Easier to place multiple items
- Flash CS 3: Improved Photoshop integration + Better illustration tools
- Dreamweaver & Fireworks CS 3: Web 2.0 tools + Intelligent scaling
- Device Central: Easily check mobile devices' capabilities and test content
Author: Nik Rawlinson
Adobe Dreamweaver and Fireworks CS 3