Adding and Using FrontPage Components and Features

This chapter is from the book 

Forms, Discussion Webs, Hit Counters, and More

FrontPage 2002 is loaded with dynamic and interactive features that are easily configured, edited, and maintained in FrontPage. These are features that would otherwise need to be configured on the server by installing scripts to handle results, interactivity, and other dynamic features. These features do require that the Web server hosting the web have FrontPage server extensions installed correctly. We will discuss this in more detail later in the book, along with publishing your finished web and resources for hosting companies that provide FrontPage server extensions.

If you find that you must have your web hosted on a server that does not have FrontPage extensions, you can use outside scripts to handle features such as forms and CGI-based discussion boards. It is usually a matter of installing the scripts on the server in the cgi-bin, then adding the proper code in the HTML view in the FrontPage Editor in forms or on the page as needed.

Forms

Among the many valuable and helpful templates available in the New Page dialog box are the Form Page wizard and several premade forms ready for you to configure and use with your own web. The premade forms have been designed with form fields that are found in typical forms so that you have a good foundation from which to build. The Form Page wizard is a great tool for creating your own custom forms by answering several questions in a step-by-step manner.

The Form Page Wizard

This wizard will walk you through the process of creating a custom form tailored to suit the needs of the form page for your web. To start the wizard:

• Select New from the File menu.

• Select Page or Web from the New menu.

• In the Task pane on the right, click the link to Page Templates. You will see the New Page dialog box. In it are many options that you may wish to explore, one being the Form Page wizard (see Figure 3–6).

  FIGURE 3–6 Page Template dialog box—Form Page wizard.

• You will be greeted with a dialog box that tells you that you will be walked through several questions to help you create your form. Click the Next button.

• The next step is to add the questions you want asked in your form. Click the Add button (see Figure 3–7a) in this dialog box to bring up the next screen, which has many options for the criteria of your form (see Figure 3–7b).

  FIGURE 3–7a Click the Add button.
  FIGURE 3–7b Form criteria.

• In the add questions screen, shown in Figure 3–7b, select the type of information you want added to your form and click the Next button. For example, select contact information.

• The next dialog box will allow you to choose the specific type of "contact information" to include in your form (seeFigure 3–8).

  FIGURE 3–8 Input type screen—Form Page wizard.

• Click the Next button after selecting the specific contact information fields you want added to your form. You will then be taken back to the add questions screen shown in Figure 3–7a. You may repeat the steps of adding more questions from this dialog box until you are finished adding all of the questions and types of information you want to gather with your form. Once you have completed the process of adding all of the information to your form, click the Next button in the add questions screen (Figure 3–7a).

• The next step in the Form Page wizard is to select your presentation options. This step allows you to choose some formatting options for how you would like your forms page and form fields presented on your form Web page (see Figure 3–9).

  FIGURE 3–9 Presentation options screen—Form Page wizard.

• After you have made your selections in the presentation options screen, click the Next button.

• The next step is to choose where you want the results of your form sent. You may choose to have the results of your form sent to you by email after you have completed the Form Page wizard. This wizard gives you the options of saving the results to a text file or Web page on the server, or to use a custom CGI script (see Figure 3–10).

  FIGURE 3–10 Output options screen—Form Page wizard.

• For this example, we chose the save results to a Web page option. There are additional output formatting options that can be selected and customized after the form is completed. We will go over those options later in this chapter.

• Once you have selected your output options, click the Next button, and the wizard will tell you that you have completed all the questions for your form. Click Finish to see your new form page. The new form page will look something like Figure 3–11.

  FIGURE 3–11 New form page.

You may now format the look of your new form page to match the look of other pages in your web. Right-click on the page, choose Page Properties, and select the page background colors and hyperlink colors for your page, as well as the page title. From the Format menu, select Shared Borders to add any shared

borders to your page. For this example, we will add a white page background color and a top shared border (see Figure 3–12).

FIGURE 3–12 New form page with added page formatting.

In the following section on the Feedback Form, we will review many ways of further customizing your form, including how to add specific fields to your form individually and how to customize a form's properties, such as sending the results of a form to an email recipient, adding subject and reply-to lines to an email form result, and incorporating other formatting options for results sent to text files and Web pages.

The Feedback Form

A popular form is the Feedback Form. This form is very useful and can be a great way to interact with your viewers. You may want to start with the standard Feedback Form in FrontPage, then customize the input for your form.

• Select New in the File menu, then Page or Web.

• In the New Page dialog box, select Feedback Form.

• On the right in the NewPage dialog box is the Just add Web task option. Checking this box will not create the form when you click OK but instead will add this as a task in your task list, which is accessible by clicking the Tasks button on the Views toolbar. Notice the dashed line around all of the form fields (see Figure 3–13). This represents the "form" area. You may customize the page first by selecting or deselecting shared borders, background images, background colors, and/or themes for your page. All of these page options are available by right-clicking on the page and selecting the properties that you would like to choose for the page or from the Format menu at the top of the screen.

  FIGURE 3–13 Create a Feedback Form from a template.

You may also highlight the text next to any form field (like the text next to the checkboxes at the top) and change the text next to the selection. You will want the name of each form field to match the text next to it so that you understand the results of your form.

• Right-click on any form field and select Form Field Properties.

• Enter a short, descriptive name for your form field in the dialog box to match the text that you selected to describe this selection on the page. It is important that you do not include spaces in the form field name. Use lowercase text only for the name.

• Click on any form field to delete it if you do not want to include the field on this standard Feedback Form.

• You may add more fields of your choice to this form, as well.

Now, let's add a text box for names and email addresses to be entered. To add a form field text box:

• Place your cursor inside the form on your new form page.

• Type Name:, then press the spacebar to add one or two spaces.

• In the Insert menu, select Form, then select One-Line Text Box from the Form menu. The text box will appear next to Name:

• Now, right-click on the text box and select Form Field Properties to open the Text Box Properties dialog box (see Figure 3–14).

  FIGURE 3–14 Adding a form field—Text Box Properties dialog box.

• In this Text Box Properties dialog box, you will assign a name to the form field. You have the option to enter an Initial value, set the box's Width in characters, choose the Tab order, and indicate whether it is to be a Password field. For this example, type in Username as the Name for this form field.

• Clicking the Style button gives you options that will add inline style tags to the HTML code, which may not be compatible with some browsers.

• The Validate button will allow you to set some parameters that will cause the user to be prompted with a warning if a field is not filled in using the criteria for the field (see Figure 3–15). Checking the Required box in the Text Box Validation dialog box will allow you to set options for required fields in your form. By adding numerical values in the Data length section of this dialog box, you can select maximum and minimum characters that the viewer must enter in this box. Because it is a Name box, we will leave this alone so that we do not limit the number of characters for any viewer's name. You may limit the number of characters your viewer may enter in your text boxes; this comes in handy for text boxes that collect information such as Zip codes. Be careful not to limit the number of characters for email addresses, because you may not allow enough space for your viewer's email address.

  FIGURE 3–15 Text Box Validation dialog box.

• When you have the fields in your form selected and in place, you are ready to set up how you want the results of your form handled. By default, FrontPage forms are pre-configured to send the results of the form to a .txt file in the _private folder within your web.

Sending the Results of Your Form

• Right-click inside your form and select Form Properties.

• This opens the Form Properties dialog box (see Figure 3–16).

  FIGURE 3–16 Form Properties dialog box.

• In this dialog box, you may add an email address to send results to, in addition to or instead of the default .txt file. To send the results via email instead of to the .txt file on your server, simply delete the path in the File name box and add the email address to the E-mail address box.

• You may add a name for your form in the Form name box and set more options for your form by clicking the Options button (see Figure 3–17).

  FIGURE 3–17 Options for Saving Results of Form dialog box.

You may select the format in which FrontPage displays your results using the File format dropdown menu. Make sure to check the Include field names option. This will display the results of the form fields next to the name of the form field that was selected by your viewer.

You may also opt to send the results to a second file on your server if you choose. Do this in the section below the first File format dropdown menu.

If you have chosen to send the results via email, click the E-mail Results tab in the Options for Saving Results of Form dialog box (see Figure 3–18). Select the format in which you wish to receive the results in the dropdown menu. Check the Include field names option to display the values of each entry in the results next to the name of the field. You may also enter the subject line for the results of the form. This will display in your email message's subject line.

FIGURE 3–18 E-mail Results screen.

You can implement a subject line to display with emailed results by entering a value in the Subject line box in the Email message header section, or you may choose simply to have the subject line be the value entered in one of the fields of your form.

Further, you can configure the form to send the results with a reply-to line (which will allow you to click Reply to the results and have the reply go to the person who submitted the form). To do this, choose the name of the form field that collected the email address of your viewer; often, this field is simply named email.

Under the Confirmation Field tab, you have the option to use a custom confirmation page. FrontPage has a built-in confirmation page if you do not need a customized one. If you do want one, you may create it within your web, then use the Browse button to select that page from your web and configure FrontPage to use it as the confirmation page for this form. A custom confirmation page allows you to add any and all formatting options to the page so that it appears consistent with the theme of your Web site. We will create a custom confirmation form in the next section. If no custom confirmation page is selected, the default or built-in confirmation page displays the results of the form as submitted by the user and has a link at the bottom of the page that sends the user back to the form page.

Lastly, you have the Saved Fields tab (see Figure 3–19). Here, you may choose which fields within your form to "save" or send with the results. You may click the Save All button to save/send all of the fields and their results values. Included in the Saved Fields dialog box are options to include the Date, Time, Remote computer name, Browser type (of the user submitting the form), and Username. Some of this information can be valuable in determining your target audience.

FIGURE 3–19 Saved Fields screen.

To save all of the changes you have made in the Options for Saving Results of Form dialog box, click OK. Now save this page under a file name that is fairly easy to identify. It is also a good idea to keep your file names fairly short and all lowercase. NT servers are not case-sensitive, but UNIX servers are. To avoid any complications, it is a good idea to keep your file names all lowercase characters. For this exercise, we will name our page feedback and save it as a Web page (or with the .htm extension).

Custom Confirmation Form

When visitors to your Web site submit a form on your site, they will be directed to a confirmation page. Usually, the confirmation page will thank visitors for filling out the form and show them the information they have submitted in the form. This also lets the visitors know that the form was submitted properly without errors.

FrontPage has a built-in default confirmation page that will be used if no custom confirmation page is selected in the form properties of your forms. Among its many new page templates, FrontPage offers a confirmation page template. This allows you to create a totally customized and functional confirmation page that can match the theme on your site.

Let's create a custom confirmation page from the FrontPage template and customize it to match the theme that we are working on with the Shelley Biotechnology Web site. After we create this confirmation page, we will select it as the confirmation page for the form we just created in the last section. To start:

• From the File menu select New, then select Page or Web to open the Task pane on the right.

• Under the New from Template section of the Task pane, select Page Templates.

• In the New page dialog box, highlight the icon labeled Confirmation Form and click the OK button (see Figure 3–20).

  FIGURE 3–20 Page Templates dialog box—Confirmation Form.

FrontPage will create a new page with an example Confirmation form in the format of a letter. There will also be a comment at the top of this new page with information about a Confirmation form. The comment will not show in preview or in the browser, but you may just want to delete the comment anyway.

If you have set any specific shared borders for all pages of your web, the new page will be created with those shared borders; otherwise, you may add any shared border to the page that you like. If you have a theme selected for your site, that will be applied to the new page, too.

Let's begin customizing the Confirmation form to work with the Feedback form we created in the last section. To do this, it would be helpful to have the Feedback form open in FrontPage also, so that you can copy and paste the exact field names into the Confirmation form and be sure that your results will be accurate.

The default Confirmation form comes preset with Confirmation fields that match the default Feedback form, such as Username, MessageType, and so forth. These Confirmation fields match the form field names given in the Feedback form specifically, so that the FrontPage form component will know which information entered into the Feedback form should be placed on the Confirmation form (see Figure 3–21).

FIGURE 3–21 Default Confirmation form.

The default Confirmation form comes preset to confirm the Username, MessageType, Subject, E-mail, Telephone, and FAX information, as entered by the user. Let's add to this form another field to confirm: the Comments field. This will show users what

comments they entered and submitted to you through the Feedback form.

• Place your cursor on the page under the FAX Confirmation field.

• Type in the word Comments: and a space.

• From the Insert menu, select Web Components.

• In the Web Components dialog box, on the left pane, highlight Advanced Controls. Then on the right pane, highlight Confirmation Field (see Figure 3–24).

  FIGURE 3–24 Insert Web Component dialog box—Advanced Controls.

• Click the Finish button—This will launch the Confirmation Field Properties dialog box, where you will type in the name of the field you want to confirm.

• In the Feedback form, the Comments form field is named Comments; therefore, we will type in Comments exactly as it is named in the Feedback form with a capital C and click OK.

• Repeat this process for any and all other form fields that you would like this page to confirm when the Feedback form is submitted.

• Save the page in your web by selecting Save As from the File menu and giving it a descriptive name, such as confirma_tion.htm.

To select this confirmation page as the custom confirmation page for your Feedback form:

• Open your Feedback form page and place your cursor somewhere inside the form on the page.

• Right-click and select Form Properties from the menu.

• Click the Options button.

• Click the Confirmation Page tab.

• In the Confirmation Page dialog box, click the Browse button and navigate to the confirmation.htm page you just created (see Figure 3–25).

  FIGURE 3–25 Configure a custom confirmation page.

• Click OK and save the page.

When a site visitor submits the Feedback form, the input values are paired with the Confirmation form fields. The FrontPage form handler generates a customized confirmation page using the Confirmation form you just created. Each of the Confirmation form fields are replaced by the value entered into the Feedback form by the site visitor (for example see Figure 3–26).

FIGURE 3–26 Submitted custom Confirmation form.

Discussion Webs

A FrontPage discussion web is another very easily created, maintained, and edited feature. It, too, depends on the FrontPage server extensions to function, as it should. In this section, we will walk through the process of installing your own discussion web to go along with your Shelley Biotechnologies web.

An important factor in creating a discussion web is to ensure that you create the discussion web as a subweb, which we will explain as we go along. This ensures that if you are publishing your changes to your web up and down, to and from a remote server, you will not overwrite any new posts made to your discussion web from Internet users.

Let's begin with creating a new folder, then converting it to a subweb for our discussion web (see Figure 3–27).

FIGURE 3–27 Convert a folder to a web.

In the File menu, select New then Folder. Enter a name for it, such as Discussion. Right-click on this Discussion folder, either from the Folder List or from the Contents pane while in Folders view (as shown in Figure 3–27), and select Convert to Web from the menu. This will create a "nested subweb," meaning that it is a web all of its own. When you open the Shelley web, however, you will see this new subweb within the contents of the Shelley web, because they are associated with each other. When you select Convert to Web, you will be prompted with an alert (see Figure 3–28). Click Yes to dismiss this alert box.

FIGURE 3–28 FrontPage Convert to Web alert box.

You will now see your subweb in the Folder List with a new icon that represents a FrontPage web, the folder with a World icon on it. Double-click this subweb from your Folder List to open it. We will add the discussion web to your subweb directly. FrontPage will launch the subweb in a new FrontPage window.

Now, confirm that you are working in the /shelley/Discussion web and select New then Page or Web from the File menu. In the New Web dialog box (see Figure 3–29), select the Discussion Web wizard, and on the right of this dialog box, check the Add to current web option.

FIGURE 3–29 New Web dialog box—Discussion Web wizard.

The step-by-step wizard will begin the process of creating your new discussion web when you click OK. The first screen in this wizard will alert you that the wizard is beginning and that the answers to the questions will determine the final product of your discussion web. Click the Next button to begin the process.

1. In the first step of the Discussion Web wizard, select the options you would like to include within your discussion web, such as a Table of Contents, Search Form, Threaded Replies, and a Confirmation Page (see Figure 3–30). Click the Next button when you have made your selections.

   FIGURE 3–30 Discussion Web wizard step one.

2. Enter a descriptive name for the discussion web, such as Shelley Biotechnologies Discussion, and enter a name for the discussion folder (I usually leave this as the default folder name, _disc1, as shown inFigure 3–31). Click the Next button when you have made your selections.

   FIGURE 3–31 Discussion Web wizard step two.

3. Choose the appropriate set of input fields for your form. This is the form that your visitors will complete to post a reply or topic on your discussion board. The default choice is simply Subject and Comments, but it does allow the option to include an input field for category and product also, if appropriate for your discussion web. Then click the Next button.

4. Will the discussion take place in a protected web? This question is asking whether you will allow anyone to view and participate in the discussion web, or will password-protect it so that only registered members can participate. Another advantage to having placed the discussion web in a subweb as we have done is that you will be able to set permissions and security on this subweb, separate from the main web, if you choose. See Chapter 5, "Publishing Webs," for more on permissions. Click the Next button, once you have made your choice of protection options.

5. Choose the display of the new messages posted—oldest to newest or newest to oldest—then click the Next button to continue to the next step of the wizard. The default setting is oldest to newest, placing any new posts at the end of the Table of Contents. I have found that more people prefer to see what is new at the top of the page, instead of having to scroll down and search for new topics and replies.

6. In the next step, you may choose to make the Table of Contents the homepage for this subweb, because we created this as a web of its own. If this was not a web of its own and you already had a home page, you would not want to overwrite that home page with the Table of Contents for the discussion web. Choose yes or no, then click the Next button.

7. The next step gives you options for the results the search form will show. These options are easily configured now or changed later. Click the Next button once you have made your selection.

8. The next step gives you the option to select a theme for this discussion web. Clicking the Choose Web Theme button will launch the Choose Theme dialog box. A theme can be selected during the wizard or at any time after the discussion web is completed (see Chapter 2 for more on themes). Click the Next button to continue to the final step.

9. The last step in the Discussion Web wizard is to choose the layout for your discussion web. I have found that this is another good use for frames and usually choose the Contents beside current article layout option because it allows users an easy way to click on a post or reply on the left and read that post or reply content on the right. This step allows you to choose a nonframes option or even an option to use frames if supported by the user's browser (see Figure 3–32). Click the Finish button.

   FIGURE 3–32 Discussion Web wizard—final step.

Once you have completed the wizard, you may open your Default.htm page and customize the discussion Web pages in any way that you like in an effort to continue the same look and feel of your main site. This can include images, navigation buttons, and/or a theme applied to the site. It is recommended that you do not use shared borders, however, in a frameset.

Hit Counters

Hit counters count how many times your page has been viewed. Each time the page is viewed or refreshed in the browser, the hit counter increments. FrontPage has a built-in hit counter script that will allow you to install a hit counter easily on any of the pages in your web. This is a great component for a personal Web site but is difficult to use in a professional environment. More professional and business-type Web sites rely on third-party Web statistics programs that are often included in a Web hosting package by the hosting company and already installed on the server. Check with your Web host provider to find out whether your hosting company provides a statistics program that will tell you more about your visitors than simply how many you have had on your site.

To add a hit counter:

• Select Web Component from the Insert menu, then choose Hit Counter in the left pane. Choose the desired hit counter from the right pane and click the Finish button (see Figure 3–33).

  FIGURE 3–33 Insert a hit counter.

• This will launch the Hit Counter Properties dialog box (see Figure 3–34).

  FIGURE 3–34 Hit Counter Properties dialog box.

• Choose one of the available hit counter styles in the dialog box and click OK to insert it on the page. This component will need to be saved on the page before it can be viewed, and while in Normal mode, it will always appear as [Hit Counter].

Using Custom Counter Images

The Hit Counter Properties dialog box includes an option to add a custom hit counter. You can easily create a custom counter by creating a .gif image such as the one shown in Figure 3–35. It is a good idea to use a solid color background, then add numbers evenly spaced, for example: 0 1 2 3 4 5 6 7 8 9. Center the numbers on the background. Transparent .gif images do not work, and if you get the numbers too close together, they may not display correctly.

FIGURE 3–35 Custom hit counter.

To add a custom counter, you must save your custom .gif image in your web. In the Hit Counter Properties dialog box (see Figure 3–34), select Custom Picture, then type the path to that custom image. Finally, click OK, and FrontPage will use your custom image as the hit counter.

Search Feature

FrontPage 2002 includes a premade search page that can be installed in your web by way of the Page Templates dialog box. Select New then Page or Web from the File menu. From the Task pane, click the link to Page Template under the New from Template section (see Figure 3–36).

FIGURE 3–36 New Page dialog box—Search Page.

Selecting Search Page and clicking OK will open a new search page, ready for you to customize (see Figure 3–37).

FIGURE 3–37 New search page.

The default search page has comments at the top, which are not visible in Preview mode or in the browser. These comments are only a reminder that the search feature is ready to run as is, without any customization at all. For this example, we will customize the page and search results.

• First, add a background color to the page—white—then add a top shared border.

• Next, configure the search results and how they appear by right-clicking on the search box within the dashed line. Select Search Form Properties from the menu (see Figure 3–38).

  FIGURE 3–38 Select Search Form Properties from the menu.

• In the Search Form Properties dialog box, you may choose either the Search Form Properties tab or the Search Results tab.

The Search Form Properties tab allows you to set the Label for Input, which will change the text that is visible on the page next to the input box. The Width in characters sets the length or width of the input box. The labels for the Start Search and Clear buttons fields will change the text of the buttons on the search page (see Figure 3–39).

FIGURE 3–39 Search Form Properties dialog box—Search Form Properties tab.

Selecting the Search Results tab allows you to make several selections for the search results and display options (see Figure 3–40):

FIGURE 3–40 Search Form Properties—Search Results tab.

• Word List to search—By default, this is set to All, which sets the search feature to search all files and folders within the web except any folders that begin with an underscore.

• Date format—If checked, along with the Display file date option, then this is the format in which the date will be displayed; that is, the date on which the file was last updated.

• Time format—This option is much the same as the date format, except that it shows the time at which the file was last updated.

Under the display options:

• Display score—This option adds a "score" or a closeness of match to the keywords used in the search.

• Display file date—Choosing this option will show the date the file was last updated next to the result.

• Display file size—This will show the file size of the result in Kb.

• Next, you may opt whether to leave the Query Language definitions on the search page. Save the page as search.htm.

You may also add a search component to an existing page by placing your cursor on the page where you want a search box inserted.

• Select Web Component from the Insert menu.

• Highlight Web Search in the left pane and Current Web in the right pane.

• Clicking the Finish button will launch the Search Form Properties dialog box for you to configure (see this chapter for more details on configuring the Search Form Properties).

• Click the OK button to insert the Search form on the page.

File Upload

The new FrontPage 2002 File Upload feature is as easy to use and configure as inserting any form field on a page. To use this feature, however, the server hosting your web must have the FrontPage 2002 server extensions installed.

File Upload does just what the name implies, it allows visitors to your Web site to upload a file to your Web server through a Web browser. Clicking the Browse button will open a dialog box that will allow your visitors to navigate on their hard drives to the files they want to upload. Submitting this form will then upload the file that the visitor selected to the directory that you have configured this form to send to.

We will configure a File Upload feature to allow visitors to the Shelley Biotechnologies Web site to upload files and documents to a folder on this web. First, we need to create a folder in the web for the files to be uploaded to. In most cases, you would not want these files to be indexed by search engines or by the FrontPage search component. To prevent the files from being uploaded by site visitors or team members, we can name the upload directory with an underscore in front of the folder name, such as _upload. The underscore in front of the folder name prevents the files in the directory from being indexed by search components or search engines. It also prevents visitors on the Internet from browsing the directory. If a visitor tried to browse this directory through a Web browser, he or she would be prompted for a username and password.

To create the new folder for the uploaded files:

• In the Folder List, right-click on the very top folder. If you are working against a server, this would be something like http://localhost/shelley; if you are working on a Disk-Based Web (DBW), this would be something like C:\My Webs\shelley.

• From the right-click menu, choose Folder from the New menu (see Figure 3–41).

  FIGURE 3–41 Create New Folder menu.

• A new folder will appear in your Folder List that is highlighted blue. Type _upload, then click on the folder one time. This will assign the name upload with the underscore to the new folder.

If you are unable to see the folder in your Folder List after naming it, you will need to set FrontPage to show all hidden files and folders in the web. To do this:

• From the Tools menu, select Web Settings.

• Click the Advanced tab.

• In this Advanced screen, place a check next to the box to Show hidden files and folders. Click the OK button.

• You should now be able to see the folders in your web that begin with an underscore.

You are now ready to create your File Upload form.

• From the Task pane under the New section, click the link for Blank Page.

• At the top of the page, you can add some text, such as Upload a file.

• Place your cursor on the page where you would like to insert the File Upload form and select Form from the Insert menu

• Select File Upload from the Form menu (see Figure 3–42).

  FIGURE 3–42 File Upload menu.

• Right-click on the text box form field on the page next to the Browse button and select Form field properties. Name this form field upload and click the OK button (see Figure 3–43).

  FIGURE 3–43 File Upload Properties.

• Next, right-click and select Form Properties.

• In the Form properties dialog box, click the Options button.

• Click the File Upload tab in the Saving Results dialog box (see Figure 3–44).

  FIGURE 3–44 File Upload—Saving Results dialog box.

• Click the Browse button next to the Destination box and navigate in your web to the _upload folder that you created and click OK. Then click OK on the Saving Results dialog box, and click OK again on the Form Properties dialog box.

• Add any other formatting options you would like to add on this page and save the page. For this example, save the page as upload.htm.

If you are working against a Web server, PWS, or IIS, you can test this form by opening it in your web browser using the http://localhost/shelley URL. Click the Browse button to choose a file on your hard drive to upload to the web and submit the form (see Figure 3–45).

FIGURE 3–45 Upload a file using the browser.

FrontPage will generate the default Confirmation form when the form is submitted (see Figure 3–46). Remember, you can create a custom Confirmation form that matches the look and feel of your Web site if you like.

FIGURE 3–46 File upload default confirmation page.

Table of Contents

To add a Table of Contents page that FrontPage automatically updates for you when new pages are added and old pages are deleted, select the Table of Contents icon from the Page Templates dialog box (see Figure 3–47). This feature will list all of the pages in your web that are linked from a starting point that you configure in the Table of Contents Properties dialog box in a bulleted list on the Table of Contents page.

FIGURE 3–47 Page Templates dialog box—Table of Contents.

After selecting the Table of Contents icon from the Page Templates dialog box, you may customize the page to match the theme of the site, as well as to configure the display results of the Table of Contents.

• First, add the page background color—white—and a top shared border.

• Next, configure the Table of Contents display results (see Figure 3–48).

  FIGURE 3–48 Table of Contents Properties menu selection.

• Right-click on the Table of Contents Heading Page text that is on the page. Notice that when you place your mouse over the title or any of the items in the bulleted list, the pointer changes to a hand with an index card in it. This signifies that the item is a FrontPage component. Right-clicking while the pointer is changed to the hand holding a file will show a menu. From this menu, you can choose the Table of Contents Properties, which launches the component's Properties dialog box, as shown in Figure 3–49.

  FIGURE 3–49 Table of Contents Properties dialog box.

• In the Table of Contents Properties dialog box (see Figure 3–49), select the starting point for your Table of Contents. This will be the page that is shown as the title on the Table of Contents page. The links displayed on the page will be the pages that are linked under the starting point page in the Navigation view. For instance, in our Shelley Biotechnologies web, we have set up a frameset, a Feedback form, and a search page. All of these have been dragged and dropped into the Navigation view in FrontPage to create a Navigation Tree view (see Figure 3–50), and this structure will be outlined in text in the Table of Contents feature when the page is saved and viewed in the browser.

  FIGURE 3–50 FrontPage Navigation view.

• The navigation structure in the Navigation view will create a Table of Contents display, as shown in Figure 3–51, if the default page, or home page, is chosen as the starting point.

  FIGURE 3–51 FrontPage Table of Contents display.

• Now, save your page in your web. At this point, you may link to it from other pages in your web.

Hover Buttons

Hover buttons are Java applets that are easily configured using FrontPage 2002. The first thing you should know about Java applets is that they are not supported by many of the older browsers, such as IE 3 and NN 3 or older. As a result of not being supported by the older browsers, they simply do not appear on the page when a viewer is using one of these browsers. With that in mind, you may want to reconsider using them for navigational purposes. If you do choose to use them, you should be sure to add text hyperlinks to the other pages on your site.

Java applets also take a little longer to load than a standard button or small image. Until they are fully loaded, a gray box will appear on the screen of the viewer whose browser supports them.

Getting Started

First, explore the Hover Button Properties dialog box.

• Open a page in your FrontPage Editor.

• Select Web Components from the Insert menu.

• Highlight Dynamic Effects in the left pane and choose Hover Button in the right pane (see Figure 3–52).

  FIGURE 3–52 Hover Button menu selection.

• Click the Finish button to launch the Hover Button Properties dialog box (see Figure 3–53).

  FIGURE 3–53 Hover Button Properties dialog box.

• In the Hover Button Properties dialog box, you can choose from a variety of options:

  • Button text—This text will appear on your button.

  • Link to—Enter a URL for your button to link to when clicked, or click the Browse button and navigate to a file in your web to link to from your Hover button.

  • Button color—Choose the color of the button upon load.

  • Effect—Choose from a variety of effects that you wish to occur when the cursor is moved over the button. Glow is the most popular effect.

  • Effect color—Choose the color that you wish the effect to be when the cursor moves over the button.

  • Width and Height—These default to the sizes shown in Figure 3–53. You may make them larger or smaller, according to your taste and/or needs.

• You also have the option to choose the font style and color by clicking the Font button next to the Button text box.

Custom Box

• In the Hover Button Properties dialog box (Figure 3–53), click the Custom button at the bottom of the box. You will then see the Custom dialog box (see Figure 3–54).

  FIGURE 3–54 Custom Hover Button dialog box.

• In this box, you may add sound to your button when it is clicked or hovered over. To do this, you must use an .au sound file.

• You may also choose two of your own images to use for the button and hover. You can select the size, width, and height in the Hover Button Properties dialog box to match your images' sizes. You should use two images that are the same width and height.

• For any of the above options, use the Browse button next to the appropriate box to navigate to the image or sound you would like to use.

Finishing Up

To save these additions to your page, click OK on the Custom dialog box and/or on the Hover Button Properties dialog box. Save the page, and you are ready to preview and/or upload your new page.

Date and Time

To add the date and/or time that your page was last edited to your page(s), FrontPage has a built-in Date and Time script that can be added from the Insert menu (see Figure 3–55).

FIGURE 3–55 Insert Date and Time.

This Date and Time script is not the current date and time; it is the date and/or time that the page was last edited in FrontPage. Configure the date and time display in the Date and Time Properties dialog box (see Figure 3–56).

FIGURE 3–56 Date and Time Properties dialog box.

Use the dropdown menus to choose the format for the date and/or time, then choose a Display option from this dialog box, either Date this page was last edited or Date this page was last automatically updated.

Click OK when you have made your selections. You can add text around the date and time display on your page if you wish. Something like "This page was last edited on ________." You can also highlight the text and format the font size, style, and color.

Include Pages

A powerful yet often underused feature in FrontPage is a component called the include page. I use it for quickly adding navigation bars, repeated addresses, or recurring strings of HTML. The great feature of using this component is if you decide to add or change the navigation of your site, the changes have to be made only one time. For organization, I store my include pages in a folder called _includes. Adding the underscore also prevents the pages from being indexed in the search results in a local search within the web or by search engines and Web crawlers. This feature does not require the FrontPage server extensions.

For this example, we will create an include page for the bottom of the pages on the Shelley Biotechnologies Web site. This include page will have a set of text navigation links, copyright information, and contact information. Let's start with a blank white page, add our links and contact information in a table on the page, and save the include page (see Figure 3–57).

FIGURE 3–57 Bottom include page.

We can now insert this include page on the bottom of any or all of our Web pages by selecting Web Components from the Insert menu. In the left pane, choose Included Content, and in the right pane, choose Page (see Figure 3–58), then click the finish button to launch the Include Page Properties dialog box.

FIGURE 3–58 Insert Web Component—Include Page.

In the Include Page Properties dialog box (see Figure 3–59), you may use the Browse button to browse to the _includes folder and select the bottom.htm page to be inserted into an existing page.

FIGURE 3–59 Include Page Properties dialog box and Current Web dialog box.

Unlike shared borders, an include page may be inserted at any place on a page. It is not limited to being used on the top, bottom, or sides. You can create a table on your page and select a background color for the cell or table, then insert an include page in the table.

Like shared borders, when you want or need to make a change to information that is repeated on all or many pages of your web, you have to make that change or update to only one page, and FrontPage will append that change to all of the pages that share that border or include page. For navigation and contact information purposes, include pages can save you a lot of maintenance and updating time.

Image Maps

FrontPage 2002 has a built-in image-mapping tool that allows you to add "hotspots" to an image on a page. Hotspots are hyperlinks that are added to a "spot" on an image, rather than simply making the whole image a hyperlink. Several hotspots can be added to the same image, which then creates an image map.

To add hotspots to an image:

• First, insert the image into your Web page.

• Select the image by clicking on it one time. This will highlight the Image Formatting toolbar at the bottom of the FrontPage Editor, as shown in Figure 3–60 (see also Appendix A, "FrontPage Image Tools").

  FIGURE 3–60 Image mapping.

• The Image Formatting toolbar at the bottom of the Editor has four hotspot tools from which to choose (see Figure 3–61):

  FIGURE 3–61 Image map tools—Image Formatting toolbar.

  • Rectangular hotspot
  • Circular hotspot
  • Polygonal hotspot
  • Highlight hotspot

• Each hotspot tool works in a similar fashion, except for the highlight hotspot tool, which simply highlights any hotspots already on an image. For this example, we will choose the rectangular hotspot tool to create hyperlinks on each title that appears to be a button but is actually one wide graphic. We will add hotspots to this image so that it will work as though it has separate buttons.

• Click the rectangular hotspot tool on the Image toolbar.

• Click once at the top left corner of where you want the first hotspot to be placed and hold the left mouse button to drag the hotspot rectangle to the bottom right corner of where you want the hotspot (see Figure 3–62).

  FIGURE 3–62 Adding a hotspot.

• Once you have created the rectangle and let go of the mouse, FrontPage will prompt you with the Insert Hyperlink dialog box. Here, choose the page or hyperlink that you want for this hotspot (see Figure 3–63).

  FIGURE 3–63 Insert Hyperlink dialog box.

• For the first hotspot in this example, we will select the products.htm page for the hyperlink. Any URL can be added as a hyperlink for a hotspot, as well as any Mailto hyperlink.

• Repeat the process of adding hotspots for each hyperlink hotspot you want created on this image map. You may view the page in your browser or in the Preview view of FrontPage 2002 to test the hyperlinks.

• Each hotspot can also be dragged and dropped on the page in case you want to move it slightly on the image. To do this, just highlight the image, move your mouse over the hotspot you want to move, left-click on that hotspot outline, and drag it to the location you want.

• You may also adjust the size of your hotspots by left-clicking on any node on a hotspot outline and dragging that node to make the outline bigger or smaller.