Making a WWW Document in Microsoft's FrontPage

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

Introduction

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:

• 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.

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:

• 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 WWW page.)
• 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.)

Edit includes:

• 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 somewhere else.
• 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 program.
• 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 document.
• 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.)

View includes:

• 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.

Insert includes:

• 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 Format Toolbar.
• 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 italics)
• 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.)
• *****Bot
• 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.

Format includes:

• 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!

Tools includes:

• 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.)

• 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 Edit/Undo Insert.
• 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 Table/Select Cell
• 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.

Window includes:

• 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.

Help includes:

• 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.

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

**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

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

Notes

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