Dreamweaver 4/Fireworks 4 Bundle, by Macromedia
Posted: 23-August-2001

4 out of 5 Mice

Vendor: Macromedia Type: COMMERCIAL

Reviewer: KC MacGregor Class: PRODUCTIVITY

Dreamweaver 4 Fireworks 4 Studio retail price: $399
(Each purchased separately costs $299 for a total of $598)

First consider this: Neilsen, the same company which compiles ratings for television, tracks internet use and for the first week of August this year they show that the typical user spent three hours a week surfing the web and no more than 52 seconds per page on average. That's less than a minute for a web site designer to get the attention of the person surfing that page, less than a minute to convey enough information to make the viewer want to return. Every web page designer, professional or amateur, wants that audience to stick around long enough to see the site and get its intended message.

One sure way to do that is to create pages that look good, have interesting content, that load quickly, and where the dreaded "under construction" button doesn't linger on the page month after month. Software like Dreamweaver is aimed at helping you to achieve these goals and more.

Macromedia has bundled its latest Dreamweaver and Fireworks into a Studio bundle which makes it less expensive to buy together than separately. Dreamweaver software helps you to automate the production and maintenance of your web site, saving you, the web site designer, from time-consuming repetitive tasks. If you are creating a web site with multiple pages that contain similar content, such as navigation bars, banners, or buttons, Dreamweaver allows you to update those elements on every page with ease. If you were the designer of an on-line catalog, for example, you could use Dreamweaver's templates feature to quickly change your shopping cart button, company logo, promotional banners, etc., without having to find and change the html code for each element individually. This ability to facilitate consistency of production with ease of operation is a hallmark of Dreamweaver 4 and Fireworks 4, and is especially important to designers creating complex sites.

In their user manual, Macromedia characterizes Dreamweaver as "a professional HTML editor for visually designing and managing Web sites and pages", but then goes on to say that "Dreamweaver makes it easy to get started and provides you with helpful tools to enhance your Web design experience." Easy to get started? That might be somewhat of an exaggeration. Dreamweaver's complexity, terminology, and quirky interface (combining Mac-like flexibility with Windows-like "nope, guess again" inflexibility) make it a bear to take on. It's power, extensibility, and customizable nature, however, make it a bear worth taming.

Requirements
According to Macromedia, Dreamweaver 4 needs a Power Mac running Mac OS 8.6 or 9.x, with:

  • 32 MB of RAM plus 135 MB of disk space
  • A 256-color monitor capable of 800 x 600 pixel resolution
  • A CD-ROM drive

I think what they meant to say was that you'll need 32 MB of RAM just for Dreamweaver itself, because it indeed uses up about 32 MB of RAM. And what happens if you want to run your integrated Studio partner application, Fireworks? In my case, I got the error dialog:

There is not enough memory to open "Fireworks 4" (12,094K needed, 11,445K available)
To make more memory available, try quitting "Dreamweaver 4".

I guess the good news was that it didn't pick on some other application for shut down.

To run Fireworks 4, according to Macromedia, you need a Power Mac (G3 or higher recommended), running System 8.6 or 9.x with:

  • 64 MB of RAM plus 100 MB of available disk space
  • Adobe Type Manager ® 4 or later for using Type 1 fonts
  • A color monitor (1024 x 768 resolution, millions of colors recommended);
  • A mouse or digitizing tablet
  • A CD-ROM drive

Once I had everything fired up, including Internet Explorer and Netscape, I had only 1 MB of unused RAM left (out of a total of 128 MB). Not a lot of wiggle room left, is there? OK, I admit I boost up Navigator's memory for stability reasons, but what if I want to run other applications like PhotoShop or Flash or BBEdit (which Macromedia thoughtfully includes with this Studio bundle as a demo package, and which can be invoked directly from a Dreamweaver pull-down menu).

Using Dreamweaver
Dreamweaver offers three basic types of information on its use: Guided Tour movies, Tutorials, and Lessons, and you don't want to skip over them. In the user manual, Macromedia suggests you "start by reading the parts that are most relevant to your level of experience." But it then goes on to virtually identical advice to both "HTML Novices" and "experienced Web designers who are new to Dreamweaver". To wit:

  1. Begin by watching the Guided Tour movies.
  2. Next, work through the Dreamweaver tutorial to learn the basics of using Dreamweaver.
  3. Work through the lessons for the topics that interest you.
  4. Read "Dreamweaver Basics" for a further overview of the Dreamweaver user interface.

Becoming a Dreamweaver user feels like you're joining a club. This is not a bad thing. For example, there's the Dreamweaver Support Center: "The Dreamweaver Support Center Web site is updated regularly with the latest information on Dreamweaver, plus advice from expert users, examples, tips, updates, and information on advanced topics.

http://www.macromedia.com/support/dreamweaver/

And the Dreamweaver discussion group:

http://www.macromedia.com/software/dreamweaver/discussiongroup/

After consulting with some fellow novice Dreamweaver users, I found we all agreed: a formal course with an experienced teacher in Dreamweaver can save you a lot of head-scratching and gnashing of teeth. This is especially true if you are a Mac-o-phile like myself and not familiar with the oddities of the Windows operating system. I found the Dreamweaver approach to commands and nomenclature was often counter-intuitive, but I am told that this is familiar territory for Windows users. (Check out some pages created by students at a week-long intensive course on Dreamweaver at Phoenix College to see how a class can get you started on the right track:

http://www.pc.maricopa.edu/departments/art/Sum01Web/)


Using Fireworks
The other half of the Studio bundle is Fireworks 4. Fireworks is the graphic editor component of this duo, giving you tools to create, edit, and animate Web graphics, add interaction and manipulate and optimize images in both bitmap and vector editing modes.

Macromedia themselves wax rhapsodic in their chapter on Fireworks Basics: "Fireworks is a state-of-the-art application for designing graphics for use on the WebÖYou can edit with vector-object flexibility and apply bitmap effectsñincluding bevels, glows, drop shadows, and PhotoShop filtersñthat redraw automatically as you editÖFireworks generates JavaScript, making rollovers easy to create."

Sounds cool. I never got too ambitious in Fireworks, however, but I was thrilled with the animated GIF I created in virtually no time flat. I particularly liked the optimization features which kept my graphic from becoming unwieldy in size, but still clean to the eye. Plus, I was able to insert my animation quickly and easily into the page I was creating in Dreamweaver. Very nifty.

Fireworks offers up to four window views at once of your graphic under different formats (with their sizes and estimated loading times) and lets you choose which one is the best trade-off of quality and efficiency for viewing on the web. Fireworks' rollovers are fun: as the cursor passes over an image another image pops up. Rollovers are used frequently and effectively for dynamic web buttons, as well as other uses.

As with Dreamweaver, Fireworks includes a tutorial ("an interactive introduction to the key featuresÖ it can be completed in about an hour") and lessons ("from the basics of animation to creating rollovers and pop-up menusÖ each lesson can be performed in about 10 minutes"). These lessons are pretty easy to follow and, once again, I recommend them to the novice as a good starting place. Neither Dreamweaver nor Fireworks is the kind of software that encourages the inexperienced user to plunge in and start creating. You have to work closely within their structure or you'll find yourself with lots of functions that won't execute. But "color within the lines" and you'll be thrilled with the results.

The biggest advantage of Fireworks 4 appears to be it's compatibility ó specifically the round-trip editing feature - with Dreamweaver, along with expanded export and import options including PhotoShop files. For example, one of my image folders included 80 files, ranging from old 1989-era Digital Darkroom and SuperPaint files to recent Illustrator graphics and TIFF and native-format PhotoShop files. Everything but the Jpeg and GIF-formatted files were invisible to Dreamweaver ó they just were not listed at all (grayed-out or otherwise). Fortunately, and thanks to it's dual bitmap/vector nature, all of these images were readable by Fireworks. Best of all, masks and layers/layer names in PhotoShop images import directly into Fireworks as object masks and layers/frame names.

The only caveat I have with Fireworks' amazing capacity to generate graphics is to keep in mind that you have 52 seconds tops to get that viewer's attention. Graphics intensive pages can be slooooow to load, and even a low-res graphic can seem to take an eternity to load for those out there with a 28K modem. Remember, not everybody is surfing the web on a high speed T1 or DSL line.

The Overall Package
Overall, this package of Dreamweaver and Fireworks puts quite an impressive range of web page possibilities before you. The structure of the two programs is such that you can easily go back and forth between them (assuming you've got the 128 MB of RAM minimum that I recommend), encouraging you to try adding some razzle-dazzle to your site. There's a lot of emphasis on workflow and maintenance in Dreamweaver that I liked, that reminds you in effect, whatever you upload, somebody else will have to download. Sort of the internet version of "What goes up must come down". That means keeping vigilant about consistency in your site within its own internal structure, as well as consistent with the ever multiplying demands of the web, with all the various browsers and platforms that will view your pages.

Macromedia has added some nice features to Dreamweaver 4. The Split Code and Design Views windows allow you to see the html code in one window and see the standard view in another, allowing you immediate visual feedback as you update your code. The ability to default or consistently resize these windows would be a nice option, however, and the code jumps up and down in disconcerting fashion.

For an example, to the right is the split view of some old HTML I created almost five years ago (which opened in Dreamweaver without a hitch). The panes reflect the top-most and upper right-hand corner of the HTML code and the page itself, respectively. When I scroll vertically in the image pane, I get a disconcerting horizontal scroll in the code plane as well. Likewise, if I scroll the code view back horizontally to the left (back to the start of every line), the page in visual view stubbornly scrolls back vertically to the top of the page and vice versa. I was unable to get rid of this quirky behavior.

On the other hand, the roundtrip html allows you to go from Code View to the visual view, and from an editor such as BBEdit to Dreamweaver and back (as discussed previously). The integrated O'Reilly code reference pops up in a menu box and explains the relevant html tag that corresponds to your selection. This is a really cool feature. However, it's a feature you wish could be fully resized as needed for flexibility. Dreamweaver only allowed limited resizing of this feature, and offered no resizing of the tutorial and lessons windows. Given an average size monitor, the screen gets quickly cluttered if you want to keep handy all these fixed displays. A "professional" web designer with a 21+ inch monitor is at an advantage here.

On the design side, there is a layout view (as distinct from the standard visual design view). You can use this view to create liquid tables and cells that maintain their size relative to one another when a user resizes their browser window, no matter how many tables are on the page. This is a good feature (albeit, there is an inconsistency in verbage, with the tool being called the "Draw Layout Table" tool in the palette, but the "Draw HTML Tables" tool in the tutorial).

Given that I was using the Macintosh version of this Studio bundle, why were the tutorials and lessons all showing Windows views and using Windows commands? Granted there is a lot of similarity, but when they were different, it was confusing to say the least. As a Mac user, it still annoyed me to have to cater to Windows quirks, such as forcing a three letter extension into the file name. For example, I received the following "warning" more than once:


I could have checked the "Don't show me this message again", but I shouldn't be getting this message at all.

Accessibility an Added Bonus
Kudos go to Macromedia for addressing the issue of accessibility head-on in Dreamweaver, and if you think accessibility just means specifying ALT text on images, I recommend you check out one or more of the following:

http://www.section508.gov/
http://www.access-board.gov/508.htm
http://www.webaim.org/


In their own words: "Macromedia supports the creation of great Web experiences that are accessible to everyone, including those with disabilities. We encourage the implementation of international standards to guide developers of accessible sites, including the guidelines offered by the World Wide Web Consortium (W3C)... W3C guidelines on Web content encourage developers to adopt design and coding practices for accessibility, many of which are robustly supported by Macromedia productsÖ For the latest information on product features and resources that support accessible design, please see Macromedia's accessibility page."

You can find this page at
http://www.macromedia.com/macromedia/accessibility/ and the extension it let me download provided an opportunity to extend Dreamweaver's functionality, adding a new "Accessibility" pull-down menu to Dreamweaver in between the "Window" and "Help" menus. Once loaded, selecting "Run Online ReportÖ" invokes a web-based tester from UsableNet Inc.. Clearly, the ability to extend Dreamweaver developers to create new objects, commands, and behaviors is a powerful function.

What's Not To Love?
For us creative types, formulating the concept and structure and look of a web page is fun, but managing it, keeping it operating smoothly, and updating it routinely is not so fun. Whether you're a professional web site designer or an amateur who knows your way around basic html, the Dreamweaver 4 Fireworks 4 Studio has a lot to offer. With its steep learning curve, learning Dreamweaver did make me cranky at times. Editing html with a text editor is like riding the bus to work. By comparison, Dreamweaver software is supposed to be like driving a Ferrari or a Jaguar. I wondered, would you drive a Jaguar if it was influenced by the Windows user interface? Well, yes, of course you would!

PROS:

  • Bundle Price (i.e. it's a $200 savings)
  • Dreamweaver's Template feature
  • Dreamweaver Support Center & Extensions
  • Fireworks "easy-as-pie" animated GIFs


CONS:

  • Steep learning curve
  • Confusing terminology
  • Quirky interface (e.g. window resizing and scrolling)


Overall Rating

4 out of 5 Mice