Project Builder 1

Sample Solution

In this exercise, you will continue your work on the TripSmart website.  The owner, Thomas Howard, wants you to create a section on the index page that advertises a special price on Packing Cubes.

  1. Open the TripSmart website, then open the index page
  2. Draw an AP Div that is approximately 1 inch tall and 3 inches wide in the middle of the page, then name it 'special'
  3. Set the background color of the AP Div to transparent by clicking the Default Color button on the color picker toolbar
  4. Insert 'packing_cube.jpg' (from the Data Files folder on the server) into the AP Div, adding appropriate alternate text, insert a line break at the beginning of the word 'Packing,' then set the Align option to 'Left'
  5. Set the Left property (of the Special AP Div tag) to 340 px and the Top property to 360 px
  6. Set the width to 350 px, the height to 100 px, and the Z-Index property to 1
  7. Add the following text to the right of the image:
    Packing Cubes on sale this week!
    (with a line break before the word "this")
  8. Format the text using the heading style
  9. Enter a line break, type:
    Large:  $15.00; Medium:  $10.00; Small:  $5.00
    (enter a line break before typing 'Small; format the text with the item_numbers style)
  10. Edit the #special rule (in the CSS Styles panel) to add a double border around the AP Div with the color #666666
    (Hint:  The double border setting can be found in the Border category of the CSS Rule definition dialog box)
  11. Set the Overflow property of the special AP div tag to visible
  12. Save your work
  13. Preview the page in your browser; close the browser
  14. Make any spacing adjustments necessary for the AP Div size or position
  15. Post to the HULK server
  16. Close the Index page