Web Page Creation

Web Page Creation For Support Staff

FrontPage is Word in Disguise

Begin by opening up FrontPage Express on the computer. FrontPage Express is often located on different menus on each computer in the A204 Computer Laboratory. Not all computers in the laboratory have FrontPage. If, when you return to your office after the workshop, you do not have FrontPage Express, please let Dana know.

FrontPage is a program like Microsoft Word, but FrontPage creates web pages rather than pages for printing.

When you open FrontPage many of the functions that you are used to having in Word are available to you. Some of the menu bars and tool bars that you should see on the screen include:

menubar:

file bar:

text bar:

Web sites typically consist of an index page and a series of linked content subpages that contain the actual information. structure.gif (4176 bytes)

Today we will create an index page and a single content page. We will then link the content page to the index page.

Each web page typically has a file name, a file title, and pages often also have a header that they display.

Web page file names always end in the extension ".html" This is an abbreviation for HyperText Markup Language.

Creating the index page for your unit

The College has a "standard" look to official College web pages that we will need to use when posting information to the College web site:

A copy of the template file is on your floppy disk and is called template.html. Open this file from the floppy disk using Open on the File menu or by clicking on the Open Document button on the file bar.

The first web page you will create will be the page that links to all the other web pages that you will create in the future. The first page will be called an index page. The index page usually contains only a series of hyperlinks to other documents you will prepare in the future.

For the headline type in the name of the area for which you are responsible, for example:

Office of the Vice President for Student Services

This line is also sometimes called a "header." By simply selecting the existing headline and typing the new line the correct color should be retained. If something occurs that you want to immediately undo, select Undo from the Edit menu.

Below this headline will come hyperlinks to other documents.

Save the template document using Save As... under the file menu. A dialog should appear that looks like:

Change the Page Title from "COM-FSM Page Title Here" to the name of your unit plus the word "index." Thus if you are working in the Office of the Vice President for Student Services, type "Office of the Vice President for Student Services index" for the Page Title. Note that this Page Title is actually the title of the web file. I refer to this as a "file title." This title does NOT appear on the page. It will appear at the top of the Window of the browser.

Click on the As File button and save the file as index.html to your floppy disk. "index.html" is the file name. File names must be all lowercase letters and cannot have spaces.

Do not close this index.html file. We will be using it again.

Creating a memo with FrontPage

Saving the memo web page

Open the original template file from the floppy disk.
Choose File: Save As.
Similar to what we did above, change the title in the first dialog box to the title of the memo, "Coronation Schedule" for example. The page title can have spaces in it.
Then click on the As File button to save the file to your floppy disk.
Choose a file name that relates to the memo title. File names should be all lowercase letters and there can be NO SPACES in your file name! You might call this web page "coronation.html"
Note that we always save the file BEFORE we start working on the content. This is important in FrontPage. Failure to save before editing and linking will produce erroneous links.

Working on the contents of the memo

Put the title of the memo in the blue headline and type the contents of the memo below:

September 19, 1999 - Palikir, Pohnpei
	College of Micronesia-FSM Federated States of Micronesia
Computing · Directory · Home· Jobs · Library · News
Wednesday 29 March Modified Schedule Day Due to the coronation, Wednesday, the 29th of March, will feature shortened periods...
To COM-FSM Home Page

Of course your memo or report will likely contain different information. The actual process of typing in the memo or report information is done much as you would work in Word.

Linking the index page to the memo page

Use the Window menu to return the index.html file to the "front."
In the place where it says, "Content of the page goes here" type the title of the memo or report that you just created. For future organizational purposes and reference, you might want to organize memos by date.
After typing the title, select the title with the mouse.
On the Insert menu select Hyperlink.
In the Create Hyperlink dialog box Click on the yellow folder with the up arrow to go up one level.
You should see, if you left it open, the index.html file appear in the dialog box.
Click on the index.html file.
Lower down in the dialog box the URL should appear as:

Caution: For now, whenever you are linking documents using FrontPage, keep the all the web pages in the same folder of your hard drive or on the same floppy disk.
Click on OK.

Linking the memo page to the index page

This process is the same as above, except that you start with the memo page open.
Use the Window menu to return to your memo. The web pages are listed by their file title in the Window menu. If you chose to do so earlier, yours might be called Coronation schedule.
On the memo page, near the bottom (but above the College sailboat) type Office of the Vice President for Student Services index (or your unit name) on its own line.
Select this new line.
Choose Insert: Hyperlink and link this page back to the index page using the steps of the previous section. You may find that you do not have to "go up" one level.

Creating More Memos

To create a new memo, simply open the Template file and then save the file using Save As and a new, unique name for the file title and file name. Now type the new memo. Remember to add a link from the index.html page to the new memo.

If you have a report that you typed using Microsoft Word you have a couple of options for moving that text into a web page.

One way is to open the Word file using FrontPage Express. Unfortunately this does not always work as not all versions of FrontPage Express include the ability to open Word documents.

Another option, if you have Word 97 or Word 2000, is to save the Word file as HTML using Word. Make sure you save the document to the same folder or floppy disk as your web files.

There are other options, but they become increasingly complex. Let me know if you have material that you know you have to convert to web page format and the ways above do not work.

Publishing Web Pages

Print your memo and provide a copy of the memo or report to our PIO, Norma Edwin.

Then follow the procedure outlined on the web page http://www.comfsm.fm/~cwduffy/webwizard.htm

You may or may not be able to do this today: it depends on whether Gordon and Ken have set up your account to receive web pages. You probably don't want to do this if the page you have created in for the Office of the Vice President for Student Services and you are not in that unit!

For WordPerfect Veterans: What HTML Looks Like

Those who once used WordPerfect might recall that WordPerfect had a command "Show codes" that revealed the formatting codes. If you were familiar with WordPerfect codes, the HTML codes (called "tags") should appear somewhat familiar. HTML tags are what FrontPage creates as you edit a page. Each format command includes, as does WordPerfect, a start format tag and an end format tag. The tags can be seen by selecting the View menu and the choosing the item HTML... The page http://www.comfsm.fm/~dleeling/fall99/veglab.html contains, at the end of the lab directions, some information on the basic HTML tags.