University Outreach and ExtensionMS FrontPage 2000 Tutorial

FrontPage Components

  FrontPage Components are part of the "value-added" aspect of FrontPage, making life for Web designers easier by saving time and trouble. They simplify tasks that would otherwise be complicated and time-consuming, such as adding a hit counter or search engine to your web site.

Following are descriptions of the most useful and most used FP Components.

Hit Counter

Hit counters are commonly used on Web pages to track the number of times the page has been accessed. Before placing a hit counter on your page, it is important to understand the following concepts:

Hit counters can be misleading. A hit counter reflects the number of times the page has been accessed, NOT the number of individual visitors to the site. The difference is lies in the fact that one visitor may "reload" the page in their browser several times in one visit, incrementing the counter each time. This is especially true when the visitor is the page creator -- who may be making changes to the page and reviewing them in the browser after each time he/she saves the page. This inflates the number and makes it appear that more visitors have looked at the site than really have.

If your goal is to collect valid statistics about who is hitting your site and how often, then a counter is not the answer. The Web server keeps a log of all requests for pages. We provide software for analyzing the log to see a breakdown of the hit statistics for your site. This tool is located at: http://outreach.missouri.edu/stats/

The rule of thumb is: hit counters should be used for entertainment purposes only, not as a statistically accurate measure.

That being said, here's how to insert a hit counter:

  1. Click the "Insert FrontPage Component" icon on the Standard Toolbar.
  2. Select Hit Counter.
  3. Choose the graphic style you prefer.
  4. Notice that you can give the counter an initial value. The default is 0.
  5. Hit OK.
    The counter will appear as text until you save the page out to the server and look at it with your browser.

Note -- this feature will only work with pages, which are saved on a server equipped with the FrontPage 98 Extensions (it won't work if you just look at the page when saved on your hard drive.)

 

Include Page

This is possibly the most useful Component. It includes one Web document into another one; sort of like that way an image is included into a web page. An image is a separate file, either a .GIF or .JPG, but it appears in your Web page. Similarly, you can include one Web page into another one using this Component.

The most common application for this is a footer file. If you have a footer section that will appear on all of your Web pages, you can create a separate page containing only that footer, call it footer.html for example, and then include that page on all your other Web pages. Then, if you need to modify the contents of the footer, you only have to modify footer.html, and then it will be automatically modified on each page which "includes" that footer file.

Any time you have sections that are duplicated on a number of Web pages, it might be a good time to use an Include.

To include a footer file on your page:

  1. Place your cursor on the page where you want the included file to appear.
  2. Click the robot icon on the toolbar.
  3. Choose "Include Page."
  4. Click "browse" to look for the file you want -- footer.html. Highlight the filename.
  5. Click OK.

The file will appear in your page. You can drag and drop it to any location on the page.

Notice that when you move your mouse over the included section, the pointer changes shape.. You cannot edit the included section here; you have to open the original file to make changes (in this case, footer.html). You can use CTRL-Click to open the included file for editing.

Hover Buttons

Hover buttons use Java script to create an animated button that changes color when the user places his mouse over it. To add a hover button:

  1. Click Insert ŕ Componentŕ Hover Button
  2. Type some text that will appear on your button.
  3. Type or paste in a URL to link to, or browse your Web for another page to link to.
  4. Choose the button color, effect, background color and effect color.
  5. Specify dimensions if desired.
  6. Click OK.

You can also use pre-made graphic images rather than colors for the buttons. You specify the images to use under the "Custom…" section on the Hover Button screen.

You can use Hover buttons if you are very careful to check their appearance in a variety of browsers. They often do not perform the same in all browsers and can be problematic. In addition, the text can be somewhat fuzzy and not very readable.

Example Hover Buttons:

San serif font, 14 pt
Glow effect
 Arial, 10pt
Bevel out effect
 Courier New, 14 pt
Light glow effect

Marquee

This feature creates an animated message on your page when it is viewed in MS Internet Explorer. This particular implementation of an animated marquee only works in MS Internet Explorer browsers, but you can get other JavaScript code to place in your page that will do the same thing and appear on all 3.0 and later version browsers.

THIS DOES NOT WORK IN NETSCAPE BROWSERS.

Example Marquee:
This is an example of a scrolling marquee. Notice that it does not scroll if you are using Netscape.

I really recommend that you don’t use this, but here’s how to do it if you want to try it:

To add a marquee:

  1. Insert > Component > Marquee
  2. Type in some text
  3. Choose your settings -- direction, effect, speed, etc.
  4. Click OK.

Search form

Adding a search form to your page can make your site more friendly and useful to visitors. However, this search functionality only extends to the content of your FrontPage Web. It will not index anything beyond the scope of your Web.

When used in a UO/E page, it should not be presented as a search of all UO/E content. If you don't have very much solid content in your site, you will only frustrate your users. In most cases it will be better to send them to the UO/E-wide search engine. This will index your pages plus everything else on the outreach.missouri.edu server, sbdc.missouri.edu,  muextension.missouri.edu, KC, UMR, UMSL and Lincoln extension web sites several others associated with UO/E. The address for this search service is: http://search.outreach.missouri.edu

If you feel you have enough content to support it, here is how you add a search option to your page:

  1. Click Insert -> Component -> Search form
  2. Change any settings desired
  3. Click OK

A dashed line will appear on your page, containing a keyword box and a Search button. The dashed line indicates that this section of the page is a "Form" -- a special section that collects information from a user. It's important not to move the form elements (text box and button) out of this dashed line.

When using a search feature on your page, you need to occasionally update the searchable index. This does not happen automatically. To update the index:

  1. Switch to the FP Explorer

Click Tools --> Recalculate Hyperlinks
This can take up to several minutes, depending on the volume of pages in your Web.

Example search form
This only searches the content within the "Webteam" area.

Search for:

 

Other special features

 

Comment

Comments are sections of text that are embedded in your page, but will not be seen when the page is viewed with a browser. You will see them when you open the page in the FP Editor.

To place a comment on your page, click FILE --> INSERT --> Comment
Type the text of your comment into the box then click OK.

Your comment will appear as colored text, and you will notice that when you move the mouse across the comment text, it changes shape to the robot icon. This is because you cannot edit the comment text directly on the editor screen. To edit it, right-click on the comment text and select "Comment Properties…" from the pop-up menu.

 

Timestamp

A feature often used in conjunction with an included page is a timestamp. This will insert a date and time into your page, and automatically update it every time you edit your page.

If you put a timestamp into an included footer, when the page is viewed, the timestamp will reflect the date that the main page was last edited, not the date the footer was edited.

To put a timestamp in a page:

  1. Move your cursor to the point in the page where you want the timestamp to appear.
  2. Click INSERT ŕ TIMESTAMP
  3. Choose the date and time format
  4. Click OK.

You can drag and drop this around the page. You cannot edit the text of the timestamp, but you CAN change the font, size and color of the text.

 

-----Do Exercise 7 -----

 

Previous | Home | Next

University Outreach and Extension Kate Akers, kate@oseda.missouri.edu
Webmaster, University Outreach and Extension
Last modified: 08/27/02