Lesson 4

Use the AP Elements Panel

 

Sample Solution

OBJECTIVE:
In this lesson, you will use the AP Elements panel to change the name of an AP element view and hide an AP element, and work with nested AP elements.

Change the Name of an AP Element

  1. Click Window (on the Application bar), then click AP Elements, or click AP Elements in the CSS Styles Tab group—the AP Elements panel appears in the CSS Styles Tab group
  2. Click background (on the AP Elements panel) to select the background AP element
  3. Double-click background on the AP Elements panel to select its name
  4. Type outline, then press [Enter]—the AP Element is renamed
  5. With the outline AP element selected, press [→] and [↓] on your keyboard each about seven times to reposition the outline AP element so it is centered behind the contest AP element, serving as an outline for the contest AP element
    [TIP:  With the outline AP Div tag selected, it appears to be in front of the contest AP Div tag, but it is really behind it—when it is not selected, it appears in its actual position in back of the contest AP Div tag]

Summary:  You used the AP Elements panel to change the name of one of the AP elements on the home page, then repositioned the AP element.


Control AP element visibility

  1. Click the visibility column twice for the contest AP element in the AP Elements panel –the Closed eye icon appears,
    indicating that the contest AP element no longer appears in the document window
  2. Click the Closed eye icon on the context AP element—clicking the Closed eye icon makes the AP element visible—the Eye icon appears next to the contest element in the AP Elements panel
  3. Click the Eye icon on the contest AP element—clicking the Eye icon makes the AP element inherit the visibility status of its parent objects—in this case, the parent object of the contest AP element is the index page—because the home page is visible, the  visibility status of the contest AP element

Summary:  You used the AP Elements panel to change the visibility status of the contest AP element.

 



Work with nested AP elements

  1. Click the contest AP element (in the AP Elements panel), then click in the contest AP element (in the Document window) after the word “buddies!’ to place the insertion point
  2. Click Insert (on the Application bar), point to Layout Objects, then click AP Div—a new  AP element is inserted as a nested AP element of the contest AP element
  3. Use the AP Elements panel to select this new nested AP element, then name it ‘signup’
  4. Type 152px in the L text box, then type 77px in the T text box
  5. Type 42px in the W text box, then type 92px in the H text box—these dimensions specify the position and size of the nested AP element in relation to the upper-left corner of the contest  AP element
  6. Set the background color to #FFF
  7. Click in the signup AP element to place the insertion point, then type ‘Sign up at the Club desk.’.  The text is automatically formatted using the properties for the contest AP  element, the parent AP element for the nested AP element
  8. Save your work, preview the page in your browser, close the browser, close all open pages, then exit Dreamweaver
  9. Post the website to the Hulk server

Summary:  You created a nested AP element within the contest AP element.