1. Working with Behaviors in DW Marion Setton

2. You may be familiar with divs and how to construct them generally using Dreamweaver CS5, but you can also create another type of div, called AP Divs. The “AP”, which means absolutely positioned, means the div will remain in its position totally independent of any other object in the HTML document, unlike relative positioning. AP divs also operate in a unique manner since they are considered a page element, which means Behaviors can be applied to them. You can also place AP divs anywhere within the page! Since AP divs may be positioned anywhere on the page, they my actually be placed on top of each other or on top of other content. An AP Div with text may be placed atop another AP div with an image of a button. This way, only one button graphic is needed while the text may be changed for each individual button. What can AP divs do? With the help of JavaScript (and Dreamweaver’s Behaviors) AP Divs can be used in the following ways: Dynamic Visibility – AP divs can be made visible or invisible based on some event (like clicking a link, or rolling over an image). Working with Behaviors in DW

3. Show-Hide Elements In this behavior the user interacts with the page Have images prepared in same or similar sizes. We will use Albert Falls, black_canyon, elk, fossils. Notice the images sizes (about 330 x 220) Open a new page Type: Alberta Falls | Black Canyon | Elk | Fossils Insert an AP div underneath Adjust placement. Rename the CSS AP element according to the image.

4. The z-index is the stacking order of the AP divs. Insert the 1 st image. Repeat for all 4 objects. Close the eyes or change visibility to hidden. Select Alberta Falls, add a # sign on Link. Go back to Tag inspector, behaviors, show/hide

5. Prevent AP element overlaps Because table cells cannot overlap, Dreamweaver cannot create a table from overlapping AP elements. If you plan to convert the AP elements in a document to tables, use the Prevent Overlap option to constrain AP element movement and positioning so that AP elements don’t overlap. When this option is on, an AP element can’t be created in front of, moved or resized over, or nested within an existing AP element. If you activate this option after creating overlapping AP elements, drag each overlapping AP element to move it away from other AP elements. Dreamweaver does not automatically fix existing overlapping AP elements in the page when you enable Prevent AP element Overlaps. When this option and snapping are enabled, an AP element won’t snap to the grid if it would cause two AP elements to overlap. Instead, it will snap to the edge of the closest AP element. Note: Certain actions allow you to overlap AP elements even when the Prevent Overlaps option is enabled. If you insert an AP element using the Insert menu, enter numbers in the Property inspector, or reposition AP elements by editing the HTML source code, you can cause AP elements to overlap or nest while this option is enabled. If overlaps happen, drag overlapping AP elements in the Design view to separate them.

6. Customize size and color Open the index page. Preview in IE or firefox. Click on Phat Gallery. The window opens 800 x 400. Close Open template, highlight Phat and back to Behaviors. Notice the behavior is already written. Double click and change the dimensions to 400x600. Save, open index and preview.

7. Behaviors Behaviors allow you the options to be able to call specific things to happen on your webpage. You can add customized things to enhance the experience. – Add a behavior to Phat Gallery. Open the template and select phat gallery. Notice the link. Highlight the link, triple click and add a #. – Behaviors + (open browser window), choose phat_gallery.html. Now I can also effect the width and the height 800 x 400. Include a navigation, etc. customize as you wish. Window name Phat Gallery. – Save and update. Close the template.