Features – Macromedia Studio MX: Powerful, Integrated Web Development (finally!)

Roger V. Skalbeck is the Technology Services Librarian and Webmaster at George Mason University School of Law in Arlington, Virginia.


Introduction

Do you maintain a single web site by using multiple software titles from multiple vendors? Do you use different programs for graphics, page design, file transfer and maybe even other things for programming such as Javascript and database connectivity? Well, you might not have to continue using programs from multiple companies.

As an alternative to this, consider Macromedia Studio MX. This is a collection of web development programs, integrated to accomplish countless web development tasks. This release from Macromedia includes the following products: Dreamweaver MX, Fireworks MX, Flash MX and FreeHand 10. Windows users also get the bonus product HomeSite+, the latest update to this powerful HTML and code editing program. Macromedia has designed this suite of programs with an eye towards integration and interface uniformity, and together they represent the latest and greatest in an evolution of useful and powerful web development programs.

In the materials that follow, I’ll review the two components which are most likely to be of interest to people who produce web content: Dreamweaver MX (which is used to create, maintain and upload web pages) and Fireworks MX (which is a graphics program, that also allows you to assign dynamic behaviors to graphics, incorporating HTML and other computer code). Since each product branded with this new version of “MX” is technically released in version 6.0, this review is divided into six sections, most of which list six elements:

Overview

Six Things to Love About Dreamweaver MXSix Fun Features of Fireworks MX
Six More Reasons to Consider Studio MX Six Arguments Against Studio MX
Bottom Line: Pricing and Closing Comments

In this review, I try to focus on practical aspects of the programs, and I have included features of potential interest to web content developers of all skill levels and involvement. Whether you maintain a single personal site or you control multiple database-driven sites for different organizations, I think that Macromedia Studio MX has some great things that you can use right away. I only hope that this review does as well.

Overview

First and foremost, the most visible feature of Studio MX that qualifies it as a studio software suite, can be found in the uniform design interfaces between the products. By default, the various functions and tools of each product are set up with almost identical orientation, each having collapsible and movable program menus anchored to the right and below the work space. Below are screenshots from typical workspaces for Dreamweaver and Fireworks, with regions of each highlighted for illustration.

Screenshot of Dreamweaver MX Screenshot of Fireworks MX
Dreamweaver MX Screenshot Fireworks MX Screenshot
A Insert Menu. Items are grouped by function such as “Forms”, “Text”, “Frames” and “Common”.
B Main workspace. Here the area is shown with a split HTML & visual (WYSIWYG) display. You can also display either view by itself.
C These are the program windows. The file view and attribute history panes are open here. At least six other windows are available for quick access to groups of program features.
D Properties inspector. Here you can view and assign properties of text, hyperlinks, graphics, tables and other elements.
ATools. In Fireworks, these are grouped by function, and they are assigned logical labels such as “Vector”, “Select”, “Colors” and “Web”.
B Graphics file workspace. The above view illustrates comparison of an original image with the target output resolution and file type. You can view up to four versions of a single graphic at one time.
C These are the program windows where you can optimize graphics, view image layers, and locate any other program functions in separate windows.
D Properties inspector. Here you can view the properties of the item currently selected or the tool in current use.

Content integration features represent another unifying feature shared between the software titles of this suite. Programs allow you to share and integrate content from one application to the other, similar to the aims of a typical office suite such as those from WordPerfect and Microsoft. By example, you might create graphics in Fireworks that that incorporate HTML code that is rendered in Dreamweaver, incorporating links to interactive content designed with Flash, all of which pull data from a server model attached through an interface in Dreamweaver. In short, each program has distinct purposes, but all of them can be used to incorporate and integrate content into a single web site.

Six Things to Love About Dreamweaver MX

Dreamweaver MX is a program used to design web pages, which can be done visually as well as in resident HTML code. It incorporates a file transfer interface, so you can upload your pages directly a server, and it allows you to set up connections to databases. By means of illustration, here are six examples of Dreamweaver’s features:

  1. Site Management
    The site management options of Dreamweaver MX are so useful, you might wonder why you never had them before. Not only can you transfer files and directories directly, Dreamweaver will check links when you move files, change file names, or transfer documents. When you upload a document, it allows you to upload dependent files (graphics, style sheets, etc.) at the same time, and you have the option to automatically post changed pages whenever you save them. The program also supports site-wide changes based on text, snippets of HTML code and specific tags.
  2. Clean up Word HTML
    If you have ever tried to take HTML files exported from Microsoft Word or Excel without dealing with the hassles of of the additional code that they use, you’ll appreciate the cleanup features found in Dreamweaver MX. Not only can you remove proprietary Microsoft tags, but you can also remove empty tags, repair missing ones, and much more.
  3. Import Tabular Data
    If you want to use table-based data (such as figures in an Excel spreadsheet), you can import it directly into Dreamweaver (as a delimited file) without having to manipulate complicated Excel HTML files or worry about database connectivity. By using pre-defined and customizable table formatting in Dreamweaver, you can make attractive tables with just a few keystrokes.
  4. Pre-Defined Designs
    Want to make a new page, frameset or stylesheet, but you don’t want to do it all from scratch? Dreamweaver MX includes dozens of new pre-formatted examples which you can use as the basis for designs of your own.
  5. Page Templates
    With Dreamweaver, you can design page templates which allow end-users to edit text only in specified regions. With Dreamweaver templates, you can also reformat and redesign entire sections of your site without having to update every page manually. As an example, after you’ve designed a template for attorney biographies, you might decide that you want a menu on every page to include links to practice group lists. With the template options, a few simple steps can propagate the updates throughout the entire site.
  6. Database Connectivity, Server Modeling
    For dynamic database-driven sites, Dreamweaver provides you extensive options for integration with Active Server Pages (ASP), Java Server Pages (JSP), ColdFusion and PHP. You can enable databases and server types, and the standard Dreamweaver interface allows you to insert pre-defined and dynamic objects based on any of these programming environments when you have them available to you.

Six Fun Features of Fireworks MX

  1. Professional Graphics With Amateur Effort
    In spite of the sophistication and complexities of Fireworks MX, it still does a great job with simple tasks. When you need to crop images, create icons that incorporate text or optimize any graphics for the web, Fireworks MX provides simple tools for your immediate use. In brief, Fireworks MX deliversProfessional Resultswith Amateur Effort . By example, these buttons were created, optimized and exported within less than two minutes. Fireworks MX provides about thirty default styles that you can assign to text and objects, so you can add depth and professional-looking effects without knowing how to use (or even find) the right tools.
  2. Context-Sensitive Object Properties
    When you switch between drawing tools in Fireworks, the properties display changes accordingly. For example, when using the text tool, the properties pane displays available typefaces, leading, kerning, and visual effects options. When you switch to something like a rounded rectangle tool, the same properties box displays object size, axis placement, fill type, colors, point size, and visual effects options.
  3. Image Optimization
    In Fireworks, you have explicit control over the quality, size and format of any image you edit. Once you acquire a new image, Fireworks allows you to control how that file will be exported, and you can preview up to four versions to see visual differences between files of varying quality and type. The image below depicts a preview pane with the 437 k original on the left and a JPG file with 40% quality that is 72.8 k in size on the right. Note the approximate download time listed under the image on the right.

Image Optimization Example

  1. Roll-over menus
    Want to make those nice rollover menus that pop up and look like this:
    Pop-Up Menu Example
    With Fireworks MX, you can design these menus without any programming or scripting knowledge. You simply select various attributes through a handful of option screens, and Fireworks creates the computer code for you.
    Caveat: If you aim to design a site that will function in all browsers, note that these menus don’t work in the Opera browser.
  2. Data-driven Graphics
    Consider this: You need to make individual graphics for the name of every shareholder, partner or professor in your organization, but you don’t want to create, save and close that many documents. For this, the Fireworks data-driven graphics feature is a perfect solution. Here, you create a graphic file with a variable field, combine it with an XML document (or comma-delimited file), and presto, you can create multiple images in a snap.
    XML Data-Driven Graphics Illustration
  3. Animation and Other Effects
    With Fireworks, you can create image animation on a pane-by-pane basis, and you can also create image rollover effects. As with the Roll-over menus, the program produces the necessary HTML and script code that you can export to Dreamweaver for use on your site. There are also tutorials on using these dynamic effects, so you can walk through the creation process step-by-step.

Six More Reasons to Consider Studio MX

  1. Software Extensions
    By using what are called Macromedia Extensions, you can take advantage of software tools, add-on programs and automated scripts designed by other users. There are over 1,000 extensions listed on the Macromedia web site for the various products, which can be used to assist with scripting, text manipulation, site navigation and overall productivity. By example, Dreamweaver extensions can be used to create web photo albums, validate online forms, reformat text, create a table of contents and provide numerous ways to check and validate your site for accessibility standards.
  2. HomeSite+ and Code Insight
    If you need direct access to your HTML code, HomeSite+ provides extremely sophisticated coding options, including integration with ColdFusion, ASP and other server types. Windows users get this program for free with Studio MX. In addition to this, the HTML editors in Dreamweaver and HomeSite+ both give you what is called “code insight”. This means that as you start to type, it suggests elements appropriate to a given tag, which eliminates guesswork and doesn’t tax your typing skills. Here’s an example:
    Code Insight Example
  3. FreeHand
    If you need graphics for print as well as your web site, FreeHand is a great tool. It is a vector-based graphics program, which means you can create images that scale in size without degrading in quality. FreeHand is also very useful for creating web graphics that you will also use in print, and it has many other applications not covered here.
  4. Flash
    Have you always wanted to try out Flash, but you didn’t have a chance to do so? Then Studio MX is a great way to get access to Flash. If you contract with outside developers to produce Flash-based content, then you might be able to get the source files from them in order to have it for subsequent in-house modification.
  5. Provides “Room to Grow”
    For a modest user, Macromedia Studio MX might likely provide more functionality than you need right now. This really should be seen as a good thing. Just because a web site might start out small or simple, it doesn’t have to remain so. With Studio MX, you can expand content options, re-develop your site and even change your entire site architecture all within the same suite of programs.
  6. Keyboard Shortcuts
    Hundreds of discrete tasks can be called out with just a few keystrokes. Whether or not you are a “keyboard person”, these shortcuts can save you the time and improve precision. For example, you can use ++V to paste text you want treated as HTML, or you can use ++M to join cells in a table. Macromedia sorts shortcuts by activity type, and users have the option to create and save personalized shortcut functions.

Six Arguments Against Studio MX

  1. Existing Comfort.
    If you are already comfortable and satisfied with an existing program like FrontPage, GoLive! or even Netscape Composer, maybe you don’t need to switch. If you can comfortably maintain your web site now, and you don’t foresee making any major changes in the near future, why would you want to buy and learn new software, unless it’s “just for the fun of it”?
  2. FrontPage.
    If you maintain a site that runs on a FrontPage server, Dreamweaver probably won’t integrate well. Microsoft FrontPage uses proprietary features that are enabled only on servers that run what are called “FrontPage extensions”. Also, FrontPage has its’ own integrated approach to file transfer, which is very flexible on FrontPage servers. That said, if you don’t have a good graphics program, Fireworks MX is worth considering.
  3. Price.
    $799 might be a lot to pay for one software package, especially if your employer balks at re-stocking pencils in the supply room. Though the adage”you get what you pay for” holds true here, it’s hard to get what you can’t afford to pay for.
  4. Learning Curve.
    If you haven’t used Dreamweaver before, and especially if you haven’t used a graphics program (such as PhotoShop or Fireworks), there is a learning curve with these products. Even if you only use 10% of the features of any product, it takes time to find and understand that 10%. Since these are sophisticated programs, they can also be complicated for certain “easy” tasks, especially the first time you try to do any particular task.
  5. Overkill?
    If you are only involved with one aspect of web development (coding, content, graphics, but not “all of the above”), the full studio MX suite might be more than you need. Perhaps you just need Dreamweaver or Fireworks.
  6. “Staying on the Farm”.
    Once you get used to the sophistication, integration and extensive features of Dreamweaver, Fireworks, and HomeSite, it’ll be hard to “stay down on the farm” with FrontPage, Netscape Composer or PaintShopPro.

The Bottom Line: Pricing and Closing Comments

Macromedia is very smart about how they decided to price the Studio MX product. If you want more than one title, you can pay almost the same price to get the whole studio. Here’s typical pricing for an average consumer, current as of October 2002 (“average” infers a non-academic user with no upgrade options):

  • Individual titles:
    Dreamweaver MX $399, Fireworks MX $299, Flash MX $499, FreeHand 10 $399, HomeSite 5 $99 (this product is apparently less powerful than HomeSite+).
  • All together: $799
    Note that this is the list price. A very cursory search on CNET revealed prices ranging from $640-$770, excluding shipping.

Macromedia Studio MX is very attractive for those in the educational arena, as the full product can be purchased for less than $200. If you already own an earlier licensed version of a Macromedia product, there are upgrade options. To figure these out, check with your favorite software vendor, or contact Macromedia directly.

Before settling on Studio MX, you should realize that they are not the only game in town. The biggest competition comes from Adobe Systems in their Adobe Web Collection. It has a list price of $999, and it includes GoLive! (web publishing), Illustrator (vector-based graphics), LiveMotion (comparable to Flash) and PhotoShop (image editing). These products are recognized to be some of the best tools available for creating content for the web, and they inevitably provide features unavailable (so far) in Studio MX.

In closing, Macromedia Studio MX is overall a very impressive product, but it is not “everything for everybody”. Many features are easy to figure out, and Macromedia provides impressive online documentation and tutorials to help you with discrete tasks. Nonetheless, with sophistication comes complexity. If you want a simple program to achieve modest results, Macromedia Studio MX products might provide more tools than you need. In case you think that one or more of the Studio MX components are right for you, thankfully Macromedia lets you download free trial versions of the core programs so you can find out for yourself.

Copyright © 2002, Roger V. Skalbeck. All Rights Reserved.

Posted in: Features, Web Management