Animated and interactive Web pages are more dynamic, more active, and often more effective than static pages. Animation refers to page elements moving on the page. Interactivity means that objects on the page react when a visitor performs an action at a Web site. A box drops from the top of the browser window informing visitors of exciting news. A button changes color when a visitor hovers a mouse cursor over it. A sound goes off when a visitor clicks a button. These and many other animated and interactive elements can be generated right in Dreamweaver.
Dreamweaver generates animation and interactivity through something called behaviors. These behaviors mainly use JavaScript—a coding language that enables animation and interactivity. Small (relatively small, compared to most programming) scripts become part of the page code.
Dreamweaver generates behaviors using the Behaviors panel. In the Behaviors panel, you define two elements to every action: events and actions. Events trigger actions. An event might be a page opening. Or closing. Or a visitor hovering a mouse cursor over an object on the page. An action is generated by an event. Examples of actions include an image changing, a pop-up window opening, or a sound going off.
Many behaviors are defined interactively in the Behaviors panel—you choose from a list of possible events, and then choose an associated action. Other animated and interactive elements in Dreamweaver can be generated from the main menu in the Document window.
JavaScript is interpreted by browsers, but some browsers don’t support all Dreamweaver-generated JavaScript. For this reason, the first step in defining most behaviors is to identify the browsing environment you are designing for. Browsers like Safari, Firefox, and Internet Explorer have built-in support for JavaScript. Older browsers and older versions of Internet Explorer do not support as much JavaScript as newer browsers.
By default, Dreamweaver displays only behaviors that work in nearly all browsers. If you accept this default setting, your set of available behaviors is quite restricted. And, in most cases, unnecessarily so. Very few Web surfers are still cruising the Web with Netscape Navigator 4.0.
To change the default set of available behaviors, click the “+” button in the Behaviors panel. Choose Show Events For from the pop-up menu, and then select one of the available browsers and browser versions.
Dreamweaver’s set of available browsers remains oddly out of date. However, Internet Explorer 6 is a de facto standard that most other browsers adhere to, and so behaviors that work in Internet Explorer 6 are likely to work in other browsers.
If you want to detect the browser used by a visitor, and direct that visitor to another page if their browser does not support your behaviors, you can do so with behaviors that check browser compatibility. These behaviors are explained in Chapter 12, “Testing and Maintaining Sites,” #95, “Checking Browser Compatibility.”
They’re often called pop-ups—those little browser windows that open when you load a page in your browser, or when you activate the window by some action on the Web page. In Dreamweaver’s terminology, they are referred to as browser windows, which is actually an accurate description of what most people call pop-ups.
The first step in creating a behavior that will open a browser window is to create a special Web page that will appear in that browser window. Since this page is likely to be displayed in a small browser window (you will be defining the size of that browser window as part of the behavior), you should design a page that will work well in a small browser window (Figure 88a).
Figure 88a. Defining a small Web page to use as a pop-up.
With the Web page that will open in a new browser window prepared and saved, follow these steps to define the window:
Test your new browser window behavior by opening the page that launches it in a browser.
You can change the triggering event that opens a new browser window. For example, you can have a visitor click specific text to open the new browser window. To do this, follow these steps:
Figure 88c. Preparing text to trigger an open browser window event.
If onClick is not set as the triggering event, you can select that from the first column pop-up menu in the Behaviors panel. Or, if you want to use a different triggering event (such as onMouseOver—when a visitor hovers a mouse cursor over the selected text), you can choose a different event from the first column pop-up menu in the Behaviors panel.
Pop-up messages present dialogs with information and require a visitor to OK them before they will go away.
To create a pop-up message that displays a dialog, follow these steps:
Timelines appear in a browser as an animated box that moves across, up and down, or diagonally on top of a Web page. Timelines often appear when a page opens—displaying content and providing an animated component to a page.
Timelines consist of a layer and a JavaScript that defines where and how the layer will move. The path that defines where the layer will move to and from is the “line” in timeline. The “time” element is defined by how fast (measured in frames per second) the layer moves along the line.
The first step in creating a timeline is to place a layer on the page in the Document window.
See Chapter 4, “Designing Pages with Absolute Placement Objects,” for a full exploration of how to create and format AP Divs.
Figure 90b. Placing the start point and the end point for a timeline animation.
After you define the positions for the first and last keyframes in your timeline, a line appears in the Document window indicating the path the animation will take.
A very complex timeline might include more than 15 frames. You can extend the length of a timeline by dragging the final keyframe in the Timelines panel (Figure 90c).
Deleting behaviors can be confusing and frustrating. This is one of the things my students most often call me over to their workstations to help them with. So, let me demystify that process.
Deleting a behavior involves two things—finding the behavior in the Behaviors panel, and deleting it. The first step is the hard part. The trick to locating a behavior in the Behaviors panel is to first select the object to which the behavior is associated. Only then will the behavior be easy to find in the Behaviors panel. Once you select the behavior in the Behaviors panel, click the “–” (Remove Event) icon to delete the behavior (Figure 91a).
Figure 91a. Removing a behavior in the Behaviors panel.
What about events that are not attached to any object on a page, but to the page itself? These behaviors are the ones that can be the hardest to find. But you can see them in the Behaviors panel if you click the <body> tag in the Tag Selector bar at the bottom of the Document window. Events that launch when a page is loaded or exited will likely be associated with the <body> tag.
Rollover images change their display when a visitor hovers over the image. Rollover images are often, but not necessarily, used as links. There are always two images in a rollover—the original image that displays before a visitor rolls over the image, and the rollover image that displays when a visitor rolls over the image with his or her mouse.
The main work in preparing a rollover is to prepare two identically sized images. The rollover image displays in the same box as the original image. And if the rollover image has different dimensions than the original image, the rollover image will distort to fill the original image box.
With two same-sized images prepared, follow these steps to create a rollover:
Interactive navigation bars generated by Dreamweaver use four different image buttons. One button displays as a typical static button on the page. The second button displays when a visitor hovers a mouse cursor over the button. The third displays when a visitor clicks the button. The fourth image displays when a visitor hovers a mouse cursor over the button (while in down state).
This means that you need four versions of every button you use in a navigation bar. If your navigation bar has four options, for example, you need 16 buttons (four versions of each button).
To create a navigation bar, follow these steps:
Figure 93a. Defining four images for the different states of a single button in a navigation bar.
You can’t test the navigation bar in the Dreamweaver Document window. To test the navigation bar, you need to preview the page in a browser. Choose File > Preview in Browser and, if you have more than one browser configured, choose from the available browsers.
You can edit the navigation bar content by choosing Modify > Navigation Bar. This opens the Modify Navigation Bar dialog. The Modify Navigation Bar dialog is just like the Insert Navigation Bar dialog, and you can edit the images and links in the navigation bar (Figure 94a).
Figure 94a. Modifying a navigation bar.
You edit the table that formats a navigation using the same table formatting techniques covered in Chapter 3, “Designing Pages with Tables and Frames.”