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

 
Advanced Beginners, Intermediate and Advanced computer and Web designers. I would suggest you have some experience with computers and Web design before you use this program. It is well-suited for intermediate and advanced Web designers who want to have access to HTML code, while still having WYSIWYG features. A designer can have control over object placement, behaviors and layering for an entire site of files. The program offers extensibility features that make it a programmer's tool as well.
 
Page Design and Layout
  • 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 Editing
  • 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.
 
Deluxe Site Management Tools
  • 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.
 
Dream Templates
  • 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.
 
Roundtrip HTML and XML
  • 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.
 
Extensibility
  • 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.
 
Visual Authoring for Dynamic Publishing
  • 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.
 
Installation, Manuals, and Help
Installation is easy. There is a competent but rather dry User's Guide, approximately 313 pages, with a tutorial chapter that covers most of the basics of the program and helps you get started. There is also a guided tour and Show Me movies in the Dreamweaver Help Pages.
 
Interface
The various components that comprise Dreamweaver are called windows, palettes, and inspectors. A window in Dreamweaver is a stand-alone window that will show up on the Windows 95 status bar. The Document window is one example of a window, and the Sites window is another. The interfaceminiature, floating windows that are used to adjust particular sets of properties are called either inspectors or palettes. An inspector changes appearance based on the current selection, whereas a palette controls elements such as styles or library items that are available to the entire current site. The image to the right shows the Document window with the Objects palette, Properties inspector, and Launcher open. When you open a document in Dreamweaver, the components you will use constantly are:
  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 tohtml editor 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.

 
HTML Code

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.

 
Tables

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. sort tablesSplitting 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 insert tablewindow menu bar, selecting Modify<Table, right-click with the mouse to table optionsget 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.format table

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.

 
Layers

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 layerschange 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 pconvert layersarts 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.

 
Style Sheets
Dreamweaver has excellent style sheet support. There is a Styles palette where you can create, edit, duplicate, remove, and link styles. There are four kinds of styles that you can use, and styles paletteDreamweaver supports all of them. They are: redefining an HTML tag; defining a class; creating a linked style; and creating an imported style. The dialog boxes for edit stylesthe style options are very clear, easy to follow, and well laid out. The image to the right shows the Styles palette and the Edit Style Sheet dialog box. The image to the left shows the Style definition dialog box where you choose the attributes of your style. After playing with the style sheet features in Dreamweaver, you are itching to style with style sheets in all your pages. But style sheets only work in 4.x or later browsers such as Navigator 4 or 4.5 and MSIE 4. Now, we are all waiting for the browsers such as Navigator and Microsoft to catch up with the software.
 
Templates

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.

 
Behavior Modification

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 rollover 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 browsbehavior paletteer 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.

 
Timelines
Timelines are a way to add animation to a Web page using JavaScript. You don't need to write any code and Timelines use no ActiveX, Java, or plug-ins. Timelines use JavaScript to control layers. A ltimelinesayer can move, resize, appear, or disappear--and what happens when is controlled by a sequence of frames. These are animation frames and each frame can be slightly different from the last, which creates the illusion of movement over time on a 2-D surface. In this case, the 2-D surface is a Web page projected on a computer screen. The Timeline inspector--image shown on the left--is used to create and modify Timelines. This is a nice feature for users who want more sophisticated Web pages without using Java or plug-ins.
 
Libraries and Custom Objects
One of the unique features of Dreamweaver 2 is its automation features. You can create your own automated HTML widgets that you can plunk onto pages whenever you like. You can create custom objects to add to the Objects panel or even create a custom Objects panel.
 
Site Management
Dreamweaver's Sites window is a is a combination file management tool and a full-fledged FTP client that lets you upload and download files, move stuff from directory to directory, and view files site mapin the Document window or in a browser with a click or two. In the Sites window, you designate a directory on your computer or local network as a local site. This folder becomes the site root folder, and Dreamweaver uses its location to code site-root relative links. Dreamweaver offers visual site maps for use in viewing the site definitionrelationships of files--shown in image to the right. You can adjust the site map layout with the Site Definition dialog box--shown in image to the left. Its site management capabilities let you rename, move, troubleshoot, and link pages, plus site search and replace.
 
I must admit, I had to use the program and get a feel for it before it grew on me. There is always a resistance when you go from using a program that you are familiar with to another that is entirely new. I had used Visual Page, Top Page, NetObjects Fusion, HomeSite, and even plain Notepad for designing Web pages. I am used to having all my options in menu bars at the top of the window, available for view all the time. If you don't know what you are doing with these programs, you can always poke around until you find the right button. But with Dreamweaver everything is in specific palettes or inspectors and does not become available until you have an object selected. Once you get familiar with the program, it does seem efficient. You can toggle the palettes on and off. This review does not by any means cover all of the features in Dreamweaver 2.0, but I did try to touch on most of the new features. Dreamweaver does so much that it was difficult to know what to review and when to stop. I was determined to write the review in the program as I thought that would be a good place to start, and I have now decided to use it for all the reviews in PC Cafe. It is a powerful program that gives you the advantages of a WYSIWYG program and the editing features of an HTML editor. It is not for the faint of heart as it does take time to learn but it is worth the effort. So if you want Cascading Style Sheets, DHTML, automated scripting, site management, clean HTML, simultaneous visual and source editing, and precise table editing, all in one package, Dreamweaver is the one.
 

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

 
Graphics: Adobe Illustrator & Adobe Photoshop
Web Page Editor: Macromedia Dreamweaver 2.0
Scanner: Hewlett Packard ScanJet 6250C Professional Series