NHS Designs

rubric

Web Design
Dreamweaver

Chapter C Project Builder 2:
Working with Text and Graphics

In this exercise you continue your work on the Jacob's Web site that you started in Project Builder 2 in Chapter A. You are now ready to add two new pages to the Web site. One page will display one of the restaurant's most popular recipes and another page will show three pictures of Jacob's special desserts. The images below show possible solutions for this exercise. Your finished pages will look different if you choose different formatting options.

  1. Open the Jacob's Web site.
  2. Open rolls.htm in the chapter_c Data Files folder, save it to the jacobs root folder as recipes.htm, overwriting the existing recipes.htm file and update all links.
  3. Format the list of ingredients as an unordered list.
  4. Create a CSS style named .ingredients and save the style sheet file as jacobs in the Jacob's Web site root folder, using any formatting options that you like.
  5. Apply the ingredients style to each of the ingredients in the unordered list.
  6. Add a style called .bodytext to the jacobs style sheet file using any formatting options that you like, and apply it to the body text on the recipes page.
  7. Create a style called .subheadings using appropriate formatting options and apply it to the words ingredients and directions.
  8. Create a style called .headings using appropriate formatting options and apply it to the words Grandmother's Rolls, then save your work.
  9. Open dwc_5.htm from the chapter_c Data Files folder and save it in the Jacob's Web site as after_theatre.htm.
  10. Set the path for the Jacob's banner to the assets folder of the Jacob's Web site.
  11. Edit the Accessibility preferences to prompt you for alternate text when inserting images (If necessary).
  12. Add the poached_pear.jpg, oranges.jpg, and cheesecake.jpg images from the assets folder in the chapter_c Data Files folder, adding appropriate alternate text to each image.
  13. Add alternate text to the Jacob's banner.
  14. Format the images with borders, spacing, and alignment that make the page look attractive.
  15. Attach the jacobs style sheet to the after_theatre page, then apply the bodytext style to the body text on the page. (To attach the style sheet, click the Attach Style Sheet button in the CSS Styles panel, click Browse to open the Attach External Style Sheet dialog box, double-click the jacobs.css tile, then click OK.)
  16. Save your work, then preview both pages in your browser.
  17. Close your browser, then close all open pages.

example

example


ABOUT MRS. PEDERSEN · EMAIL MRS. PEDERSEN
resources · copyright information · Natomas High School Design Department