How to Create a New Document from CSS Starter Pages in Dreamweaver CS6
How to Create Rollovers in Adobe Dreamweaver CS6
How to Run Site Reports on Your Adobe Dreamweaver CS6 Website

How to Use Behaviors with Boxes in Adobe Dreamweaver CS6

To add cool effects and interactivity, you can use the built-in Adobe Dreamweaver CS6 behaviors, a collection of ready-to-use scripts that you can apply to nearly any element on a page. When used with DIVs or other containers, behaviors can enhance them with special effects or mouse interaction (such as clicks and rollovers) to make the page more exciting.

The Behaviors panel features a whole new set of effects, such as Fade/Appear, Shrink, Highlight, Slide, and more — all of which you can apply to the AP Divs you create.

You can add behaviors by following these steps:

  1. Choose Window→Behaviors to open the Behaviors panel.

  2. Select a DIV by using the AP Elements panel or select an element directly on the page.

  3. In the Behaviors panel, click the plus sign.

    The menu of available behaviors appears.

  4. From the menu, choose the behavior you want to apply.

    For example, to apply a fade effect, choose Effects→Appear/Fade.

    The Appear/Fade dialog box opens.

    image0.jpg
  5. Make sure the effect is set to Fade and select the Toggle Effect check box to make sure the box reappears when it’s clicked a second time. Then click OK.

    The behavior is added to the list. The phrase onClick to its left indicates that this action occurs when the box is clicked.

  6. Choose File→Save to save the page.

    To see the effect in action, preview the page in a browser.

  7. Choose File→Preview in Browser and pick a browser to launch the page.

When you test the page, clicking the box makes it disappear or reappear — lots of fun for you and highly interactive for users!

If your browser is restricting the web page from running scripts or ActiveX controls, click the message at the top of the browser window and select Allow Blocked Content to properly test the new behaviors.

When effects behaviors are used, Dreamweaver needs to copy to your local site several files that make the effects possible.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
How to Use Property Inspector in Adobe Dreamweaver CS6
How to Preview Your Page in Adobe Dreamweaver CS6
How to Start a New Site in Adobe Dreamweaver CS6
How to Apply Table Formatting with CSS in Adobe Dreamweaver CS6
Dreamweaver's Clean Up HTML Tools
Advertisement

Inside Dummies.com