Webucator blogs about online learning and training.

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).
  • 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.

Create AP Div

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).

Hidden AP Div

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.

Behaviors, Show and Hide

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:Show/Hide Elements

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.

Show/Hide Elements: Dynamic Visibility

9 Responses to “Creating and Using AP Divs in Dreamweaver CS5”

  1. [...] first step is creating an AP Div, as I talked about in my previous blog post.  Once they are created it is time to make them [...]

  2. I usually use apDiv tags to design my website, are there disadvantages when using them?

  3. You have to create a master div to make these things useful

  4. For some reasons, I am unable to see any additional divs that I attempt to create. When I use the draw div tool, the div disappears as soon as I draw it. Help please!

  5. Andre: In Dreamweaver, go to Edit > Preferences, then make sure you choose the AP Elements category. There is a dropdown for the ‘visibility’. Ensure it is set to “default”. Let me know if that helps.

  6. I have two links on my home page and each is pertinent to information in a unique apDiv element on another page (both apDivs on the same page). If I click one link I want to navigate to the page and Show the appropriate apDiv. If I click the other link I want to navigate to the same page and Show the other apDiv element instead. How do I do that?

  7. Matt, check out the Behaviors Panel. What you want to do is select the link, then attach on “onclick” Behavior. What this means, is that when the user “clicks” the link, you want something to occur. What you want to occur is that you want to “show” something. I hope this helps.

  8. I created an #apdiv its an image floating left of my page in a fixed position. I want that image to link back to a URL. How can I do that ? It is a Facebook logo that I want to link to my site’s Facebook page. Thanks
    Jimmy Maddox

  9. Thank you for this tip, your courses are some of the very best on the web.

Tweetbacks

© Webucator, Inc. All rights reserved. | Toll Free: 877-932-8228 | Outside the USA: 315-849-2724 | Fax: 315-849-2723