Making a WWW Document in Microsoft's FrontPage

by Beth D. Ardoin
1997 © University of Texas at Houston

IntroductionGeneral InformatonButtons and ToolbarsNotesAddress


This electronic courseware is created for use by employees of The University of Texas Health Science Center at Houston. Corrections and suggestions should be made directly to the author. It in our sincere hope, in the Office of Academic Computing, that electronic courseware will prove an invaluable tool in a time crunched environment where learning and reviewing new information electronically can enhance and simplify your job.

This page is designed to instruct users on how to write a document for World Wide Web. Documents to be published on "the Web" must be coded in a language called HyperText Markup Language (HTML). Microsoft's program FrontPage is designed to write the HTML coding while the creator concentrates on the look and feel of the WWW page being created.

General Information

To open up Microsoft's FrontPage program:

When you begin typing, the system will set the text type to Normal. You can begin typing immediately in the space provided. Remember as you type that the end of the line will want to wrap. You should not assist it by putting in returns to go to the next line. That will make a new paragraph instead of a new line.

FrontPage will assist you in seeing your text as it will appear on the viewer. For instance, if in your normal mode of typing, you put two spaces after an ending punctuation (. ! ?), only one will appear on your screen, because only one will appear on your viewer once your page is placed on a WWW server.

When creating any document, it is important to save often.

Periodically, you will see a **Note: or **Example: after some text or formatting. These notes will tell you how the object directly above was created in FrontPage or some pertinent information you should consider. They are just examples and comments to assist you.

To create the document you are reading:

This tutorial will take you through a discovery of the buttons and shortcuts. Later there are explanations of some of the other features. I hope this tutorial will help you. Feel free to refer to it often.


The Buttons and Toolbars

Menu BarStandard ToolbarFormat ToolbarImage ToolbarForms Toolbar

Menu bar


The items listed under these headings are very similar to those in most of Microsoft's PC programs. (**Note: to turn off this toolbar so that it no longer is viewed on your screen, select View, then select Standard Toolbar so that no check mark is next to that line. To turn it back on, select View, then select Standard Toolbar so that the check mark is next to that line.)

File includes:

(**Note: the above list was typed as though it were several paragraphs, then highlighted. Once all the items to be bulleted was selected, the pull down bar on the format toolbar menu was chosen (it usually reads Normal) and Bulleted List was selected.)

Edit includes:

(**Note: underlined text and the color royal blue through purple are used as default colors for links on many web servers. It is wise to stay away from using these for emphasis without having them as links. Suggestion: use another form of emphasis than underline, or the colors blue through purple.)

View includes:

Insert includes:

Format includes:

Tools includes:

Table includes: (**Note: jump back to Bookmark or Standard Toolbar/Insert Table)

The Insert Table Attributes (**Note: this line added with Insert Caption
and the blink was added with Edit/Properties/select blink.)
Table AttributesExplanationDefault is set to:


Number of lines DOWN of the table
(**Note: this table has 8 rows.)



Number of lines ACROSS the table
(**Note: this table has 3 columns.)



The display of the placement of the cell on the screen
left, right or center
(**Note: this table used center.)


border size

The thickness of the table lines
(**Note: this table used 2.)



The space between the text or picture and inside edges of the cell
(**Note: this table used 4.)



The space between the cells of the table
(**Note: this table used the default of 2.)



Denotes how much of the screen the table will take.


(**Note: for this table, the width checkbox was de-selected.
By turning it off, you control the width with line breaks.)
(**Note: this cell has been split with Table/Split Cell, Rows, 2)

Window includes:

Help includes:

Top Row of Icons - Standard Toolbar

paper button is for beginning a new document.
The second button, the
folder, allows you to go into a folder and open a document you have already begun.
disk button allow you to save (just as File/Save does) to floppy disk, hard drive or remote drive.

The next icon is a printer and allows for direct printing once the program is properly configured. If you print an HTML document from FrontPage, it will print it as seen on the screen, not the tagged document where you see the programming language.
The fifth icons is the
print preview (paper with magnifying glass) button, allowing you to check your work before printing it.
Next is the
spell checker (ABC. This handy tool save lots of proofreading time, but does not exclude the need to check grammatical errors and synonym errors.

The next three are cut, copy and paste, respectively.

These two little arrow are for undo-ing and redo-ing work, great for goof-ups.

The paragraph marker allows you to view or not view the line breaks. A line break is like a new paragraph except that there is no empty line. For instance, in the lines above, the printer description and the print preview description are divided by a line break. Between the spell checker and the cut/copy/paste picture is a paragraph. See how the paragraph tag has space above the new line and the line break does not.

Next is a chain link. This button is used to add in links between pages or parts of a document With this button, you can identify where the link will go (destination) when someone presses on a hot spot

Then, there are the backward, forward, reload, and stop buttons. The backward and forward buttons move you between pages and links (These buttons will move between links if you have used the Tools/Follow Link button). The reload button is important when creating pages so you can see the latest saved version. (Note: when creating any document, save often.) A companion to the reload button is the stop button. When reloading is taking more time than you would like because you are moving to a different document or the document has many pictures to load, you may decide to stop loading; to do this, just press that stop button. You may get most, part of, or none of a page is you stop the download with the stop button. Also, pictures that you did not give the system time to load, will have a broken icon in its place. (**Note: this same thing is true for you as a user using Netscape. If you do not give the page time to completely load, you will get broken icon images.)

Front Page Explorer - your connection to Explorer, used for organizing the documents in a web or for selecting owners of certain documents.

To Do List - this is part of Explorer

Insert Table - allows you to place a table into your document. (See Table.)

Help - on-line help for the program. You can put in a topic for defining. It will also show you relationships between similar topics with the Related Topics button.

Second Row of Icons - Format Toolbar

The "format pull down menu" shows the different types of character traits you can give to a word or line. It shows in this picture as set to Normal. This is where you choose the heading (sizes 1-6) tag or a list tag. Some of the tags in this area are:

Normal - your most widely used tag. This is for the text of your average paragraph.
Formatted - puts the pre-formatted text with fixed fonts and spacing, typewriter look.
Address - usually formats in italics. Used especially for bottom of pages
Heading 1 - largest of the header tags
Heading 5 - one of the smaller header tags
Numbered List - numbers the items in a list
Bulleted List - puts bullets before items in a list
Directory List - puts a bullet before the first line of a list and indents all lines
Menu List - puts bullets before the first line of a list; for short paragraph description
Defined Term - names the term to be described in the next line (see definition)
Definition - indents all lines of the definition under the defined term tag.

**Example of Defined Term and Definition tags:

this is defined term (Text typed and highlighted, then the Defined Term tag was chosen)
This is the information on what the defined term is. It is here that you will see the full explanation and example of the term. (Text typed and highlighted, then the Definition tag was chosen)
this is the next term to define (Defined Term tag chosen)
Here is the information describing the next term defined. See how the lines are indented for the definition, but out-dented for the term. Also note that the definition and term are not spaced apart with an empty line. Even if I put in a return carriage, (return carriage added here)
the next line is marked as a break, not a paragraph. This continues until I return to the Normal tag.

**example ends here

Other Quick Format Buttons (with explanations)
The "B" buttonchanges the highlighted text to bold
The "I" buttonchanges the highlighted text to italic
The "U" buttonunderlines the highlighted text
The "tt" buttonchanges the text to typewriter font. The letters all have equal amount of space whether they are w's or i's
The "ABC" buttonadds font color changes. Be careful about using color changes of text.
Stay away from royal to dark blues and some purples since they are the default colors for hyperlinks

The "A+" button

increases the size of highlighted text
The "A-" button decreases the size of highlighted text

**Note: above made with Table/Insert Table. Rows=7, Columns=2, Border Size=1, Cell Padding=1, Cell Spacing=2, Specify Width turned off (unselected). After filling in the table, Table/Insert Caption selected and title added, text Left Flush.

There are three sets of buttons left.

The first set is the justification set. Left, Center and Right justified text is set by highlighting the text and pressing the desired button. The entire paragraph will take on the new justification.

The second set is the list button set. Numbered or bulleted lists are made with the these two buttons, respectively.

The third set is the indent button set. They are for further increasing or decreasing indent of text.

(**Note: above made with "There...left." as a Defined Term. The three indented paragraphs were indented with the "increase indent ->" button.)

Mapping Icons - Image Toolbar

In order to use the mapping icons, you must first select a picture. If no picture is selected, the tools will be ghosted and unusable..

The arrow will allow you to select a hotspot already created. The other button allow you to create hotspots (or hyperlinks) on an image that is rectangula, circular or a polygon.

The highlight hotspots button allows you to view where on the image there are hotspots. This is helpful when they are difficult to see with normal view.

The make transparent button allows you to make a single color on an image invisible so that the page background is seen rather than the original color. Only one color can be made transparent per .gif image with this tool. If, for instance, medium grey is chosen as transparent and later blue is chosen as transparent, the grey will reappear as visible. In order to use the transparent button in FrontPage, the image must be in .gif format. This reduces the number of colors in the picture and sometimes makes the image larger than if it were saved as .jpg (JPeg)

Forms Toolbar

Since we are using only part of the FrontPage tool, you will only be able to complete part of this job. The FrontPage program is an organizer, a page creator and a server. At UT, we are not running these local Intel based servers. Instead, once the pages are created they are placed on a more powerful Unix server which is monitored by LAN managers, statistics are taken upon request, and backup are regularly done to insure the latest version of the pages is stable. Should there be server problems, for instance, if the server crashed, the LAN manager would have a copy of the pages from the night before and be able to restore the work. Since local machines are very often not backed up, we would have no other copy and pages would have to be recreated.

These form creation tools work with FrontPage as a WWW server. Since we do not have FrontPage used as a server in most cases on this campus, you can create the form here, but you will need to have someone create the CGI file needed for the form to work on the Unix WWW servers. You can contact the OAC office for more information. 500-5900.

Explanations of the icon in Forms Toolbar

One-Line Text Box - this field will only accept one line of text from the user, ideal for passwords.

Example of One Line Text Box

Settings Selected

Initial value:Your Name Here
Width in characters: 30 (the width of the line you see on the form)
Maximum characters: 50 (this value can be longer than the width)
Password Field: no

Scrolling Text Box - this field allows for more than one line of test from the user, ideal for comments or suggestion

Example of Scrolling Text Box

Settings Selected

Initial value: Place your comments here:
Width: 20
Number of lines: 3


Check Box -this field allows users to make selections from given choices. More than one can be selected

Example of Check Box

Settings Selected

Where will you be publishing?

Publish Outside of UT

Publish on OAC server

Publish on Departmental Server

Name: puboutside
Value: ON
Inital State: not checked

Name: puboac
Value: ON
Inital State: checked

Name: pubdept
Value: ON
Inital State: not checked


Radio Button - this field allows the users several choices (like check box) but only one can be selected

Example of Radio Button

Settings Selected




Group Name: sex
Value: Male
Initial State: not checked
Group Name: sex
Value: Female
Initial State: not checked



Drop-Down Menu - gives a list of choices. One or more can be selected

Example of Drop Down Menu

Settings Selected

Dates this message
is active


Name: datesactive

Choice+Selected Value:
Add - to put a value on the table.
I added values six time (one for each number).
All were set as: not selected.
Modify - to change a value
Remove - to eliminate a value
Move up - to move one up the list
Move down - to move a value down the list

Height: 8

Allow multiple selections: yes

Push Button - the final button. Once users have filled out the form, they have the option to clear and start again or submit it. This is the Reset or Submit button.

Example of Push Button

Settings Selected

Name: submit
Value: Submit (this is the name on the button)
Button Type: (submit or reset) Submit

Completely create the form with all of your button. Then the CGI file will be much easier for someone to create for you.


When creating any document, it is important to save often.

If you want to go to a new paragraph, press the <enter> key. If you want to start a new line but do not want the empty line space between the lines of text, press <shift <enter>> for a line break tag.

To justify a line or paragraph press anywhere on the line and press the justification button you desire. For more information, see the explanation above.

Changing the background color: Select File/Page Properties. You can select a color or create one of your own. To create one of your own, select File/Page Properties; select the choose button next to Custom Background, select the Define Custom Colors bar. You can then choose from thousands of colors or create one by typing in the Red/Green/Blue values and Hue/Saturation/Illumination values.

If you try to remove a picture or table, and selecting (or highlighting) and pressing the delete key does not work, try selecting it (or highlighting) and pressing Edit/Clear or the Cut icons (the scissors).


bda, 12/28/96