To Notes

Summary for HCI 201 -- 2/16/06

Review Questions

1. How do you create an ordered list using FrontPage?
   Ans: Type in the items hitting enter inbetween each item. Then highlight the items with the mouse, select main menu Format >> Bullets and Numbering >> Numbers >> select arabic numbers.

2. How do you create an unordered list using FrontPage?
   Ans: Same as Problem 1 except choose Plain Bullets and select solid bullets.

3. How do you change the counters (numbers or bullets) of a list using FrontPage?
   Ans: Highlight the list, select List Properties and change to the type of numbers or bullets that you want.

4. What are the HTML tags for an ordered list, unordered list, and list item?
   Ans: <ol> <ul> <li>.

5. What are the default counters for ordered list and unordered list.
   Ans: Arabic numbers (1, 2, 3, ...) and solid bullets.

6. How do you change the counter for a list in a style? Ans. Add this style:
   li { list-style-type : upper-roman }

7. Modify the following styles to make the background color very light blue, the text color very dark blue, the body font arial, the color of the h1 headings maroon, and the font of the h1 headings Comic Sans MS.
   body { background-color:#FFFFF0; color:#000000; font-family:Verdana; }
   h1   { color:#000080; font-family:Georgia; font-weight:bold; }
   Ans: After modification:
   body { background-color:#F0F0FF; color:#000040; font-family:Arial; }
   h1   { color:maroon; font-family:Comic Sans MS; font-weight:bold; }

Advantages of CSS Styles over HTML Attributes

• Greater control of fonts, colors and page layout.

• Style is separate from structure.

• Usually smaller documents.

• Easier site maintenance.

• Compatability with applications other than web design. For example, cell phones and text readers for visual impairments.

• Using HTML attributes to modify page appearence will probably become obsolete.

• CSS has become the standard.

Disadvantages of CSS Styles

• Uneven browser support.

• Styles are interpreted differently on different browsers.

Units for Styles

• The default unit of measurement in styles is pixels.

• Many other units are possible. Here is a table:

  Code	Unit	Comment
  px	Pixel	Monitor dependent
  pt	Point	1/72 of an inch
  pc	Pica	1/6 of an inch.
  em	Em	Width of M in current font
  ex	Ex	Height of x in current font
  in	Inch
  mm	Millimeter
  cm	Centimeter
  %	Percent	Relative to current font

• If the unit of measurement is omitted, the number means pixels.

• Here is a style that sets the size of the h1 font to twice the size of the current body font:
  h2 { font-size : 200% }

• Try modifying the preceeding style in FrontPage by using the units pt, in, cm, mm, and px.

The <strong> and <em> tags.

• The default meaning for <strong> is bold.

• The default meaning for <em> is italic.

• To add a strong of em tag to a document, type it directly into the Code View.

• Example: Here is HTML code containing the strong tag and its appearence in the browser:
  HTML Code:
  This is <strong>very</strong> important.

  Display in Browser:
  This is very important.

• The appearence of both <strong> and <em> can be modified using a style.

• Here is an example style that modifies the strong tag's behavior
  strong { color : red; font-size : 130% }

Styles for Address Tags

• Here are the four hyperlink states and the selectors that are used to define styles for those states:

  State	Selector
  Unvisited	a:link
  Being Visited	a:active
  Already Visited	a:visited
  Mouse over Link	a:hover

• Check the behavior of the following link:
  To DePaul Homepage.

• Here are the styles that define the link colors on this page. The order of the styles is important.
  a:link     { color: blue }
  a:visited  { color: orange }
  a:active   { color: lime; font-weight: bold }
  a:hover    { color: white; background-color: blue }

• Set the text-decoration property for an address tag to none to eliminate underlining for links. This is often used for links in the link area on a page.

• To set hyperlink styles in FrontPage, right click on the hyperlink, and choose style in the Edit Hyperlink dialog.

Inline Styles

• So far, we only know about external and document-level styles. An inline style only applies to a specific HTML tag.

• To set the style of a tag with FrontPage, go to the Code view, right click on the tag and choose Tag Properties. Modify the style as you did for a document-level style or for a .css style sheet.

• In the HTML code, the style of a tag is set by setting its style attribute.

• Example: <h1 style="font-size:200%">Section 1</h1>

• In the preceeding example, the inline style only applies to this particular h1 heading.

Styles for Layers

• To set styles that apply to a single layer using FrontPage, go to the Design View, right click on the layer and choose Layer Properties. You will get choices Borders and Shading and Positioning.

• To set other styles, like Font or Character Spacing go to the Code View, right click on the div tag and choose Tag Properties.

The <span> Tag

• <span> tags are used to give styles to a single word or short phrase. <span> tags are usually not used with document-level or external styles because they are used for special cases. They are almost only used with an inline style.

• An example using a <span> tag.
  HTML Code:
  A <span style="font-family:Courier New">&lt;span&gt;</span>
  tag is used with an inline style.

  Display in Browser:
  A <span> tag is used with an inline style.

• Set the style of a <span> tag by right clicking on the tag in Code View and choosing Tag Properties.

Padding, Borders and Margins

• Using CSS Styles, one can set borders, padding, and margins for an element.

• The following h1 heading is placed in a table cell with magenta background so so that we can see the effect of setting borders, padding and margins around the heading: Header in Table Cell Example.

• In HCI201, you are most likely to use borders and padding in a layer.

• Exercise: Set the border color, border width and padding width for a layer in front page.

Background Images

• Here is an example of a page with a background image.

• Notice these things about the background image in the example:
  It is posititioned at the left side of the page.

  It image repeats only in the y (vertical) direction.

  It is fixed when the page is scrolled. Only the text scrolls.

• Here is the style that accomplishes this. Note that FrontPage will not create all of these styles. The background-position, background-attachment and background-repeat must be typed manually into the document-level style in the Code window.

  body { font-size: 130%;
         color: maroon;
         background-color: white;
         background-image: url('images/pink.gif');
         background-position: 1in 0.5in;
         background-attachment: fixed;
         background-repeat: repeat-y; }

• Values for background-position: distance to position image from left of body, distance to position image from top of body.

• Values for background-attachment: fixed, scroll.

• Values for background-repeat: no-repeat, repeat-x, repeat-y, repeat (repeat in both directions).

• Try this out for yourself in FrontPage.