To Notes

Summary for HCI 201 -- 2/28/06

Review Questions

1. Why are pages with long paragraphs bad in a website?
   Ans: Because website users do not like to read long paragraphs. Pages with long paragraphs are also likely to result in long pages requiring scrolling.

2. What are breadcrumbs?
   Ans: They are dynamically generated links on a page that show where the user has been.

3. What is a You Are Here indicator?
   Ans: It is a dynamically generated mark on the navigation page that shows where the user is in the website.

4. What are some units allowed in CSS styles besides pixels.
   Ans: in, mm, cm, pt, pc, %.

5. For what are the <strong> and <em> tags used?
   Ans: By default, <strong> means bold and <em> means italic. However, these tags can be redefined via a document-level or external style to mean anything you want.

6. Explain the difference between the margin, border and padding for an HTML item.
   Ans: The padding is the region immediately around the HTML element, the border is around the margin and the margin is around the border. The margin and padding are transparent; the margin lets the element background color show through and the padding lets the background color of the containing element (like td or body) show through. The border has its own color.

7. How do you set the background image for an HTML page?
   Ans: (1) Right click on the page and select the Formatting tab. Browse for the image. This produces the HTML body tag: < body background="images/bg.jpg">
   (2) Set a document-level or external style like this:
   body { background-image : url('images/bg.jpg') }

Adding User Defined Links to Webpages

• There are two styles of links, horizontal and vertical.

• Horizontal links are easier. Just cut and paste them below the page heading.

• If you use vertical links, put them in a table cell or on a layer.

• Here are three examples:
  1. Horizontal Navigation

  2. Vertical Navigation using a Table

  3. Vertical Navigation using a Layer

• Here is the CSS style sheet for all three examples.

• The text inside the table cells or layers must be formatted between <p> and </p> tags for this style page to work.

Adding a Theme to a Website

• Advantage of Using a Theme: Automatically sets unified style for the website.

• Disadvantage of Using a Theme: Many images are created that must be uploaded. This consumes a lot of disk space.

• To add a FrontPage Theme to your site:
  1. Create a FrontPage one page website named greece-site.

  2. Leave the name of index.htm as is. Change its title to Greece Homepage.

  3. Create new pages named archaological-sites.htm, delphi.htm, olympia.htm, museums.htm, restaurants.htm and shopping.htm. Add headings and enough text to make the page recognizable.

  4. Select the main menu item View >> Navigation, to show the Navigation view.

  5. Right click on Greece Home Page >> Add Existing Page >> Double click on the existing page to add. Do this for the Archaological Sites, Museums, Restaurants and Shopping page.

  6. Right click on Archaological Sites >> Add Existing Page >> Double click on the existing page to add. Do this for the Delphi and Olympia pages. At this point, all of the pages should show in the havigation view.

  7. Select index.htm.

  8. Select the main menu item Format >> Theme. Select a theme on the right by right clicking on the selection and choosing Apply as Default Theme.

  9. Add a page banner by selecting main menu item Insert >> Page Banner. Make sure that the Picture option is checked and click OK.

  10. Select main menu item Insert >> Navigation. Component Type should be Link Bars and Bar Type should be Bars based on navigation structure. Press Next.

  11. Select the Bar Type as Use Page's Theme. Press Next.

  12. Choose an orientation. Choose horizontal. Press Finish.

  13. Select the Link Bar properties.

  14. Repeat steps 7 through 14 for each of the other pages.