Presentation on theme: "Working with Behaviors in DW Marion Setton. You may be familiar with divs and how to construct them generally using Dreamweaver CS5, but you can also."— Presentation transcript:
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.
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
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.
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.
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.