NHS Designs


Web Design

Chapter B Skills Review:
Developing a Web Page


A) Create head content and set Web page properties

  1. Open the Blooms & Bulbs Web site.
  2. Open the home page and view the head content.
  3. Change the page title to Blooms & Bulbs · Your Complete Garden Center.
  4. Insert the following keywords: garden, plants, water, nursery, flowers, supplies, landscape, annuals, perennials, and greenhouse.
  5. Insert the following description: Blooms & 8ulbs is a premier supplier of garden plants for both professional and home gardeners.
  6. Switch to Code view to view the HTML code for the head content, then switch back to Design view.
  7. Open the Page Properties dialog box to view the current page properties.
  8. Change the background color to a color of your choice.
  9. Change the background color to white again, then save your work.

B) Create, import, and format text

  1. Select the current navigation bar and replace it with Home, Featured Plants, Gardening Tips, and Workshops. Use the [Spacebar] key and a hyphen to separate the items.
  2. Using the Property inspector, apply the Heading 4 format to the navigation bar.
  3. Create a new paragraph after the paragraph of text and type the following text, inserting a line break after each line.
    Blooms & Bulbs
    Highway 7 North
    Alvin, TX 77511
    (555) 248-0806
  4. Italicize the address and phone number lines and change them to size 2.
  5. Change the copyright and last updated statements to size 2.
  6. Save your work, then close the home page.
  7. Open dwb_2.htm and save it as tips.htm in the Blooms and Bulbs Web site, overwriting the existing file.
  8. Set the banner path to the assets folder at the Blooms & Bulbs Web site and save the planting_tips.jpg in the assets folder of the Blooms & Bulbs Web site.
  9. Place the insertion point under the Planting Tips heading.
  10. Import gardening_tips.doc from the drive and folder where your chapter_b Data Files are stored, using the Import Word Document command, then use the Clean Up Word HTML command.
  11. Format all of the text on the page using the following attributes:
    - Font: Arial, Helvetica, sans-serif
    - Alignment: Align Left
    - Style: None.
  12. Select the Seasonal gardening checklist heading, then use the Property inspector to center the text.
  13. Use the Property inspector to format the selected text with Heading 3 format.
  14. Apply the color #006633 (the third color in the second row) to the text.
  15. Select the rest of the text on the page except for the Seasonal gardening checklist heading, then set the font to size 3.
  16. Select the Basic Gardening Tips heading, then format this text in bold, wrth the color #006633 and a size of 3.
  17. Save your work and close the tips page.

C) Add links to Web pages

  1. Open the home page (if necessary), then use the Property inspector to link Home on the navigation bar to the index.htm page in the Blooms Web site.
  2. Link Featured Plants on the navigation bar to the plants.htm page.
  3. Link Gardening Tips on the navigation bar to the tips.htm page.
  4. Link Workshops on the navigation bar to the workshops.htm page.
  5. Using the Insert bar, create an e-mail link under the telephone number.
  6. Type Customer Service in the Text text box and mailbox@blooms.com in the E-Mail text box.
  7. Title the plants.htm page Our Featured Plants.
  8. Title the workshops.htm page Scheduled workshops, then save your work.

D) Use the History Panel and edit code

  1. Open the History panel, then clear its contents.
  2. Delete the current date in the Last updated statement and replace it with a date that will update automatically when the file is saved.
  3. Change the font for the last updated statement using the font of your choice.
  4. Use the History panel to go back to the original font and style settings for the last updated statement.
  5. Change the last updated statement to boldface.
  6. Close the History panel.
  7. Examine the code for the last updated statement.
  8. Save your work.

E) Modify and test Web pages

  1. Using the Window Size pop-up menu, view the home page at 600 x 300 (640 x 480, Maximized) and 760 x 420 (800 x 600, Maximized), then maximize the document window.
  2. Save your work, then view the page in your browser.
  3. Verify that all links work correctly.
  4. Change the text Stop by and see us soon! to We ship overnight!
  5. Save your work, then view the pages in your browser, comparing your screens to the images below (click for larger images).
  6. Close your browser.
  7. Adjust the spacing (if necessary), save your work, then preview the home page in the browser again.
  8. Close the browser, save your work, then close all open pages.

chapter B review

chapter B review


resources · copyright information · Natomas High School Design Department