Creating and Using AP Divs in Dreamweaver CS5
Aug 18, 2010
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?
- Dynamic Visibility – AP divs can be made visible or invisible based on some event (like clicking a link, or rolling over an image).
- Draggable Content – AP divs can be made “draggable!” This means they can be moved around the page by the user!
This post will focus on dynamic visibility. I will discuss making AP divs draggable in the next post.
Creating AP divs in Dreamweaver CS5
In order to create an AP div, click on the AP div button under the Layout Tab of the Insert Panel.
You may then click and drag to create a box anywhere on the screen. The AP div that you just added may be selected three ways:
- Using the AP Elements Panel, click on the name of the div,
- Using the small white square in the upper left-hand corner of the div,
- Using the yellow anchor that appears on the screen.
Once you select a div, it may be moved or its properties may be changed in the properties window (as seen below). Note: The yellow anchor that appears on the screen can alter the position of page elements in a way that will not happen in the browser. As always, be sure to test your page in a browser often to ensure it appears as you intend. (You may hide these “Invisible Elements” if you would rather that Dreamweaver CS5 not show them.)
Show/Hide Elements: Dynamic Visibility
All elements have a visibility property. Normally divs (and all other content) are visible by default. This can be changed, however. In the screenshots below, the div named “layer1” has been turned “hidden” (as can be seen in the properties window).
You can also show or hide a div by clicking on the Visibility Column (it looks like an eye) in the AP Elements panel.
If nothing else is done, this text will never be visible in the browser. However, when used with the “Show/Hide Elements” Behavior, we can set the element to reappear when some event triggers it.
Before adding the “Show/Hide Element” behavior, you must decide what event will trigger the action. In this case, I want the div to appear when the user rolls the mouse over the link.
After selecting the link I may add the Behavior from the Behaviors window. The following dialog box appears:
Now that the action has been defined, the event must be selected. I chose “onMouseOver.” This means when the mouse rolls over the link, the div will become visible. In order to make the div become invisible again when the mouse rolls away from the link, the entire process must be repeated. This time, the event that will be used as the trigger is “onMouseOut.”
That’s it for adding Behaviors to AP Divs (and general page elements) within Dreamweaver CS5. Look out for my next post on how to make AP Divs dragable!
If you’re interesting in learning more about advanced Dreamweaver CS5 topics in general, take a look at my Advanced Dreamweaver CS5 class. Hear about our latest Adobe blogs, classes, and webinars by signing up for our newsletter.