FrontPage Tutorial (2000 and 2002) D.G. Jerz

FrontPage Tutorial (2000 and 2002)

This tutorial will guide you through the basic steps of creating a web page with MS-FrontPage. Although I designed it primarily for my own students, it should apply to most "newbies."

09 Oct 2000; first published by Dennis G. Jerz
01 Oct 2002; minor modifications for FrontPage 2002 users.

Learn basic web principles
Set up the FrontPage environment
Edit your new home page
Create a new, internal page

After you complete this tutorial, you will still need to publish your page, perhaps on a free site such as Geocities.

1. Learn basic web principles

Every web site needs a default page, which serves as an anchor or table of contents for the entire site. That file should always be named "index.html" -- see "Edit your home page," below.
Each additional page on your site should make sense as a separate, stand-alone document. (See "Create an internal page", below). Unlike a novelist, who can assume that everyone on page 100 has already read pages 1-99, a webmaster has no idea where the reader will start (or stop).
Don't reinvent the wheel -- link to it! If you find useful information on somebody else's web site, send your reader there. Don't pretend your page exists in a vacuum.
Electronic documents should be short, top-heavy, scannable, navigable, and straightforward.
Good hypertext relies upon hierarchy -- using meaningful headings and subheadings, as well as "related links". (By contrast, ordinary prose, which assumes a reader is starting at the beginning and moving in a straight line towards the end, relies upon paragraphs and good transitions.)

2. Set up the basic FrontPage environment

Start MS-FrontPage.
Disable Microsoft Server Extensions.
FrontPage offers all kinds of unnecessary frills and extensions that will not work with most servers; this is Bill Gates's way of making you think that something is wrong with all machines that do not run Microsoft software. Beginners should disable all of these extensions, in order to reduce distractions.
1. From the menu, select "Tools" and "Page Options."
2. In the box that appears, click on "Compatibility."
3. Remove the check mark from the box "Enabled with Microsoft Server Extensions."
4. Click "OK".
Create a New Web.
Warning: Pay close attention to these instructions. The steps I'm asking you to do are tricky... so tricky, in fact, that Microsoft revised this procedure for FrontPage 2002. What you do next will depend on whether you are running FrontPage 2000 or FrontPage 2002. To determine which version you are runing, click "Help | About FrontPage."

Within MS-FrontPage, click File, New.
1. Look at the options that appear on the menu.
  1. If you see an option that reads "Page or Web...", then you are using FrontPage 2002.
    1. Click "Page or Web" and then, in the panel that appears on the right of the screen, select "Empty Web."
    2. Don't be distracted by all the templates and special options that FrontPage shows you at this point -- this tutorial asks you to focus on the basics.
    3. If you are using the program in a UWEC lab, FrontPage will be set by default to create a new website on the hard drive of the computer where you are sitting. That's not good, because you won't be able to access it again later. Where you see something like "LabHHH218" in a drop-down list, change it to "H:/MyWebs" instead. (Now you will be working on your H drive, which you will be able to access from any computer on campus.)
  2. If you see an option that reads "Web," you are using FrontPage 2000.
    1. Click "Web..."
    2. Note the value in the box, "specify the location of the new web." You will need this directory name in order to find your pages later. (At UWEC, it will probably be something like "H:\My Webs").
    3. Click "One Page Web" and "OK."
    4. Don't be distracted by all the templates and special options that FrontPage shows you at this point -- this tutorial asks you to focus on the basics.
Warning: When you return to these pages to edit them, from the "File" menu, you must select the "Open Web" option, not the "Open" option.

Editing an existing Web: From the "File" menu, select " Open Web...", and find the location that was specified in step 3.2 above. The folder that has your web site will have a blue ball in it (presumably representing the world, for "World Wide Web"). Click "Open". Ignore the "File | Open" option.

Warning: If you mistakenly use the "File | Open" option, all the links that you add will break when you upload them. When you test out your published pages from your own computer, they will seem to work; but all other visitors to your website (including me) will get only errors. Anywhere from a third to half of my students make this mistake, no matter how many times I warn them about it.

3. Edit your home page

Caution: Don't fixate on graphics. (Yes, it's fun to be able to change fonts and add background images, but this page is about writing, not about "playing with fonts and colors." If your goal is to become a better hypertext author, don't allow yourself to get sidetracked.)

Rename your start page
Caution: Ignoring this step is probably responsible for a third of the problems my students encounter on this exercise.
1. Double-click on the icon next to the filename "index.htm". (The title of the window to the right should change to "index.htm".)
2. Change the name of the file to "index.html". (Right click on the file name, and select "Rename.")
3. (This is extremely important if you want to make your FrontPage site work with Geocities.)
4. Click the blank frame to the right. You should now see a blinking vertical bar (the cursor) in the blank white frame.
Add a title to the home page.
1. Type something like "The Cyberlord's Digital Writing Empire" (or whatever you want your page to be about).
2. Add the "heading" formatting to the title
  1. Locate the drop-down list on the upper left of your MS-FrontPage screen; it probably reads "Normal."
  2. Change that "Normal" setting to "Heading 1". The text you just typed should be huge now.
3. Now, you need to add the title again, in a different space.
  1. While editing your new page, right-click, and then select "Page Properties..."
  2. Type the title in the box labeled "Title".
4. You may be wondering why you have to add a title again -- didn't I already ask you do type a title? Every web page needs two titles -- one that sits on top of your text (this is the "in context" title, step 2.2 above) and one that search engines and web browsers display as part of a list of navigation options (this is the "out of context" title, step 2.3 above). (See: Web Page Titles: In-Context and Out-of-Context.)
Add some text.
1. At this stage, you can type just about anything, just so you'll be sure to get through these exercises.
2. For ideas, see a few ripe and detailed pages from my "Writing Electronic Text" students (one, two, three).
3. Don't let writer's block keep you from finishing this exercise.
4. Before you invite anyone to read your page, please get rid of the place-holding text and write something original, thoughtful, or at least unusual.
  Caution: If I have to read one more student web page that begins something like, "I was born in a small town in Pennsylvania, where I live with my parents, two brothers, and a cat named Mr. Wiggles," I shall weep uncontrollably.
Write scannable text. (Read Jakob Nielsen's How Users Read on the Web.)
1. By convention, web authors do not indent paragraphs online.
  1. Hitting the Enter key will automatically start a new paragraph.
  2. If you don't want to skip that much space between lines, hit Shift + Enter.
2. Write several paragraphs, separated by subheadings (like the heading, "Edit your home page" above).
  1. Keep your paragraphs short.
  2. Type your subheading on a line by itself.
  3. Mark the text as "Heading 2" (using the drop-down list in the upper left corner of the screen)
Add some hyperlinks.
1. Type "UWEC Home." Select that text with your mouse.
2. Choose the menu options "Insert, Hyperlink" (or, clicking the blue ball with the chain links on it).
3. Type "www.uwec.edu" in the "URL" box. (When you are finished, the box should contain "http:\\www.uwec.edu".)
4. Add more links to your home page. (Open the web browser of your choice; use a search engine to find some pages that relate to the theme of your site.)
Test your links.
1. In MS-FrontPage, click on the tab labeled "Preview."
2. Surf as you would usually.
3. When finished, click on the tab labeled "Normal" to return to the editing view. (Why they didn't label that tab "Edit" is beyond me.)
Save your work early and often. One morning in the computer lab, I was climbing between the rows of computers to answer a student's question, and I accidentally unplugged somebody else's computer. These things happen.

4. Create a new, internal page

If your home page (the one that you renamed "index.html") is your grand entryway, your most important additional pages "family.htm", "classes.htm," "dreams.htm") are like apartments in the building. As your site grows, you might give each apartment several different rooms ("family2.htm, family3.htm"), but for now just create one additional page.

Create a new page. (From within MS-FrontPage, click "File, New, Page, Normal Page.")

Note: The screen will look like it has gone blank. This is normal -- you have just asked to create a new, blank page.
Save your page. Your page is probably named something like "new_page1.htm". Give it a better name.
Note: Don't include spaces in your file names. Instead, use the underscore character "my_file.htm" or capitalization (MyFile.htm).

Tip: Don't give your internal pages uninformative names such as "page2.htm" -- that's like showing up at a convention and writing "my name" on the nametag. Try "family.htm" or "classes.htm" or "fav-movies.htm" (See "Naming Files & Understanding URLs".)
Put a link to your home page in the upper left corner.
1. Type the title of your home page. ("Home" will suffice, although "Jerz Home" or "Pointless Rainbow Hector Tribute Site" is more informative.)
2. Create a link to your home page.
  1. Select the text, and click "Insert, Hyperlink."
  2. Delete the "http:\\" in the "URL" box, and just type the name of the file to be linked (for example, "index.html").
    Note: You can also just select from the list of pages that appears just above the "URL" box -- provided that you began your FrontPage session with "File | New | Web", "File | New Web or Page | Blank Web" or "File | Open Web".
Add a title to this new page. Type a title at the top of the page, and give it the "H1" style, and add the title via the "Page Properties" dialog box, as you did in step 3.2 above. (In case you're wondering, here's why there are two different kinds of web page titles.)
Type some text.
Test your "home" link.
1. Put your mouse over the link to your home page.
2. Hold down the "Ctrl" key, and click the link.
3. Your home page should load in the editing window.
Add a link from your home page to your internal page.
1. Type some descriptive title for your internal page. (Not something bland like "Page 2" or "Click Here," but rather, something informative like "Come see my wedding album," or "I am interested in text-based computer games.")
2. Select the text, and create a link just like you have done before.
3. Save this page, and test the link.

You will still need to publish your page (perhaps on Geocities) in order for the rest of the world to see it.