Preparing a  FrontPage Web Site

PageMill Lessons
  Netscape Composer Lessons

If you've just come here from the previous lesson, you can see that this page is very different from the last. You can't help but notice the background has changed. What's this below? A Picture?

Very Car!

Let's look at the things that make this page different from the last.

• We have color both in the background and in the text.
• There is a picture.
• Notice the animation?
• This list is bulleted.
• We also have links back to the previous page.
• We have a link back to "Educational Technology" right here and at the bottom of the page.
• As well, because this is a long page, we have anchor links to places in this page.

In this lesson, you will learn the basics. Below is a clickable list of those essentials.

• Creating a folder or directory and saving your html document
• Adding a title
• Adding a heading
• Adding text
• Adding a background
• Adding a link

Setting up a Web Site

Here's a list of the most important things to do "first" when creating a website.  I will reference FrontPage 2000 as the web-authoring software in this document.

1. Make a folder on your hard drive or local area network server for all your files.
   • Files will include HTML documents like this one as well as images (gifs and jpegs). I cannot emphasize enough how important it is to place all your html documents, gifs and jpegs in that single folder. Later, you can do things differently, but as a novice, you will avoid many frustrating broken links if you have all your documents in a single folder.  Those of you who are not novices may organize your web folders as you see fit.
2. Open FrontPage by double clicking on the appropriate icon.
   • The icon can be on the desktop as a shortcut (alias for Mac people) or within the hard drive. On PCs it can be found by clicking on the Start button => Programs => Microsoft FrontPage. On Macs (FrontPage 1.0), it may be under the Apple Menu in "Recent Applications", or it may be on the Launcher if your computer is set up that way.
3. When FrontPage opens, a blank screen will appear in Edit mode. We use this mode to create a web page in the same way as we create documents in a word processor.
4. Save your untitled document in the following manner.
   • Select File... "Save As..."
   • Type a name for the file in lowercase with no spaces. Add a period (dot) htm and save to the folder you created in the first step above. Here's an example: firstwebpage.htm
5. Do each step above before going on.

Back to top

Adding the Title

You've saved your first web page, but the title of the web page that will appear in the Netscape or Explorer title bar will be "New Page 1" unless you change it now.  Pretty spiffy, you say?  It's spiffier than "Untitled Document", but it is probably not what you want.

So let's change the title.  You need to realize that the title is different than the name you used when you saved your page as an html document.    In this title, of course, you are allowed to use capitals and spaces because this is a title that normal people read when they see your web page. The HTML thing is only for geeks who make web sites.  In FrontPage, go to File => Properties... and the window that opens will show you a Title box where you may type a nice title for your page.  It looks like this.  Notice that this Page Properties window gives you some other tabs to click on as well.  Nice things to know for later!

Adding the Heading

A "heading" is different than a "Title" and they are both different than the file name of your html document.  If I were to design a little quiz on this, I would ask, "Do you know the difference between a heading, a title and a file name in a web page?"  

You would respond, "Yes, of course I do."  

A "heading" is just what the name implies.  Like a title and a file name, it is a reference.  In the case of a heading, it's text that is usually formatted a little differently (bold, italic or underlined text) than what appears below it.  It appears at the top of a section of text in the Edit area of your web page.  Here's how you make a heading.

1. Place your cursor in the typing area and type a heading for your web page. My First Web Page will do nicely. To center your heading, use the FrontPage tool bar and your intuitive gifts to deduce the location of the icon that produces the centering effect you want. The toolbar icons look like the image at the right.  You will notice that when centering and left or right justifying, you don't need to select the text you typed. Your cursor only needs to be on the line or in the paragraph you want justified.
2. Next, make the text larger. 
   • In FrontPage, you go to the Style drop-down menu.  This menu will allow you to select the Heading you prefer.  Heading 1 is the largest.  You can make the heading even larger by following the instructions below.
   • Another way to enlarge text is to select your text (paint it by clicking and dragging).  Then, you can use the Font Size drop-down menu to select the font size you prefer.

Back to top

Adding Text

When adding basic text after a title, press return and click "Normal" in the Style drop-down menu in FrontPage.   If your text is still "centered" switch to left justify, and begin typing a message. Explore the FrontPage tool bars and discover how to change the color of text.  Fool around with the boldface, italic and underline options. Naturally, you will want to experiment with fonts, too. Try adding bullet and numbered lists as well.  Those options are in the Style drop-down menu you see at the right.

Back to top

Adding a Background

FrontPage uses the Page Properties window you saw above.  Go to File => Properties... and click on the "Background" tab.  In the window that opens, you will find that you can choose "Colors" or "Formatting".  

Choosing a background color is obvious.  Just click on the little downward arrow in the box showing "Automatic".  You can also change the color of your links and text in this window.  If you choose "Formatting" you need to browse your hard drive or local server to your website folder where you may have a background image stored.  If you try this option now, you need to know that the background image you choose should be in your website folder before you add it to your page.  It's good practice to do things this way.  In the example above, you can see that I've browsed through the subdirectories (folders) on my hard drive until I located ... /Tools and Ed Apps/San Juan/bg_red.gif."

Adding a Link

There are several types of links.

• Bookmarks (Anchor Links)
• Site Links
• URLs (Uniform Resource Locators)
• Sausage Links
• Golf Links
• Cuff Links

Only the first three links in the above list are currently used in web page authoring.

Bookmarks (Anchors)

Note: You really don't need this section right now. It's meant for longer documents, but you certainly may read this part and try my suggestions if you like. Alternatively, you may skip to Site Links.

Did you notice that you can link to a part of this page by clicking on one of the items in the list at the top? You can also click on the Back to top arrow and link back to the top (go figure). Well, those are anchor links in most web-authoring applications, but they are called bookmarks in FrontPage probably because Microsoft was being consistent with Office applications where anchors are called bookmarks. To set a bookmark, you need a long document like this one. You can make your document longer by pressing the Return key about fifty thousand times. Every ten rows or so, enter some text to link to. To place your bookmarks, you simply place the cursor next to the section where you would like your visitors to end up and insert a bookmark by choosing "Insert" on the menu bar and selecting "Bookmark". A window opens asking you to name the bookmark. 

Give your bookmark a name and hit OK.  You can see in the example above that I've named a bookmark "Top".

In order to establish a link to a bookmark, select your text, click on the link icon. The "Create Hyperlink" window opens.  

At the bottom of this window you'll see the "Bookmark" drop-down menu.  Choose the bookmark you named previously and want to link to and hit OK.  You can make many links to one bookmark.  For example, in this page, there is a bookmark at the top called "Top" where all the Back to top links end up.

To get help with this and any other topic, select "Microsoft FrontPage Help" in the "Help" menu.

Site Links

These are links to other pages in your website. A web site has more than one page, and pages are all linked. When you upload your site, all your links become addresses or URLs (Universal Resource Locators). Obviously, you can only link to another page in your site if you actually have more than one page! So  make a new page right now. Go ahead.  Give it a name like secondwebpage.htm and save it to your folder. Go back to your first page and link to that page by typing some text like, "Go to my next page." Paint that text and press the Link Icon or Control K.  The "Create Hyperlink" window opens and you choose the second icon to the right of the URL box.  Navigate to your folder that contains the page in your site that you want to link to and hit OK.

Obviously, you want to save pretty regularly (Command  or Control S). Don't say I didn't warn you.

If you think about it, you probably realize that anything you can select can also be a link. Hmmmmm! Does this mean images (including animated gifs and jpegs) can be selected and linked?

URL Links

These are the world wide web links that are so cool because they connect your site to the outside world. To make one, follow the same procedure as you did to make a Site Link.  Paint the text you want to link and click on the Link Icon again. You already know the "Create Hyperlink" window looks like this.

With "Create Hyperlink" window and your web browser open, click on the first icon to the right of the URL address box in the "Create Hyperlink" window.  Now click on your browser window and go to a web site.  When you return to FrontPage, you'll find that a link has already been inserted for the last URL you visited.  You can also copy URLs from the Netscape or Explorer Location Bars and paste them to the URL address box.  This saves time and eliminates keyboarding errors. "Copy and paste" is used a great deal in web page authoring.

Back to top