Lesson 1

INSERT AN AP DIV

 

Sample Solution

OBJECTIVE:
In this lesson, you will draw an AP Div on The Striped Umbrella home page and set its properties using the Property Inspector.

Draw an AP Div

  1. Open The Striped Umbrella website, open the index page, click View (on the Application bar), point to Rulers, then click Show to select this option if Rulers appear along the top and left side of the page and will help guide placement of page elements
  2. Place the mouse pointer on the horizontal ruler, then drag down to position a horizontal guide at the 250 pixel mark on the vertical ruler
    [TIP:  Guides help you place page elements or emulate the fold lines in a browser—fold lines are similar to the
    top half of a folded newspaper—the most important  stories are usually printed at the top of the fold line]
  3. Select the Layout (on the Insert panel), then click the Draw AP Div button
  4. Using the Sample Solution as a guide, drag a rectangle in the middle of the home page and under the guide that is
    approximately 300 pixels wide and 150 pixels tall—a new AP element appears on the page, but it is not selected—an AP Div icon appears above the upper-left corner of the AP element
    [TIP:  You can also insert an AP Div by clicking Insert (on the Application bar), pointing to Layout Objects, and then
    clicking AP Div]
  5. Click the AP Div icon above the AP element to select it
    [TIP:  You can also select an AP Div icon above the AP element to select it]
    [TIP:  You can also select an AP Div by clicking one of its borders—you drew an AP Div on the home page, then selected it]

Define an AP Element

  1. With the AP Div selected, select as Div1 in the CSS-P Element text box (in the Property inspector), type ‘contest’, then press [Enter]
    [TIP:  If the AP element is not selected, click the Tag in the Tag selector]
  2. Verify that is selected in the Tag selector
  3. Click the Overflow list arrow (in the Property Inspector), then click auto
  4. Click the Vis list arrow, then click visible
  5. Compare your screen to the Sample Solution—the L, T, W, and H settings in the Property inspector specify the position and size of the AP element—your settings will probable differ from those shown in the sample because you probable drew your AP Div with slightly different measurements
  6. Scroll down to view the new style that has been defined in the CSS Styles panel called #contest—when you draw an AP Div, Dreamweaver automatically  creates  a style for it—as you make changes to the element properties, they are displayed in the Properties pane, when the style is selected
  7. Save your work

Summary:   You specified a name and other properties for the selected AP element.  You viewed the properties in the CSS Styles panel.