---

ANIMATION WORLD MAGAZINE - ISSUE 4.2 - MAY 1999

Macromedia's Latest: Making the Web Easy...

by Jeff Williams

All images taken from the Macromedia Website (www.macromedia.com). © Macromedia, Inc.

It is the common pitch of software developers that their product is the all encompassing, miracle, wonder tonic that will cure all of your computer ailments. Those of us who use these software packages have learned to proceed with the caution we normally reserve for travelling salesmen, carnival barkers and infomercials. The folks at Macromedia, Inc. wish to challenge our cautious hesitation once again with their updated release of the Dreamweaver/Fireworks Studio. They may not have created the end-all, be-all web design package, but they came pretty darn close.

Firstly, the updated Dreamweaver/Fireworks Studio is actually two products, Dreamweaver 2 and Fireworks 2, both of which can be purchased individually or together. We reviewed the original release of both these products in our September 1998 issue. Recently, Macromedia released the second version of both of these products to provide for the new user, a simple yet powerful way of designing web pages. For previous users of Dreamweaver and/or Fireworks, Macromedia added some new features that make complete web design even easier.

Building Pages: Dreamweaver 2
Dreamweaver 2 is one of the most powerful WYSIWYG (What You See Is What You Get) editors available to web designers (although Adobe's newly released Go Live 4 is supposed to be competitive). As with the first release, the program is an intuitive page editor that allows users to build pages quickly by formatting text; creating and editing tables; changing background, object and text colors; assigning links; placing pictures and even building form objects with the click of a mouse. These features haven't changed much from the original Dreamweaver and for the novice user they will still provide a quick and easy way to build pages. One new feature of Dreamweaver 2 that would definitely benefit a novice user is the Visual Site Map. One of the most important things for a new web designer to understand is the hierarchy of pages in a web site. As a site grows and new levels are added to the server, it becomes more and more important to "keep all of your ducks in a row" as the saying goes and be very organized in terms of where all the pages and page objects are located. The Site Map gives the user a visual representation of the entire site and the relation of pages to each other. This new feature also allows drag-and-drop capability, so pages can be moved and links reassigned quickly and easily.

The new visual site map feature.

While a novice or casual web designer will find Dreamweaver 2 beneficial, the program was designed for professional web developers and it is the program's advanced features that truly set it apart from other WYSIWYG editors. The most powerful feature of Dreamweaver 2 is its complete integration with the text editor BBEdit 5.0. Anyone who has done a fair amount of web design knows that WYSIWYG is a misnomer...that is, what you see is NOT always what you get. With all of the different browsers and platforms being used, the only way to make sure web pages appear as intended is to edit the source code. Both Dreamweaver and Dreamweaver 2 provide the user with an editable HTML window, but the programs are much more effective with the simple and powerful BBEdit 5.0. BBEdit works in conjunction with Dreamweaver allowing the designer to jump back and forth between the two programs with the changes being updated instantly. Another advantage of working with BBEdit is the program's ability to FTP pages directly to the server. All of this means that you can design your page in Dreamweaver and BBEdit, upload them to your server with Fetch and view your work on-line in a matter of seconds...a web designers dream! Macromedia made this even easier by including the latest versions of BBEdit, Netscape Navigator and Internet Explorer on the Dreamweaver 2 installation CD.

Page Templates and Libraries are two other new Dreamweaver 2 features that will ease your design experience by reusing work you have already done. A major bane of the web designer's job is building a vast number of pages that are predominantly the same, with only minor changes in content. Page Templates let one maintain a consistent look across several pages by storing the design and requiring one only to edit the content. Dreamweaver 2's library function also reuses material by storing scripts which one might use on several different web pages.

Perfection is an elusive goal and despite my lofty praise, Dreamweaver 2 does have a few drawbacks. The program works with many different variations of HTML code, including PHP3 and for the first time, XML; however, the program can't handle PHTML code. When one brings a PHTML coded page into Dreamweaver, it catonates some of the tags, essentially altering or erasing part of the page. The preview feature is also very cumbersome. It is just as easy to load the page to the server and view it on-line as it is to go through the steps to preview it. A browser preview window would be a nice feature. Most annoying of all, Dreamweaver 2 cannot directly import MS Word files. Several extraneous steps had to be taken to import the text you are reading right now.

Fireworks 2: The Graphics Side of Things
Besides page content, the most important aspect of a well-designed web page is how fast the page loads. The key to mastering load speed is to reduce the file size of the graphics. To conquer this section of web design, Macromedia created Fireworks, with the idea that Fireworks would be to web designers what Adobe Photoshop is to graphic designers. Although Fireworks will never replace Photoshop for hi-resolution, high quality graphics and images, Macromedia Fireworks provides all the tools necessary to create graphics and simple animations for the web quickly.

Web design differs from other areas of graphic design in that instead of creating a few spectacular images, whose primary purpose is to catch the eye; web design is about creating a lot of little images with common elements, whose purpose is to create a consistent, organized and attractive environment. Fireworks succeeds most in giving the user complete control over these elements. Icons, buttons, banners, navigation bars, backgrounds and animated GIFs can all easily be created and edited with Fireworks tool palettes.

The object hotspot palette and improved behavior palette make it even easier to assign behaviors such as rollovers and status messages to web objects.

The new release of Fireworks 2 retained most of the functions of the original tool palettes with a few important improvements. The two most noteworthy palette changes are improved color control and a fully editable web behavior layer. Fireworks 2 makes it easier to choose colors for text, backgrounds and graphic objects with new color wells that display 216 web-safe colors. The designer is given even more choices with a new dithering feature that allows one to join any two web-safe colors to create an infinite number of web-safe colors. With rollovers and hot-spots becoming more prevalent on the web, Fireworks 2 includes a web layer in its 'Layers and Frames' tool palette, which allows the designer to assign links and captions to graphic objects. The web layer works directly with the improved 'Behaviors' palette to assign behaviors such as rollovers, hot spots and status bar messages to all or part of any graphical object. The behavior palette also includes a new URL manager, in which one can create and store a library of reusable URLs.

A popular method of reducing the file size for large graphics on the web is to slice the object into smaller images that load quicker and actually reassemble themselves on the web page. Fireworks 2 lends a helping hand by adding a slice tool to the toolbox. Not only can you dice up your web graphics and export them as individual files, but you can also assign different web behaviors to each individual slice. The new navigation bar on our Animation World Network home page (http://www.awn.com) consists of several individual slices, each with a link to a different part of our site. Our improved Village section (http://www.awn.com/village) has a navigation bar made of individual slices with a rollover link assigned to each slice.

This navigation bar, and the java script that supports it, was created with Fireworks 2 for use on the Animation World Network Village pages.

With Java scripting becoming more and more the rule instead of the exception, Fireworks 2 most succeeds in automatically generating the necessary script when one exports a graphic. Even for those who think Java script is a fine piece of prose written at the neighborhood coffeehouse, Fireworks makes it nice and simple by generating a text document whenever you export that tells you what script to use and where to paste it into your web document. Another added feature is the ability to specify the script specifically for a Dreamweaver document. This integration with Dreamweaver makes it even easier to add advanced behaviors to your web graphics and even store them in a Dreamweaver Library.

All Together Now
We have recently added or updated three new sections to our Animation World Network site: Career Connections (www2.awn.com/career), Animation School Database (www.awn.com/schooldir) and the AWN Student Corner (www2.awn.com/studentcorner). Every page and every object on all of these pages was created using Dreamweaver 2 and Fireworks 2. While perfection has not yet been achieved, the flexibility and simplicity afforded by these programs make them almost invaluable tools for any web designer.

Hey! Maybe we should start paying attention to those infomercials...

Dreamweaver 2 and Fireworks 2 are compatible with both Windows and Macintosh systems. Be sure to check out the minimal system requirements before purchasing. More information is available at the Macromedia website (www.macromedia.com).

Jeff Williams is Animation World Network's webmaster.

---

Note: Readers may contact any Animation World Magazine contributor by sending an e-mail to editor@awn.com.

---