9/27 Notes

Summary for HCI 201 -- 9/27/04

What are the distinguishing characteristics of each of these font families?
Old Style Slab Serif Modern Sans Serif Script Decorative
Ans:
1. Old Style: Some of the letters have diagonal serifs.
2. Slab Serif: Serifs are horizontal, and the thickness of the serifs are equal to or greater than the thickness of the main strokes.
3. Modern: Serifs are horizontal, but the thickness of the serifs is narrower than the thickness of the main strokes.
4. Script: The letters look like they were drawn with a calligraphy pen.
5. Decoritive: The shape of the letters is artistic and/or unusual.
Name one font in each of the font families in Question 1.
1. Old Style: Times New Roman
2. Slab Serif: Courier New
3. Modern: Georgia
4. Sans Serif: Verdana
5. Script: Forte, Park Avenue
Which of these font families makes printed text easiest to read?
Ans: Old Style.
Which of these font families makes printed in a browser to read.
Ans: Sans Serif
What are the four page design principles that we discussed last Thursday?
Ans: Alignment, Contrast, Repetition, Proximity.
Which of these should be used sparingly? Upper case text or lower case text.
Ans: Upper case text.
Which of these should be used sparingly? Left aligned text, centered text, right aligned text.
Ans: Centered text and right aligned text.
True or False. Never use more than one font on a page.
Ans: Two fonts can be used on a page if there is good contrast between them. Three different fonts should only be used with a good reason.

Traditionally, the red, green, and blue components of a color are represented in hexadecimal (base-16) rather than in decimal. Computer scientists like hexadecimal numbers because they are very easy to convert to and from binary.
The commonly used abbreviation for hexadecimal is hex.
Color components have a range from 00 hex to FF hex (0 to 255 decimal).
Look at this Hex Digits Table for the meanings of each of the hex digits.
In each two digit hex number, the first digit is the sixteens place and the second digit is the ones place.
Example; 58 hex = 5 x 16 + 8 = 88 decimal.
Example; AD hex = 10 x 16 + 13 = 173 decimal, because A = 10 and D = 13.
Here is a Hex Conversion Table for converting two digit hex numbers.

The color red has a maximum value for the red component (FF hex), zero for the green component (00 hex), and zero for the blue component (00 hex). Therefore its color code is #FF0000.
The HTML code for setting the background color of the document to red is
<body bgcolor=#FF0000>
Set the background color of a FrontPage page by
1. right clicking on the page,
2. selecting Page Properties,
3. picking the Background tab,
4. selecting the background color,
5. clicking OK.
What do you think the hex color codes for green and blue are?
Magenta is obtained by mixing red and blue light. What is its hex color code?
What is the hex color code of cyan (blue-green)?
What color do you get from mixing red and green?
The light green background of pages on Jost's HCI 201 website is #F6FFF6.

Here is a table showing the significance of various colors in the western world:

Color	Significance
Black	Power, elegance, formality, strength, prestige, death
White	Purity, cleanliness, refinement, innocence, virginity
Red	Passion, intense energy, anger, love, sensitivity
Orange	Enthusiasm, creativity, determination, success, stimulation
Green	Healing, nature, earth, freshness, calmness
Blue	Dignity, power, stability, depth, truth, heaven
Yellow	Happiness, vibrancy, youth, cheerfulness, sunshine
Purple	Royalty, riches, sumptuousness, luxury, ambition

To create a table in FrontPage:
1. Select the main menu item Table, Insert
2. Set the number of rows and columns.
3. Set Alignment, Border Size, Cell Padding, and Cell Spacing.
4. Drag the border of the table to set the table size.
The HTML table delimiters are <table> and </table>
The HTML table row delimiters are <tr> and </tr>.
The HTML table item delimiters are <td> (table definition) and </td>.
The HTML table header delimiters are <th> and </th>.
See Example 3 and the corresponding source code.

Create a folder in your FrontPage web named images.
Download images from the Internet or other sources and place them in the images folder from Step 1.
Use MS Paint to resize your images if necessary to get their size below 20 K.

To place an image on your page:
1. Position the cursor where you want to place the picture.
2. Select main menu item Insert, Picture, From File ...
3. Select the desired image from the images folder.
4. Resize the image as desired by dragging the resizing handles located on the border of the image.
The HTML code for displaying the image flowers.jpg is
<img src="images/flowers.jpg">
The HTML code for displaying the image flowers, where the image serves as a hyperlink to the address bigflower.jpg is
<a href="flowerpage.htm"><img src="images/flowers.jpg"></a>

To create a WordArt image:
Position the cursor where you want to place the WordArt header.
Select main menu item Insert, Picture, WordArt.
Select the WordArt Style from the WordArt Gallery Page.
Enter the text, set the text font, and set the text size on the Edit WordArt Text page.
Use the WordArt toolbar to modify the color, size, layout, and shape of the WordArt header.
Here is an example WordArt header: