The magazine of the Melbourne PC User Group
Macromedia Dreamweaver
Carol Daniels
 cad@melbpc.org.au

The stuff of serious Web site designer's dreams

I'm not going to beat around the bush. I like Macromedia's Dreamweaver. Pre-Dreamweaver I was a dedicated "hand tagger", not a Notepad militant, but almost. I had a few tricks for repetitive tasks, but I typed a lot of tags. It's not difficult to type tags. It's tedious, extraordinarily so when you're working with tables or frames.

I'd tried most HTML editing programs available and I hated the way they rearranged the HTML source layout. Although this doesn't affect the ultimate display--or it shouldn't if the rearranged tags are still valid--it does make it more difficult to edit, fix broken HTML or find your way around when working at the source level.

I kept trying them because even with a method for batch-converting text files to HTML documents and inserting common elements, there was too much repetitive work that I couldn't automate, at least not easily. I kept hoping I'd find a tool that would enable me to automate more tasks and help me manage a site more easily.

Dreamweaver v1 was released late in 1997, and an update, to v1.2 has recently been released. The update adds new features that make an already strong product, more powerful still. With its claims of increased control and productivity, Dreamweaver's marketing hit my hot buttons right away. But I was sceptical I'd been led down the primrose path by empty promises too many times to take claims at face value. These days a product has to earn its place on my hard drive. Dreamweaver has done that in spades.


Figure 1. Editing within the HTML Inspector


Figure 2. Creating a custom HTML tag

What is Dreamweaver and what does it do?

Dreamweaver is a visual development tool for professional Web site designers and developers. That's a fancy way of saying that is more than an HTML editor, and it's for professional, not casual users. It offers a level of control--over HTML source code, page layout and display, advanced style functions, JavaScript behaviours, and site management--beyond the needs of a casual creator of Web pages. And, although it's well worth the investment, its price tag puts it outside the range frequented by casual users.

It's a serious tool designed for professionals, but it's not difficult to use. It takes time to get used to Dreamweaver's default workspace. Once you do, the product is easy and intuitive to use. While you are learning, you can supplement the workspace with any or all of the special palettes or property inspectors.

Dreamweaver ships bundled with a copy of HomeSite 3.0, Allaire's award-winning, tag-based HTML editor, (BBEdit, for Mac users) and CSE HTML validator. You can choose any external editor you like, even Notepad, but HomeSite and BBEdit are especially well integrated with Dreamweaver. All together the combination makes one of the most powerful and full featured Web tools available, and delivers excellent value for money.

What makes Dreamweaver different from other high-end Web site tools?

  • Roundtrip HTML(tm)
  • Customising options and page layout power
  • Cross-browser compatibility
  • Site management features.
Roundtrip HTML

Most traditional Web page tools are either tag based--good control, but difficult to use--or have a WYSIWYG interface. Tools with a WYSIWYG interface usually create their own "brand" of HTML that doesn't always conform to the World Wide Web Consortium's HTML standards. So WYSIWYG tools, which shield users from hand editing tags, are convenient and quick to use. HTML purists don't like the HTML these tools produce. Another problem, which I mentioned in my introduction, is that if you use more than one editor or your pages are worked on by several people using different editors, the source from one falls to bits or is reformatted when you open it with another. Dreamweaver's Roundtrip HTML(tm) preserves the formatting you set, no matter which source editor you use.


Figure 3. Use the Launcher to open and close palettes and inspectors


Figure 4. The Behaviors Palette v4 browser events which can be used within the HTML <body> element


Figure 5. The Text Properties Inspector, click on the triangle in the bottom right hand corner to expand the inspector to show all Page properties

Figure 6. The Text properties Inspector expanded to show all page property attributes

Figure 7. Detail of HTML inspector, note the button to launch external browser

Roundtrip HTML was one of the reasons I was attracted to the product, and it works. Dreamweaver's Roundtrip HTML provides the best of both worlds, the productivity advantages of a visual Web page layout tools with the control I like in a text/tag-based HTML editor. Couple Roundtrip HTML with Dreamweaver's customising options, which extend down to the HTML source, and you have a control freak's dream tool.

Customising options and page layout

With Dreamweaver you can customise just about anything you want to, including the look of your workspace, your choice of HTML source editor, even the way your HTML source is displayed.

When you open Dreamweaver for the first time you'll notice workspace is spare, strikingly so. You can chose to display one or all of Dreamweaver's pallets and/or inspectors but you'll soon become comfortable working with fewer open elements, opening only those immediately relevant to the current task.

Launcher

You use the launcher to open and close Dreamweaver's pallets and inspectors. There's a mini launcher at the bottom right edge of the document window. It has the same icons as the launcher, but no labels. Once you get used to the icons, you can dispense with the launcher, freeing valuable desktop workspace for other items.

Object Pallet

This pallet reproduces selections within the Insert menu. You use it to insert page elements. The default groupings for page elements are, Common, Forms and Invisibles. You can customise groupings almost any way you like, from which elements appear in which group to which order groups or elements within a group appear. You can also create and add new objects to any group.

Objects can be almost any HTML element, such as images, tables, layers, rules, Applets, plugins, forms, scripts, comments, to snippets of code. Once you've created a new object and added it to the object pallet, you can just click on it to add it to any page.

Property Inspector

The context sensitive Property Inspector switches dynamically to display the properties of the HTML element on which you are working. Although it might not be immediately obvious, this is an extremely useful feature. When you are working on an image, the Image Property Inspector is displayed. If you want to edit an image, you can do it visually, using the mouse to select and drag the image dimensions. Or you change image dimensions by entering new height and/or width values in the inspector window. When you're working on text, you can change the font or style by selecting it with the mouse and applying the code you want, you can use the HTML Inspector to edit tags, or call up your preferred external editor with a single click, and change the tags there.

Whichever way you make the change, the document is updated automatically in the other views. This is nothing short of magic when you're adjusting the size of table elements, creating or editing frames, dropping objects in new locations, inserting a new column, deleting a row, or nesting a table within another table.


Figure 8. Dreamweaver's HTML-based help is comprehensive and easy to follow


Figure 9. Select a Library Element and the Library Icon is highlighted automatically in the mini launcher

Cross-browser compatibility

There are only two main protagonists in the browser wars, but the range of versions, each with its own feature set, makes designing for cross-browser compatibility a nightmare. Dreamweaver has several features to make this essential task easier.

You can select a target browser, or browsers. Check a document against the target(s) and you get a list of tags and/or attributes that are not supported by the target browser(s). You can check against predefined profiles for Netscape Navigator 2.0, 3.0, and 4.0, and Microsoft Internet Explorer 2.0, 3.0, and 4.0, or any combination of these.

If you want to design a cutting-edge, state-of-the-art, whizz-bang page, using every v4 browser feature, you can convert a copy of that page to a v3 browser page. You can create a conditional hyperlink, for these v3/4 pages, automatically with Dreamweaver's insert Behavior option. The conditional hyperlink checks the visitor's browser type and version, and delivers the right version of the page automatically.

Site management features

Creating a single page is one thing, maintaining a site is another. There are links to check (within pages, within sites and across sites), HTML to tweak, and styles to update. Good sites are internally consistent, consistency helps visitors orient themselves within the site. Changing the way lists are displayed or changing the navigation bar on every page is a pain. Dreamweaver's Target Browser Check and CSE HTML Validator (bundled with Dreamweaver) help you control and manage your HTML. The Check Link Feature (from the File Menu) checks links for a single document or the entire site.

Dreamweaver's Library feature is a godsend for site management purposes. Once you create and use Library Elements on a site, it is easier to create and update pages at that site.

Library Elements

It takes time and effort to bring an established site into line. But it's worth it. If you're building a site from scratch, it's worth spending the time to create Library Elements for regularly used items, and build them in from the start.

Library Elements can be bullets, backgrounds, logos, addresses, etc, and all their attributes. You drag or insert the elements into the page. Within Dreamweaver, Library Elements are displayed differently from ordinary page elements, but they appear normally in the browser. If you change a library item, you must decide whether to have Dreamweaver update all pages right then or later. When you update the site all references to the library item are changed in all pages that contain the item. So it's easy to maintain consistency across the site even when you change a common style, frequently used e-mail address, or any page element you've set up as a Library Element.

You can also edit an individual instance of a Library Element. When you do, you are first reminded that it is a Library Element and asked if you want to edit the element or this instance. When editing a single instance, only that instance changes. That item will no longer be linked for automatic updates when the library element is changed.

File Check In/Out

I haven't tested this feature yet. If you're working in a group environment, it would be useful to be able to identify which files have been checked in/out and by whom, especially if you have problems with data loss and version control, two common hazards when more than one person works on a site.

And there's more

I'm running out of time and space and I haven't covered layers, style sheets, JavaScript behaviors and time line based animation. Briefly:

Layers

If you're designing for version 4 browsers, you can use layers to position graphics, text and other HTML objects at specific pixel coordinates. You can also modify a layer's properties--including its size, shape, position, visibility, colour and position within a group of layers.

Style Sheets

You can set and control styles within a page--using individual custom styles or style sheets--or across pages (even an entire site) using Library Elements or style sheets. Style sheets can be individual internal styles, placed within the <Head> element of each page, or stand-alone. Stand-alone style sheets are external to individual pages, but linked to the pages to which they apply. You create styles with the Style Definition Menu and apply them to any text in a document. Browsers that don't support styles simply ignore style tags.

JavaScript behaviours

A number of preset behaviours, which include events, for example:

  • onClick
  • onMouseOut
  • onMouseOver
a nd actions, for example
  • show layer
  • hide layer
  • play sound
a re built-in to Dreamweaver. You can apply a behaviour to a link, image, form element, layer, almost any HTML element. Just select the element, open the palette, select from the list of events, then select the action you desire. You can create and use your own customised behaviours if you understand scripting and know which events and actions are allowed for different HTML elements and browser versions.

Animation

You can create very impressive animations by manipulating and combining layers with JavaScript behaviours along a time line. This is one example of what is called Dynamic HTML, or DHTML. Dreamweaver's time-line interface makes it easy to manipulate layers and behaviours, along a time line or time curve. You can also swap images, add sounds, change layer properties, even go to another URL within the animation.

Conclusion

In case you didn't notice, I'm sold on Dreamweaver. Although I still use a batch file to convert plain text files to HTML documents, my primary Web site development environment is Dreamweaver. When I need to do a lot of editing I use HomeSite for the rough stuff, CSE to validate the code, and Dreamweaver for the fine tuning.

Although I haven't written about HomeSite or CSE in detail, I'm also very impressed with them. They work well together, and with Dreamweaver. HomeSite and CSE are available separately as time-limited (HomeSite) or use-limited (CSE) demos from their respective Web homes at http://www.allaire.com/ and http://www.htmlvalidator.com/

Reprinted from the July 1998 issue of PC Update, the magazine of Melbourne PC User Group, Australia
 

[About Melbourne PC User Group]