Dreamweaver Studio MX

Marvelous Web Tools, Enhanced

by Jim Bray

Macromedia’s Web development software has always offered a lot of power and flexibility, but the new MX Suite version ups the ante seriously while making them all work together more efficiently than before.

We’ve used and liked Dreamweaver and Fireworks for a long time (for a review of the last version click here), and have tolerated Flash as well. But Macromedia is about more than just those three apps, though that may be their “bead and butter”; they also make Director and ColdFusion (reviewed here) among others. So this new suite, by bringing most of their Web tools together under a single umbrella, has become a true tour de force in the world of creating and managing online content.

Macromedia Studio MX includes the abovementioned Dreamweaver, Fireworks and Flash, with ColdFusion MX server and Freehand thrown in for good measure. It adds up to a powerhouse package that really can enhance your Web credibility and efficiency.

The idea is to put as many tools as possible right at your fingertips, and the studio does just that. All the applications feature a cleaner interface that’s now shared across them and this is not only more efficient it also makes the learning curve a little less steep.

Dreamweaver gets easier to use with each incarnation, and MX is easily the best yet. When you first install it you’ll notice a new interface that replaces the earlier floating windows with a single set of nested windows that puts plenty of potential at your “mousetips.” The main window has room for the page on which you’re working (its default is on the left), and beside it is your site’s tree. Dreamweaver uses a dizzying number of tabs and rollups to let you easily access other features such as design and code windows for the site and “layout,” “text,” “tables,” “forms,” and the like that give you point and click access to design elements. It’s well organized and easy to use.

But if you’re an old stick in the mud (like me!), you can go back to the “classic” Dreamweaver interface of floating windows. You still have access to all the windows and tabs mentioned above, but you can park them wherever you want on your Windows desktop, which I find more flexible (though more confusing at times when you lose track of one!).

Macromedia says the new version of Dreamweaver lets developers and programmers create and manage sites using HTML, XML, XHTML, ColdFusion, ASP.NET, ASP, JSP, or PHP. The manual says the product combines the traditional Dreamweaver with Web application development features of Dreamweaver UltraDev and the code editing support of HomeSite+ (the latter of which has come bundled as an extra in previous versions).

As before, Dreamweaver lets you choose from WYSIWYG “Design View”, HTML “Code View”, or a combined one that offers both, with the window split to show the code on top and the WYSIWYG below. This is my preferred view, since it gives you the best of both worlds; I prefer setting up a page in design view (it’s easier), but there are plenty of times when you still have to roll up your sleeves and get down and dirty with the html code, and the combined view makes this particularly easy.

Coding features abound, including tools that let you debug JavaScript and code editors for JavaScript, XML and more.

One feature I’ve always liked is Dreamweaver’s ability to clean up code from other applications. It isn’t perfect, and I find I still get cleaner code using Hot Metal Pro’s “Tags On WYSIWYG” view, but it requires little conscious thought and I like that! As before, there’s also a specific command that cleans up MS Word HTML (Word inflicts an awful amount of HTML crap on your document).

Here are some other nifty things about Dreamweaver MX:

• Round Trip HTML: lets you make changes to a file in Dreamweaver, Fireworks or Flash MX and have them reflected in the other apps
• When you want to put a graphic into a page and that graphic doesn’t exist, you can merely put a placeholder in the html document, launch Fireworks to create the graphic and, when you’re done, the graphic automatically appears in the html page.
• If you need to edit a graphic, you can launch the appropriate app right from inside Dreamweaver, and whey you’re finished you can click a button to update the page with the edited graphic.
• Site management: Dreamweaver (not just MX), has wonderful site management features. The “synchronize” feature checks out both local and remote versions of the site and flags the files that are changed between them for easy uploading. And if you rename a file or move it in the site, Dreamweaver will pore over the entire site and change all the related links for you. It’ll even check remote links.

The MX version also features more powerful templates than before, including nested templates, editable, optional and repeating regions for more flexibility. And a new set of code libraries lets you create things like database insertion and update forms or user authentication pages and, as mentioned above, there’s new support for building ColdFusion MX, ASP.NET, and PHP websites as well as enhanced support for creating ASP, JSP and legacy ColdFusion applications.

If your developer (or you) doesn’t know where to begin in this day of ever more complex sites, Macromedia has also thrown in some pre-built layouts and code, including entire site structures, forms, accessible templates, and JavaScript functions. You can also kick off your new, dynamic site quickly with a setup wizard.

Cascading style sheet creation and editing is enhanced in MX as well, and now Dreamweaver’s CSS panel shows internally and externally defined styles and allows for design-time only style sheets. And for those times when you have to roll up your sleeves and work with the html code, you can take advantage of Code Hints, Tag editors, color coding, and a Tag Chooser that lets you pick codes from a drop down menu and drag/drop them into your page. There’s quite a few of these, too, and they work well. When you’re finished, Dreamweaver will look over your page and validate the html code for you.

And if you want to get your feet wet with ColdFusion, there are site wizards, code samples, and reference material included. People whose ColdFusion feet are already wet can take advantage of ColdFusion Components, web services, debugging and tracing.

It all combines to make what was already a terrific product even better.

Fireworks MX is also easier and more powerful than ever and though it isn’t the app I normally use when creating a simple Web graphic, it’s a wonderful tool I’ve used many times for designing the basic look of an entire Web site before starting the actual construction in Dreamweaver. Not only is it good for creating a particular site design, but you can add navigation bars and other interactivity right in Fireworks and export it into a fully functioning Web page you can use as a template for your Dreamweaver work.

You can also create rollover buttons, pop up menus and the like, with Fireworks generating all the html code for you. It’s a wonderful tool, and it sure beats doing all that stuff by hand.

The first thing you notice upon firing up Fireworks MX is the new interface shared across the suite. It’s more streamlined than before, which is good, and offers more powerful button and pop-up menu capabilities (and it was no slouch before!). Macromedia has also made it integrate better with other applications, from Macromedia and others, which helps when bringing a variety of file formats into Fireworks and exporting them to other applications again. Also new to the MX version of Fireworks is the ability to create JavaScript commands with Flash and have them appear in Fireworks MX as panels or dialog boxes.

As with Dreamweaver, Fireworks MX features enhanced panel management, which means you can group various panels together and then roll up the groups so only its title bar shows until you need the panels. This helps clean the clutter from your desktop when you’re working while keeping stuff close at hand at the same time.

The Property inspector changes depending on what you’re doing. When you open a document, for example, it shows stuff like canvas color and size – but if you choose a particular tool that tool’s options are displayed. This is something Corel has been doing for a while now, and it’s very welcome here.

And you can now change options directly from the Property inspector instead of having to pore through a bunch of different panels to find the particular property you want to tweak.

One feature I really liked is the Onscreen text editor, which lets you work with text without having to open up the Text Editor. This speeds things up dramatically. All you have to do is choose the Text tool, click on the canvas, and start typing. And by using the Property inspector mentioned above, you can either set the text tool’s attributes before you start typing or simply highlight existing text and format it. There are also new text and paragraph controls – and a spelling checker.

Oh, and if you didn’t find previous versions of Fireworks particularly easy to zoom, as I did, you’ll probably like the new Variable Zooming feature that lets you set the magnification merely by dragging the Magnify tool.

Fireworks MX also comes with creativity and automation features that beginning Web designers will probably like. For example, a Data-driven Graphics Wizard lets you assign variables to your graphic (or parts of your graphic), and then use that original to generate multiple documents each of which takes its own information from a database file.

And if you’re tasked with creating a navigation bar, the new Nav Bar Builder automates the process by using Fireworks MX button symbols. You can, for example, choose a button symbol, then the number of copies to make, vertical or horizontal orientation, and labels and URLs. And you can create a pop-up menu (horizontal or vertical), and determine border characteristics, cell spacing and size independently from the size of text you’re using. As before, Fireworks automatically generates the JavaScript code for you and you can copy and paste it into the proper area of your Dreamweaver page.

There’s a lot more, too, but you get the idea: MX is a major enhancement of what was already a powerful app.

Then there’s Flash MX. Flash animations have come a long way from the days where they seemed merely there to encourage clicks on the “skip intro” link of Flash-infested home pages. This is good!

Flash also features the new, cross-app interface, and has been tweaked in numerous other ways as well. The MX version gives designers more control and better integration, helping animators concentrate more on their designs than on the software. I like this, because I’ve always had the dickens of a time learning Flash. The new version doesn’t automatically turn you into an animator, but it’s better than before.

You create animations by putting different elements into a timeline that represents the duration of the “show.” Flash MX includes such enhancements to the timeline process as folders for organizing layers, and the ability to resize, cut, and paste multiple frames.

Workspace enhancements include the gathering of the most commonly used features into one context-sensitive Property inspector, with other common features now appearing in the same type of collapsible panels as with Fireworks and Dreamweaver. And there are new “starter” templates this time around, which helps you get up and running by streamlining the creation of a new document.
One thing I’ve always liked about Flash is its tutorials and Flash MX comes with complete lessons designed to help you get up to speed with the new features.

And expanded video support lets you import video clips from a variety of formats including video for Windows, Quicktime, and DV.

Other tweaks include:
• A “free transform tool” that lets you combine multiple effects.
• An “Envelope Modifier” you can use to warp and distort a shape by messing with the “bounding box” that surrounds it (a feature common with graphics development software).
• A “Break apart” feature that lets you edit text characters without converting them to symbols first.
• The “Distribute to layers” command sends any number of object to their own layers

There are also enhanced scripting and debugging tools and “Flash components” that give you drag and drop elements like list boxes and scroll bars.

The other major app in the MX studio is Freehand 10, a vector graphic development application now in version 10. We’ve never reviewed Freehand before and I’m not sure it really belongs in this suite since it isn’t specifically aimed at Web developers, but what the heck: the more the merrier!

Freehand 10 is first and foremost designed for print developers, but now offers plenty of Web functionality so that, as with QuarkXpress 5, you can create one document for both media, and publish it to both without have to redesign the document from scratch.

We won’t dwell on Freehand here, since so far we haven’t had a lot of time to actually learn it, but you can find out more info about it from Macromedia’s Web site at http://www.macromedia.com/software/freehand/

But here are some of the tweaks:

• With the navigation panel you can assign hyperlinks to objects, create notes that export with your document, or assign Flash actions to FreeHand objects.
• Master pages that, among other things, let you set page attributes for a range of document pages. Change the master, and each related page updates automatically.
• Symbol editing that, when you edit a particular symbol, automatically updates all instances of that symbol in your document.
• And you can now assign Flash actions to FreeHand objects, preview and test a Flash movie in FreeHand, and export a FreeHand document as a Flash file.

The final major component of Macromedia Studio MX is ColdFusion MX Server, a server scripting environment for creating Web applications. ColdFusion helps you build dynamic Web sites, content publishing systems, e-commerce sites and the like.

ColdFusion MX supports Windows, UNIX, and Linux, integrates with java and .NET. It can run as a standalone server or on an enterprise application server like IBM WebSphere.

We aren’t technically savvy nough to really do this product justice, so we won’t try to dumb things down excessively by pretending. However, you can get some pretty good product information from Macromedia’s Web site at http://www.macromedia.com/software/coldfusion/productinfo/product_overview/

Add all these products together (though they're also available separately) and you have what to us is the most powerful and flexible suite of Web development tools yet available.

Jim Bray's technology columns are distributed by the TechnoFILE and Mochila Syndicates. Copyright Jim Bray.

Tell us at TechnoFile what YOU think