A First Look at Dreamweaver MX 2004

Meeting the standards that Web developers look for

Nov. 17, 2003 12:00 AM

The Web always changes, and the tools we developers use must also. Dreamweaver MX 2004, the next generation of the popular Web development program, is on its way, featuring improved support for cutting-edge CSS, time-saving enhancements, and performance improvements. In this first look, MX Developer's Journal presents an overview of the changes.

CSS Rises to the Top

Web development is a moving target; once you've mastered one technology, a new standard comes along to take its place. Macromedia's dedication to providing tools that allow Web developers to ride that "bleeding edge" is evident in the significant enhancements to Dreamweaver's Cascading Style Sheet support. From basic text formatting to complex CSS-based page layouts, the program is infused with CSS.

In this release, Dreamweaver throws off deprecated formatting conventions like the <font> tag in favor of a cleaner separation of content from presentation. The Property Inspector, for example, now creates CSS styles when a user applies font-face, size, and color properties to text. Basic page properties, like background color and page margins, are all CSS based, so developers can use the program with less fear that Dreamweaver will insert deprecated attributes.

The creation and editing of CSS styles are also streamlined. You can edit a style using the new CSS Properties panel, whose basic editing grid makes changing or adding properties quick and easy. And when properties from multiple styles converge on a selected tag, the Relevant CSS panel is a big help (see Image I). It lists all styles (and properties) affecting the current selection, so you can quickly figure out what properties from which styles are formatting the selection.

For example, in Image I the Relevant CSS panel indicates that a <p> tag is currently selected; it's nested within three divs, which are themselves within the <body> of the page. Highlighting a rule (the <body> in this case) displays that rule's properties - properties in blue apply to the selection, while properties crossed out in red do not apply or are overridden by more specific styles. In this example then, the paragraph inherits "Arial" from the <body> as well as line height; however, the color (#333333) is overridden by another, more specific rule.

CSS support in Dreamweaver MX 2004 isn't limited to text or basic formatting, either. The program now does an excellent job of displaying CSS-based, table-free layouts (see Image II). In fact, the overall rendering of CSS within the program's design view is greatly improved. Working with the basic-building block of CSS-layout - a <div> - is also simplified; you can now select divs quickly in design view, and the new Insert Div object provides fine-grained control over placing divs on a page. To jump-start your CSS layouts, the program ships with several sample designs (like the one pictured in Image II).

To make sure your "bleeding edge" design doesn't end up a bloody mess in some poor person's browser, Dreamweaver MX 2004 adds a new crossbrowser validation tool. Check your pages against a customizable list of Web browsers to see whether your code will work (see Image III.) For example, if you're not sure how well Navigator 4 supports the CSS "padding" property, Dreamweaver's Browser check can tell you. The feature is very customizable: it can check for errors when the page opens, you can change the list of browsers to check against, and you can even set it to ignore errors you know are there but aren't harmful - such as the fact that the "marginwidth" attribute isn't supported in IE.

Helping You Work Faster
Other changes to the program are aimed at helping Web developers work faster. Get out of the gate quickly with the new start screen. It lets you open recent pages, create new files, and use supplied sample files to jump-start your design work. In addition, the program can remember files that were open the last time you quit the program, and reopen them when the program launches again. You no longer have to click through the Insert bar's multiple tabs just to insert the code you want; the new "Favorites" tab on the Insert bar holds all of your frequently used Dreamweaver objects (Insert Image and Insert Table, for example) in one easily customized tab. And snippets-addicts can rest their mouse-pads - the program's customizable keyboard shortcuts now support snippets!

Nothing can grind your workday to a halt like receiving content from a client, boss, or co-worker. Oversized, unoptimized JPEGs and highly formatted Word documents often mean hours of extra work. Fortunately, Dreamweaver MX 2004 can help ease this pain.

For quick image modifications, the Property Inspector sports some simple image editing tools, so you can optimize, crop, sharpen, and adjust the brightness and contrast of images - all within Dreamweaver. For more complex work, the program still integrates seamlessly with Fireworks.

Working with Word and Excel documents has also gotten easier. Dreamweaver finally retains basic formatting such as paragraph breaks, bold, italics, and headings when pasting from Word or Excel (this change alone could save you hours of work a week.) And if your boss insists that a Web page look just like the Word Doc he or she sent you, the "paste formatted" command preserves complex page formatting (at the expense of some bizarre and unwieldy CSS).

MX 2004 also features improvements to its FTP functionality - it's faster and more reliable (but still won't work in the background). And, if you don't need Dreamweaver's powerful site management features (all you need is one simple change to a page on your server, for example) "site-less" file editing lets you skip Dreamweaver's "Local Site" metaphor and work directly on files off an FTP or RDS server.

Today's Technologies
Modern CSS support isn't the only technological leap forward for the new Dreamweaver. For those in need of privacy, the program now supports Secure FTP for completely encrypted file transfer. In addition, if you communicate with an international audience, you'll find full Unicode support. Now you can build your pages using any font supported by your operating system - even doublebyte character sets.

Dreamweaver began life as an HTML editor. It's since morphed into a CSS editor and proven itself to be a capable text editor. This latest version also boasts improvements in XML editing. Dreamweaver's code view supports XML namespaces so you can use the built in code-hints feature while authoring XML, and even validate your XML against an imported XML schema.

On the server side, Dreamweaver MX 2004 doesn't have as much to brag about. The basic server models introduced in Dreamweaver MX remain largely unchanged. If you've longed for more server behaviors to further expand the program's capacity to rapidly build database applications, you'll have to wait until the next version (or search through the many third-party extensions).

PHP developers will be happy to see that the User Authentication behaviors available in the other server models have been added for PHP/MySQL, as has the Master/Detail page set. (Unfortunately, still missing are the Go To Detail Page and Go To Related Page behaviors.) For ASP.NET, Dreamweaver introduces ASP.NET form control objects. You can build forms for using .NET Web controls; all properties of the form control can be modified in design view using the Property Inspector.

Even if Dreamweaver can't do everything for you automatically, at least it can help you find the answers. Dreamweaver's reference panel, which provides helpful references on key Web technologies from industry-leading authorities, has some new additions. You'll find SQL, ASP.NET, and PHP references from O'Reilly, as well as two ColdFusion references from Macromedia. Now the answers are at your mouse-tip.

The MX World
Dreamweaver doesn't stand alone in the Macromedia Pantheon. With every new version of MX the synergy between the company's programs increases. While the full story remains to be written, Dreamweaver MX 2004 provides some interesting glimpses into what the future might hold. Two fledgling features - MX HTML Elements and Flash Elements - while minor parts of Dreamweaver MX 2004, hold some mystery and a lot of promise.

According to the Macromedia Press releases, "MX Elements are a series of prebuilt components available in both Dreamweaver and Flash with a new generation of interactive design patterns embedded, making it fast for designers and developers to build the most effective UI for the task."The only example in this version of Dreamweaver is "Halo," a slick, chrome-inspired, CSS-only design (see Image II). It's cool, but hardly earth-shattering; what makes it most interesting is the fact that it's worthy of making the Dreamweaver press release. Whether this is part of some bigger plan for application integration (the Royale Inititiative - www.macromedia.com/special/royale - perhaps?) only time will tell.

In addition, Web developers (with little or no Flash knowledge) may find the new Flash elements helpful. A Flash element is basically a Flash movie whose properties can be customized within Dreamweaver. The only example that ships with Dreamweaver MX 2004 is the Image Viewer (see Image IV). It's basically a Flash-based slideshow projector. After inserting it into a page, you can use the Tag inspector to see various properties, including the name of the slideshow, the URL of images to appear in the show, and caption text for each slide.

While you might not need a slideshow, the idea behind the feature - customizable Flash movies - does hold promise for more interesting tools in the future.

No overview can cover it all. There are thousands of changes to the program: new features, interface enhancements, bug fixes, and performance improvements. But one thing is clear: in Dreamweaver MX 2004, Macromedia shows that they're committed to keeping pace with the rapidly changing standards and technologies that Web developers use and rely on.

About Dave McFarland
Dave McFarland is the Dreamweaver editor of MX Developer's Journal and author of Dreamweaver MX: The Missing Manual. Find out about his latest projects at www.sawmac.com.

DAVEMCFARLAND@SYS-CON.COM