Answers Search Help
Boston University home page
Dreamweaver: Styles and Behaviors
 
 
    CSS Styles
 
 
 
 
 
 
 
 
 
    Behaviors
 
 
 
 
 
    Also See
   
   
   
   

Other Behaviors

Dreamweaver has a set of built-in behaviors that allow you not only to swap images but to check browser types, check for plugins, launch a link in a new window, change the text in the browser status bar, display a pop-up message, play a sound, and much more. The Behaviors tab is grouped with the Styles tabs in the Design panel group.

For each behavior you select in the Add Behavior menu (accessible by clicking the + icon: add behavior icon), a unique dialog box will prompt you for all the information you need to create the behavior. And you don't have to write a single line of Javascript code.

Let's look at the behavior that opens a link in a new browser window. This is another popular behavior and can be especially useful on your site if you have a slideshow, presentation, gallery, or section that you would like to display in a window of it's own. You've always had the option in Dreamweaver to choose the "_blank" target when creating a link, but that only opens the link in a new window with all the same settings as the parent window. With the Open Browser Window behavior in Dreamweaver, you can control some other options in the new window you open (size, toolbars, scrollbars, etc.)

First off, we need to check our Behaviors settings in Dreamweaver to make sure we are displaying a list of behaviors for modern web browsers (older browsers -- version 3.0 -- do not support many behaviors). We verify this by clicking the + icon in the Behaviors panel, choosing the "Show Events For" option on the menu, and making sure the checkmark is next to "4.0 and later browsers."

Now we are ready to create our Open Browser Window behavior. This behavior must be associated with a link, so we need to create a text link. But since we want the link to only open in a new browser window (and NOT in the parent window), we have to "trick" the parent window into doing nothing when the link is clicked. This is done (with HTML that is valid) by entering a null javascript string for our link. Highlight the text you want to use for the link and enter javascript: void(0) for the link in the properties inspector. (Please note that entering the pound sign -- # -- is another way web developers often use this behavior but this is NOT valid HTML.)

Now we are ready to create our behavior. Highlight the text link, go to your Behaviors palette, click the Add Behavior icon and select the Open Browser Window behavior from the list.

The dialog box for this behavior features a number of options.

  1. URL to Display: this is the web address for the link you want to open in a new window.
  2. Window Width and Height: this customizes the size of the window you open ... be sure to test your link to make sure the window you open in large enough to display your new page.
  3. Attributes: you can control whether the window will display browser attributes such as the back, forward, and refresh buttons (Navigation Toolbar), the Web address (Location Toolbar), Scrollbars, etc. Be very careful using these attributes and test accordingly.
  4. Window Name: you must give your new window a name (this is used by the javascript, and is also used by frames if you are using a frameset).

It can't be emphasized enough that it is important to test this behavior and not take away any needed functionality from the user. If you need to edit your behavior after testing, simply double-click the behavior name (listed under "actions" in your Behaviors palette) to open the behavior dialogue box. Make changes as needed and test again until you are happy with the results.

 

 

WebCentral Using Publishing Learning Training Consulting WebCentral
Answers Search Help
NIS  |  OIT  |  Boston University  |   January 9, 2007