PixelMill's Learning Center for Microsoft (R) FrontPage (R)
take our guided template test drive for FrontPage 2002 & FrontPage 2003
knowledgebase | sample sites | reference
Guided Test Drive - Classic - FrontPage 2002

Classic Test Drive
- FrontPage 2002
  · The basics
  · Navigation
  · Images and Graphics
  · Publishing
  · Finished
- FrontPage 2003

Dynamic Test Drive Tutorial

The Classic Test Drive Tutorial

FrontPage 2002 - The Basics

At this point, you should have:

  • A trial or registered version of FrontPage 2002
  • A sample template downloaded from our web site

1. Install the template.

  1. Double-click the template installer that you downloaded.
  2. Follow the prompts to install.

2. Create a new web site using the template.

  1. Open FrontPage 2002.
  2. Go to File > New > Page or Web.
  3. In the right column, click "Web Site Templates..."
  4. Select the web template that you downloaded.
  5. In the right column, where it says "Specify the location of the New Web," make a note of the location and change it if necessary. (learn more about this...)
  6. Click OK. FrontPage will begin creating your web site.
  7. If publishing to a new folder that you have specified, there may be a prompt asking if you want to create a web at that location. Click OK.
  8. When FrontPage is done, you should be able to view the new files and folders in your Folder List.

3. Open a page and edit.

  1. Double-click on a page in the Folder List to open it for editing. The page will open in your main window area. You will be able to see the table lines that define the structure of the layout, which may offset the layout and images a little bit so that they look slightly skewed. This is normal - don't worry!
  2. Adding your own content to the page is as easy as highlighting the text you want to replace and typing over it.

    Figure 1


    Figure 2

     
  3. You will notice that the file name in the tab now has an asterisk (*) by it - this means that you have made changes but have not yet saved.


     
  4. Go to File > Save (Ctrl-S) to save your document.

Notes and hints...

  • To get "headings," use the style drop-down menu. This is the first dropdown menu in your toolbar.
  • Use "bold" and "italics," but stay away from underlining text. This makes the text look like it's a link, which is confusing to users.
  • To get sub-bullets, click the "indent" toolbar button twice.

4. Preview your page in a browser to view your changes.

  1. Go to File > Preview in Browser.
  2. Choose the browser you wish to use to preview your page. You may click the "Add" button to add more browsers (Netscape, Opera, various versions, etc.)

     
  3. A browser will open with your web page in it. This is what your page will look like on a live server! The only exception is with forms, hit counters, and other special components that need a web server to function. You can click on the buttons to browse your web site and to see what the other pages look like. At this point, you might want to read the content in the other pages of the site because they have a lot of helpful information.
  4. You may have noticed that in FrontPage, there is a "Preview" button at the bottom of the screen. This is a "quick" preview; however, you must realize that some things may look funny in FrontPage's preview, and that rollover buttons will not work. If you want to see what your web will look like on a live server, you should always go to File / Preview in Browser.
  5. It is probably a good idea to keep the browser window open while you are working on your web. When you make changes, save in FrontPage, then go to the browser window and hit the Refresh button to reload the page with your changes.

5. Edit the Include Pages

Include pages are a special feature of FrontPage that make it easy to have content that is used on multiple pages.

In many templates, the "your logo here" graphic and copyright information are within "include pages." When you update the include pages, every page on your web site is updated as well.

To change the logo graphic or the copyright information:

  1. In your Folder List, open the "includes" folder. You'll see "logo.htm" or "top.htm" and "copyright.htm." Double-click on one of the files to open it.
  2. Edit the content as you wish, then save.
  3. This will automatically update every page of your web site with the new information!

Let's say that you want to create a new include page. It's easy!

  1. Create a new, blank page and put the information that you want to include on different pages. Save the page (preferably in your "includes" folder).
  2. Now, open the pages that you want to insert the included information into. Place your cursor where you want to include the content.
  3. Go to Insert > Web Component, click "Included Content," and click "Page."
  4. Browse to the new include page that you created and click OK.

Tip! Include Pages in FrontPage act as "blocks" - that is, you won't be able to insert an include page in the middle of a paragraph or page. You can "cheat" by creating a table where the include page is in one cell and your other content is in another cell.

6. Make a hyperlink

If you are typing a url such as "www.yoursite.com" and "http://www.yoursite.com," or an email address like "youremail@youremail.com," FrontPage will usually automatically create a hyperlink out of it. However, you can also create hyperlinks out of words, phrases or images.

  1. Select/highlight the word, phrase, or graphic that you wish to hyperlink. Then go to Insert/Hyperlink or click the "Insert Hyperlink" button on the toolbar.
  2. The "Insert Hyperlink" dialog box will appear.
    • Click the buttons on the left to link to a web page, a bookmark, a new page, or an email address.
    • Or, browse your current web or the internet to find the page you want to link to, or simply type in the url or path name.
    • Click "Target Frame" to specify if you want your link to open up in the same window, a new window, or a specific frame (if your web uses frames).
  3. After specifying your link parameters, click "OK." You may always right-click on your link and select "Hyperlink Properties" to change them.

Next: Navigation