When Macromedia merged with Allaire, it looked as though Allaire’s server technologies might dominate the Macromedia product line. Dreamweaver in particular seemed to be concentrating more on server-side technologies such as ColdFusion, PHP, and .NET than on the graphical Web-design tools that had originally been its strength.
Those server technologies are still strongly supported in Dreamweaver MX 2004, but this time around Macromedia has redressed the balance and come up with an upgrade that should please Web designers, as well as coders and developers.
Macromedia hasn’t forgotten about the basics of Web design and ease of use. When you launch Dreamweaver, you’ll see the new Start page, which is similar to that now found in the 2004 versions of Flash and Fireworks. This allows you to open recently used files or to create a variety of new files. You can start a HTML page, create a CSS style sheet, choose from a range of framesets, or go straight into the Site Definition Wizard. Alternatively, you can start work on a Web application using any of the program’s supported application-development technologies.
Start me up
The Start page provides some introductory material and tutorials, although you need to switch to your browser or to the Mac or Windows Help viewers to access some of this material. It’s a bit irritating, and this material would be more useful if it were contained within one of the program’s own palettes.
When you move into the program itself you should notice that it feels faster and more responsive – especially if you’re using a Mac. There has been a fair amount of under-the-bonnet fine-tuning to improve performance, and a number of interface refinements, such as a more compact Insert Bar. This now includes a Favourites option, which allows you to customize the Insert Bar with the options you use most often.
In the Properties palette there’s a new mini-toolbar that appears when you click on an image file. This contains a number of image-editing options, such as cropping, resizing, resampling, and even a sharpening filter, so you can perform basic editing without having to use Fireworks or any other image-editing program.
More powerful are the improved table-editing tools. There are visual aids to help you modify tables more quickly, such as the ability to show or hide table borders. You can get a precise numerical display
of column widths, and right-clicking on a table opens up a menu with numerous options for quickly merging or splitting cells, adding or deleting rows and columns and modifying other table settings. These new options, along with the different viewing modes available
for editing tables, take a lot of the donkeywork out of designing and editing tables.
You should be able to drag-&-drop both Excel and Word files from the desktop into a Dreamweaver document. We found that this feature was a bit erratic, though. The program sometimes inserted a link to the document when we wanted to copy a table straight onto the page. However, the Copy-&-Paste option works well, so you can open a spreadsheet or Word document, copy a table and then paste it straight into Dreamweaver without losing any formatting.
In addition to these graphical editing tools, Dreamweaver has added features for people who like to hand code. One useful feature is the new Browser Checker, which automatically checks your pages
for compatibility with a variety of different browsers.
The Browser Checker is a simple button found in the toolbar that runs across the top of each document window. Place your mouse over this button and you’ll see a brief message that quickly tells you how many errors it’s found.
If you’re in Design view, you can switch to either Code or Split view, and you’ll see the offending code highlighted.
Press down on the Browser Checker button and you’ll open a sub-menu that provides a number of additional options. You can create a compatibility list that tells Dreamweaver to check for compatibility with specific versions of the various browsers, or create a list of exceptions that tells it to ignore certain tags when it’s running the compatibility check. You can open the Results panel, which will show any other potential coding problems in addition to the browser-compatibility checks.
This will save you plenty of time when designing your pages, and if you do find any errors in your work there are other time-saving new features that will help you to correct them.
Just as you can right-click on a table, you can now right-click on a selected piece of code in order to open up a menu that contains a variety of editing options.
You can instantly Comment Out lines of problematic code, turning them into a comment that is ignored during debugging. You can completely strip tags out of selected lines of code, or convert a selection into a table by wrapping it inside a table tag.
The right-click menu allows you to save a selection of code as a snippet that can be reused as often as you like. The program allows you to create keyboard shortcuts so you can insert snippets at the press of a button (although this option is hidden on the Mac, tucked away in the main Apple menu – separate from all the other Preferences options).
Select a tag in Code view, or an object in Design view, and the improved Tag Inspector will automatically show the attributes for that tag, allowing you to instantly edit them. You can list the tag’s attributes alphabetically or by category and view any CSS rules or predefined behaviours that have been applied to that object.
The Find-&-Replace command has been beefed up, allowing you to locate specific text or tags in any open document, in documents stored in specific folders, or anywhere within a selected Web site. The Reference panel has been updated to provide comprehensive information about all available tags and their related attributes. Our only criticism here is that Dreamweaver’s online Help files can be unhelpful at times. They’ll
tell you how a new feature works, but sometimes leave you wondering where that feature can be found within Dreamweaver’s maze of menus and tabbed palettes.
The biggest set of new features in Dreamweaver is focused on style sheets. Dreamweaver had some support for cascading style sheets before, but this version marks a major shift towards using CSS as the basis of all your work.
The CSS rendering in Dreamweaver’s Design view has been improved, so you can get a clearer idea of how your pages are going to look without having to constantly switch to a browser preview.
Many of the tools available for working with tags have corresponding options for editing style sheets. The idea, clearly, is that you should eventually be working with CSS styles as routinely as you do with HTML tags.
There’s a Rules Inspector that works just like the Tag Inspector, showing you the CSS rules relating to any selected object on a page, and allowing you to edit the rule attributes within the Inspector palette. There are on-screen code hints for CSS rules within Code
view, similar to the hints for tags.
The main Property Inspector lists CSS styles, allowing you to change styles simply by selecting from a pull-down menu. Yet another CSS palette lists the various style definitions, and double-clicking on a style automatically displays the full style definition in the main document window.
These are all useful options, but with so many palettes, sub-divided into so many tabbed pages, it’s easy to lose track of these features. Flash allows you to save specific sets of palettes and list them in the Window menu, making it easy to switch from one set of tools to another. We’d like to see a similar option here.
The Page Properties dialog is CSS-based as well, specifying settings such as a default font, margins, and background colour. These settings are saved as a series of CSS rules, although you do still have the option of using standard HTML tags. That ability to cater to users with different levels of expertise is another
of Dreamweaver’s strengths. Newcomers who still prefer to work in graphical mode can use the program’s Design view, and then use the Code and Split views to dip into tags and coding as they gain more experience. If you’re familiar with HTML, but not quite ready to write your own CSS rules, you can use the Page Properties dialog to specify basic settings for your pages and then let Dreamweaver create the appropriate CSS rules.
And, of course, there are all those server-side, application-development technologies for the hard-core developers out there. New predefined PHP behaviours can be used to quickly create user-authentication pages, and there are new options for using the Design view to create forms using JSP or ASP.NET. There’s an updated version of the HomeSite text-based code editor, with a new features such as using code snippets created in Dreamweaver.
Striking that balance between the needs of designers, purist coders, and application developers is perhaps the greatest achievement of this upgrade. Dreamweaver is a complex beast, but Macromedia has done a good job of making its power accessible to as many users as possible.
As a result, this upgrade can be unreservedly recommended to existing users – and may well attract switchers from rival editors, too.