How to Create WWW Presentations using FrontPage 98 on the NT Server

You will create your web presentation with the web authoring tool FrontPage.  A web presentation consists of a set of pages that are linked together.  The presentation will be stored on an NT server that has been set up to use the FrontPage program.  FrontPage has many similarities to a word processor.  As you type in  the content of your presentation FrontPage will automatically enter the appropriate Hyper-Text Markup Language (HTML) codes into the document so that they can be read by web browsers. In addition, FrontPage provides easy ways of linking the pages together.

There are four basic steps to creating a www presentation using FrontPage.

1. Log on to your NT server FrontPage account.
2. Create the web outline of your presentation.
3. Create the content of the presentation.
4. Use a www browser to show the presentation.

The phrases web and www (word-wide-web) both refer to the internet. Address on the internet often start with www, as in www.uccs.edu. Your NT FrontPage account starts with web.uccs.edu/  .

A.  Log onto your FrontPage NT account

You can create and edit your web presenting from any computer that has FrontPage installed.  All the labs on campus have FrontPage 98 installed on them.   You can also purchase the most current version, FrontPage 2000, install it on your home computer, and create or edit your presentation from home.  The campus bookstore has FrontPage 2000 at student prices.  There are some differences in the interface between FP 98 and FP 2000,  but you shouldn't have much trouble going from one to the other. The general concepts about how to create and edit pages are very similar in the two editions.

You will need to log onto the computer system using your FrontPage NT account user name and password.  If you are using a computer on campus you should be sure to log off your NT account when you finish working.

B.  Open FrontPage

If you are using a computer in one of the labs on campus, FrontPage is found under 

Start
   Programs
      Internet
          FrontPage

This tutorial was designed to be used along with FrontPage.  You might wish to have this tutorial running on, say, the bottom half of your screen and FrontPage opened on the top half of your screen.

C.  Open your web site.

The first time you open FrontPage you will see a dialog box that says "Open an existing FrontPage web." The window will probably have "Personal Web" listed as the only web.  To get to your NT FrontPage web account press the

More Webs... 

button.

The first line of the next dialog box says "Select a Web server or disk location."  Enter the name of your web site.  The name of your web site is

web.uccs.edu/username   

where you substitute your own "username".  Your username is your first initial followed by your last name (no spaces or blanks) up to a maximum of 8 characters. is simply the Enter key on your keyboard. If you try to use someone else's web site you will be asked for the password of that site.

(Note: If you accidentally press List Webs rather than then the computer will search for the names of all the FrontPage web accounts on the NT server.  It will take awhile to do this.  In a minute or two the list will appear in the window. You can scroll down until you find your account. Click on it to open it.)

If the site is found then the FrontPage Explorer program will open and show you the files and folders that are present on your web site.

Be aware that you are opening your account directly on the NT server. When you create your website you will be editing and storing your files on that server,  not on the particular computer you happen to using.  This means that you can go to any computer on campus or at home and edit your website.

A. Overview
B. FrontPage Explorer and FrontPage Editor
C. Navigation view
D. How to create new linked pages
E. How to change the title of a page
F. How to change the name a File
G. Shared borders

A. Overview

Web presentations are organized as a set of pages that are liked together so that you can easily navigate between the pages.  A page is a unit of material such as the introduction, method, and results. A page in www jargon is a file. Think of it as creating a separate document (or file) for each section of your paper. Rather than putting your entire paper in one large file, the different sections of the paper are kept in separate files or pages. You can easily link to each of the pages in your presentation.

An easy way to work with FrontPage is to use the Navigation View of FrontPage Explorer to create the web outline of your presentation. The web outline will include each of the pages in your presentation and the links between the pages. Here is an example of a research proposal outline -

Here is an example of a literature review outline -

Click here for an example of a literature review on phantom limb pain.

After the outline has been created you can go and edit each of the individual pages using the FrontPage Editor.  The navigation outline that you create in FrontPage is not fixed.  You can easily go back and delete old pages and/or create new pages and links.

B. FrontPage Explorer and FrontPage Editor

FrontPage is organized into two related programs, the FrontPage Explorer and the FrontPage Editor.  The FrontPage Explorer is like Windows Explorer in that it shows you the files and directories in your FrontPage web site.  The FrontPage Editor is like a word processor, it allows you to edit a file.  When you first open FrontPage you will be placed in the FrontPage Explorer program.

[FP 2000 Note:  FP 2000 no longer uses the dual (Explorer and Editor) interface.  They have been combined into a single interface.]

FrontPage Explorer can present the file and directory information from several different views, see the left frame of the Windows Explorer Window.  The different views are described in the following table.

C. Navigation view

Lets begin in Navigation view.  There should be a single page showing in the window.   The title of the page should be "Home Page." There will be a picture of a little "home" in the bottom left of the Home Page image. The name of Home Page file should be "Default.htm."    If you enter the name of  your website as the URL in a browser such as Netscape or Internet Explorer then the file called "Default.htm" is automatically shown.  For example, if you enter the URL

web.uccs.edu/username

then the file

web.uccs.edu/yourname/Default.htm

will be displayed in the browser.This Home Page is the beginning of your website.

D. How to create new linked pages

Your presentation should be linked to your home page.  To create a new file that is liked to your home page --

1. Move the cursor to the Home Page box in the upper window.  Highlight the Home Page box with a single click of the left cursor button.

2. Click on the New Page button near the upper left corner of the Explorer window.

A new page will appear in the upper window.  The title of the new page will be New Page 1. The connection between New Page 1 and the Home Page is indicated by the line connecting the two pages. This connection is called a link.  

FrontPage uses familial terminology (parent, child, peer) to describe links between pages.  New Page 1 is the child of Home Page.  Home Page is the parent of New Page 1.

Lets continue to expand the outline.

3. Highlight New Page 1by a single press of the left button of, left click.

4. Create a child of New Page 1 by clicking on the New Page button near the upper left corner of the Explorer window.  Click the New Page button two more times.  You should now have three children of New Page 1 called New Page 2, New Page 3 and New Page 4. New Pages 2, 3 and 4 are peers to each other. They are all children of New Page 1.

New Pages 2, 3 and 4 will become the introduction, methods, and results pages in your presentation.  

Follow the same procedure to create rest of the outline shown above.

E. How to change the title of a page

The descriptions that appear in the boxes in the upper window in the navigator view (e.g., New Page 1, New Page 2, etc.) are called page titles.

To change the title of a page simply (a) highlight the page (box) you wish to rename, (b) right click on the page, (c) select rename from the dialog box that opens, and (d) enter a new title for the page. Go ahead and change the titles of each of the pages to match those in the research presentation outline shown above.

F. How to change the name a File

When you change the title of a page (as describe above) you have not changed the name of the file.  Look at the listing of the files in the lower window of the navigator view.  If you are creating a new web then the tiles of your pages will be something like this: Default.htm, newpage1.htm, newpage2.htm, etc.  The extension .htm indicates that the file has been formatted using the hypertext markup language.  The extension .html can also be used. 

Note that the titles of the pages have been changed, but the names of the files have not been changed.  I prefer to have the file names reflect the content of the file rather than the generic names.  File names can be changed by right clicking on a filename, selecting rename, and then entering the new name.  For the time being, lets leave the names unchanged.  You can go back and do that task at a later time if you wish.

G. Shared borders

FrontPage allows you to set up shared borders, borders that will be shared with each page on your website. You can define shared borders at the top, bottom, right, and left of each page.  FrontPage uses these shared borders to insert navigation links that move you from page to page. 

We will use shared borders at the top and left.  This should be the "default" setting when you first open a new web site.  Check the status of the shared borders by clicking

Tools
    Shared Borders...

Make sure the top and left borders are checked.

A. The FrontPage Editor

To edit a page you need to switch to the the FrontPage Editor.  An easy way to get to the Editor is to double click on a file in the Navigator view. You can either double click the file in the navigation diagram (upper window) or the name of the file (lower window).   The FrontPage Editor will open that file in the editing mode.

You could also switch to the FrontPage Editor by clicking the "scribe (quill and scroll)" icon at the top of the Explorer window. Or click

Tools
    Show FrontPage Editor

B. Navigation links

Open the Title page in the FrontPage editor.

Before editing the page, lets look at the shared borders at the top and left of the page.  If you specify shared borders, then the shared borders are automatically created by FrontPage for each page.

1. Left Shared Border

(1) Click on the one of the items in the left border.
(2)  Click Insert (on the to row of buttons),  Navigation Bar...   or
Right click one of the items on the left border, then select Front Page Component Properties.

A diagram of possible navigation buttons will open. By default, the hyperlinks (navigation buttons) in the left border point to child pages.  In most cases this is a reasonable selection.  Look at possible options for the navigation buttons.  From your title page you can link to the introduction, method, and results sections.

The names of the links (Introduction, Method, and Results) are the Titles of the page.  Recall that we changed the titles from New Page 1, New Page 2, etc., to more descriptive titles.  If you want to change the name of a link, then go back to the navigation view and change the title of the page.

A caution:  Be careful,  shared borders means just that, shared borders.  If you change the navigation structure to the left shared border, that same navigation structure will be used on every page in your web. The only control you have over a shared border on a specific page is the choice of whether or not to display a shared border.

When you get used to shared borders they can be a helpful navigational tool.  Shared borders were not available when I began useing FrontPage so my strucure is not the same as Microsoft's structure.  I prefer the flexibility of creating my own navigational bars.

2. Top Shared Border

The top shared border has two elements, the page banner and the navigation buttons.

Page banner.  The text of the page banner is defined by the Title of the page. 

Navigation buttons.  To see the navigation structure for the top border
(1) Click on one of the navigation buttons in the top border.
(2) Open the Navigation Bar...  window as described above.

By default, the hyperlinks point to the same level (that is, they point to peers) and in addition there is a link to the parent page and to the home page.

A. Editing a page

You edit a page (file) by:
(a) typing information directly onto the page,
(b) copying information from another program (e.g., Work, Excel) and pasting it to the web page, and/or
(c) inserting an entire file created by another program, e.g., Word.

Enter a title for your presentation.

B. Font control

You have control over the size of the font, the style of the font, the color of the font, and the location of the font on the page.

1. Font Size

Font size can be changed in several ways:

(1) Place your cursor over any letter in your title. Open the "Change Style" drop down menu, the window at the far left of the second row that probably says "normal."  Scroll down until you see the Heading section (Heading 1, Heading 2, etc.).  Select one of the headings and watch the change that occurs in your text. Select several other headings and watch the changes that occur in your text.

(2) Highlight the text to be changed.  Press the large "A" icon (in the second row of buttons) to increase the size of the text. Press it again to increase the size again.  Press the small "A" icon to decrease the size of the text. This way of changing the font size changes the size relative to the default font that was set for the page.

(3) Highlight the text to be changed.  Click
Format
   Font

and then select the size of the font that you want. This way of changing the font size sets the size to a particular size (e.g., 12 pt), irrespective of the default font for the browser.

2. Font Characteristics (Bold, Italic, Underlined)

Font characteristics of bold, italic, and underlined can be changed on two ways:

(1) Highlight the text to be changed. Press the "B" for bold, "I" for italic, and/or U ( for underlined) button to change the text.

(2) Highlight the text to be changed.  Click
Format
   Font

Select one of the Special Styles.  Note that there are several other options available.

3. Font Color

(1) Highlight the font to be changed. Select the color palette button. Select the color for the text.

(2) Font color can also be changed within the Font dialog box.

4. Font style

The font itself can be changed by selecting a font from the font drop down menu (the 2nd white box in the second row of buttons) or from the Format-Font dialog box.  This font is the "default font" as defined by your browser.  This font is Britannic Bold.

5. Font Placement

Can can left justify each line of text,

center it

or right justify it by

highlighting the text and pressing the left, center, or right justification button (second row of buttons).

You can also move a block of text over to the right or left (see the buttons at the left end of the second row). This block of text has been moved over to the right.

If you are willing to learn html Style Sheets you can place text nearly anywhere you want it.  Access to style sheets is found under  -- Format -> Stylesheet.

6. Text within tables

C. Timestamps and page counters

You can add a timestamp to a page that automatically records the date (and time) that the page was last edited.  Place the cursor at the position on the page where you want the timestamp to be located. The timestamp is found under

Insert
    Timestamp ...

You can add a page counter to a page.  Place the cursor at the position on the page where you want the timestamp to be located.  

The page counter active element is found under

Insert
    Active Elements
       Hit counter

You can select the counter style, set the counter a specific number, and define the width (number of digits) of the counter.

E. Images

You can add an image or graphic to a page.  Place the cursor at the position on the page where you want the timestamp to be located. Click on the Insert Image icon (third row, near the middle). When the Image dialog box opens, highlight the desired image and press OK.

F. Save each page

It is a good practice to save your pages as you go along. Save the page by clicking

File
   Save

Select Save As  to change either or both of the file name for the page or the page title.

You will now be able to make your presentation by pointing your web browser to your Home Page. The URL of your Home Page will be

//www.uccs.edu/your_username

Universal Resource Locator (URL) is internet jargon for the address of a file.