|MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA|
Dreamweaver Power Combinationsby Heather Williamson, coauthor of Dreamweaver in a Nutshell
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.
To create a framed document with an automatically updated navigational bar, follow these steps:
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.
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.
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 (+)