, click on the 
to open the drop down list box. Choose Heading 1.Press the End key on on the keyboard (between the alphabetic keys and the numeric keypad) to deselect the header and move to the end of the line.
FrontPage is a word processor that produces HyperText Markup Language (HTML) as its output. For example, this document was produced using FrontPage. FrontPage allows one to work as one would in Microsoft Word, through a What You See Is What You Get interface (WYSIWYG), while FrontPage handles the details of inserting the HTML tags automatically.
FrontPage has already put in the following HTML tags for this document:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<meta name="DESCRIPTION" content="This document is designed for use in a
workshop at COM-FSM on the use of FrontPage to create web pages.">
<meta name="GENERATOR" content="Microsoft FrontPage Express
2.0">
<meta name="KEYWORDS" content="FrontPage,COM-FSM,HTML,WYSIWYG">
<title>FrontPage Workshop</title>
</head>
<body bgcolor="#FFFFFF">
<h1>FrontPage</h1>
<hr color="#808080">
<p>FrontPage is a word processor ... inserting the HTML tags
automatically.</p>
<p>FrontPage has already... document</p>
</body>
</html>
Those of you who took the earlier course with Ken Girrard might recognize some of these tags. FrontPage allows one to remain happily unaware of the world of tags, permitting one to focus on the content of the page rather than the programming. There is an important proviso inherent in the hidden tag system: FrontPage cannot do more than the underlying HTML tag system. One of the biggest limitations on present day HTML is that page layout is difficult to preserve from computer to computer.
If you have taken Ken's course you might be wondering about the <meta... tags in the head of the document. These are all optional tags. The first tells browsers like NetScape and Microsoft Internet Explorer what character set is to be used. The second is a page description that is not seen by the web surfer. These descriptions are picked up only by search engines like Altavista and will be used as the "descriptive blurb" by many search engines. The generator tag is inserted by FrontPage. The keywords tag is also not seen by web surfers, it too is used only by search engines. This tag tells search engines what keywords by which to index the page.
<title>
The title appears only in the window title bar of the browser, not on the actual page. The
title is important as many search engines still use the title as the keywords on which to
index the web page. To set the title choose the File menu. On the file menu choose Page
Properties. A dialog box will appear. Under the General tab is the option to fill in a
title. Choose a title for your page and enter it into the Title text box.
The next two tags are purely optional.
If you want to set up a description meta tag, click on the Custom tab. To the right of the User Variables list is an Add button (the lower of the two Add buttons). Click on the Add button. In the name text box type DESCRIPTION. In the VALUE text box type the description. The text can extend longer than the width of the text box, but bear in mind that some search engines will truncate the description around roughly 200 characters. Click on OK to create the description meta tag.
To set up a KEYWORDS meta tag click on Add again, this time typing KEYWORDS in the name text box. In the Value text box type in the keywords as a comma separated list. Click on OK to create the KEYWORDS meta tag.
When done click on the OK at the bottom of the dialog box.
FrontPage is a word processor, words that are typed will appear on the page. Most web pages start off with a larger than normal font across the top of the page. In the world of HTML this is called a header. Header level one is the largest size for a header, header level six is the smallest size for a header. Type a page header and then select the page header by dragging the mouse across the header.
On the HTML style menu, , click on the
to open the drop down list box. Choose Heading 1.
Press the End key on on the keyboard (between the alphabetic keys and the numeric keypad)
to deselect the header and move to the end of the line.
Many pages follow the page header with a horizontal rule. From the Insert menu choose Horizontal Line and a horizontal rule will appear on the page.
The horizontal rules in the College of Micronesia are colored using a theme color that runs throughout the web site. Navigation is confusing enough on the web, one way to indicate to the web surfer that they are still on the same site is to use common themes. This could be a common background and text color combination, common horizontal rule colors, or a common background image. The theme color for the College web site was based on the color of the sky over the Learning Resource Center. This was obtained by taking a digital picture of the building and the sky and then using Adobe Photoshop to determine the Red Green Blue values for a patch of sky. The values turned out to be Red = 0, Green = 204, and Blue = 255.
To create a custom colored rule follow these steps:
, choose the color Custom. A second dialog box will appear.
There are some standard colors offered on the left side of this dialog box. On the right
side of the dialog box is the option enter custom color settings. Values can range from 0
(lowest) to 255 (highest). Enter a value of 204 for the Green setting and a value of 255
for the Blue setting. The other values are likely to be the same as seen here: 
FrontPage converts the decimal numbers entered into the base 16 hexadecimal numbers that HTML uses. Caveat: Netscape Navigator in the versions I have tried on campus does not display horizontal line (technically called a horizontal rule) colors. The line appears, but without coloration.
The College horizontal rules are a default (the setting that appears when the dialog box is first opened) two pixels in height and span 100% of the browser window.
The use of the RIGHT mouse button to pop up a context dependent menu is a useful technique in all Microsoft products. The menu offers options as to what one may do at the location one right clicked. This is often the easiest way to get at the properties of a line or an image.
Type a sentence and then press the Enter key. Type a second sentence. Note that a space separates the first and second sentence. HTML is designed with a block paragraph layout as the default layout. Pressing the Enter key causes FrontPage to write </p><p>, a sequence of tags that ends one paragraph and begins the next paragraph. This is sometime referred to as a hard return and is denoted by the symbol ¶. In this document, the ¶ symbol was obtained by choosing Symbol from the Insert menu in FrontPage Express. Note that within a paragraph the lines are not separated.¶
At the end of the second sentence hold down the shift key and press enter.
Type a third sentence. Note that this time there is no blank space. A shift-enter or
shift-return is sometimes called a soft return, or, more commonly, a line
feed or line break. The symbol for a line feed is sometimes ¬, but in
FrontPage the symbol is an arrow shaped like a backwards L and pointing to the left. This
symbol is usually invisible unless the ¶ button is pressed on the tool bar at the top of
the screen. The HTML tag for a line break is <br>.
Do not construct web pages consisting only of line breaks. In HTML, text with embedded line breaks is taken as a single logical line. This means, for example, text separated by only a line break must have the same HTML formatting. This also means that if there are twelve eight and half by eleven pages worth of text separated by only line breaks, the smallest deletion or editing can result in a long wait for FrontPage to reprocess the document. For FrontPage, and for browsers, that is a sentence twelve pages long. This may also slow down display of pages. Use line breaks only as necessary. Hard returns are preferable.
Enter generates a new paragraph, shift-enter generates a new line.
To the right of the HTML style drop down list box are various controls and buttons for the font face, font size, font style, font color, and the sentence justification.
Press Enter and type in a single word. The first control on the left is a drop down list box. This allows one to set the font face. Times New Roman. Arial. Courier. Select the word and try some different fonts.
Bear in mind, however, that these font faces exist only in Windows 95/98. Macintosh and
UNIX machines will not have these same fonts. Even on Windows 95/98 machines fonts can
vary from machine to machine. The machine this document was composed on has fonts such as Verdana, Beeknees itc, Georgia, and Viner Hand ITC. The
machine this document is viewed might not have these fonts. The fonts should look like: 
Note that this second set of font faces was done as
an image using a Graphic Image File format.
A couple of other notes on font faces: Use a font that is easy to read. Beesknees ITC would be a tough font to read if dozens of pages were done in that font. Do not use multiple different fonts on a page unless the design intent of the page is to win an ugliest page award.
Select the word and try the control to the right of the font face control. There are controls that increase and decrease the font size, set the font style to bold, italics, or underline, allow the word to be colored, and set the justification to left, center and right justification.
A few more cautions: do not use underlines. Underlining has a special meaning for most web surfers. Underlining means the words are a hyperlink, a connection to another page or site. Underlined words, on a web page, can usually be clicked upon to take one to another site. If emphasis is desired, use italics or bold.
Coloring words is also potentially confusing: color is used by many browsers to help the web surfer determine whether a link is visited or unvisited. Microsoft Internet Explorer 4.0 comes with the underlining of hyperlinks turned OFF. Thus some web surfers are accustomed to underlined hyperlinks while others key in on color changes only. Reserve color changes in regular text for hyperlinks. Headers, being a special type of text, may be colored without necessarily creating as much confusion for the web surfer.
The controls 
allow the setting up of numbered and bulleted
lists. To start a list, type the items separated by hard returns. Select the
items and click on either the enumeration button or the bulleting button. FrontPage will
remove the paragraph break spaces and create the list. Inside a list line breaks
(shift-enter) can be used to create unbulleted or unnumbered lines:
To create a hyperlink, first select the word to be hyperlinked. Then choose the Hyperlink from the Insert Menu. Type in the full Universal Resource Locator (URL) including the http:// portion in the Create Hyperlink text box. The following is an example of a hyperlink: Spirit of Micronesia music CD-ROM.
If one is on line and has Microsoft Internet Explorer open to a site, then the site's URL should automatically appear in the FrontPage Express Create Hyperlink dialog box.
From the Format menu choose Background... Here there are options to set a background color, text color, and the color of the hyperlinks on the page. Some information in circulation indicates that users of WebTV systems have an easier time reading light colored text against a black background. If the target audience for the web page is likely to include WebTV users, then a dark background, light text, and default font faces are in order.
Note that the background dialog box is actually another tab in the page properties dialog box.
Background images are often used on web sites. This dialog box allows the selection of a background image. When selecting a background image, be careful that the image does not render the page unreadable. Used muted colors and pastels in the background, or use a monotone embossed effect. Background images should be small in size, no more than 10K in size, and the exact same file should be used throughout the site. Keeping a common background image not only preserves the theme effect that the image generates, the use of a common file allows the web surfers browser to load the image from the users local cache on subsequent pages. This permits faster display of pages. Web surfers are impatient. In general, information should be easily found, easy to read, and rapidly accessible.
To insert an image select Image.... from the Insert menu. The Image dialog box has a tab for selecting a local file from the hard drive or from the Internet. The second tab leads to a small collection of clip art options. Pay careful attention to image sizes and to the mission of the web page. If the page's main function is to provide a list of officers working at a company, a large and slow loading image is completely out of place. The image will also waste ink should a web surfer want to print the list for their own use. If the page's main function is pictoral, then larger images might be appropriate. Rarely should an image exceed 30 K, although here too there may be exceptions such as weather satellite images.
If the original image is a sketch or drawing with few colors and sharp lines, then the image will be smaller as a Graphic Image File (GIF). GIFs usually have adjustable color palettes that reduce the number of colors to the minimum needed to reproduce the image. A GIF is termed lossless because a GIF records each pixel in the image. It is the reduction in the color palette that provides the principle compression in a GIF. As a result GIFs retain the sharpness of lines and the edges of fonts. GIFs have a maximum of 256 colors. Bitmaps produced with Microsoft Paintbrush usually compress best as GIF files.
If the image is a photographic image, then a Joint Picture Enterprise Group format file is usually preferable. For a photo a JPEG is smaller than the corresponding GIF for the file. JPEGs are also capable of reproducing over 16 million colors. The complication is that many computer users have their computers set to display only 256 colors. If the computer is set to display 256 colors, then the JPEG colors are converted to the nearest color match. The result is a grainy, non photographic look to the image. JPEG is a lossy compression method and the relative amount of loss is controllable from within FrontPage.
| When working with JPEGs, one tends to set the loss level at that level that produces the desired image size in kilobytes. The screen on many computers is set to 640 pixels across and 480 pixels high. A pixel is essentially a pointillistic dot, the smallest unit that can take on a color. Some computers are set to 800 pixels across and 600 pixels high. The image of koosh is a JPEG 226 pixels wide by 211 pixels high set at 75% quality with a resultant size of 20 Kilobytes (19740 bytes). Note that Windows 95/98 uses the extension JPG for JPEG files. |  |
Remember that compression is speed. Koosh as an uncompressed bitmap is 141 Kilobytes. That is 143,534 bytes, or 1,148,272 bits. Modem speeds experienced here at COM-FSM typically range from 21,600 bits per second to 33,600 bits per second (bps). At 21,600 bps the Koosh bitmap file is a 53 second load. That might not at first seem like a long time, but stare at a clock for 53 seconds doing nothing else and the wait becomes more apparent. The JPEG loads in 7.3 seconds. This is still quite slow. The typical user tends to conclude something is "broken" after only 2 to 5 seconds. Spend some time watching a timer while surfing the Internet, most people are surprised to learn their level of impatience rises before the timer hits ten seconds.
Try inserting the koosh.jpg file that is in the My Documents folder.
Simple tables can be constructed by the use of the HTML tag <pre>. The pre refers to preformatted and was an early attempt to gain some layout control in HTML. Preformatted text is still a useful way to create simple tables that load very fast.
State Pop Male 15-24 Female 15-24
Chuuk 52870 5603 5261
Kosrae 7354 684 688
Pohnpei 33372 3680 3473
Yap 11128 1054 1174
104724 11021 10596
Preformatted indicates to the browser that the browser must display the text using a font face that has spaces, letters, and numbers, that are all equal in width. Preformatted text is one way to generate text that supports consecutive spaces. Normal HTML does not support consecutive spaces. Try typing two spaces after a period with the HTML style set to normal. Newer HTML authoring packages, such as FrontPage 98, use special codes to generate consecutive spaces in normal HTML format.
Table are easy to create and modify in FrontPage. The table control 
is used by clicking on the control and dragging to obtain the desired
number of initial columns and rows. When the mouse button is released, FrontPage will
generate the table. The table may be invisible. Click on the 
button in the toolbar if the table cannot be discerned.
| With the cursor in a table, the items on the table menu become active. | Cell background image. |
Cell background image: Seagull Cells can contain images or have a background image or both! |
Tables provide another way to gain some control over formatting. Be careful, however, one can specify a cell or table width that is wider than the web surfers browser and this can make the table difficult to read. |
| Tables can have colored borders, background color and images. Dialog boxes to try playing with include the Table Properties dialog box on the Table menu and the Cell properties dialog box on the Table menu. Cell properties override Table properties. | Cell background image! Very ugly! |
Tables can be used to organize a page. Tables are very useful for embedding images in text, as in the Koosh picture earlier. Tables also permit the construction of truly chaotic, confused, and ugly pages. Different browsers may display complex tables in different ways.
Caution: Many browsers will not display a table until ALL the table elements have been downloaded. Tables can lead to slow display of web pages.