Project Builder 1

Continue your work on the TripSmart website that you began in Project Builder 1, and continued to work on in Chapter 2.  You are now ready to format text on the newsletter page and begin work on the destinations page that showcases one of the featured tours to Kenya.  You want to include some colorful pictures and attractively formatted text on the page.

Sample Solution

  1. Open your TripSmart website

Newsletter Page:

  1. Open dw3_3.html from the Digital Design folder on the server
  2. Save it in your TripSmart folder as 'newsletter.html', overwriting the existing newsletter.html file and not updating the links
  3. Verify that the path for the banner is correctly set to your assets folder of the TripSmart website
  4. Create an unordered list from the text beginning “Expandable clothesline” to the end of the page
  5. Create a new CSS rule called paragraph_text making sure that the Class option is selected in the Selector Type section and that the (New Style Sheet File) option is selected in the Rule Definition section of the New CSS Rule dialog box
  6. Save the style sheet file as 'tripsmart_styles.css' in the TripSmart website root folder
  7. Choose a font, size, style, color, and weight of your choice for the paragraph_text style
  8. Apply the paragraph_text style to all of the text on the page except the “Ten Packing Essentials” heading
  9. Create another style called 'heading' with a font, size, style, color, and weight of your choice
  10. Apply it to the “Ten Packing Essentials” heading
  11. Type "Travel Tidbits” in the Title text box on the Document toolbar
  12. Copy the Navigation Bar (in Code View on the Index Page to be sure you get all of the appropriate code) into the code of this page to bring the Navigation Bar onto this page
  13. Save and close the newsletter page and the tripsmart_styles file, then close the dw3_3.html page

Destinations Page:

  1. Open dw3_4.html from the Digital Design folder on the server and save it in your tripsmart root folder as 'destinations.html', overwriting the existing destinations.html file – do not update links
  2. Attach the 'Tripsmart CSS' style sheet to this page
  3. Apply the paragraph_text style to all of the appropriate text
  4. Insert zebra_mothers.jpg (from the Digital Design assets folder on the server) to the left of the sentence beginning “Our next,” then add appropriate alternate text
  5. Insert lion.jpg (from the Digital Design assets folder) to the left of the sentence beginning “This lion,” then add appropriate alternate text
  6. Create 2 rules for the images:  image_float_left and image_float_right
  7. Apply the rules to the pictures as needed
  8. Apply the 'heading' style to the “Destination:  Kenya” heading
  9. Apply the 'paragraph_text' style to the rest of the text on the page – add any necessary page breaks to separate the paragraphs of text
  10. Apply any additional formatting to enhance the page appearance
  11. Add the page title 'Destination:  Kenya'
  12. Copy the Navigation Bar (in Code View on the Index Page to be sure you get all of the appropriate code) into the code of this page to bring the Navigation Bar onto this page
  13. Save your work, then preview the destinations page in your browser
  14. Close your browser, then close all open files
  15. Post to the Hulk server