Making a WWW Document in Microsoft's FrontPage
by Beth D. Ardoin
1997 © University of Texas at Houston
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.
To open up Microsoft's FrontPage program:
- Go to the Start button on your Window's machine.
- Choose Programs.
- Select Microsoft FrontPage.
- Finally, choose FrontPage Editor.
- If you cannot find this on your system, contact your LAN manager or purchase a valid copy from your local software vendor.
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:
- All images in this document were captured with LView.
- Pages were made in FrontPage Editor.
- Maps were recreated in a text editor, any will do. I used the UNIX editor called VI, but could have done it in WordPad or NotePad just as successfully.
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 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.)
- New - starting place to create a new document
- Open File - allows you to open a file already started in FrontPage from hard drive or floppy drive
- ********Open from Web - instructions say this option allows you to open a document from the current web. I believe you have to be accessing FrontPage's Web
server and the FrontPage Explorer for this option to work
- Open Location - allows you to open a document on a WWW server by its URL. The program will connect to WWW via a viewer and display the page if it could
find the URL given. You must know the URL to use this choice.
- Close - closes current open document
- Save - saves a document already named by overwriting the last version saved
- Save As - allows you to save and name document
- Save All - saves all open documents
- Page Properties - allows you to put a title on your document. Also, this is where you change the background and link colors of your document. You can also assign
meta tags here. (A meta tag is a tag that appears in the header section of a document. It does not affect the viewing of the document at all. It is just
between the page and the viewer. Many programs include a "generator" tag as a meta tag. It puts in your document the name of the program you used to make your
- Page Setup - includes your header, footer, margin sizes, etc.
- Page Preview - allows you to see what the page would look like if printed
- Print - you can set the print range (which pages you want to print) and the number of copies to print. This menu selection also allows you to tell your computer to
what printer it should send the print job.
- speed keys - here there are up to four of the last opened documents so that you can re-open them quickly.
- Exit - closes your open pages, without saving and exits the program.
(**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.)
- Undo - this button changes per your last command. If you are typing, it reads "undo typing"; if you deleted, it reads "undo delete"; if you pasted, it reads "undo
paste", etc. thus allowing you to UNDO whatever you last did.
- Redo - companion to Undo, this function will redo the last "Undo" command. Pressing the "Redo" button several times, will redo several undo commands.
- Cut - removes selected (highlighted) items from the page and places them on the clipboard, In case you want to remove the text/picture from one area and put it
- Copy - leaves the selected text in the present document, but puts a copy of the selected (highlighted) text on the clipboard so it can be placed somewhere else also.
With copy, you can place the selected text somewhere in the same document, another FrontPage document, even into a document in another Windows based
- Paste - the companion to Cut and Copy commands, which allows you to put a copy of whatever is on the clipboard into a document.
- Clear - removes items from the page, but does not place them on the clipboard (see "Cut" above).
- Select All - used to select the entire document.
- Find - allows you to put in a word or phrase to find instances in the document. If you want to find the word "highlighted" you press Edit/Find and type in the word in
the empty blank. You can search up or down in the document from where you are, or you can go to the top of the document and search down on the entire
- Replace - companion to the Find command which allows you to put in a new word or phrase once found with the "Find" command.
- ********Add ToDo Task - allows people creating WWW pages to make a list of what is left "to do" and assign these tasks. If several people are working on the
same web pages, it allows them to know what the tasks are that are left to be done and the priority. In order to use this function, you must run FrontPage Explorer.
- Bookmark - allows you to put several pointers in one document. For instance, if you have a long document and you have placed an index at the top of the document,
you can set bookmarks so that the viewers can move from the index to the items in the document with a link instead of scrolling down. (**Note: a book mark
has been inserted farther down in a section about tables. If you click here, it will take you to the section on tables.)
(**Example: To make a bookmark, select the destination word (in this case, "tables"), highlight and press Edit/Bookmark.
The default name for this bookmark is the items highlighted, so the default accepted was "Tables". Now you have a
destination, you need a link to get there. The sentence (it could have been a word or phrase, it did not need to be a whole
sentence) "If you click....tables" was highlighted. The link (chain link) was selected and a pop-up menu appeared. The
choices in the pop-up were: Open Page (not this one, the bookmark is in the same document), Target Frame (not this one,
that is for images) and Bookmark (this one has a pull-down menu which included the bookmark "Tables"). With the bookmark
Tables chosen, the OK button was depressed and the link complete. Now, when someone presses the "If you click...tables"
sentence, they are jumped down to the Tables area. **End of example.)
- Link - a connection between a word or picture to something else. You can link, for instance, a term to its definition, a term to a drawing representation. a picture to a
sound track of that person talking, a document to another document, a document to some specific place in another document. (**Note: In "bookmark"
above, a link was placed between the line, "If you click here, it will take you to the section on tables" and linked you to
the "tables" area below.)
- Unlink - companion to the "Link" command, unlink removes the connection but not the text. In other words, if the HTML writer changed his/her mind and decided
not to put a link between two items, this command allows for the removal of the link without injury to the content of the page text or picture.
- Properties - this is a control for text. You can select text by highlighting and make the text underline, bold italic, color the text or make it blink for emphasis.
(**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.)
- Standard Toolbar - on/off toggle switch
- Format Toolbar - on/off toggle switch
- Image Toolbar - on/off toggle switch
- Forms Toolbar - on/off toggle switch
- Status Bar -on/off toggle switch (this bar along the bottom of your screen gives information about the command you are currently using. For example, place your
pointer on the bold tag button and you will see a comment in the status bar that reads "Bold". Often, the status bar will read, "For Help, press F1".)
- Format Masks - on/off toggle switch (shows carriage return, line breaks, etc. on your screen)
- HTML - to view the current document's HTML source file (to see the HTML tags). Your present view is much more like the viewer will show the document to your
readers than the source file you are creating. Without helper programs, like FrontPage, you would have to learn and write all of these tags yourself. You can see the
work YOU WOULD HAVE TO DO by looking at the source file. This tool is also helpful to those who know how to write the code and are finding a problem they
cannot fix in FrontPage; a look at the source code can give a better view of exactly what the program is attempting to do.
- Heading - levels one through six can be chosen from. Level one is the largest and level six is the smallest of the headings. You can also assign heading with the
- List - types of lists here include bulleted (dots or asterisks unordered list), numbered (an ordered list), directory (for a sequence of short items), menu (a group of
short paragraphs with limited white space) list. (**Note: No difference was found in FrontPage between bulleted (the unordered) list and
that of the directory and menu lists.)
- Definition - includes List (This command tells the computer the type of list you are beginning - for those that know the tags, this inserts the dl and /dl tags), Term (By
selecting this, you will have one or several lines for the term you want to define. If more than one line for the term, the lines will have no space between them), and
Definition (This is the explanation of what the Term is. The definition is indented.). In order to complete the list and no longer be in "list format", hold down the
Control key and press Enter.
- Form Field - allows you to create forms for viewers of your document to fill in online. The form can be made in FrontPage, but an accompanying CGI file must be
created. See Forms Toolbar for more information.
- Paragraph - adds space for a new paragraph and allows you to choose if the text will be normal, formatted (as the **Notes are) or an address (usually displayed in
- Horizontal Line - places a line across the screen. When on the viewer, the line will appear the width of the viewers screen. If the viewer changes the screen width, the
length of the line will change also.
- Line Break - this places you on a new line, but omits the empty line between the lines. The paragraph tags is similar, but the paragraph tag puts a line of space
between the original line and the new line.
- Image- used for adding a picture to your document. Select the insertion point of the picture, press Insert/Image and a pop-up screen will appear allowing you to
select the location of the stored picture from your hard drive, floppy drive or CD. (**Note: This has been used often in this document to put in
copies of the icons.)
- Special Characters - used to add odd symbols like the copyright symbol. Just press Insert/Special Characters and a table will appear. Choose the symbol you want
and press OK. The color of the symbol can be changed.
- File - takes you to a pop-up menu which allows you to import another HTML file into the one you are working on. It will look only for HTML files.
- Character - this includes the regular character tags as described in the Format Toolbar with choices for text color, font size, bold, italic, underlining, etc.
- Paragraph - this includes the paragraph tags from the Format Toolbar like Normal, Address (for the bottom of your document) and the Heading tags.
- Remove Formatting - this nifty button removes the formats added to text. If you decide you have formatted something to be blue, heading2 and you want it to be just
plain text, highlight it and press Format, Remove Formatting. Done!
- Spelling - your spell checker. The spell checker will work from your present selected location to the end of the document
- Forward - this moves forward to other pages in this Web set you are creating. If you are only creating one page, this tool is not usable except with Follow Link.
- Back - this moves backwards to other pages in this Web set you are creating. If you are only creating one page, this tool is not usable except with Follow Link.
- Follow Link - a nifty tool for checking your links. While you are working in FrontPage Editor, you cannot check to see how the links will work. If you click on a link
in the page you are creating/editing, you will get a pop-up menu of the properties or destination of that link by filename. In order to see the link work, click on the
work and press Tools/Follow Link, the screen will jump to the link destination. The Tools/Back option or the will move you back to the place you started,
before you linked. The Tools/Forward option or the will jump you back to the link, just as Follow Link did.
- Reload - pulls the document up from disk. Always save before reloading or exiting. This button is important when you are changing images. If you change and resave
an image already in use on your document, reload will let you see the new image without closing and reopening your document.
- Stop - for use when pulling pages up from the web. If you press stop, the system will STOP loading the page. You may get only part of the document; for instance
images may appear "broken" because not all of the images were completely downloaded.
- Show FrontPage Explorer - a connection to the FrontPage Editor companion
- Show ToDo - a list of tasks yet to perform or tasks with owners attached for assigning pages or parts of the developing web.
Table includes: (**Note: jump back to Bookmark or Standard Toolbar/Insert Table)
- Insert Table - to place a new table into your page. By pressing the Table button, you accomplish the same as if you chose Table icon. You get a pull down menu of
attributes that the table may contain. With this selection, you will need to identify the number of Rows (lines down) and Columns (lines across) you need. You can
always add extras later if you need them, with the Insert Rows or Columns feature described next. Also, you can place a table inside of another table, by selecting
the cell where you want the new table to appear and pressing Table/Insert Table (or the Table icon) and setting new attributes (rows, columns, cell padding, etc.)
The Attributes (**Note: this line added with Insert Caption
and the blink was added with Edit/Properties/select blink.)
|Table Attributes||Explanation||Default 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.)
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)
- Insert Rows or Columns - to add rows or columns once a table is already created. Select a cell next to the place you want the new one. Select Table/Insert Rows or
Columns. The pop-up menu will allow you to decide if you want to add the new row or column before or after the cell you are in and the number of rows or columns
you want to add.
- Insert Cell - adds a single, odd cell, to a row and column. This does not add an entire column or row. If you decide this is not what you want, immediately chose
- Insert Caption - adds a title just above the table. You can add pizzazz to the caption with Cell Properties (Edit/Properties).
- Merge Cells - combines the contents of two cells, rows or columns. To merge, select two (rows, columns or cells) and press Table/Merge Cells. To undo,
immediately chose Edit/Undo Table Merge.
- Split Cells - to break one cell into many cells. Chose a cell, press Table/Split Cells. Decide the number of cells you want instead of one and whether you want it split
into columns or rows. (**Note: The center cell in the "Width" row in the table above has been split, as an example.)
- Select Cell - for ease in highlighting an entire cell's contents for deleting or changing the properties in Edit/Properties. Click anywhere in the cell and chose
- Select Row - for ease in selecting one line across. Click on any cell in the row and chose Table/Select Row
- Select Column - for ease in selecting one line down. Click on any cell in the column and chose Table/Select Column.
- Select Table - for ease in selecting the entire table, as in for deleting, press in any cell and chose Table/Select Table.
- Table Properties - to change the properties initially set, select any cell and chose Table/Table Properties.
- Cascade - open documents arranged on top of each other with an outer corner and file name showing (example). You must have more than one document opened in
Front Page to use this choice.
- Tile - open documents arranged in the limited screen space by each taking a section of the screen without overlapping (example). You must have more than one
document opened in Front Page to use this choice.
- Arrange Icons - arranges the icons of iconified pages along the bottom of the FrontPage screen. You must have more than one document opened in Front Page to
use this choice.
- a list of all current open documents for ease in switching between them, whether they are hidden behind the current open version or iconified.
- Access to Microsoft's FrontPage Help and access to information about the version you are running.
The 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.
The 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.
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" button||changes the highlighted text to bold|
|The "I" button||changes the highlighted text to italic|
|The "U" button||underlines the highlighted text|
|The "tt" button||changes the text to typewriter font. The letters all have equal amount of space whether they are w's or i's|
|The "ABC" button||adds 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.)
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
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)
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
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
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
Initial value: Place your comments here:
Number of lines: 3
Check Box -this field allows users to make selections from given choices. More than one can be
Example of Check Box
|Where will you be publishing?
Inital State: not checked
Inital State: checked
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
||Group Name: sex|
Initial State: not checked
|Group Name: sex|
Initial State: not checked
Drop-Down Menu - gives a list of choices. One or more can be selected
Example of Drop Down Menu
|Dates this message |
|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|
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
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).