Lesson 2: Web Page Design in the FrontPage Editor

---

Viewing the Tutorial Page in a Web Browser

Now it is time to look at how the Tutorial Practice page you created will look in a Web browser.

To Preview a Page in the Web Browser

Figure 1. The Preview in Browser button

1. On the FrontPage Editor's toolbar, click the Preview in Browser button.

   The Tutorial Practice page is displayed in your default Web browser.

2. Scroll down to locate the sentence "Please send me feedback about my Web site!" and note the word "feedback."
   Click image to enlarge

   Figure 2. The feedback link

   The word "feedback" is displayed in color and with underline formatting. As soon as you move the mouse over the word, the pointer changes to a hand. This indicates a hyperlink you can click on.

   If you have a properly configured e-mail application installed on your computer, clicking the word will open a new e-mail message window, with your e-mail address filled in as the recipient. Type a message into the message form and send it. If no message window appears, cancel the operation by acknowledging any notifications that may appear.

3. Next, scroll down to the blackboard image map and click on the words "Interests."

   The hyperlink you created from the image map finds and displays the page describing your personal interests.

   Click image to enlarge

   Figure 3. Clicking on the image map

4. Click your Web browser's Back button to return to the Tutorial Practice page.

   If you created additional hyperlinks from the words "Photo Album" and "Favorites," repeat step 3 and 4 above by clicking on the appropriate image map hyperlink. In each case, click your Web browser's Back button to return to the Tutorial Practice page.

5. Scroll down to the table you created.

   Note that the file names and their descriptions are properly aligned on the page. Your Web browser does not display the table grid that you saw in the FrontPage Editor while editing the table. This is because you inserted a table with a Border Size of zero.

   Click image to enlarge

   Figure 4. Displaying a table without borders

6. Scroll down past the marquee and locate the second occurrence of the sentence "Please send me feedback about my Web site!" (located above the Scrolling Text Box and the Submit and Reset push buttons).

   You will now test this feedback form by entering some text and submitting the comments to a form results file.

7. Click in the Scrolling Text Box form field to activate the insertion point.
   
   
8. Type Wow, this is really neat!
   Click image to enlarge

   Figure 5. Testing the feedback form

   If you make a mistake while typing, the Reset push button clears the text in the Scrolling Text Box form field. You can then start over and enter new text.

   Clicking the Submit push button processes the text in the form field and at once sends it to the default results file. You can specify the path and file name of this results file in the Form Properties dialog box.

9. To send your comments, click the Submit push button.

   Note: Depending on which Web browser you are using, a security alert may be displayed, cautioning about sending information over an unsecured connection. This is nothing to be alarmed about, as long as you haven't entered any personal information such as credit card numbers, your telephone number, or your home address into the form field. To finish sending the comments from the Feedback form, simply acknowledge the warning message.

   After the feedback form is submitted, your Web browser will display a Form Confirmation page, advising you that the information was sent successfully.

Figure 6. Form confirmation

10. On the Form Confirmation page, click Return to the Form.

"Return to the form" is a hyperlink which will take you back to the Tutorial Practice page in your Web browser.