Lesson 3

Add Content to an AP Element

 

Sample Solution

OBJECTIVE:
In this lesson, you will add a background color and a background image to an AP element.  You will also insert an image and type text on the AP element.

 

Set a Background Color

  1. With the contest AP Div selected, click the Bg color text box in the Property Inspector
  2. Type #FFF, then press [Tab]--the AP Div is now filled with white

Summary:  You added a background color to the AP Div.

 

Add an Image to an AP Div

  1. Deselect the contest AP Div, then click inside it to set the insertion point
  2. Select the Common category (on the Insert panel), click the Images list arrow, then click Image
  3. Navigate to where you store your Data Files, then double-click contestants.gif
  4. Type ‘Two young contestants’ in the Alternate text text box in the Image Tag Accessibility Attributes dialog box, then click OK
    [TIP:  If the Image Tag Accessibility Attributes dialog box does not appear, type ‘Two young contestants’ in the Alt
    text box (in the Property Inspector)
  5. Press [←] to place the insertion point before the image, insert three line breaks by pressing [Shift][Enter] three times,
    then compare your screen to the Sample Solution
  6. Save your work, preview the page in your Web browser, compare your screen to the sample solution, then close the browser
    [TIP:  If your browser window is not resized, your AP element will not be positioned as shown in the sample solution]

    In the browser, the AP Div contains a scroll bar—the AP Div had to stretch to fit in the three page breaks and the image—because the Overflow is set to Auto, the scroll bar automatically appears when there is more content than can fit in the dimensions

Summary:  You added an image to the AP Div, then added alternate text to it.

 

Set a Background Image

  1. With the contest AP Div tag selected, select #FFF in the Bg color text box, press [Delete], select the contestant.gif image in the AP div tag, then press [Delete] to delete both the background color and image from the AP Div tag
  2. Press [Backspace] three times to delete the line breaks
  3. Select the #contest AP Div, then click the Browse for File icon next to the Bg image text box (in the Property Inspector) to open the Select Image Source dialog box—using the Bg image text box instead of the Insert panel will insert the image as a background on which we can easily enter text
  4. Navigate to the Data Files folder on the server, then click contestants_bak.jpg
  5. Click OK, then compare your screen to the sample solution
  6. Refresh the Files panel to verify that contestants_bak.jpg was copied to the assets folder of the website

Summary:  You added a background image of the contest AP Div.

 

Add and Format Text on an AP Div

  1. Click inside the contest AP Div to set the insertion point, then enter a line break
  2. Type ‘Sand Castle Contest July 4’, press [Shift][Enter], then type ‘Bring your buddies!’
  3. Click the contest rule (in the CSS Styles panel), then click the Edit Rule button
  4. Click the Type category, change:
    Font-family to Arial
    Helvetica, sans-serif
    Font-size to small
    Font-weight to bold
    Color to #006
  5. Click the Block category, change the Text-align setting to center, then click OK—the text changes to reflect the properties you have added to the contest style—it is blue and centered on the AP Div—when you have text on an AP Div, you should format the text a using the AP Div tag style in the CSS Styles panel, rather than using the Property inspector, or the Property inspector will create an additional style—it is more efficient to have all rule properties for a div tag in one rule
  6. Save your work, preview the page in your Web browser, compare your screen with the sample solution, then close your browser

Summary:  You added text to the AP Div, and formatted it using the CSS Styles panel.