12.4 The Actions, One by One
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, where梑y clicking the Events
pop-up menu as shown in Figure 12-2梱ou 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 behaviors梚f 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.
 |
Dreamweaver's companion graphics program, Fireworks MX 2004, lets you build the same kind of
menu using graphics as well as text. Once created in Fireworks, Web pages with these menus open right up
in Dreamweaver MX without a problem.
|
|
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.
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 folder梟o
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 submenus梐dditional 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 option梚t'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 item條eft, 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 page梠ne for each of the
buttons of the main navigation bar, for example梐nd 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 items?th Quarter, 3rd Quarter, and so on梐utomatically. 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.
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 border梐 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.
Although Dreamweaver lets you set the position of the main
pop-up menu, it doesn't offer any controls for positioning
submenus. They always appear in the same place: 5 pixels
in from the right edge of the menu item that triggers the
submenu and 7 pixels below the top.
But you're not stuck with these settings梚f you're willing to
dig into the HTML of the page.
When you create a pop-up menu, Dreamweaver adds a
chunk of JavaScript code to the page. You need to locate a
particular line of code, located in the <head> section of the
page, that looks something like this:
window.mm_menu_0514155110_0 = new Menu
("root",188,18,"Arial, Helvetica, sansserif",
12,"#FFFFFF","#000000","#000000
","#FFFFFF","left","middle",3,0,500,-
5,7,true,true,true,0,true,true);
Zero in on the two numbers near the end: -5 and 7. These
represent the position for any submenus added to items
in the menu. However, in this case, the submenu position
is relative to the upper-right corner of the menu. So the -5
means 5 pixels in from the right edge of the menu item, and
the 7 means 7 pixels down from the top edge.
Two other useful numbers appear near the beginning of
line, right after `new Menu.' In this example, they're 188 and
18, but these numbers vary from menu to menu. The 188
stands for the width of each item in the menu, and the 18
is the height. Thus, if you want submenus to appear directly
below an item in this menu, replace the -5 with -188 and
the 7 with 18.
If you decide to delve into the HTML code in this way,
remember that every menu you add梐nd this includes
submenus梐dds a line like the one above to your Web page.
So make sure you're working on the correct line.
|
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.
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:
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. 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 . 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 choice梩he 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.
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). 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. 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. 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. 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." 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. 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.
 |
It's a good idea to make this the page viewable to older browsers梚n other words, don't load it up with
modern behaviors or complex Cascading Style Sheets. In this way, even browsers that don't understand
JavaScript or CSS can at least access the basic text of your Web 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.
|
|
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 browsers桽afari, iCab,
and so on梪sing 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 created梩he 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.)
 |
You can swap more than one image using a single Swap Image behavior. Using this trick, not only does
a button change to another graphic when you mouse over it, but also any number of other graphics on the
page can change at the same time.
An asterisk (*) next to the name of an image in the Swap Image dialog box (see Figure 12-14) indicates that
the behavior will swap in a new image for that particular graphic. In the example in Figure 12-14, you can
see that two images swap (marked by asterisks) with a single action.
|
|
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.
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:
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. Insert a navigation bar into the same Web page.
See Section 9.7 for full instructions. 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. Click one of the images in the Nav Bar.
The image you choose will be able to control other images on the page. 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 box梐 fairly confusing system; no other
Dreamweaver behavior works this way. 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. 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.
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. 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. 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.
 |
A note to JavaScript programmers: Your message can also include any valid JavaScript expression.
To embed JavaScript code into a message, place it inside braces ( { } ). If you want to include the current
time and date in a message, for example, add this: {new Date()}. If you just want to display a brace in the
message, add a backslash, like this: \{ . The backslash lets Dreamweaver know that you really do want a {
character, and not just a bunch of JavaScript, to appear in the dialog box.
|
|
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 window梩he 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.
 |
You can also use this behavior to erase text in a field. This way, you can present your visitor with a text
field that's already filled out with explanatory text like "Please type your name in this box." When someone
clicks in the field, triggering the field's onFocus event, the box empties itself in readiness to accept input.
|
|
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 layer梟ot 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 view梩hat 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 frames梕ven the one whose content you intend
to replace梐nd 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 buttons桺lay,
Stop, Rewind梩o a page. These graphics梤egular HTML on the page梒ould control
the playback of a Flash or Shockwave movie.
Add a Flash or Shockwave movie to the page.
See Chapter 13 for details. 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. 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. 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.
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). 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)梐nd 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.
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.
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:
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.)
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.
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. 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. 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). 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. 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.) 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?span class="docEmphasis">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 fields桿p,
Down, Left, and Right梔efine 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 0 in both the Up and Down boxes. To limit its movement to up and down條ike an elevator梩ype 0 in both the Left and Right boxes.
|
|
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 target梩hat'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 layer梐 handle梚n 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.
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):
Suppose you've added an Open Browser Window behavior
to your home page, so that when visitors come to your site, a
small window opens, displaying a Web page that advertises
some new feature of your site.
After they've read the ad, your visitors will want to close the
window and continue visiting your site. Why not make it easy
for them by adding a "Close this Window" button?
To do so, simply add a graphic button梩ext works fine,
too梐nd add a dummy (null) link to it (that is, in the Property inspector, type javascript:; into the Link field).
Next, add the Call JavaScript behavior; in the Call Javascript
window that appears, type the following line of JavaScript
code: window.close().
Finally, after you click OK, make sure that the event is set to
onClick in the Behaviors panel.
That's all there is to it. The link you've added to the pop-up
window offers a working Close button.
|
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?span class="docEmphasis">#FF0066, for
example.
|