Web DevCenter    
 Published on Web DevCenter (http://www.oreillynet.com/javascript/)
 See this if you're having trouble printing code examples


Dreamweaver Power Combinations

by Heather Williamson, coauthor of Dreamweaver in a Nutshell
12/04/2001

If you're like me, the longer you're involved in an activity, the more set in your ways you become. This often makes us oblivious to improvements provided by new versions of familiar software.

But these new features can enable us to complete more work in less time--or at least to spend the same amount of time creating better looking and functioning Web pages. There are four scenarios discussed in this article that should assist you in creating a more interactive site, in less time, using the tools provided through Dreamweaver itself and the Dreamweaver Exchange Web site.

Using navigation bars with frames

The Dreamweaver Navigation Bar is meant to be used with frames-based sites. When the Bar is used with frames, it informs you of the various states of the images you create, provides you with interactive effects on your images, and serves as a marker for the current page you're creating.

Comment on this articleHeather has provided some helpful power-user tips in this article. Do you have related tips to augment these?
Post your comments

To create a framed document with an automatically updated navigational bar, follow these steps:

  1. In your favorite graphics program, create four images for the Up, Over, Down, and Over-while-Down versions of your buttons.

  2. Use Dreamweaver to create a framed document (Insert --> Frames --> Frame Selection).

  3. Place your cursor in a frame and open the Navigation Bar dialog box (Insert --> Interactive Images --> Navigation Bar). This opens the Navigation Bar dialog box shown in Figure 1.

Figure 1.
Figure 1. Dreamweaver Navigation Bar dialog box

  1. In the Navigation Bar dialog box, you must first provide a name in the Element Name field for the button you are adding. This name must be unique; it is used to separately identify each button accessed by the scripts.

  2. Use the Browse buttons to provide the filenames of the images used to create the four states of the button: Up, Down (when clicked), Over (when the mouse is over the image, but not clicked), and Over-while-Down (when the mouse is moved over the image while it is currently down).

  3. In the When Clicked Go To URL field, provide the name of the document that will be opened when the button is pressed. You will also need to specify the target of the linking action by selecting the appropriate frame from the In list.

  4. Ensure that the Preload Images checkbox is checked.

  5. Select the appropriate Orientation for your navigation bar images: Horizontal or Vertical.

  6. If the Use Tables checkbox is checked, then the <table> element structure will be used to format your navigation bar. If this box is not checked, then Layers will be used to position your navigation bar buttons.

Once completed, your navigation bar will look similar to that shown in Figure 2. This figure shows three of the four states of the buttons. The Down image represents the currently loaded page. The Up image is for pages that aren't loaded, and the Over image is displayed because that is the current location of the mouse pointer.

Figure 2.
Figure 2. An active navigation bar

In addition to using navigation bars to provide controls for maneuvering through a Web site, you can use pop-up menu effects to create menu systems that allow you to maneuver through multiple levels of your site in a single step, without taking up a lot of space on your pages.

Creating pop-up menu effects

When you cruise the Web, you find many sites that use pop-up menu effects to provide more advanced systems of navigation. These effects are created in a variety of ways, but Dreamweaver makes them easy by using positioned layers and the Show-Hide Layers Behavior.

To create your pop-up menu effects in Dreamweaver, you simply need to create a series of layers to contain your submenu options, and then place those layers near the icon, text, button, or image that you wish to serve at the top of the menu, as shown in Figure 3.

Figure 3.
Figure 3. The Dreamweaver in a Nutshell site with positioned layers

Once the layers have been added, you can add their content (including all links) or effects that will impact the content of the menu when it is visible. To support Netscape Navigator 6 browsers, you will need to manually add a name attribute to your HTML code for each layer. The value of your name attribute should match the value used in the id attribute of the layer's div element. At that point, you are ready to start applying the Show-Hide Layers Behavior to your main menu objects.

The Show-Hide Layers Behavior specifically alters the visibility property of the layers in your HTML document. This behavior automatically and appropriately adjusts the visibility of the layer for both Netscape Navigator and Internet Explorer browsers.

When in the Show-Hide Layers dialog box, you can select the layer to be altered, as well as how you wish the visibility property to be altered: visible (Show), hidden (Hide), or left at its current state (Default). To add this behavior to your main menu objects, select the object from the Behavior panel (Shift+F3), and then click Plus (+) --> Show-Hide Layers.

Related Reference

Dreamweaver in a NutshellDreamweaver in a Nutshell
By Heather Williamson & Bruce Epstein
Table of Contents
Index
Sample Chapter
Full Description

Once in the Show-Hide Layers dialog box, choose a behavior for each layer in your document. For instance, if you wish Layer1 to be visible and all others to be hidden when this behavior's associated event fires, you can select Layer1 and set it to Show, while simultaneously setting all the remaining layers to Hide.

You can trigger this behavior with either an onClick or an onMouseOver event associated with your button. You will need to repeat this process for every menu object in your document, showing its associated layer and hiding all of the rest, as shown in the following script statement.

onMouseDown="MM_showHideLayers('Layer1',
            '','show','Layer2','','hide')"

After you have added your Show-Hide Layers Behavior to each layer in question, be sure to set the visibility of each layer to Hide in the layer's Property inspector. This will hide the layers when the document loads. Once you have completed your document, you will end up with pop-up menu options as shown in Figure 4.

Figure 4.
Figure 4. The Dreamweaver in a Nutshell site showing an opened pop-up menu

Using extensions within templates

At the Macromedia Dreamweaver Exchange Web site, you'll find over 500 extensions that have been written specifically for Dreamweaver or Fireworks. You must be a member of the Exchange to download the extensions, but the registration is free.

As a member of the Exchange, you can access extensions from a variety of categories, including Accessibility, App Servers, Browsers, DHTML/Layers, E-commerce, Fireworks, Flash Media, Learning, Navigation, Productivity, Rich Media, Scripting, Security, Style/Format, Tables, and Text. Each of these categories provides a selection of tools that improve the functioning of your site.

Most extensions are a combination of JavaScript and HTML code. To use extensions on your Web sites created with templates, you must add the extension to the template itself. This may mean that you have to create a series of templates for each page with specific extensions installed.

For instance, if you use the Scrollable Layer extension on some pages of your document but not on others, then you want to have a separate template with the Scrollable Layer installed, as shown in Figure 5.

Figure 5.
Figure 5. The Dreamweaver in a Nutshell site using the Scrollable Layer extension loaded into a subpages template used just for documents with too much information to display on a single screen

Creating multimedia animations using timelines

OK, admittedly, HTML/JavaScript isn't the best combination to use to create smoothly running multimedia applications, but if you don't have the budget to purchase Macromedia Flash, then Dreamweaver makes a great stand-in.

Dreamweaver's Timelines feature allows you to add a fourth dimension to your Web pages using the timed display of images, sounds, and movement. Using Timelines, you don't have to create complex, animated graphics; you can combine a series of smaller animations, with the timed interjection of the Play Sound behavior, to create effects similar to what is available using Flash.

Timeline keyframes can be used to modify the width, height, top, left, z-index, and visibility attributes of layers, but only the src attribute of images. To change an image in other ways, such as to animate its position, place the image within a layer and then alter the layer attributes.

To start creating a multimedia animation, simply drag and drop your image/layer into the Timelines panel (Window --> Timelines). Keyframes, represented in your Timelines by white circles in the animation bar representing your image or your layer, provide the locations at which your layer or image properties can be manipulated. Don't adjust a property for your animation without first selecting the keyframe. Otherwise, you are adjusting the property for the entire object, not one particular point in the timeline.

Once you have added all of your keyframes and adjusted your layer properties, click on the frame in the Behavior (B) channel of the Timelines panel and choose the Play Sound behavior from the Behaviors panel's Add Behavior (+) pop-up menu. (Modify -->Timeline --> Add Behavior to Timeline opens the Behaviors panel for you). Timeline behaviors can be added in any frame of the timeline, whether it is a keyframe or a tween frame. Figure 6 shows you a completed timeline panel ready to test in your favorite Web browsers.

Figure 6
Figure 6. Timelines panel showing the ordered display and movement of a series of images with associated sound effects

Conclusion

These feature combinations provide you with a simulation of the effects you see on sites such as Microsoft, Macromedia, and Network Solutions. Although these are just a few of the combinations that can be created using the tools available with Dreamweaver and the Dreamweaver Exchange Web site, I hope they'll show you what can be done to spruce up your Web sites, while also reducing your development time.

More tips such as these are covered in Dreamweaver in a Nutshell. I hope that the tips discussed here have helped you see how combinations of Dreamweaver technology can work to save you time and energy. If you don't have Dreamweaver, try their free trial version, which is available at Macromedia.

Heather Williamson has authored several best-selling Web authoring books, and during the past five years, she's designed and developed corporate Intranet and Internet sites.


O'Reilly & Associates recently released Dreamweaver in a Nutshell: A Desktop Quick Reference.


Return to the Javascript and CSS DevCenter.

Copyright © 2009 O'Reilly Media, Inc.