Dreamweaver 2.0

"An Impressive Web Design Program"

Click on a thumbnail to enlarge it. Use your browser's "BACK" button to return to this review when done.

Dreamweaver 2.0, an upgrade by Macromedia, is a visual editor for creating and managing Web sites. You can use it to design your home pages or to start your own e-business. It includes all the HTML text editing, page layout and Dynamic HTML capabilities in one program, and it is available for both the PC and Macintosh so you can create cross-platform, cross-browser pages. You can create tables, edit frames, and switch easily from page view to HTML view. With Macromedia's Roundtrip HTML technology, you can import HTML documents without reformatting the code. Dreamweaver fully supports Cascading Style Sheets (CSS-1), and you can use JavaScript behaviors or Dynamic HTML features such as animated layers without writing a line of code. Dreamweaver 2 includes a full copy of either Bare Bones BBEdit 5.0 for Macintosh users or Allaire HomeSite 4.0 for Windows users. Price: $299 for Windows or Macintosh; Upgrade: $129. Macromedia has an excellent site to visit, with all sorts of information, freebies, and tutorials. You can also download the program directly from the Macromedia site for a reduced price: $269, Upgrade: $99: http://www.macromedia.com

• Page color schemes: Create great looking sites quickly.
• Tracing layer: Quickly match your page design to a graphic comp.
• Tabbed palettes: Get quick access to your favorite palettes.
• Rountrip layers-to-tables: Absolute positioning without clunky, uneditable code.
• Multi-layer selection: Group together content for easy layout modifications.
• Color eyedropper: Select colors from anywhere and snap to the nearest Web-safe color.
• Rollover object: Add rollover effects in one simple step. 

• Table control: Select, sort, and format cells, rows, columns, and discontinuous cells.
• Enhanced context menus: One click to select and edit table and cell properties.
• Table formats: Choose from professionally designed options for quick table formatting.

• Visual site map: Quickly create, move, rename, and link pages.
• Automatic link management: Move, rename, and reorganize your site while Dreamweaver tracks your changes.
• Drag and drop link selection: Select and add links in seconds.
• Advanced search and replace: Text, HTML-aware and tag-sensitive operations.
• Regular expressions: Execute complex search-and-replace operations without scripting.

• Template design: Separate content from design using templates.
• Design control: Create templates with editable content but fixed design.
• Team collaboration: Team members can edit content without "breaking" the page or design.

• Advanced HTML editing: Enjoy the integration with HomeSite 4.0 or BBEdit 5.0.
• Custom tag database: Define 3rd party tags in Dreamweaver.
• Cleanup HTML command: Remove empty tags, nested font tags, and comments in one step.
• Apply your source formatting: Apply your tag format style to any HTML document with just one click.
• XML parser: Open XML documents within Dreamweaver.
• Roundtrip XML: Import and export template content as XML.

• Customizable commands: Extend Dreamweaver using HTML and JavaScript.
• Configurable UI: Insert commands anywhere in the pull down menus.
• Custom property inspectors: Add or customize property inspectors for improved control.
• Extensible character profiles: Add more international character sets to Dreamweaver 2.

• Server Side Include (SSI) support: Visually preview your server-side content in Dreamweaver.
• iCat e-commerce support: Use pre-coded objects and commands to create iCat stores in minutes.
• What You See Is What You Serve: Get a visual rendering of dynamic content while you design.
• 3rd party integration: Improved support for ASP, Cold Fusion, Tango, and other 3rd party tools.

1. Document Window--The Document window displays the current document approximately as it will appear in a Web browser.
2. Launcher--The Launcher has buttons for opening and closing the most frequently used inspectors and palettes. The icons on the Launcher are repeated on the Mini-Launcher at the bottom of the Document window for easy access when the Launcher is closed.
3. Object Palette--The Object palette contains buttons for creating various types objects such as images, tables, layers, and so on.
4. Property Inspector--The Property inspector displays properties for the selected object.
5. Shortcut Menus--When you right click with the mouse you get the shortcut menus that let you quickly access useful commands pertaining to the current selection or area.
6. Dockable Floating Palettes--You combine floating windows, inspectors, and palettes into one or more tabbed windows.

One of the features I liked about the interface is that you have the ability to simultaneously view and edit a visual view and the HTML source of a Web page. The smoothness of the program's WYSIWYG to HTML source code round-trip is extremely efficient. Dreamweaver also works well with any external HTML or text editor. It's integrated with BBEdit 5 for Macintosh and HomeSite 4 for Windows. If you have BBEdit or HomeSite installed, you just click the External Editor button at the top of the HTML inspector to open the editor. You don't need to save the file when leaving one editor for another, and both HomeSite and BBEdit have special Dreamweaver buttons for fast toggling between applications. I have only one minor suggestion for the HTML window. There is no maximize/minimize button on it to toggle between different sizes. I like to have a small HTML window open at all times when I am working in the document window. When I want to edit the code, I like a much larger window, and you have to resize it manually. The image to the left shows the Document window and HTML window at the same time.

With Dreamweaver 2, you get improved color tools in the interface. You simply use the eyedropper to pick up a color from the elements on your page, and Dreamweaver converts it to the nearest Web-safe color.

Dreamweaver's interface is not as intuitive as it could be, and it takes some time to get used to. Although there have been improvements from the earlier version, you still have floating palettes all over your screen. I constantly used the F4 key to turn them on and off. Streamlining the JavaScript Behaviors window and most of the Properties Inspectors, creating dockable palettes that can be grouped together into a single tabbed window, and rolling two or three separate steps into one in Version 2 has helped somewhat.

One of the problems with WYSIWYG editors has been that they have a tendency to change the HTML code of your files while inserting their own proprietary tags. Dreamweaver preserves your markup. The program can be set to clean up your markup, but it is an option that can be disabled easily. And unlike other editors, it doesn't insert editor-specific or proprietary tags. The program won't change tags it doesn't recognize, instead it highlights unknown tags in yellow.

And Dreamweaver's advanced tagging options allow you to incorporate Cold Fusion, ASP, XML, and nearly any proprietary code you can teach it.

Dreamweaver's table-building abilities are very good. It preserves table and cell width requirements, allows you to select and edit numerous cells at once, and lets you plop in cell or entire table background browser safe colors with the ease of a dropper. You can now apply text and other formatting to rows, columns, or an entire table and select and format noncontiguous cells. Splitting and merging table cells is easy. Dreamweaver has plenty of advanced table options. You can add font tags to each cell in the table (so you can change the font attributes of the text in each cell all at once) or sort the table alphabetically or numerically. The image to the right is the dialog box for sorting in tables. And creating nested tables is a snap.

You can insert a table from the Document Window menu bar, selecting Insert>Table, or by clicking on the Object palette. The image to the left shows the Table dialog box that opens from either the menu bar or the Objects palette. The Table dialog box is straightforward. To modify a table after it is inserted, you can use the Document window menu bar, selecting Modify<Table, right-click with the mouse to get a dialog box, or by using the Properties inspector after the entire table is selected. The Properties inspector--image show to the right--provides you with a variety of options to modify your table, such as: select a table name; clear row heights or clear column widths; set vertical or horizontal space around the table; set rows and columns; set width and height in percentage and pixels; set cell padding, cell spacing, cell border and alignment; select a background image or color; select border colors; merge and split cells; and select border color highlight and shadow.

A new feature in Dreamweaver 2 is the Format Table dialog box, which allows you to choose from predetermined background color schemes. It is found under Commands>Format Table from the Document window menu bar. The image to the left shows the different color schemes and options.

The layer features in Dreamweaver works much like layers in traditional design programs, so working with layers is easy and there is not a sharp learning curve. You have grids and rulers and snap to features. There is a Layers inspector that lists all the layers on the current page. You can use it for the following functions: rename a layer; nest or overlap layers; change layer visibility; and change stacking order of layers. And the Properties inspector has various other options for layers. You can rename them here also; select an HTML tag; select the X and Y (left and top) coordinates in the L and T text boxes; type new dimensions for the layer in the Width and Height boxes; define the clipping area; and select a content overflow setting; choose a background color and/or image. The image to the right shows the Layers inspector on top with the the Properties inspector on the bottom.

You can lay out pages using layers and then convert the layers to backward-compatible tables with a single menu command. This new layers-to-table conversion feature is great. You simply place the various parts of your page, such as images and text blocks, into separate layers--which normally work only on browsers that support Cascading Style Sheets (CSS), and then select Modify>Layout>Convert Layers To Table from the main menu. Your layout will now work in any 3.0 browser. There are limitations though. Dreamweaver can't convert overlapped layers, so you have to make sure the Prevent Layer Overlaps switch is on. For some reason, the option is not in the Modify menu along with the Convert Layers To Table command, but under the View menu. Hopefully, with the next version, it will be moved. The image to the left shows the Convert Layers to Table dialog box.

Another new feature in Dreamweaver 2 is the Tracing Image. Some designers like to create page mockups in Photoshop or other image editors before production starts on the HTML page itself. With Dreamweaver 2 you can display your mockup image in the degree of transparency you prefer and then position layers on top of the image so that they line up exactly where the designer intended.

Macromedia calls the templates feature in Dreamweaver 2 "Dream Templates," because they have some terrific features. And they really do! Once you've created a page, you can save it as a reusable template with both editable and locked regions. Combined with check-in and check-out page control (which tells users when a particular page is being changed), Dreamweaver's templates give designers the comfort of knowing that writers and editors can change content without inadvertently mangling the page's design. You can quickly create entire sites using the template feature. The tool you use to work with templates is the Templates inspector. The top half displays a list of all the templates available to your local site, and the bottom half displays a preview of the template's content. You can hide the lower half to conserve screen space. Templates can be created from an existing file or created from scratch.

Dreamweaver's Behavior tools let you apply common JavaScript actions without having to write any JavaScript. Adding a Behavior to a page in this program is incredibly simple. By using the Rollover option in the Objects palette you can create a JavaScript action that lets you swap the source of one image with another image file, so that when you mouse over an image, another image will appear. In Dreamweaver 1.0, you needed to create three JavaScript Behaviors in order to make a successful image rollover. In Dreamweaver 2, you use just a single dialog box as shown on the left.

There is also a Behavior inspector--image shown on right--to help you along with more complicated image rollovers. You can use Behaviors to have user events other than mouseovers (such as clicks or keypresses) make the images change source; you can have an event for one image trigger a source change for a different image; you can make it so that mousing out doesn't require the source to swap back; or you can have the mouseout cause an entirely different image to appear. You choose the browser or set of browsers you want the Behavior to work in. Then you click on an object that you want the Behavior to act on; click on the Add Action button to pop up a menu of actions that are available for that particular browser-object combination; choose your action from the menu; fill out the dialog box; and click OK to see the name of the action in the Actions list box; then click on the arrow to the left of the Action name to drop down a list of available user events. Again the available events will depend on the object+browser+action combination you choose. Choose your event from the menu. And you have your JavaScript. Dreamweaver really is excellent for letting you add advanced features to your pages without being an advanced programmer. Adding HTML-based tricks to your page is made simple by using Dreamweaver's automated scripting, where you can drag and drop effects right onto your page.

Processor: Pentium 90+ MHz
Operating System: Windows 95, 98, or NT 4
Memory: 32 MB
Hard Disk Space: 20 MB
Hardware: 256 color monitor capable of 800x600 resolution