Easy Web Design, 3rd Edition
  EWD Projects :: Oldschool
 

Creating Web Sites with FrontPage 2002


Creating Web Sites with FrontPage 2002


Creating Web Sites with FrontPage

When you watch the news on TV, the only "equipment" you need is the TV and a place to sit. But what about when you rent a video or order a pay-per-view movie that's filled with cool special effects and has an awesome soundtrack? Instead of turning to grandma's 13-inch hand-me-down TV, you'd probably prefer the ultimate in home entertainment systems: You know, the rare setup that can be easily controlled by a single remote control and has an ultra-clear big-screen TV, digital cable, Dolby stereo, and surround sound components artfully blending into the shadows—all strategically placed for optimal viewing and listening pleasure from the comfortable folds of an enormous leather couch. Granted, these "extras" aren't strictly necessary, but they sure can make a big difference sometimes. The same can be said of HTML editors. Notepad (a basic text editor) can be likened to the "TV, seat, and remote control" way of creating Web pages, whereas FrontPage provides the "luxury home entertainment system" approach to Web site development. In this chapter, we're going for the "extras."

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.gifbg.gifmars.jpg
    b_aboutus2.gifbigdip1.gifneptune.jpg
    b_contact.gifbigdip2.gifsaturn.jpg
    b_contact2.gifbigdip3.gifsolarsystem.gif
    b_gallery.gifbigdip4.gift_aboutus.gif
    b_gallery2.gifbigdip5.gift_contact.gif
    b_links.gifbullet_star.gift_gallery.gif
    b_links2.gifcorner_botm_left.gift_links.gif
    b_meetings.gifcorner_botm_right.gift_meetings.gif
    b_meetings2.gifcorner_top_left.gift_skyguide.gif
    b_skyguide.gifcorner_top_right.giftitlebar-home.gif
    b_skyguide2.giflogo.giftitlebar.gif

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
Click to view graphic

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

top of page

Introducing FrontPage: A Full-Featured HTML Editor

For this book's final project, we show you how to use FrontPage to create a fairly advanced Web site. FrontPage is a full-featured HTML editor that you can purchase as a stand-alone application or as part of Microsoft Office XP Developer. As you'll see in this chapter, using a true HTML editor such as FrontPage opens numerous doors to Web page design for beginning designers. Full-scale HTML editors also provide some handy shortcuts for more seasoned designers. Our goal is to give you firsthand experience in creating a Web site that uses a number of Web page elements that are easily implemented using full-fledged HTML editors. These elements include (but are not limited to) the following:

  • 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.

top of page

Strolling Past the FrontPage Window

Much of the FrontPage interface is similar to that of other Office applications. In other words, when you first open FrontPage, you'll probably feel that it looks quite familiar—that is, if you're used to working in Office. In fact, at first glance, you'll see the Standard and Formatting toolbars across the top, menu bar options, a workspace area, and a status bar along the bottom. But in addition to the standard fare, FrontPage offers a couple key interface options to assist you in creating Web pages. Namely, the FrontPage interface includes a Views bar and three view options—Normal, HTML, and Preview—as shown on the left in Figure 10-2. These elements will help you track the multiple files and folders of your Web site, preview Web pages during development, edit HTML source code, manage hyperlinks, and more. For example, you can use the HTML view to access a Web page's source code, as shown on the right in Figure 10-2, and the Preview view to preview Web pages as you build them. You'll be using all three views in this chapter's project.

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

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.

top of page

The Advantages of Using FrontPage

Like all full-service HTML editors, FrontPage sports some definite advantages. FrontPage is fairly easy to use (after you know where to look and what you're looking for), it provides many advanced design features, and it creates HTML code automatically. Using FrontPage, you can easily create professional-looking Web pages with just a few clicks. Throughout the project in this chapter, we highlight a lot of FrontPage's functionality. Our reasoning for covering a wide range of FrontPage capabilities also includes a hidden benefit: You'll learn how to create Web pages in FrontPage, and you'll also learn about HTML editors in general.

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.

top of page

FrontPage Server Extensions

The final issue we need to touch on before we get going on the chapter project is FrontPage Server Extensions, which are specific to FrontPage. Before the onset of advanced HTML editors, developers had to write, buy, or copy code to enable certain Web page features, such as forms, counters, Java programs, and so forth. FrontPage provides the code for many of these features, enabling designers to easily include functionality that requires some coding—without having to manually insert code or acquire the code in some other way. The catch is that your server (or your hosting service) needs to support FrontPage Server Extensions. So before you go crazy using the advanced design features of FrontPage, check with your Web hosting service to verify that they support 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!

top of page

Planning Your FrontPage Web Site

When we initially planned this chapter's project site, we intended to create a team page featuring a fictitious softball team. Unfortunately, we couldn't bribe enough of our friends to pose for the team picture, so we opted to create a Web site for an astronomy club instead. We ended up incorporating many of the functionalities we had originally planned for the softball site into the astronomy site. For example, instead of making an image map out of a team picture, in which you could click each person's head to access a stats or personal page, we used a solar system image map in which you can click each planet to access a page of information about that planet. We hope that as you experiment with the techniques we present in this project, you'll begin to think of ways you can vary them to create custom Web sites.

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
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
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
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.

top of page

Creating a New Web

As we just mentioned, the first step to designing a Web site is to express your Web-page-building intentions to FrontPage by creating a new Web. To do so, follow these steps:

  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.
  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.

top of page

Creating the Subpage Layout

In this section you'll create a standard subpage layout that you'll be able to copy and use to create foundation pages for each subpage in the site. First you'll set the subpage's page properties.

top of page

Setting Page Properties

To begin, ensure that you have a blank workspace displaying in FrontPage. If you followed the steps in the preceding section, you should be set. Here are the steps to create a basic subpage:

  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.
  3. Click to view graphic
    Click to view graphic

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

  4. 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.
  5. 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.
  6. Click Open to select the background image and return to the Page Properties dialog box.
  7. Click to view graphic
    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.

  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. Click to view graphic
    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.

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

top of page

Saving Your Work

Before you get too far along, you should save your work. You'll be able to use the same basic settings for all subpages, so you'll save the page you're currently creating as a generic template that you can copy to create all the site's subpages. To save the current file, follow these steps:

  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.
  3. Click to view graphic
    Click to view graphic

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

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

top of page

Adding the Logo and the Title Banner Graphic

In this section you'll continue to configure the subpage template by inserting the astronomy club's logo and title banner graphic, which appears along the top of every page:

  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.
  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.
  7. 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.

  8. In FrontPage, click the HTML view option. The HTML source code displays in FrontPage's workspace window.
  9. Before you add the <NOBR></NOBR> tags, let's make working in FrontPage easier by enabling FrontPage to wrap the code text.

  10. Click Tools, click Page Options, and display the HTML Source tab.
  11. 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.
  12. 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.

  13. 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.
  14. Click to view graphic
    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.

  15. 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.
  16. Click to view graphic
    Click to view graphic

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

top of page

Inserting a Table

In this section you'll create the foundation table used to contain the body text of each subpage in the astronomy club's Web site. Take your time going through the upcoming steps—it's easier to configure your table correctly the first time around instead of trying to find an erroneous setting. Furthermore, although this section might seem to include a few too many steps, the steps throughout are fairly repetitious, so the process isn't overly complex. (In other words, don't let the number of steps get to you.) When you create your own tables, you'll probably have to experiment with a few settings before you get your table just right—which is exactly what we do, too. To create your table for this project, follow these steps:

  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.
  3. Click to view graphic
    Click to view graphic

    Click to view graphic
    Click to view graphic

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

  4. 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.
  5. Right-click the cell in row 1, column 1. On the shortcut menu, select Cell Properties.
  6. 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.
  7. Click to view graphic
    Click to view graphic

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

  8. Click OK to activate the settings.
  9. Right-click the cell in row 2, column 1. On the shortcut menu, select Cell Properties.
  10. 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.
  11. 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).
  12. 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.)
  13. 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.
  14. 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.
  15. 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.
  16. 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.
  17. 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.
  18. 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.
  19. Click to view graphic
    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:

  20. 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.
  21. 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.
  22. 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.
  23. 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.
  24. 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.
  25. 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.
  26. Click Save on the toolbar. At this point, your table should display as shown in Figure 10-15.
  27. Click to view graphic
    Click to view graphic

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

top of page

Adding Navigation Buttons

Now that the table is created, you're ready to start filling the table's cells. First on the agenda is to add some navigation buttons to the first column in the table. FrontPage offers some nice special-effects buttons, which you'll use in this project:

  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:
  4. OptionSetting
    Button TextHome
    Link Toindex.htm
    Button ColorNavy
    EffectGlow
    Width120
    Background ColorAutomatic
    Effect ColorBlue
    Height24

    Click to view graphic
    Click to view graphic

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

  5. Click OK.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. Click Save. Your subpage should display in Normal view and Preview view as shown in Figure 10-17.
  13. Click to view graphic
    Click to view graphic

    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.

  14. Click HTML at the bottom of the window to display your page's HTML code.
  15. 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.

  16. In the first <applet> tag, select codebase="./" as shown in Figure 10-18, and press Backspace (or right-click and choose Delete).
  17. Repeat step 13 for each button's applet code (remember— you have seven buttons, so you should delete codebase="./" seven times).
  18. 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.
  19. Click to view graphic
    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.

top of page

Adding Footer Information below the Table

The final components you'll add to the subpage template before you begin to create actual site pages are the bottom-of-the-page elements: a text-based navigation bar and copyright information. As we discuss earlier in the book, your Web pages should include text-based navigation links for users who turn off graphics or access the Web with nongraphical browsers. Furthermore, you should include copyright information to protect your creation. To add bottom-of-the-page information to the astronomy club's Web, follow these steps:

  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.
  8. You're now ready to link the navigation bar's text and add a Mail To link to the E-mail the Webmaster text:

  9. Select Home in the text-based navigation bar, right-click the selected text, and click Hyperlink.
  10. 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.
  11. Click to view graphic
    Click to view graphic

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

  12. Repeat steps 8 and 9 using the following parameters:
  13. Select and Right-ClickEnter in the Address Text Box
    About Usaboutus.htm
    Contact Uscontact.htm
    Meetingsmeetings.htm
    Sky Guideskyguide.htm
    Photo Gallerygallery.htm
    Linkslinks.htm

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

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

  17. 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).
  18. Click to view graphic
    Click to view graphic

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

  19. Close subpage.htm.

You now have a subpage template ready for use.

Using the Subpage Layout to Build Web Pages

Now you're going to use subpage.htm to create a couple subpages for the astronomy club's Web. The site requires six main subpages:

  • aboutus.htm
  • contact.htm
  • meetings.htm
  • skyguide.htm
  • gallery.htm
  • links.htm

In this section you'll complete the contact.htm and skyguide.htm as well as a subpage (mars.htm) of the skyguide.htm page. Although we don't walk you through the creation of all the subpages, the images you downloaded from www.creationguide.com/projects/chapter10/images include title bar text graphics so that you can complete all the subpages on your own if you want to. We chose to show you how to complete mars.htm, skyguide.htm, and contact.htm because creating each of those pages includes information on how to add particular functionality to your Web pages, as follows:

  • mars.htm Shows you how to use the thumbnail feature in FrontPage as well as copy text from a Word document and modify cascading style sheets. Furthermore, this page links to the Sky Guide page (skyguide.htm).
  • skyguide.htm Teaches you how to create an image map in FrontPage.
  • contact.htm Provides a quick overview of how to create a working form in FrontPage.

After you create the three subpages described in this project, you'll be fully prepared to experiment and complete the remaining subpages on your own.

top of page

Preparing to Create Subpages

Preparing to create subpages is straightforward now that you've laid such a solid groundwork by creating the subpage.htm template. To use the template, you simply save copies of the subpage.htm file with different names and title text, as follows:

  1. Open C:\sky\subpage.htm in FrontPage.
  2. Click Save As on the File menu to open the Save As dialog box and ensure that the Save In text box displays the C:\sky folder.
  3. In the Page Title section, click the Change Title button, type The Astronomy Club: About Us in the Set Page Title dialog box, and click OK.
  4. In the Filename text box, type aboutus.htm, and click Save. Notice that the Web page's tab changes (below the toolbars) to reflect the new name of the current document.
  5. Without closing the current document (which is aboutus.htm at this point), repeat steps 2 through 4 using the filenames and title text shown in the following table:
  6. Save As FilenamePage Title Text
    contact.htmThe Astronomy Club: Contact Us
    meetings.htmThe Astronomy Club: Meetings
    skyguide.htmThe Astronomy Club: Sky Guide
    gallery.htmThe Astronomy Club: Gallery
    links.htmThe Astronomy Club: Links
    mars.htmThe Astronomy Club: Mars

  7. Close FrontPage, open your C:\sky folder, and verify that the folder contains a file for each Web page in your Web site.
  8. After you verify the list of newly created files, close your C:\sky folder.

top of page

Adding Text and a Title Bar Graphic

After you create new files based on the subpage.htm file, you can open the new documents in FrontPage and customize the files' contents. The first subpage you'll create is an informational page about the planet Mars. In this section you'll add text and a title bar graphic:

  1. Open FrontPage, click the Open button on the toolbar, display the contents of C:\sky in the Open dialog box, and double-click the mars.htm file.
  2. Click to the right of the title bar graphic, press Shift+Enter, click Insert Picture From File on the Standard toolbar, display the contents of C:\sky\images, and double-click t_skyguide.gif. The mars.htm page is a subpage of the Sky Guide, so it should display the Sky Guide subtitle bar.
  3. With your cursor still located at the end of the Sky Guide graphic, press your Delete key twice to bring the table closer to the t_skyguide.gif image.
  4. Right-click the t_skyguide.gif image, select Picture Properties, click the General tab, type Sky Guide in the Alternative Representations Text box, and click OK.
  5. Now you'll add some text to the Web page's table.

  6. Open C:\sky, and then double-click mars.doc (not mars.htm) to open the Word document.
  7. Arrange your desktop so that you can see some portion of the Word document's text as well as mars.htm in FrontPage, similar to the layout shown on the left in Figure 10-22.
  8. Click within the Word document, and press Ctrl+A to select the entire contents of the Word document.
  9. Drag the selected text in the Word document into the large white portion of the table in mars.htm (which is technically the fourth cell in the first row of the table). The text should fill the table cell, as shown on the right in Figure 10-22.
  10. Click to view graphic
    Click to view graphic

    Click to view graphic
    Click to view graphic

    Figure 10-22   For this project you can drag text from a Word document into your Web page. Because you did not enter width or height limitations for the cell, the cell expands to accommodate the copied text.

  11. Save your Web page, and close the Word document.

top of page

Modifying Cascading Style Sheet (CSS) Settings

To help format your Web pages' contents, you can create external and embedded cascading style sheets from within FrontPage. An external style sheet means that formatting code is placed in a separate document that your Web page links to, while an embedded style sheet places formatting code within the current Web page's source code.

When you use style sheet settings, you define the style for a particular page element—such as a heading 3 or bulleted list item—and then browsers (and FrontPage) will automatically apply the style settings to all instances of the element. For instance, if you want all heading 3 type headings to display in blue, you only have to modify the style settings for the h3 element. After you save the modified settings, all heading 3s will appear blue.

In this section you'll use FrontPage to customize styles by defining an embedded style sheet. Therefore, the styles you define on the mars.htm page will only apply to the mars.htm page. To define embedded styles in FrontPage, follow these steps:

  1. Ensure that mars.htm displays in Normal view in FrontPage, and then click Style on the Format menu.
  2. In the Style dialog box, click the List drop-down arrow, and choose HTML tags. A list of HTML tags displays in the Styles list.
  3. First, you will specify to display all heading 3 elements in blue and 12 point.

  4. In the Styles list, choose h3, as shown in Figure 10-23.
  5. Click to view graphic
    Click to view graphic

    Figure 10-23   You can define HTML styles by selecting the style you want to format from the list of HTML tags in the Style dialog box.

  6. Click Modify, click Format in the Modify Style text box, and click Font.
  7. In the Font dialog box, click 12 pt in the Size list box, click the Color drop-down arrow, click the blue color square, and click OK three times to close the open dialog boxes.
  8. Both the Description: and the Planetary Data: headings should now appear blue and in 12 point. Now, you'll replace the standard black bullets in the bulleted list with custom bullets:

  9. Click Style on the Format menu, click HTML tags in the List box, select li in the Syles list, and click Modify.
  10. In the Modify Style dialog box, click Format, and click Numbering.
  11. In the Bullets And Numbering dialog box, click Browse, display the contents of the C:\sky\images folder in the Select Picture dialog box, and double-click bullet_star.gif.to complete the Bullets And Number dialog box.
  12. Click OK three times to close the open dialog boxes. The bulleted list on your page should display with star images in Normal view as shown in Figure 10-24, and your source code should now include embedded styles as shown in Figure 10-25 (with the orange color highlighting the formatting information you added in the preceding steps).
  13. Save mars.html and ensure that it displays in Normal view in preparation for the next section.
  14. Click to view graphic
    Click to view graphic

    Figure 10-24   The newly defined styles colors heading 3s blue and displays the bulleted list with star bullets.

    Click to view graphic
    Click to view graphic

    Figure 10-25   FrontPage automatically generates embedded style information.

top of page

Inserting a Thumbnail Image

Now that you've imported and formatted text in your Mars Web page, you're ready to add an image. In this section you'll insert a thumbnail image of Mars, which means viewers will be able to click a small image of Mars to view a larger version of the picture. Providing a thumbnail image speeds your page's download time and provides viewers the option to download a larger version of the picture if they desire. To insert a thumbnail image in FrontPage, follow these steps:

  1. In FrontPage, click to the right of Our Solar Sytem: Mars (the top line of the inserted text), click Insert Picture From File on the Standard toolbar, and double-click the mars.jpg image from the C:\sky\images folder. A very large picture of Mars takes over your view in FrontPage.
  2. Click Mars and then display the Pictures toolbar (if the toolbar doesn't display automatically, choose Toolbars on the View menu, and then choose Pictures). Figure 10-26 shows the Mars picture along with the Pictures toolbar.
  3. Click to view graphic
    Click to view graphic

    Figure 10-26   You can create a thumbnail image of Mars directly in FrontPage.

  4. With the picture of mars still selected, click the Auto Thumbnail button in the Pictures toolbar (it's the third button from the left). A 100-by-100-pixel version of Mars is created from the larger version of mars.jpg. The smaller graphic is automatically named mars_small.jpg.
  5. Right-click the thumbnail picture of Mars, choose Picture Properties, select the Appearance tab if necessary, and configure the properties as follows:
  6. OptionSetting
    AlignmentRight
    Border Thickness0
    Horizontal Spacing15
    Vertical Spacing10

  7. Click OK, and then click in the text to deselect the graphic.
  8. Right-click anywhere on the table and choose Table Properties. The Table Properties dialog box opens.
  9. In the Borders section, type 0 in the Size text box, and then click OK.
  10. Click Save, click Change Folder in the Save Embedded Files dialog box, double-click the images folder, click OK twice, and then click the Preview view tab (or choose Preview In Browser on the File menu). Your mars.htm page should now look similar to Figure 10-27, and the small graphic is automatically linked to mars.jpg.
  11. Click to view graphic
    Click to view graphic

    Click to view graphic
    Click to view graphic

    Figure 10-27   If you click your thumbnail graphic while previewing your page, a large image of Mars should display.

  12. Close mars.htm.

Congratulations! You've completed your first subpage for the astronomy club's Web site. No reason to stop now—in the next section, you'll learn how to add an image map.

top of page

Creating an Image Map

In this section you'll create an image map on the Sky Guide's main subpage. You'll create the image map from a picture of the solar system. You'll format the solar system image so that when users click the picture of Mars, the mars.htm page you created in the preceding section will display. To accomplish this (it's easier than it sounds), follow these steps:

  1. Open FrontPage, click the Folders icon in the Views Bar, and double-click the skyguide.htm file.
  2. Click to the right of the title bar graphic, press Shift+Enter, click Insert Picture From File on the Standard toolbar, and double-click t_skyguide.gif.
  3. With the cursor still located at the end of the Sky Guide graphic, press your Delete key twice to bring the table closer to the t_skyguide.gif image.
  4. Right-click the t_skyguide.gif image, select Picture Properties, click the General tab, type Sky Guide in the Alternative Representations Text box, and click OK.
  5. Now you'll add some content to the Web page's table.

  6. Click in the large table cell to the right of the Home button, and type This Month's Featured Item: Our Solar System.
  7. Select the text, click the Center icon on the Formatting toolbar, and select Comic Sans (or Comic Sans MS) in the Font drop-down list.
  8. Click after the word System, and press Shift+Enter twice.
  9. Type Click a planet to go to the planet's information page. Note: Only Mars is active at this time.
  10. Click in the blank area between the two text components you added in steps 5 and 8.
  11. On the Standard toolbar, click Insert Picture From File, navigate to the C:\sky\images folder if necessary, and double-click solarsystem.gif.
  12. Right-click anywhere on the table, choose Table Properties, set the Border Size to 0 in the Table Properties dialog box, and then click OK.
  13. Click Save on the toolbar. Then preview your Web page. Your page should appear similar to the Web page shown in Figure 10-28.
  14. Click to view graphic
    Click to view graphic

    Figure 10-28   You'll use the solar system picture to create an image map.

  15. Return to Normal view in FrontPage.
  16. Click the solar system image. The Pictures toolbar should open automatically. Notice the Rectangular Hotspot, Circular Hotspot, and Polygonal Hotspot tools located toward the right end of the Pictures toolbar.
  17. Click the Polygonal Hotspot tool, and then click multiple points around Mars and the Mars label in the solar system graphic to create a polygon, as shown in Figure 10-29. When you complete the polygon, the Insert Hyperlink dialog box opens automatically. If necessary, click Existing File Or Web Page in the Link To: section.
  18. Click to view graphic
    Click to view graphic

    Figure 10-29   The Hotspot tools on the Pictures toolbar enable you to draw clickable areas on images.

  19. In the Insert Hyperlink dialog box, double-click mars.htm (not mars.doc) in the C:\sky file list.
  20. Create shapes around the remaining planets (if desired) that point to future pages, such as mercury.htm, venus.htm, earth.htm, jupiter.htm, saturn.htm, uranus.htm, neptune.htm, and pluto.htm.
  21. Save skyguide.htm, preview the page in Preview view, move your cursor over Mars (notice that the cursor changes to a hand), and click Mars to see whether your link works.
  22. Click the Normal view tab, close skyguide.htm, and close FrontPage.

You're well on your way to creating the astronomy club's Web site. The final subpage you'll create is a form within the contact.htm page.

top of page

Creating Forms

At this point you should be getting used to adding elements and configuring settings in FrontPage. As we mentioned at the beginning of the chapter, the trick lies in knowing where to find tools and configuration menus. In this section you'll create an online form. As you might recall from Chapter 2, an online form enables users to enter information into text boxes. Then when users click the form's Submit button, the results will be sent to your e-mail address.

Preparing the Contacts Page

The first step to creating a form on the Contacts page is to prepare the page by adding a title bar and inserting title text, as described in the following steps:

  1. Open FrontPage, click Folder in the Views Bar, and double-click the contact.htm file.
  2. Click to the right of the title bar, press Shift+Enter, click Insert Picture From File, display the contents of C:\sky\images, and double-click t_contact.gif.
  3. With the cursor still located at the end of the Contact Information graphic, press your Delete key twice to bring the table closer to the t_contact.gif image.
  4. Right-click the t_contact.gif image, select Picture Properties, click the General tab, type Contact Page in the Alternative Representations Text box, and click OK.

Inserting a Form Area and Adding Labels

Now that the Contacts page is ready for action, you're set to create an online form. First you'll insert the standard form box and then enter labels for the form's text boxes, option buttons, and selection boxes:

  1. Click in the large table cell to the right of the Home button, point to Form on the Insert menu, and choose Form. An outlined area displays within the table that contains Submit and Reset buttons, as shown in Figure 10-30.
  2. Click to view graphic
    Click to view graphic

    Figure 10-30   The first step toward creating a form is to insert a form component, which automatically includes the Submit and Reset buttons.

  3. With the cursor positioned to the left of the Submit button, type Name:, and then press Shift+Enter.
  4. Type E-mail Address: and press Enter.
  5. Type Are you currently a club member? and press Enter.
  6. Type If so, how often do you attend our monthly meetings? and press Enter.
  7. Type Please let us know how you found our Web site (check all that apply):, press Shift+Enter, type I attended a meeting., press Shift+Enter, type I found it in a search engine., press Shift+Enter, type A friend told me., and then press Enter.
  8. Type Please enter comments or questions here:, press Shift+Enter, and then press Enter. Your form should appear similar to the form in progress shown in Figure 10-31.
  9. Click to view graphic
    Click to view graphic

    Figure 10-31   The form in progress shows only the form's text and basic buttons.

Creating Form Fields

You're now ready to enter the form fields, the areas in which viewers select or enter text so that they can submit information.

  1. Click after Name:, press the spacebar, point to Form on the Insert menu, and choose Textbox.
  2. Click after E-mail Address:, press the spacebar, point to Form on the Insert menu, and choose Textbox.
  3. Click after Are You Currently A Club Member?, point to Form on the Insert menu, choose Option Button, type Yes, press your spacebar, point to Form on the Insert menu, choose Option Button, and then type No.
  4. Click after If So, How Often Do You Attend Our Monthly Meetings?, press the spacebar, point to Form on the Insert menu, and choose Drop-Down Box.
  5. Click before I Attended A Meeting, point to Form on the Insert menu, choose Checkbox, and press your spacebar.
  6. Click before I Found It In A Search Engine, point to Form on the Insert menu, choose Checkbox, and press your spacebar.
  7. Click before A Friend Told Me, point to Form on the Insert menu, choose Checkbox, and press your spacebar.
  8. Click below Please Enter Comments Or Questions Here, point to Form on the Insert menu, and choose Text Area.
  9. Click Save. Your form should now display as shown in Figure 10-32.
  10. Click to view graphic
    Click to view graphic

    Figure 10-32   Your form should now include labels and unformatted form fields.

Configuring Form Field Properties

You now have the bulk of the form created. The next step is to configure the properties for each form field and specify the form's overall properties. So get your right-click finger ready—you're about to configure some property forms.

  1. Right-click the field next to Name and select Form Field Properties.
  2. In the Name field of the Text Box Properties dialog box, type Name, set the Width In Characters to 25 (as shown in Figure 10-33), enter 1 in the Tab Order text box, and then click OK.
  3. Click to view graphic
    Click to view graphic

    Figure 10-33   You use the Text Box Properties dialog box to set the properties for a text box.

  4. Right-click the field next to E-mail Address, select Form Field Properties, type Email, set the Width In Characters to 30, enter 2 in the Tab Order text box, and then click OK.
  5. Right-click the Yes button, choose Form Field Properties, type Member in the Group Name text box, type Yes in the Value text box, ensure that Selected is selected in the Initial State section, enter 3 in the Tab Order text box, and click OK.
  6. Right-click the No button, choose Form Field Properties, type Member in the Group Name text box, type No in the Value text box, ensure that Not Selected is selected in the Initial State section, and click OK.
  7. Right-click the If So, How Often Do You Attend Our Monthly Meetings? drop-down list box, and choose Form Field Properties. The Drop-Down Box Properties dialog box opens.
  8. Type Attendance in the Name text box, enter 4 in the Tab Order text box, and then click Add. The Add Choice dialog box opens.
  9. In the Add Choice dialog box, enter Every meeting, choose the Selected option in the Initial State section, and click OK.
  10. Click Add, type Every other month, and click OK.
  11. Click Add, type Couple times a year, and click OK.
  12. Click Add, type Never, and click OK. Your Drop-Down Box Properties dialog box should look like the one shown in Figure 10-34.
  13. Click to view graphic
    Click to view graphic

    Figure 10-34   The completed Drop-Down Box Properties dialog box shows all the options and which option will be selected by default.

  14. Click OK.
  15. Right-click the first check box, choose Form Field Properties, enter FoundWebSite in the Name text box, enter Attended a meeting in the Value text box, enter 5 in the Tab Order text box, and click OK.
  16. Right-click the second check box, choose Form Field Properties, enter FoundWebSite in the Name text box, enter Search engine in the Value text box, enter 6 in the Tab Order text box, and click OK.
  17. Right-click the third check box, choose Form Field Properties, enter FoundWebSite in the Name text box, enter Friend in the Value text box, enter 7 in the Tab Order text box, and click OK.
  18. Right-click the scrolling text box, choose Form Field Properties, type Comments in the Name text box, enter 40 in the Width In Characters text box, enter 8 in the Tab Order text box, enter 3 in the Number Of Lines text box, and click OK.
  19. Right-click the Submit button, choose Form Field Properties, enter Submit in the Name text box, enter 9 in the Tab Order text box, and click OK.
  20. Right-click the Reset button, choose Form Field Properties, enter Reset in the Name text box, enter Clear Form in the Value/ Label text box, enter 10 in the Tab Order text box, and click OK.
  21. Click the Back arrow once and press your spacebar to insert a space between the Submit and Clear Form buttons.
  22. Click before the Name: label at the top of the form, and press Shift+Enter. Then save your work without previewing the form (remember, in order for your form to work properly, you need to publish your form to the Web before you preview the form).

Completing the Contacts Page

To complete the Contacts page, you need to hide the table's borders and set the form's properties.

  1. Right-click anywhere on the table, choose Table Properties, enter 0 in the Size text box in the Borders area, and click OK.
  2. Right-click the form, and choose Form Properties. The Form Properties dialog box opens.
  3. In the Form Properties dialog box, ensure that the Send To option is selected, enter your own e-mail address in the E-mail Address text box, and enter Astronomy Contact Form in the Form Name text box.
  4. In the Form Properties dialog box, click Options, click the E-mail Results tab, ensure that the Include Field Names check box is selected, and enter Astronomy Contact Information in the Subject Line text box. Selecting the Include Field Names option specifies that the field names should accompany the submitted information, and the subject line text will appear in e-mail messages you receive after users click the Submit button.
  5. Click the Confirmation Page tab, type thankyou.htm in the URL Of Confirmation Page text box (we created a simple thankyou.htm file for you, which you should've downloaded to the C:\sky folder from www.creationguide.com/projects/chapter10/text), click OK twice, and then click No.
  6. Save and close contact.htm, and then close FrontPage.

That's it for your subpage experimentation for this project. You've worked through a number of FrontPage features that you should be able to use when you create your own Web site. But before we wrap up this project, we need to create the astronomy club's home page.

top of page

Creating a Home Page in FrontPage

Last but not least, you're ready to create the home page. Creating this page might seem a little tricky at moments, and we'll readily admit that it's probably the most advanced procedure we describe in this book. However challenging, though, we want to give you an inkling of where you can go from here if we've inspired you to continue designing Web sites. (And we hope you do!) Furthermore, we thought you might be interested in seeing how tables and graphics are sometimes used to create advanced page layout designs. Anyway, let's start by setting up the home page's framework.

top of page

Setting Up the Home Page Framework

To begin, follow these steps:

  1. Open FrontPage, open C:\sky\subpage.htm, choose Save As on the File menu, click the Change Title button, enter Astronomy Club's Official Web Site in the Set Page Title dialog box, click OK, enter index.htm in the File Name text box, and click Save.
  2. Right-click a blank area of the page, click Page Properties, click the Background tab, click the Text color box in the Colors section, choose White, and click OK.
  3. Place your cursor before the Home link in the text-based navigation bar, drag to select everything above the text-based navigation bar (including the title bar and logo graphic), right-click the selected elements, and click Cut.
  4. Press Enter, and then press the Up arrow button (or click in the space above the text-based navigation bar).
  5. Click Insert Picture From File, display the contents of C:\sky\images if necessary, and double-click titlebar-home.gif and press Enter.
  6. Click Web Component on the Standard toolbar, choose Dynamic Effects, and double-click Marquee. The Marquee Properties dialog box opens.
  7. In the Marquee Properties dialog box, type Our Next Meeting is February 21. Reserve your space today! in the Text text box—this is the message that will scroll across the page.
  8. Choose the Slide option in the Behavior section, clear the Continuously check box in the Repeat section, and enter 1 in the Repeat text box, as shown in Figure 10-35.
  9. Click to view graphic
    Click to view graphic

    Figure 10-35   Among other properties, you can specify whether marquee text scrolls continuously or scrolls a predetermined number of times.

  10. Click the Style button, click Format, click Font, choose Comic Sans (or Comic Sans MS) in the font list box, choose White in the Color box, and click OK three times to close all open dialog boxes.
  11. Press the Right arrow to deselect the marquee component, press Enter, click the Table button in the toolbar, and create a 1-row, 5–column table. Your index.htm page should look similar to the page shown in Figure 10-36.
  12. Click to view graphic
    Click to view graphic

    Figure 10-36 The astronomy club's home page is based on a custom table.

  13. Right-click the table, choose Table Properties, click the Alignment drop-down list, select Center, ensure the Specify Width check box is selected, enter 580 in the Specify Width text box, choose the In Pixels option, ensure that Cell Padding and Cell Spacing are set to 0, and click OK.
  14. Select all five table cells, right-click the selected cells, choose Cell Properties, set Vertical Alignment to Top, and then click OK.
  15. Right-click the titlebar-home.gif graphic, choose Picture Properties, click the General tab, type Welcome to the Astronomy Club Web Site in the Alternative Representations Text box, and click OK.
  16. Click Save.

top of page

Assembling the Main Graphic

You're now going to insert pieces of an image that has been cut to fit into the table. The image, before we chopped it into pieces, is shown in Figure 10-37. The reason we divided the image into separate graphics is that we wanted to use Dynamic HTML (DHTML) to create a glowing rollover effect whenever users place their cursor over a hyperlinked area. If we hadn't wanted to show the rollover effect (and demonstrate how you can chop up and reassemble pictures when necessary), we could've created an image map similar to the solar system image map you created on the Sky Guide page earlier in this chapter.

Click to view graphic
Click to view graphic

Figure 10-37   The original Big Dipper image shown here was chopped into pieces for this project.

  1. In index.htm, click in cell 1, click Insert Picture From File on the Standard toolbar, display the contents of C:\sky\images, and double-click bigdip1.gif.
  2. Click in cell 2 and insert b_aboutus.gif.
  3. Click in cell 3, insert bigdip2.gif (a transparent graphic that will help to align the other graphics), press Shift+Enter, insert b_contact.gif, press Shift+Enter, insert b_meetings.gif, press Shift+Enter, and insert b_skyguide.gif.
  4. Click in cell 4 and insert bigdip3.gif.
  5. Click in cell 5, and insert bigdip4.gif (another transparent image), press Shift+Enter, insert b_gallery.gif, press Shift+Enter, insert bigdip5.gif, press Shift+Enter, and insert b_links.gif. Your index.htm page should display as shown in Figure 10-38.
  6. Click to view graphic
    Click to view graphic

    Figure 10-38   After piecing Big Dipper back into shape, you're ready to link the Big Dipper pieces to your subpages.

Creating Links within the Main Graphic

The next step is to link each image that contains a button name in the Big Dipper graphic to the appropriate subpage:

  1. Right-click the About Us text, choose Hyperlink, ensure that the sky folder appears in the Look In text box, type aboutus.htm in the Address text box (or select the aboutus.htm file in the file list), and click OK.
  2. Link the remaining graphics as follows:
  3. GraphicLink To
    Contact Uscontact.htm
    Meetingsmeetings.htm
    Sky Guideskyguide.htm
    Photo Gallerygallery.htm
    Astronomy Linkslinks.htm

  4. Click Save.

top of page

Adding Dynamic HTML to the Main Graphic

Next you'll add the rollover effect to each hyperlinked area in the table by using the FrontPage DHTML toolbar:

  1. Select the About Us button and choose Dynamic HTML Effects on the Format menu. The DHTML Effects toolbar displays. You'll configure the toolbar to display as shown in Figure 10-39.
  2. Click to view graphic
    Click to view graphic

    Figure 10-39   The DHTML Effects toolbar assists you in applying dynamic effects to your Web pages.

  3. In the On drop-down list, choose Mouse Over.
  4. In the Apply drop-down list, choose Swap Picture, click the Choose Settings drop-down list, select Choose Picture, and then double-click b_aboutus2.gif in the C:\sky\images folder.
  5. Repeat steps 1 through 3 for each linked area, linking the secondary graphics as follows:
  6. LinkPicture File
    Contact Usb_contact2.gif
    Meetingsb_meetings2.gif
    Sky Guideb_skyguide2.gif
    Photo Galleryb_gallery2.gif
    Astronomy Linksb_links2.gif

  7. Close the DHTML Effects toolbar.
  8. Right-click the table, choose Table Properties, enter 0 in the Size text box in the Borders section, click Apply, and then click OK.
  9. Click Save and then preview your work.
  10. Click the Normal view tab to return to your working area.

top of page

Adding Finishing Touches to the Home Page

Finally, to complete the home page, you'll insert counter and last-modified date elements. To insert a counter, follow these steps:

  1. On index.htm, click after the Links hyperlink in the text navigation bar, press Enter, point to Web Component on the Insert menu, and choose Hit Counter in the Component Type list. Click Finish and the Hit Counter Properties dialog box displays.
  2. In the Choose A Counter Style list, select the green digital number style (it's the last style on the list), then choose the Fixed Number Of Digits check box, accept the default setting of 5 digits, and click OK.
  3. Press Enter, choose Date And Time on the Insert menu, and click OK on the Date And Time dialog box. The date will automatically update each time you edit the page.
  4. Save index.htm, and then click Preview. Your page should look similar to the page shown in Figure 10-40. After you publish your sky Web site, your home page will display the counter instead of placeholder text.
  5. Click to view graphic
    Click to view graphic

    Figure 10-40   The completed index.htm file is shown here in Preview mode.

You've completed the home page and most of the subpages for the astronomy club's Web site. Great work! You should now understand some of the cool capabilities of FrontPage. We hope this newfound knowledge will help you as you design and create your own Web sites.

As far as the astronomy club's site, the only remaining step is to publish the C:\sky Web by using the Publish feature in FrontPage. Be sure to read the following section as well as refer to Chapter 11 before you upload your astronomy club Web site to your server space.

top of page

A Word about Publishing

When you create Webs in FrontPage, your best bet is to upload the pages using the FrontPage Publish Web feature, especially if you've inserted items that rely on FrontPage Server Extensions (such as forms and counters). To publish your site, select the Publish Web option on the File menu. You should have your server space and address already lined up. Furthermore, you should have ensured with your hosting service that FrontPage Server Extensions are supported. For more information about publishing FrontPage Webs and using FrontPage Server Extensions, contact your Internet service provider (ISP), see Chapter 11, and refer to the help files in FrontPage.

top of page

Additional Resources

Here are a couple FrontPage references we've found helpful:

  • Buyens, Jim. Microsoft FrontPage Version 2002 Inside Out. Redmond, WA: Microsoft Press, 2001. This book is a complete FrontPage documentation source.
  • www.microsoft.com/frontpage is the definitive online resource for FrontPage.

top of page

Key Points

  • FrontPage is a full-featured HTML editing program.
  • You can use FrontPage to easily create advanced Web page features such as button rollover effects, image maps, thumbnails, forms, counters, and other Web page components.
  • The FrontPage interface enables you to display your Web pages in Normal (working) view, HTML view, and Preview view.
  • Learning FrontPage opens doors to using other full-service HTML editors because it exemplifies the types of capabilities HTML editors can provide.
  • Before you create your Web pages using FrontPage, you should ensure that your Web hosting service supports FrontPage Server Extensions. (These days, most servers support extensions to some degree.)
  • Before you start creating Web pages in FrontPage, you should set up a Web, which provides special formatting to a selected folder.
  • You can simplify the process of building a Web site by creating a standard template that you can save as subpages.
  • The key to creating Webs in FrontPage is keeping your files organized, knowing where to find FrontPage tools and menu options, and experimenting with various settings.
  • For best results, upload FrontPage files using the Publish Web feature.

top of page