FrontPage 2003 Basics—Quick Sheet

Getting Started

Start a new FrontPage document by choosing FrontPage from Start : Programs.

Each Web page should contain a title that provides a concise definition of what the page is and where it resides. This is not the same as the main heading that you type on the page for the readers to see. For example, course pages could be titled "IUSON X100 Introduction to Everything Nursing" to identify the location (IUPUI), the type of course (introductory), and the course name.

  1. Choose from the menu, FILE : Properties.

  2. Replace the "New Page 1" information with your title then click OK.

Choosing Colors

Avoid the use of FrontPage themes. They add extra files and create directories that make it more difficult for novice Web developers.

If you make no changes, the colors of your page (the defaults) will be white background, black text, blue hyperlinks, and purple visited hyperlinks. You may choose alternate colors:

  1. From the menu, choose FORMAT : Background.

  2. To choose new colors, drop down the option to the right of each variable. Select one of the basic Web colors or click More Colors to select from a complete color palette then click OK.

Backgrounds generally should be no more than 1-2 "layers" from the center of the color palette. The text, hyperlinks, and visited links should be different from one another, yet complimentary.

Wallpaper is a graphic that provides your page with a pattern or texture behind the text. To add a wallpaper image to your page, from the menu,

  1. Choose FORMAT : Background.

  2. Click Browse and change to a location where you saved a wallpaper file. Select the file then click OK. Click OK to accept the page properties change.

Although FrontPage allows you to choose both a background color and a wallpaper, the color will be hidden behind the wallpaper.


The font toolbar shown below may help you identify tools as you read through this section.

Screen image: font toolbar


Fonts that you use on Web pages will display correctly to your reader only when the specific fonts used are also installed on your reader's computer. Therefore, it is important to use standard fonts which are automatically installed on all computers. Verdana, a font face that was designed specifically to be viewed online, is the preferred Web font (and is what this document is prepared in). Arial and Comic Sans MS are also both good choices: Arial is a bit smaller than Verdana (this phrase is written in Arial), and Comic Sans has a little more "personality" (this phrase is written in Comic Sans MS).

Bold and italics are the most common attributes that you can choose to apply to text. Remember that Web browsers usually show hyperlinks as being underlined, so avoid the underline attribute. To select additional attributes such as super- or subscript, highlight the text, then from the menu, choose FORMAT : Font and place a checkmark in the box for the effect you want.

Bullets and Numbers

To insert bullets or numbers as you type:

  1. Place the cursor in the paragraph in which you want the list to start.

  2. Click the Number or Bullet tool and type the text, then press the <ENTER> key on your keyboard.

When you start the first paragraph that you don't want to have a bullet or number, click the tool to turn off the feature.

To change the bullet or number style (i.e., Roman numerals, upper or lower case alphabetic, square or circle bullets), choose from the menu, FORMAT : Bullets and Numbering and make a new selection from the Plain Bullets or Numbers tab. In the Numbers tab you can also choose a new starting number for your list.

The Picture Bullets tab allows you to choose a graphical bullet from images you have previously saved. Click the Browse button, locate and select the image file, then click OK.

NOTE: Although it is possible to create nested lists, e.g., outlines, it can become frustrating to get the sequencing and alignment you want. Until you feel comfortable working directly with HTML tags, you may want to avoid nested lists.

Indenting Text

The indent tool moves both margins, not just the left margin. For example, in the paragraph below, I used the indent tool twice:

"Four score and seven years ago, our fathers brought forth to this continent a new nation, conceived in liberty and dedicated to the proposition that all men are created equal."

Single Spacing Lines

When you press the <Enter> key while typing in an HTML document, you get a blank line as in double-spacing. To get a single-spaced line, press and hold the <Shift> key while tapping <Enter>. NOTE: It is IMPORTANT in Web pages not to manually create a new line in regular lines of text; allow them to wrap. Monitor settings vary and what may look like a good "end of line" for you may not look that way for your reader. Reserve this technique for instances when you always want the line to break in that specific spot, such as an address or multi-line title.

Font Color

Even though you may choose new default colors for text, hyperlinks and visited hyperlinks for an entire document, you can also selectively apply color to words or phrases. Highlight the text, then choose a color from the Font Color tool. The currently selected color is denoted by the band beneath the "A" or you can choose a different color.

When you manually apply a color to text using the font color tool, that choice overrides any default color choices you may have made. Therefore, if you "color" a hyperlink it will no longer appear to the reader as a link, nor will it change to a visited link color. This causes the reader to lose a valuable navigation aid and should be avoided.


Hyperlinks are those areas that you design to be "clicked" in order to take your reader to a different location.

  1. Type the text that you want your reader to click on.

  2. Highlight the text.

  3. Click the Hyperlink tool,Screen image: FrontPage 2003 hyperlink tool 

In the "Create Hyperlink" dialog box:

To remove a hyperlink but retain the text on the page, click anywhere within the hyperlink then click the Hyperlink tool. In the dialog box click Remove Link.

To edit a hyperlink, click anywhere within the word or phrase containing the hyperlink and click the Hyperlink tool. Edit the text as needed then click OK.


  1. To insert a clip art image into your Web page, place your cursor where you want the image inserted then from the menu, choose INSERT : Picture : Clip Art.

  2. Locate the image you want in your page, and click on it to insert it.

  3. Since clip art is not in a Web-readable format it is necessary for you to convert EACH clip art image used (this step is not necessary for photographs you locate in the Clip Art Gallery). NOTE: THIS IS A VERY IMPORTANT STEP. The clip art you insert will be visible to you, but not to readers of your page without this step!

  4. Click once on the image so that it has handles (handles are small black squares around the edge of the image).

  5. Right-click and from the pop-up menu, choose Picture Properties; on the General tab, click the Picture File Type button. Click OK.

If this clipart is an image that you will use repeatedly, you should consider changing the new gif file name to something more recognizable and from hereafter inserting this image rather than inserting the clip art file from the Clip Art Gallery. This will prevent you from having multiple copies of the same image.

Photographs and Other Images

To insert non-clip art images into your Web page, from the menu, choose INSERT : Picture : From File. Locate and select the file, then click OK.

Although it is possible to re-size an image after it is inserted into the Web file by dragging the handles, you should only do that if it is a relatively small adjustment. While altering the image in this way makes the image display differently on the screen, it doesn't physically alter the file size. Increasing the image display size in this manner may cause the image to look grainy. Decreasing the image display size by dragging the handles still takes as long for the reader to download as it would have you had kept it its original size. For anything other than a small adjustment, it is always better to open the image in a graphics application and physically resize it.

Using an Existing Document

If you have an existing document, created in a word processing application, you can use it with FrontPage to create a Web document easily without re-typing the text. Choose INSERT : File. Browse for it then select and open it. Once it appears in the FrontPage window, it will have been converted to an HTML document for you. You will likely need to make some formatting repairs, particularly if the formatting is complex. However, it may prevent you having to re-type the entire thing.

If FrontPage appears to have difficulty opening your document, open it in its creating application, and re-save it as RTF (Rich Text Format) format rather than the regular file format. You can find RTF in the Save As option under the drop-down "File Format" option.

Saving and Exiting

When you're ready to exit your FrontPage document, choose from the menu, FILE : Save (or Save As). The first time you save the document you will be asked to specify a directory location to store the file. You will also be prompted to handle any clip art images that you correctly converted to Web image files during this editing session (previously saved images will automatically be saved along with the HTML document).


HomeReturn Home

alid HTML 4.01 Transitional Valid CSS