| Applying a behavior is quite simple. Although some vary a bit, the general rule is to follow these steps: -
Select either an object or a tag inside the Dreamweaver document. If you want to apply the behavior to the entire page, make sure you select the <body> tag. If you want to apply the behavior to text, you must make the text a hyperlink. The easiest way to do that is to place a pound (#) sign in the Link text field of the Properties Inspector. -
Open the Behaviors panel by choosing Window, Behaviors. In Figure 19.3, the Behaviors panel has the selected tag that you're applying the behavior to in the top of the panel. Figure 19.3. The tag that is selected in the document that you are applying the behavior to appears in the top of the panel.
-
Click the Add Behavior (+) button and choose from the list the behavior you want to apply. Typically, this launches a dialog box. -
Enter the parameters in the dialog box and choose OK. This applies the action to the selected object. -
After you apply a behavior, you can choose what event you want to trigger the behavior. Click the down arrow after the event to get a list of different events. That's the general way to apply a behavior. However, the parameters from one behavior to another can vary dramatically. In this chapter, we'll deconstruct the different parameters for each behavior and I'll give a practical example why you might use some of these behaviors. Open Browser Window This is one of the most practical behaviors, and it's the one students in my Dreamweaver classes seem to like the most. To create a pop-out window, much like the annoying ads that pop up when you're on the Web, you must have an HTML document to open in the new window that's going to pop-up. In this example, the pop-up window will pop open when the page first loads. To create a pop-up window, follow these steps: -
Make sure you're working in a defined site. Create a new basic HTML document. -
In the new document, add any content that you want to appear in the pop-up window. Title the document in the Title text field of the document. -
Save this document by choosing File, Save As. Save this as pop_out.html. Take note of the document's visible dimensions. -
Create a new document. In this document add any content you want. After adding content (which is optional for this example) open the Behaviors panel by choosing Window, Behaviors. -
Highlight the <body> tag in the Tag Inspector located in the bottom-left corner of the document. -
With the <body> tag selected, click the Add Behavior (+) button in the Behaviors panel and choose Open Browser Window in the drop-down menu. This launches the Open Browser Window dialog box, as shown in Figure 19.4. Figure 19.4. The Open Browser Window dialog box offers several parameter options for determining the appearance of the new browser window.
Typically the trick with popping up new browser windows is to make them look less like a browser window and more like a traditional window in an operating system. For example, look at this ad from Orbitz in Figure 19.5. It doesn't resemble a browser window very much. -
When setting the parameters, you must keep in mind how you want the window to appear. The first option is sourcing the HTML document you want to appear in the pop-up window. You can do that either by typing in the name and path of the page or clicking the Browse button and searching for it. -
Next, you must specify the dimensions. As I said in step 3 of the previous exercise, when the sourced HTML document is open, you can get the dimensions from the bottom, as shown in Figure 19.6. Use these dimensions for the Window Width and Window Height text fields. Figure 19.6. The dimensions are displayed at the bottom of the document window.
-
Check any of the attributes you'd like the window to have. If you want a look similar to the Orbitz ad in Figure 19.5, you wouldn't select any of these attributes. Typically, if you want to select some parameters, the Scrollbars as needed and resize handles are usually pretty good attributes to select. These options ensure that all the content in the document will be visible to the end user. -
Finally, you must name the Window. Avoid spacing and special characters in your naming conventions. The JavaScript will use this name in the function. Choose OK when you're happy with the settings. -
After you return to the document, check the Behaviors panel and make sure the event is set to onLoad. If onLoad is not available, make sure you're viewing events for at least 4.0 and later browsers. If it's still not available, make sure you had the <body> tag selected when you attached the behavior. -
Preview the document in a browser. After the page loads, the browser window pops open, as shown in Figure 19.7. Figure 19.7. When the page first loads, the browser window pops open.
-
Save this document as trigger.html. Figure 19.5. This pop-up window by Orbitz doesn't have many browser window attributes, such as location and navigation bars.
You can also highlight <a> anchor tags and have the behavior happen when someone clicks a link. This is just one example of how to use the Open Browser Window behavior. |
