Dreamweaver MX 2004: The Missing Manual

While events get the ball rolling, actions are, yes, where the action is. Whether it's opening a 200 x 200 pixel browser window or using HTML to control the playback of a Flash movie, you'll find an action for almost every interactivity need.

Each of the following descriptions lets you know which browsers recognize the corresponding actions. For example, "Netscape Navigator 3+" refers to Netscape Navigator 3.0 and later.

Remember that after you complete each of the sets of steps below, your new action appears in the Behaviors panel, and your Web page is ready to test. At that point, you can click the behavior's name in the Behaviors panel, whereby clicking the Events pop-up menu as shown in Figure 12-2you can change the event that triggers it.

NOTE

Although Macromedia hasn't added any new behaviors to Dreamweaver MX 2004, you can add an almost unlimited number of new behaviorsif you know where to look. You can find loads of behaviors (written by non-Macromedia programmers) at the Dreamweaver Exchange or at one of the many extension Web sites listed in Section 20.2.3.

12.4.1 Navigation Actions

Many of Dreamweaver's actions are useful for adding creative navigational choices to your Web sites, giving you the opportunity to go beyond the simple click-and-load approach of a basic Web page.

12.4.1.1 Show Pop-Up Menu

Windows : Netscape Navigator 4+, Internet Explorer 4+

Macintosh: Netscape Navigator 4+, Internet Explorer 4+

As the appetites of Web surfers grow, Web sites are getting bigger and more complex, sometimes making it harder to navigate the site. Instead of a handful of links cleanly placed on the home page, you may have hundreds of links that could easily overwhelm your visitors . To maintain order, use Dreamweaver MX 2004's Pop-Up Menu behavior to add navigation menus that only appear when the mouse moves over related links (see Figure 12-5).

The pop-up menu is composed of invisible layers (see Section 8.9.2) that become visible when you move your mouse over a link. Aside from the wow factor of making things appear out of nowhere, the main benefit of this behavior is that you can provide lots of navigation options without squandering valuable screen space. The only drawback is that you can only use text in these menus, not cool graphic buttons to match your main navigation elements.

To create a pop-up menu, start by selecting a link on the page. The menu will pop up when the visitor's mouse passes over this link, so pick a link that's related to the menu you're creating. For example, if you want to create a menu that lets visitors select one of the five products you sell, using a link labeled Products would make sense.

Once you've selected this Show Pop-Up Menu from the + (Add Acton) menu in the Behaviors panel, you see the dialog box shown in Figure 12-6. If you simply want to create a quick pop-up menu, you only have to use the first tab, Contents; it lets you create and arrange menu items. The other three tabs control the appearance and placement of menu items.

• Adding menu items. To add a menu item, click the + button on the Contents tab. Next , in the Text field, type the words you'd like to appear for one of your menu items. You can then type a link into the Link field or click the folder icon and select a file in your site.

  If you're using frames (see Chapter 9), you can direct the link to open in a specific frame by choosing its name from the Target menu. Alternatively, to open the link in a new blank window, choose _blank. Continue, as shown in Figure 12-6, until you've covered all your menu items.

  If you can't find the default color scheme, font, or layout of pop-up menus, Dreamweaver offers plenty of tools for tweaking them in the other three tabs of the Pop-Up menu dialog.

  WORKAROUND WORKSHOP Non-Updating Links There's a glaring error in the Show Pop-Up Menu behavior: Dreamweaver doesn't update links you create with it. In other words, if you add a pop-up menu to a page in the root folder of your site and then save the page into another folder, Dreamweaver doesn't automatically update the links in the pop-up menu. Your beautiful pop-up menu is now filled with broken links. So once you add a Show Pop-Up Menu behavior to a page, don't move that page or any of the pages the menu links to. The same thing applies when you're making template pages (Chapter 18) with pop-up menus; always apply the pop-up menu before saving it as a template. For similar reasons, if you want to use the pop-up menu for your entire site, keep all pages in the root folderno subfolders .

• Deleting menu items. To delete a menu item, select it from the list on the Contents tab and click the - button.

• Changing the order of menu items. To rearrange the menu you've built, select a menu command from the list on the Contents tab, and press the up or down arrow key. The order in which the items are listed in the dialog box is the order they'll take in the onscreen pop-up menu.

• Creating a submenu. You can also create submenusadditional menus that appear when you move your mouse over an item in the main menu. For example, in Figure 12-5, moving the mouse over the "2002" link opens another menu with four additional items.

  To create a submenu, select a menu item and then click the Indent button ( ) on the Contents tab. The link becomes the first item of the submenu. As you add additional items using the + button, they become other members of the submenu. (You can't indent the top item in a menu in this way).

• Removing an item from a submenu. To remove an item from a submenu, select it and click the Outdent button ( ).

  NOTE

  Extension Alert: Menu Magic Extensions from Project Seven ( www.projectseven.com ) offers an amazing (and more stable, feature-rich, and well-documented) range of pop-up menu options.

  The Appearance tab offers some useful options of its own:

• Orientation. Select either vertical ( stacked ) or horizontal (side-by-side) menu items. Be careful with the horizontal optionit's easy to build a menu that extends off the right edge of the browser window, where no one can click it!

• Font options. Choose a font, font size , and formatting (bold or italic) for menu items. You can even set the alignment of text within each menu itemleft, center, or right. These settings apply to all text in the pop-up menu.

• Colors. These menu items have two different sets of colors: one for a menu item's up state (its appearance when the menu appears) and one for its over state (its appearance when the mouse is on a menu command). These work just like rollover images, described in Section 5.5. Use the color boxes to select contrasting colors for the background color of the menu item and the color of the text inside the menu.

  After you add this behavior to a page, Dreamweaver puts a file called mm_menu.js in the folder containing that page. It's a JavaScript file containing most of the complex programming required to make the pop-up menu feature work. Don't delete this file! Doing so will break your pop-up menus and cause JavaScript errors in your page. Also remember to upload it to the Web site (Chapter 16) when you're ready to make your site "live." If you do delete it, just add another Pop-Up Menu behavior to another page in that folder. (If you add a submenu to a menu item, Dreamweaver also adds a graphic file called arrows.gif. Don't delete this, either.)

  For more detailed design of a pop-up menu, click the Advanced tab (see Figure 12-7).

• Cell width. Each item in a pop-up menu acts like a cell in a table (see Section 7.1) with a background color, content (text of the menu item), width and height, and other properties. You can set the width to an exact pixel size by selecting Pixels from the pull-down menu and typing a number in the Width box. This is a good option if you're adding several pop-up menus to a pageone for each of the buttons of the main navigation bar, for exampleand you want each menu to be the same width for visual consistency. (You can set only one pixel setting, which applies to both the menu and any submenus. Dreamweaver won't let you set this smaller than the space taken up by the text in a button.)

  If you accept the proposed setting, Automatic, Dreamweaver determines the width of the menu based on the longest menu item, and separate widths for the submenus. For example, in Figure 12-5, Dreamweaver calculated the width of the submenu with its three short items4th Quarter, 3rd Quarter, and so onautomatically.

• Cell height. You can change the height of menu items in the same manner.

• Cell padding. To adjust the space from the edge of a menu to the text inside the menu, type a pixel value in this box. Cell padding here works exactly like cell padding in a table, as described in Section 7.2.2.2.

• Cell spacing. You can also adjust the space between menu items, as you would the space between cells in a table, as described in Section 7.2.2.2.

  You can tweak the appearance of pop-up menus using the Advanced tab of the Show Pop-Up menu dialog box. Bear in mind that the preview in the bottom half of the window isn't very accurate. It doesn't show Shadow and Highlight colors or any text indents. To get an accurate view, you'll need to close this box and press the F12 key to preview your new menu in an actual Web browser.

• Text indent. To add space between the left edge of the menu and text, type a pixel value in the Text Indent box. You'll probably find that the Cell Padding option adds enough spacing to the menu, and you won't need this one.

• Menu delay. When you move your mouse off a menu, you might notice a slight delay before the menu disappears. This delay is controlled by the Menu Delay property. It's specified in milliseconds , so a delay of 1000 means the menu takes 1 second to disappear.

  Of course, your first reaction might be: "I don't want no stinkin' delay! Just make the menu disappear when I move my mouse off!"

  Unfortunately, if you set the delay too low, the pop-up menu won't appear at all. Without any delay, the menu would disappear the instant your mouse moved off the triggering link (the link you originally attached the behavior to), making the menu disappear before you could click your choice. You need some delay to allow enough time to choose from the menu; 500 ms is a good compromise.

• Borders. Here's where you get to decide whether any borders appear around each menu item. To turn off borders entirely, turn off the Show Borders box.

  Dreamweaver even lets you specify colors for three different border elements. The Border color affects the outside bordera line that encloses the entire menu. The Shadow color applies to a menu's shadow lines, which appear along the right and bottom edges of the menu, just inside of the outer border. (It's also the color of the lines that separate each menu item.) The Highlight color applies to the borders at the top and left edge of the menu. Together, these colors give a menu a 3-D appearance.

  Web browsers hide any menu items that aren't visible within the available space of a frame. If your page uses frames, therefore, make sure your frame is deep enough to accommodate the expanded menu. (That's a particular concern if you create a nifty navigation bar that sits in a frame at the top of the window.)

  By default, a pop-up menu is positioned to the right of its triggering link, and 10 pixels below. The Position tab lets you change the following:

• Positioning options. The Position tab offers four preset positioning options, represented by four buttons. The first button is the default position. The second button places the menu directly below the triggering link. The third button places the menu directly above the triggering link (good if you're adding the pop-up menu to a link near the bottom of a page). And the fourth button places the menu directly to the right of the triggering link.

• Pixel location. If none of those four options suits your taste, you can use these controls to pinpoint a location for the menu, expressed in pixels measured from the top-left corner of the triggering link.

  For example, if you enter 0 in the X box (the horizontal measurement), the menu will line up with the left edge of the triggering link. Typing 0 in the Y box (the vertical dimension) produces a menu whose top aligns with the top of the triggering link. Using 0 in both boxes places the menu smack-dab on top of the trigger.

  Submenus are unaffected by these settings; they always overlap the right edge of the corresponding main menu item ( Figure 12-5). (If you're up for it, there's an HTML workaround in the box below.)

• Hide Menu checkbox. Keep the "Hide Menu on onMouseOut" event turned on. It ensures that the menu disappears when you move your mouse off it.

12.4.1.2 Open Browser Window

Windows: Netscape Navigator 3+, Internet Explorer 3+

Macintosh: Netscape Navigator 3+, Internet Explorer 4+

No matter how carefully you design your Web page, chances are it won't look good in every size window. Depending on the resolution of the user 's monitor and the dimensions of his browser window, your Web page may be forced to squeeze into a window that's 400 pixels wide, or it could be dwarfed by one that's 1200 pixels wide. Designing your Web pages so they look good at a variety of different window sizes can be challenging.

It's the Open Browser Window action to the rescue ( Figure 12-8). Using this behavior, you can instruct your visitor's browser to open a new window to whatever height and width you desire . In fact, you can even dictate what elements the browser window includes. Don't want the toolbar, location bar, or status bar visible? No problem; this action lets you include or exclude any such window chrome.

To open a new browser window, you start, as always, by selecting the tag to which you wish to attach the behavior. You can attach it to any of the tags discussed in Section 12.3.1, but you'll usually want to add this action to a link with an onClick event, or to the <body> tag with the onLoad event.

Once you've selected this action's name from the + menu in the Behaviors panel, you see the dialog box shown in Figure 12-9. You have the following settings to make:

• URL to display. In this box, type in the URL or path of the Web page, or click Browse and find the Web page on your computer (the latter option is a more foolproof method of ensuring functional links.) If you're loading a Web page on somebody else's site, don't forget to type an absolute URL, beginning with http:// (Section 4.2.3).

• Window width, Window height. Next, type in the width and height of the new window. These values are measured in pixels; in most browsers, 100 x 100 pixels is the minimum size. Also, strange visual anomalies may result on your visitors' screens if the width and height you specify here are larger than the available space on their monitors .

• Attributes. Turn on the checkboxes for the window elements you want to include in the new window. Figure 12-10 shows the different pieces of a standard browser window.

• Window name box. Give the new window a name here ( letters and numbers only). If you include spaces or other symbols, Dreamweaver will display an error message and let you correct the mistake. This name won't actually appear on your Web page, but it's useful for targeting links or actions from the original window.

  Here, you can define the properties of the new window, including what Web page loads into it, its dimensions, and so on. If you leave the Width and Height properties blank, the new window will be the same size as the window it opens from.

  The parts of a browser window. Note: The menu bar only appears as part of the browser window on Windows machines. On Macintosh systems, the menu bar appears at the top of the screen and can't be hidden; otherwise , the window features are basically the same.

  Once a new window is open, you can load Web pages into it from the original page that opened the window; simply use the name you give to the new window as the target of the link. For example, you could add this behavior to the <body> tag of a page so that when the page opens, a small new window also appears, showcasing a photo. You could add links to the main page, that, when clicked, load additional photos into the small window.

  If you use more than one Open Browser Window behavior on a single page, make sure to give each new window a unique name. If you don't, you may not get a new window for each Open Browser Window action.

When you click OK, your newly created behavior appears in the Actions list in the Behaviors panel.

12.4.1.3 Go to URL

Windows: Netscape Navigator 3+, Internet Explorer 3+

Macintosh: Netscape Navigator 3+, Internet Explorer 4+

The Go to URL action works just like a link, in that it loads a new Web page. However, while links only work when you click them, this action can load a page based on an event other than clicking. For instance, you might want to load a Web page when your visitor's cursor merely moves over an image, or when she clicks a particular radio button.

Once you've selected a tag and chosen this action's name from the + menu in the Behaviors panel, you can make these settings in the resulting dialog box:

• Open in. If you aren't using frames, only Main Window is listed here. But if you're working in a frameset file (see Chapter 9) and have named each of your frames, they're listed in the "Open in" list box. Click the name of the frame where you want the new page to appear.

  URL. Fill in the URL of the page you wish to load. You can use any of the linkspecifying tricks described in Section 4.2: Type in an absolute URL starting with http:// , type in a path, or click the Browse button and select a page from your site.

NOTE

Note: If you're working in frames and have the frameset file open, you can click each frame listed in the "Open in" list and assign a different URL to it. An asterisk next to the name of a frame indicates that a link points to that frame.

In other words, the same event, such as clicking a link or button, can make more than one frame change. See Figure 12-11 for an example.

12.4.1.4 Jump Menu and Jump Menu Go

Windows: Netscape Navigator 3+, Internet Explorer 4+

Macintosh: Netscape Navigator 3+, Internet Explorer 4+

Conserving precious visual space on a Web page is a constant challenge for a Web designer. Putting too many buttons, icons, and navigation controls on a page can quickly clutter your presentation and muddle a page's meaning. As sites get larger, so do navigation bars, which can engulf a page in a long column of buttons.

The Pop-Up Menu behavior (Section 12.4.1.1) is one solution. But it requires lengthy JavaScript code that doesn't work on all browsers. A simpler way to add detailed navigation to a site without wasting pixels is to use Dreamweaver's Jump Menu behavior. A jump menu is a pop-up menu that lets visitors navigate by choosing from a list of links.

The Jump Menu behavior is listed in the Behaviors panel, but for a simpler, happier life, don't insert it onto your page that way. Instead, use the Insert bar or Insert menu, like this:

1. Click where you want the jump menu to appear on your Web page.

   It might be in a table cell at the top of the page, or along the left edge.

2. Click the Jump Menu icon ( ), which is under the Forms tab on the Insert bar. Or choose Insert Form Objects Jump Menu.

   If you use the Behaviors panel instead, you first have to add a form and insert a menu into it. The Insert Jump Menu object saves you those steps.

   Even though the jump menu uses a pop-up menu, which is a component of a form , you don't have to create a form first, as described in Chapter 11. Dreamweaver creates one automatically when you insert a jump menu.

   The Jump Menu dialog box opens, as shown in Figure 12-12 .

3. Type the name of the first link in the text field.

   You're specifying not just the first command in your pop-up menu, but also the default choicethe first one your visitor sees.

   The name you type here, by the way, doesn't have to match the page's title or anchor's name; it's whatever you want your menu to say to represent it. For instance, you can call a menu choice Home even if the title of your home page is Cosmopolitan Farmer.

   Top: The Jump Menu dialog box shown here is set up so that the onChange event of the <select> tag triggers the Jump Menu action. That is, the Jump Menu behavior works when you select an item other than the one currently listed.

   Bottom: Unless you include the "Insert go button after menu" option, the first item of a jump menu should never be used as a link. Instead, use some descriptive textsuch as "Select a Destination"to let users know what the menu does. Then either leave the URL blank, or, if you're using frames, make the URL a Java- Script " dummy " link: (javascript:;), as described in Section 12.1.2 . When placed on a page, the menu is very compact, but it can offer a long list of pages.

4. Enter a URL for this link in the "When selected, go to URL" field.

   Use any of the usual methods for specifying a link (Section 4.2).

5. To add the next command in your pop-up menu, click the + button and repeat steps 3 and 4. Continue until you've added all of the links for this menu.

   If you want to remove one of the links, select it from the Menu Items list and click the - button. You can also reorder the list by clicking one of the link names and then clicking the up- and down-arrow buttons.

6. If you're using frames, use the "Open URLs in" pop-up menu to specify a frame in which the indicated Web page should appear.

   Otherwise, the Main Window option loads links into the entire browser window.

7. In the "Menu name" box, give the menu a name.

   This step is optional; you can also just accept the name Dreamweaver proposes. Since Dreamweaver uses this name only for the internal purposes of the JavaScript that drives this behavior, it doesn't appear anywhere on the page.

8. If you want a Go button to appear beside your jump menu, turn on "Insert go button after menu."

   You need to use this option only when the jump menu is in one frame, loading pages into another, or when you want to make the first item in your jump menu a link instead of an instruction (see Figure 12-12).

   When you include a Go button, Dreamweaver adds a small form button next to the menu, which your visitor can click to jump to whatever link is listed in the menu. But most of the time, your visitors will never get a chance to use this Go button. Whenever they make a selection from the menu, their browsers automatically jump to the new page without waiting for a click on the Go button.

   The Go button can be handy, however, when there's no selection to make. For example, if the first item in the menu is a link, your visitors won't be able to select it; it's already selected when the page with the menu loads. In this case, a Go button is the only way to trigger the "jump."

9. If you want to reset the menu after each jump (so that it once again shows the first menu command), turn on "Select first item after URL change."

   Here's another option that's useful only when the jump menu is in one frame, loading pages into another frame. Resetting the menu so that it shows its default command makes it easy for your visitor to make another selection when ready.

10. Click OK to apply the action and close the Jump Menu dialog box.

    Your newly created pop-up menu appears on your Web page, and the newly created behavior appears in the Actions list in the Behaviors panel.

    To edit a jump menu, click the menu in your document, and then, in the Behaviors panel, double-click the Jump Menu action in the Actions list. The settings dialog box reappears. At this point, you can change any of the options described in the previous steps, except that you can't add a Go button to a jump menu that didn't have one to begin with. Click OK when you're finished.

The Jump Menu Go action (available on the Behaviors panel) is only useful if you didn't add a Go menu in step 8 above. In this case, if there's a jump menu on the page and you wish to add a Go button to it, click next to the menu, add a form button, and attach this behavior to it (for more on working with Forms, see Chapter 11).

12.4.1.5 Check Browser

Windows: Netscape Navigator 3+, Internet Explorer 3+

Macintosh: Netscape Navigator 3+, Internet Explorer 4+

As noted earlier, not all Web browsers work the same way. Prior to version 4, for example, Netscape Navigator and Internet Explorer couldn't handle layers or animation using Dynamic HTML. Cascading Style Sheets, as well, are only available for the more modern 4+ browser vintage .

There was a time when Web designers built two separate Web sites: one with advanced capabilities that took advantage of the latest bells and whistles, and another, simpler site that worked with older browsers. This action, called Check Browser, was built to help with this situation by ushering visitors to the site that was most appropriate for their browser.

You won't find many Web designers taking this approach these days. Netscape is slowly dying away, and other advanced Web browsers that understand CSS and dynamic HTML are on the rise (Safari and Mozilla, for example). Nevertheless, this behavior can help you usher lesser versions of IE and Netscape to more appropriate pages. Or maybe you're just interested in harassing your visitors with "Why are you still using that old, outdated browser?" messages. In any case, here's how it works.

As usual, assigning this behavior begins with selecting a tag. You'll often add this action to the <body> tag of the first page of your Web site. This "gatekeeper" page determines where to send visitors when they first come to your site.

Then, when you choose this action's name from the + menu in the Behaviors panel, the Check Browser dialog box opens, as shown in Figure 12-13. It offers these controls:

• Netscape Navigator. Type the version number of Netscape Navigator you want to check for. Dreamweaver proposes 4.0, but you can change it to any number you want.

  Then, using the first pop-up menu, specify what should happen if the version of Netscape Navigator is equal to or greater than the number you specified. You have three choices in the pop-up menu: the browser can go to one of two new Web pages ("Go to URL" or "Go to Alt URL," which you'll specify in step 8) or stay on the same page ("Stay on this page" ).

  Using the second pop-up menu, specify what to do if the version of Netscape Navigator is less than the number you specified.

  Once again, the browser can go to one of two new Web pages ("Go to URL" or "Go to Alt URL") or stay on the same page ("Stay on this page").

  If you choose the same option in both pop-up menus, you send users of all versions of Netscape Navigator to the same page. In other words, you can use the Check Browser behavior to separate your audience by brand of browser, rather than version. This is the way to go when you want to use behaviors that work only in one browser or another.

  Although the proposed version number is 4.0, you can enter any decimal number. So say you have a page that works with Netscape Navigator 4.73 but not version 4.08; just type 4.73 in the Netscape Navigator text field.

• Internet Explorer. Type the version number of Internet Explorer you want to check for. Again, Dreamweaver suggests 4.0, but you can change it to any version you wish. This number sorts and redirects Internet Explorers users by version.

  Using the third pop-up menu in the dialog box, specify what should happen if the version of Internet Explorer is equal to or greater than the number you specified. In the fourth pop-up menu, specify what to do if the version of Internet Explorer is less than the number you specified.

• As noted in the previous Tip, choosing the same option for both pop-up menus lets you screen out all versions of Internet Explorer (to send them to a single alternate Web site, for example).

  NOTE

  The Opera browser identifies itself as Internet Explorer. Accordingly, viewers using that browser may end up on the pages you specify for Internet Explorer.

• Other Browsers. If you like, choose a Web page for all other browsersSafari, iCab, and so onusing this pop-up menu. Fill in the appropriate URL in the appropriate field (probably the Alt URL, described next).

• URL, Alt URL. These text boxes let you indicate the URLs for the redirecting commands you specified in the previous steps. For example, if you chose Go to URL from the first pop-up menu, this is where you specify what URL you want those Netscape Navigator browsers redirected to. (Choose a link here using any of the techniques in Section 4.2.)

12.4.2 Image Actions

Images make Web pages stand out. But adding Dreamweaver Behaviors can make those same images come to life.

12.4.2.1 Preload Images

Windows: Netscape Navigator 3+, Internet Explorer 4+

Macintosh: Netscape Navigator 3+, Internet Explorer 4+

It takes time for images to load over the Internet. A 16 K image, for instance, takes about four seconds to download over a 56 K modem. However, once a Web browser loads an image, it stores the image in its cache , as described in Section 15.8, so that it will load extremely quickly if a page requires the same graphic again. The Preload Images action takes advantage of this fact by downloading an image or images and storing them in the browser's cache, even before they're actually needed.

Preloading is especially important when using mouse rollover effects on a Web page (Section 5.5). When a visitor moves the mouse over a particular button, it might, for example, appear to light up. If you couldn't preload the image, then the lit up graphic for the over state wouldn't even begin to download until the cursor rolled over the button. The resulting delay makes your button feel less like a rollover than a layover.

In general, you won't need to apply this action by hand, since Dreamweaver adds it automatically when you use the Insert Rollover Image (Section 5.5) or insert Navigation Bar (Section 9.7) commands.

But there are exceptions, such as when you use the Preload Images action to load graphics that appear on other pages in your site.

For example, suppose you build a graphics-heavy Web site. People hate to wait too long for a Web page to load, but they're slightly more patient when waiting for the first page of a site to load. You could capitalize on that fact by adding a Preload Images action to the body of a home page (or even a page that says "Loading Web Site") that preloads most of the site's graphics. Be careful, though: If any page preloads too many images, even the most patient Web surfer may not stay around to watch the show. Remember to refer to the download stats listed in the document's status bar for the size of your Web page, as discussed in Section 15.8.

To add the Preload Images action, select the tag to which you want the behavior attached. Most often you'll use the <body> tag with an onLoad event.

If you've added Rollover Images or a Navigation bar to your page, this behavior may already be in the <body> of the page. In this case, just double-click the Preload Images action that's already listed in the Behaviors panel. If not, just choose this action's name from the + menu in the Behaviors panel. Either way, you're now offered the Preload Images dialog box.

Click the Browse button and navigate to the graphics file that you wish to use for preloading purposes, or type in the path or (if the graphic is on the Web already) the absolute URL of the graphic. Dreamweaver adds the image to the Preload Images list. If you want to preload another image, click the + button and repeat the previous step. Continue until you've added all the images you want to preload.

You can also remove an image from the list by selecting it and then clicking the - button. (Be careful not to delete any of the images that may be required for a rollover effect you've already createdthe Undo command doesn't work here.)

When you click OK, you return to your document; your new action appears in the Behaviors panel. Here you can edit it, if you like, by changing the event that triggers it. But unless you're trying to achieve some special effect, you'll usually use the onLoad event of the <body> tag.

That's all there is to it. When your page loads in somebody's browser, the browser will continue to load and store those graphics quietly in the background. They'll appear almost instantly when they're required by a rollover or even a shift to another Web page on your site that incorporates the graphics you specified.

12.4.2.2 Swap Image

Windows: Netscape Navigator 3+, Internet Explorer 4+

Macintosh: Netscape Navigator 3+, Internet Explorer 4+

The Swap Image action exchanges one image on your page for another. (See the end of this section for detail on Swap Image's cousin behavior, Swap Image Restore.)

Simple as that process may sound, swapping images is one of the most visually exciting things you can do on a Web page. Swapping images works something like rollover images, except that a mouse click or mouse pass isn't required to trigger them. In fact, you can use any tag and event combination to trigger the Swap Image action. For instance, you can create a mini slide show by listing the names of pictures down the left side of a Web page and inserting an image in the middle of the page. Add a Swap Image action to each slide name, so that the appropriate picture swaps in when your visitor clicks any one of the names.

To make this behavior work, your Web page must already contain a starter image, and the images to be swapped in must be the same width and height as the original graphic. If they aren't, the browser will resize and distort the subsequent pictures to fit the "frame" dictated by the original.

To add the Swap Image behavior, start by choosing the starter image file that you want to include on the page. (Choose Insert Image, or use any of the other techniques described in Chapter 5.) Give your image a name in the Property inspector, so that JavaScript will know which image to swap out. (JavaScript doesn't really care about the original graphic image itself, but rather about the space that it occupies on the page.)

Now select the tag to which you want the behavior attached. When you choose this action's name from the Behaviors panel, the Swap Image dialog box appears, as shown in Figure 12-14:

• Images. From the list, click the name of the starter image.

• Set source to. Here's where you specify the image file that you want to swap in. If it's a graphics file in your site folder, click Browse to find and open it. You can also specify a path or an absolute URL to another Web site, as described in Section 4.2.3.

• Preload Images. Preloading ensures that the swap action isn't slowed down while the graphic downloads from the Internet (see Section 5.5).

• Restore Images onMouseOut. You get this option only when you've applied this behavior to a link. When you turn it on, moving the mouse off the link makes the previous image reappear.

  Some actions, like the Swap Image action, can automatically add additional behaviors to a Web page. In this case, the Preload Images and Restore Images onMouseOut options actually add a Swap Image Restore action to the onMouseOut event of the currently selected tag, and a Preload Images action to the onLoad event of the <body> tag.

12.4.2.3 Swap Image Restore

The Swap Image Restore action returns the last set of swapped images to its original state. Most designers use it in conjunction with a rollover button, so that the button returns to its original appearance when the visitor rolls the cursor off the button.

You'll probably never find a need to add this behavior yourself. Dreamweaver automatically adds it when you insert a rollover image, and when you choose the Restore Images onMouseOut option when setting up a regular Swap Image behavior (see Figure 12-14). But, if you prefer, you can add the Swap Restore Image behavior to other tag and event combinations, using the general routine described in Section 12.2. (The Swap Image Restore dialog box offers no options to set.)

12.4.2.4 Set Navigation Bar Image

Windows: Netscape Navigator 3+, Internet Explorer 4+

Macintosh: Netscape Navigator 3+, Internet Explorer 4+

You can easily modify a navigation bar that you've added to your Web page (see Section 9.7) by choosing Modify Navigation Bar. However, some advanced features of a navigation bar are only available if you use the Behaviors panel to edit the individual navigation bar images.

The Navigation Bar object specifies different graphics for each state of a navigation button: up, over, down, and over while down. But things can easily get much more complex. This behavior, for example, lets the state of a navigation bar image dictate the state of other images on a page, swapping images in response to a visitor's interaction with buttons on the navigation bar. Figure 12-15 shows an example of how this complex behavior might be useful.

Here's how you might proceed:

1. Place an image on your Web page. Type the name for it into the upper-left field of the Property inspector.

   The name lets JavaScript know which image to swap out.

2. Insert a navigation bar into the same Web page.

   See Section 9.7 for full instructions.

3. Open the Behaviors panel, if it isn't already open (press Shift+F3).

   You'll notice that the Behaviors panel already lists three Set Nav Bar Image actions: one each for onClick, onMouseOut, and onMouseOver. Dreamweaver created these behaviors automatically when you inserted the navigation bar.

4. Click one of the images in the Nav Bar.

   The image you choose will be able to control other images on the page.

5. Double-click any of the Set Nav Bar Image actions in the Behaviors panel.

   All three actions share the same settings, so double-clicking any one of them opens the same Set Nav Bar Image dialog boxa fairly confusing system; no other Dreamweaver behavior works this way.

6. Click the Advanced tab.

   If you've looked over Section 9.7, then you've already encountered the Basic tab, but the advanced settings are only available from the Behaviors panel.

7. Select the state of the navigation button from the menu.

   The behavior you're defining changes one or more images on a page depending on the state of the selected navigation button. You can make other images on a page respond to the Over, Over While Down, and Down states of the navigation button.

   Front: In this example, the navigation bar is composed of three graphic buttons: Week 1, Week 2, and Week 3.

   Back: When a visitor moves the cursor over the Week 2 button, not only does that button change to its over state, but another graphic in the lower-right corner ("The Cabbage Hunt Begins") is also swapped in.

8. From the Also Set Image list, click the name of the image you want this action to replace with another graphic.

   An asterisk to the right of a name indicates that the image already has an action applied to it.

9. Specify the image file that you wish to swap in.

   Click the Browse button and navigate to the graphic file, or type in the path or absolute URL of the graphic.

10. Repeat steps 7 and 8 until you've applied actions to all the images you wish to swap. When you're finished, click OK.

    You can't specify which events trigger this action, making it something of an oddball among the Dreamweaver Behaviors.

12.4.3 Message Behaviors

Communication is why we build Web sites: to tell a story, sell a product, or provide useful information that can entertain and inform our visitors. Dreamweaver can enhance this communication process with actions that provide dynamic feedback. From subtle messages in a browser's status bar to dialog boxes that command a visitor's attention, Dreamweaver offers numerous ways to respond, in words, to user interaction.

12.4.3.1 Popup Message

Windows: Netscape Navigator 3+, Internet Explorer 3+

Macintosh: Netscape Navigator 3+, Internet Explorer 4+

Use the Popup Message behavior to send important messages to your visitors, as shown in Figure 12-17. Your visitor must click OK to close the dialog box. Because a pop-up message demands immediate attention, reserve this behavior for important announcements.

To create a pop-up message, select the tag to which you want the behavior attached. For example, adding this action to the <body> tag with an onLoad event will cause a message to appear when a visitor first loads the page; adding the same behavior to a link with an onClick event will make the message appear when the visitor clicks the link .

From the Add Action menu (+ button) in the Behaviors panel, choose Popup Message. In the Popup Message dialog box, type the message that you want to appear in the dialog box. (Check the spelling and punctuation carefully; nothing says " amateur " like poorly written error messages, and Dreamweaver's spell-checking feature isn't smart enough to check the spelling of these messages.) Then click OK.

12.4.3.2 Set Text of Status Bar

Windows: Netscape Navigator 3+, Internet Explorer 3+

Macintosh: Netscape Navigator 3+, Internet Explorer 4+

Pop-up messages, like those described above, require your visitors to drop everything and read them. For less urgent messages, consider the Set Text of Status Bar behavior. It displays a message in the status bar of a browser windowthe strip at the bottom of the window. You can add a message to a link, for example, that lets users know where the link will take them. Or you could set things up so that when a visitor moves the cursor over a photograph, copyright information appears in the window's status bar.

To apply the Set Text of Status bar action, select a tag (a very common example is a link [<a>] tag with the onMouseOver event); choose this behavior's name from the Add Action menu (+ button) in the Behaviors panel; and then, in the Set Text of Status Bar dialog box, type your message. Keep the message short, since browsers cut off any words that don't fit in the status bar. Your message can also include any valid JavaScript expression, exactly as described in the previous Tip.

12.4.3.3 Set Text of Text Field

Windows: Netscape Navigator 3+, Internet Explorer 3+

Macintosh: Netscape Navigator 3+, Internet Explorer 4+

Normally, a text field in a form (see Section 11.3.2) is blank. It sits on the page and waits for someone to type into it. This behavior, by contrast, can save your visitors time by filling in form fields automatically with answers that have become obvious.

For instance, imagine you've created a Web survey that has a series of questions. The first question might require a yes or no answer, along the lines of, "Do you own a computer?" And you've provided radio buttons for Yes or No. The second question might be, "What brand is it?" followed by a text field where your visitors can type in the computer brand.

But if someone answers "No" to question 1, there's no point in her typing a response to the second question. To help keep things moving along, you can set the second question's text field so that it says, "Please skip to Question 3." To do so, simply add the Set Text of Text Field action to the onClick event of the No radio button of Question 1.

To apply the Set Text of Text Field action, make sure your page includes a form and at least one text field. Because this behavior changes the text in a form text field, you won't get very far without the proper HTML on the page.

Select the tag to which you want the behavior attached. In the example above, you'd attach the behavior to the form's No radio button with an onClick event. However, you aren't limited to just form elements. Any of the tags discussed in Section 12.3.1 will work.

When you choose Set Text of Text Field from the + menu in the Behaviors panel, the Set Text of Text Field dialog box opens. Make the following changes:

• Text field. The menu lists the names of every text field in the form; choose the name of the text field whose default text you'll want to change. (See Chapter 11 for the full story on building online forms in Dreamweaver.)

• New text. Type the text you want that field to display. Take care not to make the message longer than the space available in the field.

  (Once again, your message can include a JavaScript expression, as described in the Tip in Section 12.4.3.2.)

  Only one action that ships with Dreamweaver MX works with forms: the Validate Form action. It can prevent visitors from submitting forms that are missing information, or that contain improperly formatted information. For instance, if somebody leaves the Your Name text field blank, this action opens an error box and asks her to enter her name. This action is described in Section 11.4.

12.4.3.4 Set Text of Layer

Windows: Netscape Navigator 4+, Internet Explorer 4+

Macintosh: Netscape Navigator 4+, Internet Explorer 4+

Another way to get your message across is to change the text that appears in a layer (see Chapter 8). This action has an added benefit: it lets you use HTML code to format the message that appears in the layer. (Actually, the "Set Text" part of this action's name is a bit misleading, since this action also lets you include HTML code, images, forms, and other objects in the layernot just text.)

As always, you start by selecting a tag. In this case, you might select a link, for example, so that moving the mouse over the link changes the text in the layer to read, "Click here to see our exclusive photos of unexplained phenomena."

When you choose this action's name from the + menu in the Behaviors panel, you get these controls in a dialog box:

• Layer. The menu lists the names of every layer on the Web page (Chapter 8); choose the name of the layer whose text you want to set. (This includes not just layers created using Dreamweaver's Layer tool but any CSS style that uses an ID selector, as described in Section 8.1.)

• New HTML. In this field, type the text you wish to add to the layer. You can type in a plain text message, for example, or use HTML source code to control the content's formatting.

  For instance, if you want a word to appear bold in the layer, place the word inside a pair of bold tags like this: < strong > important </ strong >. Or if you'd rather not mess around with HTML codes, you can also design the content using Dreamweaver's visual design viewthat is, right out there in your document window. Copy the HTML source from the Code view (Chapter 10), and then paste it into this action's New HTML field. You can also include a JavaScript expression, if you know Java- Script, as described in the Tip in Section 12.4.3.2.

12.4.3.5 Set Text of Frame

Windows: Netscape Navigator 3+, Internet Explorer 3+

Macintosh: Netscape Navigator 3+, Internet Explorer 4+

Like the Set Text of Layer action, the Set Text of Frame action replaces the content of a specified frame with HTML you specify. It's like loading a new Web page into a frame, only faster. Since the HTML is already part of the page that contains this action, your visitors don't have to wait for the code to arrive from the Internet.

To apply the Set Text of Frame action, create frameset and frame pages (see Chapter 9). When you select a tag in any of the frameseven the one whose content you intend to replaceand then choose this action from the + menu in the Behaviors panel, the Set Text of Frame dialog box opens:

• Frame. The menu lists the names of every available frame. Choose the name of the frame where you want the text to appear. (See Section 9.5.3.2 for detail on naming frames.)

• New HTML. Type the text you want the frame to show. You can type in a plain text message, or use HTML source code to control the content's formatting: < strong > like this </ strong > for bold, for example.

  You can also copy the HTML currently in the frame by clicking the Get Current HTML button, which copies the HTML source into the New HTML Field. Once it's there, you can then modify it as you see fit. Use this technique if, for example, you want to keep much of the formatting and HTML of the original page. Be careful, however. This action can only update the body of the frame; any code in the <head> of the frame will be lost. You can't add behaviors, meta tags, or other <head> content to the frame.

  Finally, as in most of these message actions, you can include a JavaScript expression as part of the text; see the Tip in Section 12.4.3.2.

• Preserve Background Color. This option ensures that the background color of the frame won't change when the new text appears.

12.4.4 Multimedia Actions

Multimedia, from background sounds to fully interactive Flash movies, can add a depth of experience that goes well beyond basic HTML. Several Dreamweaver actions let you play sounds, Flash movies, and Shockwave movies. (For more information on incorporating multimedia elements into your Web pages, see Chapter 13.)

12.4.4.1 Control Shockwave or Flash

Windows: Netscape Navigator 3+, Internet Explorer 4+

Macintosh: Netscape Navigator 3+, Internet Explorer 4+

Flash and Shockwave have become standard elements of many Web sites, and as more and more sites combine Flash and Shockwave movies with regular HTML, it becomes increasingly useful to be able to control how those movies play. With the Control Shockwave or Flash action, regular HTML objects can control the playback of a movie. For example, you could add a set of small VCR-like control buttonsPlay, Stop, Rewindto a page. These graphicsregular HTML on the pagecould control the playback of a Flash or Shockwave movie.

1. Add a Flash or Shockwave movie to the page.

   See Chapter 13 for details.

2. Select the movie and name it in the Property inspector (Section 13.1.2).

   Dreamweaver uses this name to identify the movie in the JavaScript that runs the behavior.

3. Select the tag to which you want the behavior attached.

   This might be a dummy link (see Section 12.1.2) attached to a button graphic. Using the onClick event would help simulate the function of a button.

4. From the + menu in the Behaviors panel, choose Control Shockwave or Flash.

   The Control Shockwave or Flash dialog box opens, as shown in Figure 12-18.

   The Control Shockwave or Flash action can only choose one type of control per action. So if you want to play a movie from a particular frame, you would need to add two actions: the first would use the "Go To frame" option, and the second would use the Play option to start the movie.

5. Choose how you want this action to control the movie.

   You have four options for controlling a movie: Play (starts the movie from the current frame), Stop, Rewind (to the first frame), or "Go to Frame" ( jumps to a frame you specify by typing its number into the "Go to frame" field).

6. Click OK.

12.4.4.2 Play Sound

Windows: Netscape Navigator 3+, Internet Explorer 4+

Macintosh: Netscape Navigator 3+, Internet Explorer 4+

The Play Sound action lets you embed a sound file in a Web page and trigger its playback using any available event.

That's the theory, anyway. In practice, this action meets with mixed success, because browsers don't have a built-in sound feature. Instead, they rely on plug-ins to play sound files. But JavaScript (that is, Dreamweaver Behaviors) can't control some plugins, and some plug-ins can handle only certain types of sound files. The bottom line is that you may wind up with a silent Web page. Therefore, you shouldn't use the play sound action for mission-critical Web pages.

If sound is absolutely essential for your Web page, you're better off using a Flash or Shockwave movie (see Chapter 13) and including a Control Shockwave or Flash Movie behavior (see above).

If, after all of those disclaimers, you still want to try this behavior, follow the usual steps. Select the tag to which you want the behavior attached. (The <body> tag would be the most likely candidate. Using the onLoad event, you could make the sound begin after the page has loaded.)

Then, from the + menu in the Behaviors panel, choose Play Sound. In the resulting dialog box, click the Browse button; navigate to, and double-click, the sound file you want to play. The most common sound formats include WAV (.wav), midi (.mid), AU (.au), and AIFF (.aiff). (If the file isn't already in your Web site folder, Dreamweaver offers to save a copy there.) Finally, click OK.

12.4.4.3 Check Plug-in

Windows: Netscape Navigator 3+, Internet Explorer 4+ (for Flash and Shockwave plug-ins only)

Macintosh: Netscape Navigator 3+

Flash animations, QuickTime movies, and Shockwave games can add a lot of excitement to any Web site. Unfortunately, they don't work unless your visitors have downloaded and installed the corresponding browser plug-ins (see Section 13.1 for more on this topic).

The Check Plug-in behavior can detect whether or not your visitor's browser has the required plug-in installed (Flash, Shockwave, LiveAudio, Netscape Media Player, or QuickTime)and if not, to redirect your visitor to a special page for such less-fortunate Web surfers. It has one serious drawback, however, which is described in the Workaround Workshop sidebar below.

Because this action loads a new Web page, starting by selecting a link (<a> tag) with an onClick event is a good idea. This way, when your visitors click the link, they see one page if they have the plug-in, and another if they don't.

Then, when you choose Check Plug-in from the + menu in the Behaviors panel, a dialog box ( Figure 12-19) lets you make the following settings:

• Plugin. From the pop-up menu, choose the plug-in's name, or type its name in the Enter field.

  WORKAROUND WORKSHOP When Checking Doesn't Check Out The Check Plug-in action is a great idea, but it doesn't work for everyone. It works fine in Netscape Navigator. But Internet Explorer can't detect plug-ins using JavaScript. Therefore, this action can't detect most plug-ins for Internet Explorer. If you need to check only for the Flash or Shockwave players, Dreamweaver solves part of the problem by adding some computer instructions in a language that Internet Explorer can understand: VBScript. These instructions let Internet Explorer check for the Flash or Director players in Internet Explorer for Windows. Unfortunately, those special codes don't work on Internet Explorer prior to version 5 on the Mac. These older versions are therefore left without any way of detecting whether or not the appropriate plug-ins are installed. This technical snafu explains why this Dreamweaver behavior isn't actually very useful except to people who care only about Netscape Navigator users. There is another approach, but you need Flash to do it. You can create a small Flash movie that includes a command that redirects the Web browser to another page. Any visitors who have the Flash plug-in will go to the new page. (If they don't, they'll just stay on the current page.)

  The plug-in options in the menu are Flash, Shockwave, LiveAudio, Netscape Media Player, and QuickTime. Only the Flash and Shockwave options work with Internet Explorer (see the box in Section 12.4.4.3), and some don't work with other browsers. In Safari, for example, this behavior doesn't work for detecting Apple's Quicktime player.

• If found, go to URL/Otherwise, go to URL. Using these text fields, specify the Web pages to which your visitor will be directed if the plug-in is, or isn't, installed.

  If it isn't listed in the popup menu, you can type in the name of the plug-in you wish to check. If you have the plug-in installed in Netscape Navigator, you can find its name by choosing Help About Plug-ins in Netscape Navigator, which produces a list of currently installed plug-ins and their names.

  You can indicate these pages just as you would any link (Section 4.2 ). For example, if the Web page is part of the site you're working on, click Browse to locate and open the Web page document.

  If you leave the "If found, go to URL" field empty, the visitor who has the correct plug-in installed will stay right there on the same page. Use this arrangement when you apply the action to a <body> tag with an onLoad event, and the page contains the plug-in object.

  The "Otherwise, go to URL" page could let users know that they need a plug-in to view the site. Furthermore, it should offer a link to the site where the plug-in can be found.

• Always go to first URL if detection is not possible. Remember that Internet Explorer can't detect all plug-ins. It wouldn't make sense to send Internet Explorer users to a "You don't have the correct plug-in" page when they might very well have it installed. If you turn on this box, your Web page will assume that the plug-in is installed if it can't determine otherwise.

  However you plan to use this action, always make sure that you give users who don't have the plug-in a way to quickly and easily download and install it, so they can return to your site to bask in the glorious multimedia experience you've created for them.

12.4.5 Layer Actions

Dreamweaver layers (called "absolute positioned divs" in CSS-speak) let you place Web page elements with absolute precision. Since you can control layers using JavaScript, Dreamweaver includes several behaviors for manipulating layers.

12.4.5.1 Show and Hide Layers

Do you ever stare in awe when a magician makes a handkerchief disappear into thin air? Now you, too, can perform sleight-of-hand on your own Web pages, making layers disappear and reappear with ease. Dreamweaver's Show-Hide Layers behavior is a piece of JavaScript programming that lets you make your own magic.

Show-Hide Layers takes advantage of the Visibility property. You can use it for things like adding pop-up tooltips to your Web page, so that when a visitor's mouse moves over a link, a layer appears offering a detailed explanation of where the link goes (see Figure 12-20).

The following steps show how to create this effect:

1. Add layers to your Web page using the techniques described in Chapter 8. Use the Visibility setting (Section 8.3) to specify how you want each layer to look when the page loads.

   If you want a layer to be visible at first and then disappear when your visitor performs a specific action, set the layer to Visible. If you want it to appear only after some specific event, set it to Hidden.

   NOTE

   You don't have to use Dreamweaver's Layer tool to take advantage of this behavior; any CSS IDtype style that uses absolute positioning will work. (See Section 6.6 for more on IDs; Section 8.3.1 for more on absolute positioning.)

2. In the tag selector, click the tag to which you want the behavior attached.

   Web designers often attach behaviors to link (<a>) tags. But you can also attach them to images or, as in Figure 12-20, to an image map (see Section 5.4.1), which defines hotspots on a single graphic.

   To create this effect, attach two behaviors to each hotspot in the document window (that is, to each <area> tag in HTML): one to show the layer, using the on- MouseOver event, and one to hide the layer, using the onMouseOut event.

   NOTE

   If this is all Greek to you, see Section 5.4.1 for more on image maps and hotspots.

3. If it isn't already open, choose Window Behaviors to open the Behaviors panel.

   The Behaviors panel (as pictured in Figure 12-1) appears. It lets you add, remove and modify behaviors.

4. Click the + button on the panel. Select Show-Hide Layers from the menu.

   The Show-Hide Layers dialog box appears (see Figure 12-21). You'll use this box to tell Dreamweaver what layer you intend to work with first.

5. Click a layer in the list of named layers.

   Here's an example of why it's useful to give your layers descriptive names. It's dif- ficult to remember which layer is which when all have the Dreamweaver default names (Layer1, Layer2, and so on).

6. Choose a Visibility setting for the layer by clicking one of the three buttons, Show, Hide, or Default.

   You're now determining what will happen to the layer when someone interacts with the tag you selected in step 2. Show makes the layer visible, Hide hides the layer, and Default sets the layer's Visibility property to the browser's default value (usually the same as the Inherit value described in Section 8.3).

   The choice you selected appears in parentheses next to the layer's name, as shown in Figure 12-21.

7. If you like, select another layer and apply another visibility option.

   A single Show-Hide Layers action can affect several layers at once. A single action can even make some visible and others invisible. (If you apply an action to a layer by mistake, select the same option again to remove it from the layer.)

8. Click OK to apply the behavior.

   The Show-Hide Layers action is now listed in the Behaviors panel, as is the event that triggers it.

Once you've added Show-Hide Layers, you can preview the behavior in a Web browser (Dreamweaver can't display behaviors by itself). Like other Dreamweaver Behaviors, you can edit or delete this action; see Section 12.2.3.

12.4.5.2 Drag Layers

For a truly interactive Web experience, you can create draggable layers that let your visitors rearrange Web page elements themselves . Imagine taking last year's Christmas photo and turning it into a Web-based picture puzzle, which your kids and friends can try to piece together. You could even create a magnetic poetry page, where visitors can drag words around the screen to create their own stream-of-consciousness rants.

Dreamweaver's Drag Layer behavior lets you free a layer from its normally sedentary existence. You can control how the layer is dragged, make it snap into a predefined position, and even have it trigger other exciting JavaScript commands.

Start by adding a layer to a Web page, using the techniques described in Section 8.4. You may want to give it a name that fits puzzle1 , for instance.

NOTE

Unlike the Show-Hide Layers behavior, the Drag Layer behavior only works with layers created using Dreamweaver's Layer tool (Section 8.4). And it doesn't work at all in Apple's Safari browser.

You must now attach a behavior to an HTML tag. Very often, you'll add this behavior to the <body> of the page, so that the Drag Layer behavior makes the layer draggable right when the page loads. But you could also add it to a link, so that the layer becomes mobile the moment a visitor clicks the link.

If the Behaviors panel isn't on the screen, choose Window Behaviors. From the + menu on the panel, choose Drag Layer to make the Drag Layer dialog box appear (see Figure 12-22). Fill it out like this:

• Layer. Select the layer you want to manipulate. You can only select one layer per Drag Layer action. If you want to make several layers draggable, you must apply this behavior once for each layer. (The exception is nested layers, in which case you add the Drag Layer behavior to the parent layer. When your visitor drags that layer, the nested layers follow along.)

• Movement. You can control where the layer can be dragged by selecting one of two options from the Movement menu:

  Unconstrained puts no limits on the layer. Visitors can freely drag the layer anywhere on the page; they can even drag most of the layer past the edges of the browser window. Constrained lets you limit the area the layer can move in. Four fieldsUp, Down, Left, and Rightdefine the limits of the drag area. Each field accepts a pixel value that indicates how far in a particular direction the layer can move.

  For example, suppose you've put a layer smack-dab in the middle of the window. If you type 50, 20, 100, and 150 in the Up, Down, Left, and Right boxes, visitors will be able to drag the layer no more than 50 pixels up, 20 pixels down, 100 pixels to the left, and 150 pixels to the right. Leaving a field blank means there's no constraint in that direction. For example, if you leave the Up field empty, visitors will be able to drag the layer all the way to the top (and almost out) of the browser window.

  If you want to limit a layer's movement so it can only move left and right (like a slider on a control panel), choose Constrained from the Drag Layer dialog and type in both the Up and Down boxes. To limit its movement to up and downlike an elevatortype in both the Left and Right boxes.

  The Drag Layer dialog box lets you set many different properties for a draggable layer, including setting a drop targeta location on the page where the layer is supposed to end up.

• Drop target. Setting a drop target is optional. But it can be useful when your goal is to have visitors drag the layer to a specific place on the page. For example, you could create a jigsaw -puzzle Web page where each piece of the puzzle is placed in its own layer. When the page loads, all of the pieces are spread around the page, and your visitor's challenge is to put the pieces together. Each puzzle piece must go in a specific place, so each layer gets its own drop target. (This option works well with the Snap option described next. It can also trigger another JavaScript program, as described below.)

  The value in the Left field represents the distance, in pixels, from the left edge of the browser window to the top-left corner of the layer. The value in the Top field is the distance from the top of the browser window to the top-left corner of the layer. For example, say you want the top-left corner of the layer to end up 50 pixels from the left of the browser edge and 100 pixels down from the top; in this case, you'd type 50 and 100 in the Left and Top boxes, respectively.

  NOTE

  When you're using nested layers, the Top and Left values refer to distances relative to the Top and Left positions of the parent layer. For example, say you've nested a layer inside of another layer whose top margin is 50 pixels from the top of the page and whose left margin is 100 pixels from the left edge of the page. If you add a drop target to a nested layer, and set the Top and Left values to 20 and 30, the actual location of the drop target on the page will begin at 70 pixels from the top of the page and 130 pixels from the left edge of the page.

  To help you figure all this out, the "Get current position" button calculates the current coordinates of the layer on the page. This may not seem so useful: After all, why would you want to create a drop target in the first place if the layer is already there?

  But the trick is to start by moving the layer you want to make draggable to the position on the page where you want it to end up (that is, where the visitor should drag it). Then apply the Drag Layer behavior and then click the "Get current position" button. Later, after you've finished setting the other properties and clicked OK, you can move the layer to its starting position (where it will appear before the visitor drags it).

• Snap if within. One problem with the Drop Target feature is that the drop area is marked by a single pixel on the page. Dragging a layer exactly to that spot would require that your audience have the patience of Job and the hand of a neurosurgeon.

  Fortunately, you can bend your visitors in the right direction with the help of the Snap if Within option. When a visitor drags the layer within a certain distance of the drop target, this option makes the layer snap right into place. If you type 100 , for example, when a visitor drags the layer and releases the mouse button when the layer's upper-left corner is within 100 pixels of the drop targetthat's close enough for government work. It will immediately pop into place.

The previous settings are all you need to create a basic draggable layer. You can click OK at this point to close the dialog box and apply the action. But if you want to give your draggable layer even more sophisticated and professional features, click the Advanced tab to set additional properties (see Figure 12-23).

• Drag handle. By default, "Entire layer" is selected, meaning that a visitor can click anywhere on the layer to drag it. But in some cases, you may want to require visitors to click a specific portion of the layera handlein order to drag the layer. For example, perhaps your layer contains a picture of a toolbox. You could define the part of the picture with the toolbox's handle as the layer's drag handle.

  Choose Area Within Layer from the Drag Handle menu to define the handle area. Four fields (L, T, W, and H) appear on the Advanced tab. You specify the draggable area relative to the layer itself. L represents the distance from the left edge of the layer, T the distance from the top of the layer, and W and H represent the width and height of the handle.

• While dragging. As discussed in Section 8.3.1.4, layers can overlap each other in a stack. A layer's Z-index determines where it belongs in the stacking order of the page. By default, the "Bring layer to front" option is turned on, so that the layer doesn't get hidden behind other layers as someone drags it around the page. If you want to leave the layer behind other layers as it's dragged, turn off this option.

  Also, you can control whether the layer stays on top or returns to its place in the stacking order when it's dropped after dragging. The "Leave on top" option is selected by default, meaning that when the visitor drops the layer, it stays on top. In fact, it jumps to the very top Z-index level of the page, above even the layers it doesn't actually overlap. (If you turned off "Bring layer to front," this option has no effect.)

  If you want to return the layer to its original level in the stacking order, choose "Restore Z-index." Now the layer can appear on top while it's being dragged, but once released, it returns to its original order.

  The Drag Layer action has several advanced settings. In this example, a simple JavaScript statement (status='dragging') displays the word "dragging" in the status bar of the Web browser when a visitor drags the layer. If the user lets go of the layer, the words "not dragging" appear instead.

• Call JavaScript. These final settings are fun and powerful, but require solid knowledge of JavaScript. The first Call JavaScript box is where you type a JavaScript command or function call that you want to run while the layer is dragged. The second box lets you specify a command or function that's called when the layer is dropped.

  Turn on "Only if snapped" if you want the command to run only if the layer is dropped on a target. For example, you could make a dialog box that says "Bullseye!" appear when your visitor drops a layer directly over a target on the page. For another example of these options, see Figure 12-11 .

Once you've added your fancy new behavior, you can test it by pressing F12 and previewing it in a Web browser. Like any other Behavior, you can edit the Drag Layer behavior using the instructions in Section 12.2.3.

12.4.6 Advanced Actions

Dreamweaver has two advanced behaviors that let you call custom JavaScript functions and change the properties of various HTML elements. Both of these actions require familiarity with JavaScript and HTML (Chapter 10). Unlike the other Dreamweaver behaviors, these two can easily generate browser errors if used incorrectly.

12.4.6.1 Call JavaScript

Windows: Netscape Navigator 3+, Internet Explorer 3+

Macintosh: Netscape Navigator 3+, Internet Explorer 4+

You can use the Call JavaScript behavior to execute a single line of JavaScript code, or to call a JavaScript function that you've added to the <head> section of your Web page.

When you select a tag and choose this behavior's name from the Behaviors panel, the Call JavaScript dialog box opens. If you want to execute a single line of JavaScript code, simply type it in. For instance, if you wanted to make the browser window close, you would type window.close() . If you want to call a JavaScript function, type the function name, like this: myFunction() .

12.4.6.2 Change Property

Windows: Netscape Navigator 3+, Internet Explorer 3+

Macintosh: Netscape Navigator 3+, Internet Explorer 4+

The Change Property action can dynamically alter the value of a property of any of the following HTML tags: <layer>, <div>, <span>, <img>, <form>, <textarea>, or <select>. It can also change properties for radio buttons, checkboxes, text fields, and password fields on forms (see Chapter 11). As with the previous behavior, this one requires a good knowledge of HTML and JavaScript. Dreamweaver's built-in HTML and JavaScript references (Section 10.5) can help you get up to speed.

Select a tag, choose this behavior's name from the + menu in the Behaviors panel, and then fill in the dialog box like this (see Figure 12-24):

• Type of object. The pop-up menu lists the eleven HTML tags that this behavior can control. Choose the type of object whose property you wish to change.

• Named object. From this pop-up menu, choose the name of the object you want to modify. (This step shows you how important it is to name HTML objects in advance.)

• Property. Choose the property you want to change (or, if you know enough about JavaScript, just type the property's name in the Enter field).

  Because Netscape Navigator and Internet Explorer recognize different properties for many HTML elements, you can use the pop-up menu to the right of the Property menu to specify the browser type and version you're targeting. Unfortunately, you can only select one browser for each Change Property action you apply. If you want to use this action for both browser brands, you'll need to apply it twice: once for each browser.

• New value. Type the new value you wish to set for this property. This value should be appropriate to the type of property you'll be changing. For example, if you're changing a background color, the value should be a color #FF0066 , for example.