Faster Smarter Web Page Creation

Author Mary Millhollon with Jeff Castrina Pages 368 Disk N/A Level Beginner Published 11/13/2002 ISBN 9780735618602 ISBN-10 0-7356-1860-7 Price(USD) $19.99 To see this book's discounted price, select a reseller below.	More Information About the Book Table of Contents Sample Chapter Index Related Series About the Author Support: Book & CD Rate this book

Chapter 10: Creating Web Sites with FrontPage

• Introducing FrontPage: A Full-Featured HTML Editor
• Strolling Past the FrontPage Window
• The Advantages of Using FrontPage
• FrontPage Server Extensions
• Planning Your FrontPage Web Site
• Creating a New Web
• Creating the Subpage Layout
• Setting Page Properties
• Saving Your Work
• Adding the Logo and the Title Banner Graphic
• Inserting a Table
• Adding Navigation Buttons
• Adding Footer Information below the Table
• Using the Subpage Layout to Build Web Pages
• Preparing to Create Subpages
• Adding Text and a Title Bar Graphic
• Modifying Cascading Style Sheet (CSS) Settings
• Inserting a Thumbnail Image
• Creating an Image Map
• Creating Forms
• Creating a Home Page in FrontPage
• Setting Up the Home Page Framework
• Assembling the Main Graphic
• Creating Links within the Main Graphic
• Adding Dynamic HTML to the Main Graphic
• Adding Finishing Touches to the Home Page
• A Word about Publishing
• Additional Resources
• Key Points

Chapter 10   Creating Web Sites with FrontPage

To create the Web pages described in this chapter, you'll need the following "supplies":

• Microsoft FrontPage (preferably version 2002)
• An Internet connection (An Internet connection is necessary to download the sample project's graphics and text files from the Creation Guide Web site.)
• The mars.doc and thankyou.htm files downloaded from www.creationguide.com/projects/chapter10/text

To download these files, create a folder named "sky" on your computer's hard drive. (For convenience, we refer to your hard drive as the C:\ drive throughout this chapter.) Then connect to www.creationguide.com/projects/chapter10/text, right-click mars.doc, select Save Target As, and save the file to the C:\sky folder on your computer. Repeat the process to save thankyou.htm to your C:\sky folder.

• The following 36 figures downloaded from www.creationguide.com/projects/chapter10/images into a folder named C:\sky\images (as described after the figure list):

b_aboutus.gif	bg.gif	mars.jpg
b_aboutus2.gif	bigdip1.gif	neptune.jpg
b_contact.gif	bigdip2.gif	saturn.jpg
b_contact2.gif	bigdip3.gif	solarsystem.gif
b_gallery.gif	bigdip4.gif	t_aboutus.gif
b_gallery2.gif	bigdip5.gif	t_contact.gif
b_links.gif	bullet_star.gif	t_gallery.gif
b_links2.gif	corner_botm_left.gif	t_links.gif
b_meetings.gif	corner_botm_right.gif	t_meetings.gif
b_meetings2.gif	corner_top_left.gif	t_skyguide.gif
b_skyguide.gif	corner_top_right.gif	titlebar-home.gif
b_skyguide2.gif	logo.gif	titlebar.gif

TIP
---

If you're Zip savvy, you can download the file zip_images10.zip and extract the images locally.

To obtain these figures, first create an images folder in C:\sky. Then connect to www.creationguide.com/projects/chapter10/images, right-click an image's filename (or the Zip file if your computer is set up to open Zip files), choose Save Target As, and save a copy of the file to the C:\sky\images folder on your computer, as shown in Figure 10-1. Repeat the process for each image.

Click to view graphic

Figure 10-1   Before you can complete this project, you need to download the image files from the Internet.

Introducing FrontPage: A Full-Featured HTML Editor

• Button rollover effects Buttons that seem to glow or change appearance in other ways when users place their cursors over the buttons. (By the way, when a user places a mouse cursor over a button or hyperlink, this action is called hovering.)
• Cascading style sheets (CSS) Code that defines attributes and layout settings for HTML tags in one location. Style sheets reduce (and oftentimes eliminate) the need to repeatedly insert and define attributes in HTML tags. Style sheet definitions can be contained in linked CSS documents or embedded in Web pages' source code.
• Counter A component that displays the number of times users have accessed a Web page. The counter number increments (increases) by 1 each time a visitor accesses the page.
• Image map A picture with clickable areas that link to related pages or other areas on the current page. The image serves as a directory, and users access information by clicking areas of the picture, such as clicking New York on a U.S. map to display a Web page about New York.
• Marquee text Text that slides in from the edge of the page (left or right) like ticker tape. You can create marquee text that slides in once and then stays put, repeats a specified number of times, or repeats continuously.
• Thumbnails Small images that link to larger images. Thumbnails enable users to decide whether they want to view a larger version of an image (which might take extra time to download).

Before you see how easily you can use FrontPage to create the preceding elements, let's give the FrontPage interface a quick once-over to preview where you're headed.

Strolling Past the FrontPage Window

As you'll soon see, taking advantage of many of the features in FrontPage requires you merely to select menu options, click toolbar buttons, and complete dialog boxes—activities you should be accustomed to if you're a veteran of other Office programs, such as Microsoft Word. Therefore, although FrontPage is considered a high-end HTML editor with advanced Web development capabilities, you should feel comfortable working within its interface pretty quickly—even if you've never composed so much as a single text-based Web page in an HTML editor. Regardless of any predevelopment jitters, we're confident that if you work through this chapter's project, you'll have a strong grasp of FrontPage's capabilities.

Click to view graphic

Click to view graphic

Figure 10-2   For the most part, you'll design a FrontPage Web page in Normal viewing. At times, you might need to view and edit a FrontPage Web page's source code in HTML view.

The Advantages of Using FrontPage

Mastering applications (such as HTML editors and word processors) entails knowing the typical functions available in the application. For example, you know that most word-processing applications have a Find feature. Thus, regardless of the word-processing application you're using, if you need to find text, you probably look automatically for the application's Find or Search tool. Similarly, with HTML editors, if you learn some of the capabilities of FrontPage—and it has a lot of them—you can benefit from that knowledge when you work in similar environments. So using FrontPage as a model, you'll be introduced to a selection of tasks that most HTML editors offer. That way, if you later decide to design Web pages using another HTML editor, you'll have a good idea of the types of features to look for. Or if you decide to design your Web pages in FrontPage, you'll be way ahead of the game.

FrontPage Server Extensions

You can control whether a Web page you're building includes components that require FrontPage Server Extensions. The easiest way to avoid extension-reliant features is to configure FrontPage to deactivate (and dim) features that require extensions. When you do this, you avoid including components that rely on your server's capabilities (because FrontPage won't allow you to insert extension-reliant components). To control the availability of features requiring FrontPage Server Extensions, do the following:

1. Display the Tools menu, click Page Options, and click the Compatibility tab.
2. Clear the Enabled With Microsoft FrontPage Server Extensions check box in the Servers section to deactivate features requiring extensions, and click OK.

After you complete the preceding steps, all features that require extensions appear as dimmed options in menus and dialog boxes, and any components already installed on the page are disabled and the related HTML code displays as gray text.

In this day and age, most hosting services support FrontPage Server Extensions. You'll definitely find some exceptions, including hosting services that support some but not all of the FrontPage Server Extensions. So if you're shopping for a hosting service and think you'll be using FrontPage extensions (such as for a FrontPage page hit counter), you'll want to ensure that your hosting service supports FrontPage Server Extensions before you plunk down any cash and commit to the hosting service's plan. For our purposes in this chapter, however, you don't need to have server space to create the project. For the most part, you build the site locally on your computer, so you won't need to worry about server space and FrontPage Server Extensions until you're ready to publish your Web site online (that is, "go live") or if you want to test the publishing feature in FrontPage by publishing the project site. We talk a little about publishing FrontPage sites later in this chapter, but you'll need to consult one of the references in the section "Additional Resources" for a full discussion of this topic as well as turn to Chapter 11 for some Web publishing tips.

At this point, you know enough to get started on the project. So let's forge ahead to our final frontier in this book's Web-site-development section and have some fun creating a Web site in FrontPage!

Planning Your FrontPage Web Site

After determining that an astronomy club site would suit our purposes, we decided that the site should consist of a custom home page linking to standard-format subpages. Using a nonstandard home page is a common Web site design technique used to make the home page stand out from the subpages. Because FrontPage offers so many options, we felt that showing a nonstandard home page made good design sense and would also enable us to show you a few additional features of FrontPage. To see our planning process, take a look at Figures 10-3 through 10-5. Figure 10-3 shows a sketch of the Big Dipper design we came up with for the home page. Figure 10-4 shows the sketch of the standard subpage layout. And finally, Figure 10-5 shows the astronomy club site's storyboard.

Click to view graphic

Figure 10-3   A sketch of the astronomy club's home page shows the big dipper containing links to the site's main subpages.

Click to view graphic

Figure 10-4   A sketch of a typical astronomy club subpage shows that the subpages will be structured differently from the home page.

Click to view graphic

Figure 10-5   Storyboarding the astronomy club's Web site clarifies the Web site's hierarchy.

Because of the relative complexity of the home page, you're going to create that page last. In this project, you'll start the design process by solidifying the site's standard layout for subpages by creating a subpage.htm document that you can use as a template to create the site's pages. But first, before you begin building Web pages, you need to tell FrontPage that you want to create a new Web.

Creating a New Web

1. Ensure that you've created a folder named C:\sky\images in which you've stored the images you downloaded from www.creationguide.com/projects/chapter10/images. Also be sure that you've downloaded mars.doc and thankyou.htm from www.creationguide.com/projects/chapter10/text and stored the files in C:\sky.
2. Open FrontPage, and close the blank document if a blank document displays.
3. If the Page Or Web task pane isn't displaying, open the File menu, select New and then click Page Or Web.
4. In the New section, click the Empty Web option and the Web Site Templates dialog box opens. Click in the Specify The Location Of The New Web text box, highlight the existing text, type C:\sky or click Browse and navigate to C:\sky, and then click OK. After some brief processing in which FrontPage adds FrontPage Server Extensions to your Web folder (C:\sky), you'll see the FrontPage title bar change to Microsoft FrontPage - C:\sky, which means you're ready for action.
5. In the Views bar along the left side of the FrontPage window, click the Reports icon. A site summary appears. This report displays because you have graphics stored in C:\sky\images and mars.doc and thankyou.htm stored in C:\sky.
NOTE
---

Although having all the images you plan to use on your Web site ready up front is convenient, it's not necessary. But because the astronomy club's graphics are readily available (and because this book is about creating Web pages, not Web graphics), you can simplify creating the Web in this project (or any project for that matter) by organizing the graphics for the site before you start creating it.
6. Click the Page icon in the Views bar and click Create A New Normal Page button in the Standard toolbar to open a blank page (notice the title bar text in FrontPage changes to Microsoft FrontPage - C:\sky\new_page_1.htm).

You're now ready to create a standard subpage that you can use as a template for the astronomy club's Web site.

Creating the Subpage Layout

Setting Page Properties

1. Right-click a blank area on the page and select Page Properties. The Page Properties dialog box opens.
2. In the Title text box on the General tab, type The Astronomy Club, as shown in Figure 10-6.


Click to view graphic

Figure 10-6   You can enter title text in the Page Properties dialog box.

3. Click the Background tab, select the Background Picture check box to specify that you want the page to use a background picture, and then click Browse.
4. In the Select Background Picture dialog box, double-click the images folder in C:\sky and then click bg.gif, as shown in Figure 10-7.
TIP
---

To see a thumbnail of a selected image in the Select Background Picture dialog box, click the Views drop-down arrow in the dialog box's toolbar and select Preview.
5. Click Open to select the background image and return to the Page Properties dialog box.


Click to view graphic

Figure 10-7   To assign a background image to your Web page, select bg.gif in the Select Background Picture dialog box.

6. Continuing on the Background tab, click the Enable Hyperlink Rollover Effects check box, and then click the Rollover Style button. The Font dialog box opens. In the Font area, retain the (Default Font) selection, and in the Font Style text box, select Normal.
7. Click the Color drop-down box, click the red color square (red's the default color), and click OK. This setting specifies to display text links in red whenever a user's mouse cursor hovers over the text link.
8. Next on the Background tab, click the Background drop-down arrow and click the black color box; then click the Text drop-down arrow and click the black color box.
NOTE
---

Step 8 doesn't contain a mistake—you should set both the background and the text colors to black. For this project, most of the text you enter will display in white table cells, so to save yourself time later on, you should set the default text color to black at this point even though the background is set to black as well.
9. Click the Hyperlink drop-down arrow and click the blue color box; click the Visited Hyperlink drop-down arrow and click the purple color box; then click the Active Hyperlink drop-down arrow and click the red color box. The Background tab should now look like the one shown in Figure 10-8.
LINGO
---

An active hyperlink refers to a hyperlink that's being clicked. If you set an active hyperlink color property to red, the hyperlink will appear red while the user clicks the link.


Click to view graphic

Figure 10-8   The completed Background tab shows the default colors you selected for the current Web page.

Even though the project uses the default hyperlink colors, you should click each component's color boxes to replace the "automatic" color setting for each element. If you don't replace the automatic colors with specified colors, some browsers might insert custom hyperlink colors that might not work well with your site—for example, if a user's "visiting" hyperlinks are set to black, the links will disappear into the black background after the user clicks them.

10. Click OK to implement the Page Property settings and close the Page Properties dialog box.

Saving Your Work

1. On the File menu, click Save.
2. In the Save As dialog box, click the Change Title button (located in the lower-right portion of the dialog box) to open the Set Page Title dialog box, and change the text to The Astronomy Club: Generic Page, as shown in Figure 10-9. Then click OK.


Click to view graphic

Figure 10-9   You configure the Set Page Title dialog box to modify a page's title text.

3. In the File Name text box, type subpage, and then click Save.

Adding the Logo and the Title Banner Graphic

1. In the C:\sky\subpage.htm document (which should be opened in FrontPage if you're continuing the project from the previous section), click the Insert menu, point to Picture, and then choose From File.
TIP
---

If you closed subpage.htm, you can reopen the document by opening FrontPage, clicking the Open icon (or clicking Open on the File menu), navigating to C:\sky in the Open dialog box, and double-clicking subpage.htm.
2. In the Picture dialog box, display the contents of the images folder in the C:\sky\images folder, select the logo.gif file, and click Insert (or, simply double-click the logo.gif file). The logo (which is Saturn and a few miscellaneous moons) displays on the page.
3. On the Standard toolbar, click the Insert Picture From File button, and double-click the titlebar.gif file. The title bar image is inserted next to the logo.
4. Right-click the logo.gif image (the Saturn image), select Picture Properties, click the General tab, click in the Text box in the Alternative Representations section, type Astronomy Club Logo, and then click OK.
5. Right-click the titlebar.gif image, select Picture Properties, click the General tab, click in the Text box in the Alternative Representations section, type Astronomy Club, and then click OK.
6. Right-click the logo image again, select Hyperlink, type index.htm in the Address text box, and then click OK.

At this point, the logo is linked to the (future) home page, and both graphics are inserted and left-aligned by default. In most browsers, the left alignment will help keep the graphics side by side, but because two images span the top of your page, the title bar could feasibly wrap to the next line in some browsers if users resized their browser windows to a very small size (in which case the logo would display on the top line and the title bar would display flush-left below the logo graphic on the next line—not the effect you're after for this Web site). Just to be safe, you can add the "no break" (<NOBR></NOBR>) HTML tags to your page's source code to specify that the two graphics should be kept together regardless of the browser's window size.

7. In FrontPage, click the HTML view option. The HTML source code displays in FrontPage's workspace window.

Before you add the <NOBR></NOBR> tags, let's make working in FrontPage easier by enabling FrontPage to wrap the code text.

8. Click Tools, click Page Options, and display the HTML Source tab.
9. In the General section, click Reformat Using the Rules Below, select the Allow Line Breaks Within Tags check box in the Formatting section, and click OK.

Now you'll be able to view your HTML code without having to scroll left and right as much, which means you're ready to add the <NOBR></NOBR> tags.

10. In the source code, click after the opening paragraph tag (<p>), type <NOBR>, click before the closing paragraph tag (</p>), and type <NOBR>. Figure 10-10 shows the newly added HTML tags (in orange) that will ensure that the graphics will always display next to each other.


Click to view graphic

Figure 10-10   Adding <NOBR> and </NOBR> to a page's source code ensures that a line break won't separate particular elements.

11. Click Save (your capped code will automatically change to all lowercase code), and then click the Normal view tab to redisplay the graphical representation of subpage.htm in your working area. Your page should display as shown in Figure 10-11.


Click to view graphic

Figure 10-11   At this point the subpage.htm includes background, logo, and title bar images.

Inserting a Table

1. Press your down arrow key once to position your cursor below the graphics, and press Shift+Enter to position your cursor where you want to insert the table.
2. In the Standard toolbar, click the Table button, drag to select two rows and five columns worth of boxes on the pop-up window, and then release to insert the table into your page. Figure 10-12 illustrates the table creation process. As you can see, the table borders display when you first insert a table. In effect, the table's borders are set to display as 1-pixel wide. Later, after you fill the table with content, you'll change the table's borders setting to 0 to hide the table's lines.


Click to view graphic


Click to view graphic

Figure 10-12   By default, FrontPage creates tables with a 1-pixel border.

3. Right-click anywhere on the table, choose Table Properties, ensure that Cell Padding is set to 0, Cell Spacing is set to 0, Specify Width is set to 100 percent, the Size setting under Borders is set to 1, and click OK.
4. Right-click the cell in row 1, column 1. On the shortcut menu, select Cell Properties.
5. In the Cell Properties dialog box, set the Horizontal Alignment option to Center, set Vertical Alignment to Top, ensure that the Specify Width check box is selected, enter 130 in the Specify Width text box, and select the In Pixels option, as shown in Figure 10-13.


Click to view graphic

Figure 10-13   You use the Cell Properties dialog box to configure a table cell.

6. Click OK to activate the settings.
TIP
---

Don't forget to save often while you work!
7. Right-click the cell in row 2, column 1. On the shortcut menu, select Cell Properties.
8. In the Cell Properties dialog box, set the Horizontal Alignment Option to Center, set Vertical Alignment to Bottom, set the Specify Width setting to 130 pixels, select the Specify Height check box, set the Specify Height setting to 15 pixels, and click OK.
9. Right-click the cell in row 1, column 2. Select Cell Properties. Set the Horizontal Alignment Option to Left, set Vertical Alignment to Top, set the Specify Width setting to 1 pixel, and click OK (don't worry if you don't see a change in your table just yet— the cell won't resize until you format the cell below it as well).
10. Right-click the cell in row 2, column 2. Select Cell Properties. Set the Horizontal Alignment Option to Left, set Vertical Alignment to Bottom, set the Specify Width setting to 1 pixel, select the Specify Height check box, set the Specify Height setting to 15 pixels, and click OK. (Now the second column in your table should be 1-pixel wide.)
11. Right-click the cell in row 1, column 3. On the shortcut menu, select Cell Properties, set Horizontal Alignment to Left, set Vertical Alignment to Top, set the Specify Width setting to 15 pixels, specify the Background Color as White, and click OK.
12. Right-click the cell in row 2, column 3. On the shortcut menu, select Cell Properties, set Horizontal Alignment to Left, set Vertical Alignment to Bottom, set the Specify Width setting to 15 pixels, click the Specify Height check box, set the Specify Height setting to 15 pixels, specify the Background Color as White, and click OK.
13. Right-click the cell in row 1, column 4. On the shortcut menu, select Cell Properties, set Horizontal Alignment to Left, set Vertical Alignment to Top, clear the Specify Width check box (don't set a width for this column because you'll want it to resize to fit each user's browser window), specify the Background Color as White, and click OK.
14. Right-click the cell in row 2, column 4. On the shortcut menu, select Cell Properties, set Horizontal Alignment to Left, set Vertical Alignment to Bottom, clear the Specify Width check box, select the Specify Height check box, set the Specify Height settings to 15 pixels, specify the Background Color as White, and click OK.
15. Right-click the cell in row 1, column 5. On the shortcut menu, select Cell Properties, set Horizontal Alignment to Right, set Vertical Alignment to Top, set the Specify Width setting to 15 pixels, specify the Background Color as White, and click OK.
16. Right-click the cell in row 2, column 5. On the shortcut menu, select Cell Properties, set Horizontal Alignment to Right, set Vertical Alignment to Bottom, set the Specify Width setting to 15 pixels, set the Specify Height setting to 15 pixels, specify the Background Color as White, and click OK. Your table should now display as shown in Figure 10-14.


Click to view graphic

Figure 10-14   You can modify the internal layout of a table by adjusting cell properties.

Notice in Figure 10-14 that the right set of table cells displays as a white rectangular area. You're now going to add small graphics to the white area's corner cells to create the illusion that the table has rounded corners:

17. Click in the cell in row 1, column 3. On the Insert menu, point to Picture and choose From File. Select the corner_top_left.gif image in the C:\sky\images folder, and then click OK.
TIP
---

To get an idea of how the corner graphics work, view the small curved graphics in a paint program or preview the image in the Insert Picture dialog box. You can easily imagine how the small curve can create the illusion of a rounded corner when it's inserted into a table cell.
18. Click in the cell in row 2, column 3. Click Insert Picture From File on the Standard toolbar, and double-click corner_botm_left.gif image in the C:\sky\images folder.
19. Right-click the newly inserted corner_botm_left.gif image. On the shortcut menu, click Picture Properties, click the Appearance tab if necessary, select Bottom in the Alignment drop-down list, and click OK.
20. Click in the cell in row 1, column 5 (because you formatted the cell to align information to the right, your cursor will appear to the far right of the cell). Click Insert Picture From File on the Standard toolbar, and double-click corner_top_right.gif image in the C:\sky\images folder.
21. Click in the cell in row 2, column 5. Click Insert Picture From File, and double-click corner_botm_right.gif image in the C:\sky\images folder.
22. Right-click the newly inserted corner_botm_right.gif image. On the shortcut menu, click Picture Properties, click the Appearance tab if necessary, select Bottom in the Alignment drop-down list, and click OK.
23. Click Save on the toolbar. At this point, your table should display as shown in Figure 10-15.


Click to view graphic

Figure 10-15   Small graphics added to table cells create the appearance of rounded table corners.

Adding Navigation Buttons

1. Click in the cell in row 1, column 1.
2. On the Insert menu, point to Web Component, select Dynamic Effects in the Component Type section, choose Hover Button in the Choose An Effect section (notice the component's description displays below the list boxes in the Insert Web Component dialog box; as you click effects, the description changes), and click Finish.
3. Configure the Hover Button Properties dialog box, as shown in Figure 10–16, using the following settings:

Option	Setting
Button Text	Home
Link To	index.htm
Button Color	Navy
Effect	Glow
Width	120
Background Color	Automatic
Effect Color	Blue
Height	24


Click to view graphic

Figure 10-16   FrontPage enables you to create hover buttons by configuring the Hover Button Properties dialog box.

4. Click OK.
5. Press Enter. On the Standard toolbar, click Web Component, ensure that Dynamic Effects and Hover Button are selected, and click Finish. Type About Us in the Button Text text box, type aboutus.htm in the Link To text box, specify the remaining settings as outlined in step 3, and then click OK.
6. Press Enter. Click Web Component, ensure that Dynamic Effects and Hover Button are selected, and click Finish. Type Contact Us in the Button Text text box, type contact.htm in the Link To text box, specify the remaining settings as outlined in step 3 (which are the default settings), and then click OK.
7. Press Enter. Click Web Component, ensure Dynamic Effects and Hover Button are selected, and click Finish. Type Meetings in the Button Text text box, type meetings.htm in the Link To text box, specify the remaining settings as outlined in step 3, and then click OK.
8. Press Enter. On the Insert menu, click Web Component, ensure that Dynamic Effects and Hover Button are selected, and click Finish. Type Sky Guide in the Button Text text box, type skyguide.htm in the Link To text box, specify the remaining settings as outlined in step 3, and then click OK.
9. Press Enter. Click Web Component, ensure that Dynamic Effects and Hover Button are selected, and click Finish. Type Photo Gallery in the Button Text text box, type gallery.htm in the Link To text box, specify the remaining settings as outlined in step 3, and then click OK.
10. Press Enter. Click Web Component, ensure that Dynamic Effects and Hover Button are selected, and click Finish. Type Astronomy Links in the Button Text text box, type links.htm in the Link To text box, specify the remaining settings as outlined in step 3, and then click OK.
11. Click Save. Your subpage should display in Normal view and Preview view as shown in Figure 10-17.


Click to view graphic


Click to view graphic

Figure 10-17   Your table and navigation buttons display in Normal view but not yet in Preview view.

As you can see in Figure 10-17, FrontPage 2002 encounters a little glitch when you insert hover buttons; basically, you can't preview your hover buttons in Preview view automatically (notice the broken link images in the Preview screen shown in Figure 10-17). In time, Microsoft might offer a patch to correct this, but for now you have two workaround choices:

• Preview your pages in your browser by selecting Preview In Browser on the File menu, choosing the browser you want to use, and clicking Preview.
• Modify each hover button's code to correct the problem.

If you choose to preview your Web pages in your browser throughout the remainder of this exercise, go ahead and skip to the next section and choose Preview In Browser on the File menu or click the Preview In Browser button on the Standard toolbar each time we suggest that you preview your Web page. If you prefer to tweak your HTML code a little to avoid opening your browser throughout the chapter, we present the steps here. The steps are manageable, and this is a prime example of how knowing a little HTML coding can help when you're working with HTML editors.

12. Click HTML at the bottom of the window to display your page's HTML code.

The code for each hover button appears between an <applet></applet> tag set, so you should see seven <applet></applet> tag sets in HTML. You can tell which button an applet applies to by looking at the value attribute for the parameter that defines the button's text. For example, following is the entire applet code for one button; notice that the fifth line indicates that this applet applies to the Home button:

<applet code="fphover.class" codebase="./" width="120" height="24">

   <param name="color" value="#000080">

   <param name="hovercolor" value="#0000FF">

   <param name="textcolor" value="#FFFFFF">

   <param name="text" value="Home">

   <param name="effect" value="glow">

   <param name="url" valuetype="ref" value="index.htm">

</applet><p>

The problem in the current hover button code lies in the codebase="./" attribute in the first line of each <applet> tag. This attribute tells FrontPage to look in a subdirectory for the file fphover.class. In actuality, FrontPage stores the class file in the same folder as your Web page, so there's no need for browsers to look in a subdirectory for the class file. Although this explanation might sound a tad obtuse, the fix is simple—you just need to delete codebase="./" in each <applet> tag (see Figure 10-18, where we've highlighted some of the instances of the codebase="./" attribute), as described next.

13. In the first <applet> tag, select codebase="./" as shown in Figure 10-18, and press Backspace (or right-click and choose Delete).
14. Repeat step 13 for each button's applet code (remember— you have seven buttons, so you should delete codebase="./" seven times).
15. Save your file and click Preview at the bottom of the FrontPage window. After you save the code changes, your hover buttons should display in Preview mode as expected.


Click to view graphic

Figure 10-18   If you want to preview your hover buttons in FrontPage's Preview mode, you have to slightly tweak each button's code.

TIP
---

If you encounter problems while working in FrontPage (or other Microsoft application), a terrific resource to turn to is Microsoft's online Knowledge Base. To access the Knowledge Base, display http://support.microsoft.com in your browser, and click the Search The Knowledge Base link.

Adding Footer Information below the Table

1. In Normal view, click in the area below the table, click the drop-down arrow on the Font Color button in the Formatting toolbar, and click the white color box.
2. Type (including the pipe symbols) Home | About Us | Contact Us | Meetings | Sky Guide | Photo Gallery | Links
3. Select the line of text you just typed, display the font drop-down list in the Formatting toolbar, and choose Comic Sans (or Comic Sans MS).
4. Click the Center button on the Formatting toolbar to center the text.
5. Click at the end of the line of text, press Enter, and then type Questions or comments about the Web site? E-mail the Webmaster.
6. Press Enter, display the Font Size drop-down list in the Formatting toolbar, choose 1 (8 pt), and then type Copyright 2002 - [your name or organization's name].
7. Press Enter, and click Save in the Standard toolbar.

You're now ready to link the navigation bar's text and add a Mail To link to the E-mail the Webmaster text:

8. Select Home in the text-based navigation bar, right-click the selected text, and click Hyperlink.
9. In the Insert Hyperlink dialog box, ensure that the Look In drop-down list shows sky, click in the Address text box, type index.htm (be sure to delete the http:// if it displays), as shown in Figure 10-19, and then click OK or press Enter.
TIP
---

You can also press Ctrl+K to open the Insert Hyperlink dialog box.


Click to view graphic

Figure 10-19   The Insert Hyperlink dialog box enables you to easily configure hyperlinks in FrontPage.

TIP
---

If you want to add a ScreenTip to your text hyperlinks, click the ScreenTip button in the Insert Hyperlink dialog box.
10. Repeat steps 8 and 9 using the following parameters:

Select and Right-Click	Enter in the Address Text Box
About Us	aboutus.htm
Contact Us	contact.htm
Meetings	meetings.htm
Sky Guide	skyguide.htm
Photo Gallery	gallery.htm
Links	links.htm

11. Select the E-mail The Webmaster text, right-click the selected text, and click Hyperlink to open the Insert Hyperlink dialog box.
12. In the Insert Hyperlink dialog box, click the E-Mail Address button in the Link To section, as shown in Figure 10-20.


Click to view graphic

Figure 10-20   You can create hyperlinks that automatically open a preaddressed message form.

13. Enter your e-mail address in the E-mail Address text box, enter The Astronomy Club in the Subject text box (see Figure 10-20), click OK, and then save your work. The lower portion of your subpage template should appear as shown in Figure 10-21, which shows the Preview view (remember, if you didn't modify your hover button's applet code, you need to choose Preview In Browser on the File menu to properly preview your subpage Web page).


Click to view graphic

Figure 10-21   The subpage's footer information provides visitors with text links, Webmaster access, and copyright information.

14. Close subpage.htm.

You now have a subpage template ready for use.

Last Updated: October 31, 2002

Top of Page