Chapter 12

Real-Life Examples

• About the Web Site Project
• What Else Will You Get?
• Creating a Normal Web
• Creating the Web Colors Style Sheet
• Creating Your Home Page
  • Adding the Home Page Content
  • Adding the Footer Information
  • Adding the Links to the Home Page
• Working on the Favorites Page
• Creating a Template from the Favorite Links Page
• Creating a Link Page from Your Template
• Editing the What's New Page
• Creating the Navigation Bars and Footer Pages
• Workshop Wrap-Up
  • Chapter Summary
  • Next Steps
  • Q&A

Roll up your sleeves, because it's time to start building your own Web site. You're going to take what you've learned in this section and combine all the features to create your own pages. You'll find out that it's not as hard as you think. You're going to create a Web site that contains several different sections, beginning in this chapter with a style sheet, your not-quite-so-standard-everyday home page, and some links pages. You know-the usual. Except here, you'll learn how to give those pages some punch.

About the Web Site Project

The Web project for this book will include a few different sections you'll be developing in the remaining "Real-Life Examples" chapters in this book. These combine all the techniques from the chapters in the book into (you guessed it) a real-life example. You can customize this site in any way you choose as far as the content goes. The examples here should give you enough ideas and groundwork to get you started.

Your Web project will consist of the following:

• A home page (of course) that links back to the home page on your root Web as well as all the main pages on your Web project. This isn't your standard Hi, I'm Joe home page. It's going to have just enough flash to get people's interest so that they will want to peek inside the wrapper.
• A Favorite Links section, where people who browse the Web and sometimes don't know where to go for good information or great pages can look. That's why a lot of people put lots of links on their sites. You'll satisfy those Web users, too. Your site's Favorite Links section will include links to your favorite sites and arrange them in categories. You'll also develop a template you can use whenever you want to create a new Links page.
• A What's New page to keep folks informed about the new additions to your site.

What Else Will You Get?

The pages you develop in this chapter are only the beginning. Wait until you start learning how to automate and enhance your pages in the next section! To give you an idea of what you can expect in your Web project in future chapters, here's a brief description of the other features your Web site will contain:

• A Table of Contents page that displays the pages in each section of your Web site.
• A Search page, which enables visitors to search for words or phrases contained on your pages.
• A Guest Book, which enables people to sign in and place comments about your pages on your site.
• A Happenings page, where you'll tell people each month about things that are happening in your related fields of interest.
• A Cool Stuff section, where you'll incorporate advanced features into your pages: marquees, multimedia, sound, video, and more.
• A discussion on the topic of your choice.

Creating a Normal Web

You're going to create a Far Out There Web site. Given the title, you're free to be as creative as you want. Make it humorous, make it tongue-in-cheek, and pull out all the stops.

To begin your Web site, you want to start with a normal web:

1. From the FrontPage Explorer, choose File | New Web (or press Ctrl+N). The New Web dialog box appears.
2. In the Template or Wizard field, select Normal Web and click OK. The New Web from Template dialog box appears.
3. In the Web Name field, type FarOutThere to name your web.
4. Click OK. The web is created with a single normal page.

Creating the Web Colors Style Sheet

The images for this project are provided on the CD-ROM included with this book in both GIF and JPG format. They were designed against a white background, so you'll want to choose a light background color or the background image provided on the CD-ROM. If you use a dark background, you'll see some ghosting around the images, which is caused by the antialiasing of the image. I've also provided a true-color (TGA) version of the images on the CD-ROM so that you can edit them for a dark background.

To create your Web Colors style sheet, follow these steps:

1. From the FrontPage Editor, choose File | New or Ctrl+N. The New Page dialog box appears.
2. Choose to base your new page on the Normal Page template and click OK. A new blank page appears in the FrontPage Editor window.
3. Choose Insert | Image to display the Insert Image dialog box. Click the From File button, and locate the farouthd.gif (or .jpg) image on the CD-ROM. Highlight the file and click Open.
4. Place the insertion point immediately after the image. Choose Insert | Heading 2 and enter the following text:
   Sample Heading
5. Choose Insert | Paragraph | Normal. The insertion point moves to the next line. Enter some sample text using Normal Paragraph font. In the example shown in Figure 12.1, the following text is added:
   Sample text. Sample text. Sample text.
   Figure 12.1 : Placing some graphics and text on your page helps you see how the colors work together.
6. Choose File | Page Properties. The Page Properties dialog box appears. You'll be working against a light background, so you shouldn't have any problem choosing colors that work well. Generally, it's best to use dark text on light backgrounds and light text on dark backgrounds.

   TIP

   When you work with text on dark backgrounds, tone down on the brightness just a tad. It helps relieve that neon look that is hard on the eyes.

   From the Page Properties dialog box, select and enter the following settings. To specify the custom color formulas listed below, check the Use Custom Link, Text, or Active Link Color checkbox, and click the Choose button to define the custom colors in the Colors dialog box.

   Page Title: Far Out There Web Colors
   Background Image: backgrnd.gif (or .jpg)
   Link Color: R 0 G 0 B 240 (toned-down blue)
   Text Color: R 0 G 0 B 128 (navy blue)
   Visited Link Color: Default color (deep purple)
   Active Link Color: R 240 G 0 B 0 (toned-down red)

   Figure 12.2 shows the Page Properties dialog box with the properties set for this page. Click OK after you complete the property settings. The page updates with the selections you made.
   Figure 12.2 : Set the properties for your style sheet in the Page Properties dialog box.
7. Choose File | Save. The Save As dialog box appears. Enter the following Page Title and URL in the dialog box, and click OK. The page is saved to your web.
   Page Title: Far Out There Web Colors
   Page URL: faroutwc.htm
8. You are asked whether you want to save the images to your Web; click Yes or Yes to All. The page properties update in the FrontPage Editor after the file is saved. Now you have an idea of what your pages will look like.
9. You might want to save this page in the _private directory of the Web, which is a special directory that can't be accessed by Web crawlers and searches. To do this, go to the FrontPage Explorer. Right-click on the page title in any view, and choose Properties from the pop-up menu. The Properties dialog box appears.
10. Type the following in the Page URL field:
    _private/faroutwc.htm
11. Click the Apply button. The page is relocated to the new directory.

Creating Your Home Page

A home page doesn't always have to have a lot of text on it. You can use colorful graphics and some fancy effects to attract peoples' interest. This home page has very little text, as you will soon see. It does have a pile of images on it (which probably will take some time to download on slower modems). The sizes of the header graphics are reduced on subsequent pages.

When you created your normal web, a page titled Normal Page, with a filename of index.htm was placed into it. You will use this page as your home page. To create the content in your home page, follow these steps:

1. Choose File | Open from Web. The Current Web dialog box appears.
2. Choose the Normal Page (index.htm) from the list of files in your current web.
3. Click OK. The page opens in the FrontPage Editor.
4. Choose File | Page Properties. The Page Properties dialog box appears.
5. In the Customize appearance section, check the Get Background and Colors from Page checkbox, and click Choose to assign the Far Out There Web Colors page as a style sheet.
6. Click OK. The page updates with your web colors.

Adding the Home Page Content

How do people know how to size their browsers when they visit a site? Well, most times they don't, so it's a good idea to let them know. One way you can do this is with a graphic that's sized at least as wide as the widest graphic on your site. The layouts for the pages on this site are designed to fit within a 525-pixel-wide screen, so I created a guide that is exactly that width. This guide tells people that, for optimum viewing, they should size their browser screen until they see both arrows on each side of the graphic. That's the first thing you want to put on the page. Then, you'll add some text for links, the home page graphic, an animated GIF, and some footer text. That's it for this page. Ready?

Follow these steps:

1. With the insertion point in the upper-left corner of the page, choose Insert | Image. The Insert Image dialog box appears.
2. Click the From File button, and use the Look In box to locate the guide.gif file from the CD-ROM included with this book. Click Open to place the image on your page.
3. Click the Center button in the Format toolbar to align the graphic to the center.
4. Right-click the image and choose Properties from the pop-up menu. The Image Properties dialog box appears. Enter the following text in the Alternative Representations Text field:
   Browser Width Guide

   NOTE

   The alternative text displays while the graphic is loading. It also appears in place of the graphic if users have graphics turned off in their browsers.

5. If you're using GIF images, click the image to select it. Then click the Make Transparent button on the Image toolbar to specify white as the transparent color. Click OK to return to the FrontPage Editor.

   NOTE

   You can make a JPG image transparent, but it will be converted to GIF in the process. All the GIF images on the CD use the same custom palette to avoid palette shift when viewing in 256-color mode. Palette shifting occurs when images that have different 256-color palettes exist on the same page. When you convert a JPG image to GIF, it will use a different palette and create some shifting.

6. Place the insertion point at the end of the graphic, and insert a Normal paragraph by choosing Insert | Paragraph | Normal. Align the insertion point to the center of the page by clicking the Center button on the Format toolbar.
7. Enter the following line of text:
   Main Home Page | What's New | Favorites | Search | Guest Book

   TIP

   I used a pipe symbol (|) for the divider between the words. A forward slash (/) works just as well.

8. With the insertion point at the end of the text you just entered, select Insert | Line Break. From the Break Properties dialog box, choose Normal Line Break and press Enter. The insertion point moves to the center of the next line.
9. Enter this second line of text:
   Contents | Happenings | Cool Stuff | Discussion | E-Mail
10. With the insertion point at the end of the line of text, insert another normal line break by choosing Insert | Line Break. Choose Normal Line Break from the Break Properties dialog box and press Enter. The cursor moves to the center of the next line.
11. Choose Insert | Image to insert each of the following images on your page, in succession. Use the From File button in the Insert Image dialog box to select each of the following files from the CD. After the images are inserted on your page, right-click on each image and choose Properties from the pop-up menu. The Image Properties dialog box appears. In the Alternative Representations | Text field, enter the alternative text shown after each filename below:
    b_home.gif (or .jpg): Home Page
    b_new.gif (or .jpg): What's New
    b_favs.gif (or .jpg): Favorites
    b_srch.gif (or .jpg): Search
    b_gstbk.gif (or .jpg): Guest Book
12. Click the Make Transparent button on the Image toolbar to make white the transparent color in each GIF image.
13. Place the insertion point after the last image in the row and insert a Normal paragraph using the Insert | Paragraph | Normal command. Center it by clicking the Center button on the Format toolbar.
14. Choose the Insert | Image command. The Insert Image dialog box appears. Use the From File button to insert light.gif from the CD-ROM included with this book. This is an animated GIF that already has transparency applied to it.
15. Click the image to select it. Then, right-click the image to choose Properties from the pop-up menu. From the Image Properties dialog box, assign the image an alternative text representation of Animation in the Alternative Representations | Text field.
16. Click to select the animated GIF and copy it to your clipboard by pressing Ctrl+C or clicking the Copy button on the standard toolbar.
17. Choose Insert | Image again. Use the From File button in the Insert Image dialog box to insert farouthd.gif (or .jpg) from the CD immediately after the animated GIF. Right-click the image to choose Properties from the pop-up menu. Assign the image an alternative text representation of Home Page Header Graphic in the Alternative Representations | Text field of the Image Properties dialog box. Use the Make Transparent button on the Image toolbar to make white the transparent color in each image.
18. With the insertion point immediately after the header graphic, paste the animated GIF from your clipboard onto the page using Ctrl+V.
19. Click to select the animated GIF you just pasted onto the page. Right-click and choose Properties from the context menu. The Image Properties dialog box appears. In the Layout section, choose Alignment: Top. Your page now should look like Figure 12.3.
    Figure 12.3 : Your page should look like this after several graphics are placed on it.
20. Now you'll insert another row of navigation buttons. Choose the Insert | Image command. In the Image Properties dialog box, use the From File button to insert the following graphics from the CD-ROM. Right-click each image to choose the Properties command from the pop-up menu. In the Image Properties dialog box, assign them the alternative text representations shown. Click the Make Transparent button in the Image toolbar to make white the transparent color in each GIF image.
    b_cont.gif (or .jpg): Contents
    b_happn.gif (or .jpg): Happenings
    b_cool.gif (or .jpg): Cool Stuff
    b_disc.gif (or .jpg): Discussion
    b_mail.gif (or .jpg): Send EMail

Adding the Footer Information

You have all the images placed on your page now. To complete the contents of the page, you want to add some footer information that tells who to contact for information about the site, and you also want to place copyright information on the page.

Follow these steps:

1. Place the insertion point immediately after the last graphic in the bottom navigation button row, and insert an address paragraph by choosing Insert | Paragraph | Address. The insertion point moves below the home page graphic on a new line. Align the insertion point to the center of the page by clicking the Center button.
2. Enter the following line of text:
   For questions or comments about this page, contact (followed by your
   E-Mail address).
3. With the cursor at the end of your e-mail address, insert a normal line break by choosing Insert | Line Break. From the Break Properties dialog box, select Normal Line Break and choose OK.
4. On the new line, enter the following text, adding a space afterwards:
   Copyright
5. Immediately after the space, choose Insert | Special Character. Select the copyright symbol from the Insert Special Character dialog box, and choose Insert. Then click Close to return to the FrontPage Editor.
6. Add a space after the copyright symbol and enter the current year, followed by your name. For example:
   1996, Denise Tyler Figure 12.4 shows a completed example of this line.
   Figure 12.4 : The bottom portion of the home page now is complete.
7. Choose File | Save to save the page to your web with what you've completed so far. When you are asked whether you want to save the images to the Web, click Yes to All. Save the home page with these settings:
   Title: Far Out There Home Page
   URL: index.htm (or whatever you normally name your home page)

Adding the Links to the Home Page

Now it's time to add the links to the text located near the top of the page. For the home link on this page, you want to create a link back to the main home page on your root Web. You'll also create links to eight new pages that you'll be working on throughout this book. Finally, you'll create a link to your e-mail address.

Follow these steps:

1. In the first line of text below the guide graphic, highlight the following. Don't include the bracket (|) after the phrase:
   Main Home Page
2. Click the Create or Edit Link button on the standard toolbar. The Create Link dialog box appears.
3. Select the World Wide Web tab. Select (other) from the Protocol drop-down menu. In the URL field, enter the following:
   ../index.htm
   (or whatever you named the home page in your root directory).
   This is a relative link that goes back one level to your root directory (../) and loads your home page (index.htm).
4. Click OK to create the link.
5. Click the Home Page button in the top line of navigation buttons to select it. Then, click the Create or Edit Link button in the Standard toolbar. Repeat steps 3 and 4 to add the same link to the graphic that is associated with the home page.

For the next eight links, you select the text, click the Create Or Edit Link button, and select the New Page tab to create links to pages that don't yet exist on your Web. For each page, choose to add the pages to your To Do list. After you click OK to create each page, base the first page on the What's New Page template and the remaining ones on the Normal template. Assign the following page titles and URLs.

You'll also want to add the same links to the navigation button graphics associated with each page, as outlined in step 5 above.

Selected Text: What's New
Page Title: What's New at Far Out There
Page URL: whatsnew.htm
How to Create: Add new page to To Do list
Based On: What's New template
Will Complete In: This chapter

Selected Text: Favorites
Page Title: Favorite Far Out There Links
Page URL: favorite.htm
How to Create: Add new page to To Do list
Based On: Normal template
Will Complete In: This chapter

Selected Text: Search
Page Title: Search Far Out There
Page URL: search.htm
How to Create: Add new page to To Do list
Based On: Normal template
Will Complete In: Chapter 22

Selected Text: Guest Book
Page Title: Far Out There Guest Book
Page URL: guestbk.htm
How to Create: Add new page to To Do list
Based On: Normal template
Will Complete In: Chapter 22

Selected Text: Contents
Page Title: Far Out There TOC
Page URL: toc.htm
How to Create: Add new page to To Do list
Based On: Normal template
Will Complete In: Chapter 17

Selected Text: Happenings
Page Title: Far Out There Happenings
Page URL: happen.htm
How to Create: Add new page to To Do list
Based On: Normal template
Will Complete In: Chapter 17

Selected Text: Cool Stuff
Page Title: Far Out There Cool Stuff
Page URL: cooltoc.htm
How to Create: Add new page to To Do list
Based On: Normal template
Will Complete In: Chapters 17 and 22

Selected Text: Discussion
Page Title: Far Out There Discussion
Page URL: disctoc.htm
How to Create: Add new page to To Do list
Based On: Normal template
Will Complete In: Chapter 22

For the final link (E-Mail), create a link to your e-mail address:

1. Highlight the E-Mail text and click the Create Or Edit Link button in the Standard toolbar.
2. Select the World Wide Web tab from the Create Link dialog box.
3. In the Protocol drop-down listbox, select mailto: and enter your e-mail address.
4. Click the E-Mail navigation button graphic to select it. Then click the Create Or Edit Link button in the Standard toolbar, and repeat steps 2 and 3 to add the same E-Mail link to the footer of the page. Figure 12.5 shows the completed home page.
   Figure 12.5 : The completed home page.
5. Choose File | Save to save the page to your Web. Click Yes to All to save the images to the Web.

Working on the Favorites Page

When you created the links from your home page, you added the Favorites page to your To Do list. You can open the Favorites page from there and complete it now. Here's what you do:

1. Open the To Do list by choosing Tools | Show To Do List. If you don't see the To Do list, this means it is minimized and appears in your Windows 95 taskbar. Click the FrontPage To List button in the taskbar to bring it to the foreground.
2. In the Task column of the FrontPage To Do List dialog box, click Finish Favorite Far Out There Links and then click the Do Task button. The page opens in the FrontPage Editor window.
3. Choose the Insert | Image command. From the Insert Image dialog box, use the From File button to insert faroutsm.gif (or .jpg), located on the CD, at the beginning of the page. Then align it in the center of the page by clicking the Center button on the Format toolbar. Next, right-click the image to choose Properties from the pop-up menu, and assign it an alternative text representation of Small Far Out Header in the Alternative Representations | Text field of the Image Properties dialog box. Finally, click the Make Transparent button in the Image toolbar to make white the transparent color in the image.
4. Using the procedures outlined in the previous step, insert favorite.gif (or .jpg) immediately after the small header graphic. Assign it an alternative text representation of Favorites.
5. Position the insertion point immediately after the Favorites graphic and insert divider.gif (or .jpg) from the accompanying CD-ROM. Use the Make Transparent button in the Image toolbar to make white the transparent color. Right-click the image and choose Properties from the pop-up menu. In the Alternative Representations: Text field of the Image Properties dialog box, enter an alternative text representation of Divider.
6. Position the insertion point immediately after the divider graphic and choose Insert | Heading 2. Enter the following text:
   Favorite Far Out There Links
7. Position the insertion point at the end of the heading and choose Insert | Paragraph | Normal. Then enter some introductory text that lets people know the kind of links you're providing in this section of the web, as shown in Figure 12.6.
   Figure 12.6 : Add some text to your Favorites page that describes the types of sites you're linking to.
8. Position the insertion point at the end of the text you entered in step 7 and press Enter. Paste the divider graphic onto your page again. Center it by clicking the Center button on the Format toolbar.
9. Position the insertion point immediately after the graphic. Choose Insert | Heading 3. Enter the following text:
   Contents of This Section:
10. Choose Insert | Definition | Term for each link name, followed by Insert | Definition | Definition for each link description to enter your list of link categories. After the definition list is complete, format the terms and definitions. Format each of the terms in bold text. Format each of the definitions in italic text.When you finish, your page should look similar to the page shown in Figure 12.7.
    Figure 12.7 : An example of what your Favorite Links page should look like.
11. Place the insertion point at the end of the last definition in the list and press Ctrl+Enter. This places the insertion point in a new Normal paragraph.
12. Paste the divider graphic onto your page again, using Ctrl+V.
13. Choose File | Page Properties. In the Page Properties dialog box, check the Get Background and Colors from Page checkbox to assign the Far Out There Web Colors style sheet to the page.
14. Choose File | Save to save the page to your web. When FrontPage asks whether you want to remove the task from the To Do list, click No. (You'll add text links and a footer to this page in Chapter 17, "Real-Life Examples.") FrontPage then asks if you want to save the images to your web. Click Yes to All to save the images to your web.

Creating a Template from the Favorite Links Page

Now you're going to create a new page and copy the contents you just entered in the Favorites page to it. You'll modify the contents a bit to add placeholder text for the Links pages. You'll save this new page as a template that can be used for all the Links pages on your site.

Follow these steps:

1. Choose Edit | Select All, or press Ctrl+A. Everything on the page is selected in inverse video. Copy the contents to the clipboard by pressing Ctrl+C or by clicking the Copy button on the standard toolbar.
2. Use the File | New command to create a new page based on a Normal Page template. Paste the contents onto the new page by pressing Ctrl+V or by clicking the Paste button on the standard toolbar.
3. Choose File | Page Properties. In the Page Properties dialog box, check the Get Background and Colors from Page checkbox, and assign the Far Out There Web Colors style sheet to the page.
4. Select the Favorite Far Out There Links heading. Choose Edit | Bookmark or press Ctrl+G to access the Bookmarks dialog box. Assign a bookmark name of top, as shown in Figure 12.8.
   Figure 12.8 : Create a bookmark called top for the page title.
5. Place the insertion point at the end of the first heading in the page. Enter a space and then choose Insert | Line Break. Choose Normal Line Break from the Break Properties dialog box and choose OK.
6. Below the first heading, enter a second heading:
   Subtitle
7. Format the second heading as italic text by clicking the Italic Text button on the Format toolbar.
8. Select the descriptive text you entered below the original heading and replace it with the following:
   Description of the sites on this page.
9. Select the following text:
   Contents of This Section:
   Then use Ctrl+G to open the Bookmark dialog box. In the Bookmark Name field, enter Contents.
10. Position the insertion point at the end of the Contents of This Section: heading, and choose Insert | List | Bulleted. Add a few generic list items, as shown in Figure 12.9.
    Figure 12.9 : The Contents section of the Links template is revised.
11. Press Ctrl+Enter at the end of the bulleted list to insert a Normal paragraph. Copy the divider graphic from anywhere else on the page, using Ctrl+C, and paste it onto this line using Ctrl+V. Center it by clicking the Center button on the Format toolbar.
12. Modify the Term and Definition list to use generic text as placeholders for the links you'll put on your pages. Create as many terms and definitions as the number of items in the bulleted list above this list. For example, Figure 12.10 shows the term for the first generic link as follows:Link to Site 1The definition for the first generic link reads as follows:Description of Site 1
    Figure 12.10: The Term and Definition list is revised for generic content, and bookmarks are added.
13. With the insertion point at the end of the Definition list, press Ctrl+Enter to begin a new Normal paragraph. Then type the following:
    Back to Contents | Back to Top
14. Choose Edit | Bookmark (or press Ctrl+G) to format each of the terms in the Definition list as bookmarks. Give the bookmarks generic names also, such as Site1, Site2, and so on. When you're done, the list should look like Fig-ure 12.10.
15. Return to the bulleted list in the Contents of This Section portion of the page. Add links to the appropriate bookmarks on the page for each Site item. Highlight one of the items in the bulleted list, and use the Create or Edit Link button to open the Create Link dialog box. Select the Open Pages tab and choose the appropriate bookmark from the Bookmark drop-down listbox, as shown in Figure 12.11.
    Figure 12.11: Choose the bookmark from the Open Pages tab in the Create Link dialog box.
16. Go to the line below the definition list-Back to Contents | Back to Top. Highlight Back to Contents and click the Create or Edit Link button on the Standard toolbar. In the Open Pages tab of the Create Link dialog box, create a link to the Contents bookmark. Do the same for the Back to Top text, adding a link to the Top bookmark.
17. Choose File | Page Properties to access the Page Properties dialog box. Then change the properties of the page:
    Page Title: Far Out Links Template
    Select Background and Colors from Page: _private/faroutwc.htm
18. Don't save this page to your web. Instead, choose File | Save As to save this page as a template. In the Save As dialog box, enter the title and URL:
    Page Title: Far Out Links Template
    Page URL: farlinks.htm
19. Click the As Template button. The Save As Template dialog box shown in Figure 12.12 appears. Complete the information for the directory and description of the template by entering the following:Title: Far Out Links TemplateName: farlinks (limited to eight characters, no extension)Description: Links template for the Far Out There site
    Figure 12.12: Save the page as a template by using the Save As Template dialog box.
20. Click OK to create the template. When you are asked whether you want to save the images, click Yes to All.

Creating a Link Page from Your Template

When you saved your page as a template, it was saved in the Microsoft Front+Page\pages\farlinks.tem directory. The images were placed in an \images subdirectory. The template now is available for selection from the New Page dialog box, as shown in Figure 12.13.

Figure 12.13: Select the Far Out Links template from the New Page dialog box.

To create a page based on your farlinks template, follow these steps:

1. Use the File | Open from Web command to open the Favorite Far Out There Links page.
2. Create the text on which the user will click to navigate to your new links page, and highlight it. Click the Create or Edit Link button in the Standard toolbar. The Create Link dialog box appears.
3. Click the New Page tab in the Create Link dialog box. Enter a title for your new links page in the Page Title field. Enter a URL for your new links page in the Page URL field.
4. Verify that the Edit New Page Immediately radio button is selected (it is selected by default), and choose OK. The New Page dialog box appears.
5. Select Far Out Links Template from the Template or Wizard drop-down listbox.
6. Click OK. The page appears in the FrontPage Editor.
7. Customize the contents of the pages as applicable to the types of links you want to include on the page. Figures 12.14 and 12.15 show a completed example of the page. You can use the definition below each link to enter a description of the page or site, or to list its URL below the link. Of course, the description can be as brief or as long as you like.
   Figure 12.14: The upper portion of a links page contains the header graphics, a page introduction, and the contents of the page.
   Figure 12.15: The lower portion of a links page contains the links to your favorite sites and a description of each link.
8. Save the page to your web using the File | Save command. When asked whether you want to save the images to the Web, click Use Existing.

Figure 12.16 shows one of the links on the Favorite Far Out There Links page completed. When the user clicks on this link, the browser navigates to the links page created in the previous steps.

Figure 12.16: One of the links on the Favorite Far Out There Links page navigates to a new page created with your template.

Editing the What's New Page

When you created a link to the What's New page from your home page, you based it on the What's New template. Now you're going to modify this page a bit to better suit your site. Follow these steps:

1. From the FrontPage Editor, choose the Tools | Show To Do List command or use the To Do List button in the Standard toolbar. The To Do List dialog box appears.
2. From the list of tasks, select the task for the What's New page and click Do Task.
3. Position the insertion point at the beginning of the Annotation bot text, and press Enter. This begins a new Normal paragraph at the top of the page. Center the paragraph by clicking the Center button on the Format toolbar.

   NOTE

   You can delete the annotation text if you like. It might be nice to keep it there, however, so that you will know how to add contents in the future.

4. Insert the faroutsm.gif (or .jpg) image onto the page. (You can copy and paste it from the Favorites page if it's still open or insert it from the current web.)
5. Insert the whatsnew.gif image from the accompanying CD-ROM onto your page. In the Image Properties dialog box, assign it the following alternative text:
   What's New
6. Reformat the What's New title to Heading 2 using the style bar on the Format toolbar. Change the title to the following:
   What's New at Far Out There?
7. Center the heading on the page by clicking the Center button on the Format toolbar.
8. Replace the horizontal line with divider.gif, which should already exist on your web. You can copy and paste it from another open page as well. Double-click to select the line and then choose Insert | Image to replace it with the divider graphic.
9. Add the dates and pages you've added so far, as shown in Figure 12.17. Create links to the new pages on your Web so that your site visitors can navigate to them from the What's New page.
   Figure 12.17: Add the New icon before each date and align them to the left of the text.
10. Replace the second horizontal line with the divider.gif graphic.
11. Position the insertion point before the first dated item on your page and choose Insert | Image to insert the newicon.gif image located on the accompanying CD-ROM. Make white the transparent color in the image by clicking the Make Transparent button on the Image toolbar.
12. Click and drag to select the newicon.gif image, and paste it before the remaining new items on your page.
13. Right-click each of the new icons, and choose Properties from the context menu to access the Image Properties dialog box. Align each of the images to the left of the text (Layout: Alignment: Left). When you're done, your page should look as shown in Figure 12.17.

    NOTE

    When you assign alignment properties to an image, it might be a little confusing to figure out how to select it afterward. If you turn on the Show/Hide button (in the standard toolbar), you'll notice a solid bar before the text on your page. If you select that bar, you'll be able to delete the image or copy it to your clipboard.

14. Choose File | Page Properties to assign the web's style sheet to the page.
15. Choose File | Save to save the page to the web.
16. Click No when FrontPage asks whether you want to remove the page from the To Do list. (You'll make some minor revisions and additions in Chapter 17.)
17. Click Yes to All to save any new images to the web.

Creating the Navigation Bars and Footer Pages

You might notice that the Favorites pages and the What's New page don't have any links to other pages yet. That's because you'll be adding them at the beginning of Chapter 17 by using Include bots. In that chapter, you'll create the navigation bars and footer pages that will be included on the other pages. After you save the pages, you might want to move them to the _private directory.

To create the Text navigation bar, follow these steps:

1. Open the Far Out There home page from your web if it is not still open.
2. Copy the Text navigation bar from the top of the page to your clipboard.
3. Create a new Normal page. Paste the Text navigation bar onto it, and align it to the center of the page by clicking the Center button on the Format toolbar.
4. Edit the Main Home Page link to read Home Page.
5. Change the Home Page link to link to the home page on the current Web rather than the home page in the current directory.
6. Choose File | Page Properties to assign the Web colors to the navigation bar.
7. Choose File | Save to save the page as the following:
   Title: Included Text Navigation Bar
   Page URL: textnav.htm

To create the footer, follow these steps:

1. Return to the Far Out There home page.
2. Copy the two lines in the footer to the clipboard.
3. Create a new Normal page. Paste the footer onto it, and align it to the center of the page by clicking the Center button on the Format toolbar. Use the style bar to format the content as an Address paragraph.
4. Choose File | Page Properties to assign the web colors to the navigation bar.
5. Choose File | Save to save the page as the following:

Title: Included Footer

Page URL: footer.htm

To create the Image navigation bars, follow these steps:

1. Open the home page if it is not still open.
2. Select the first row of navigation buttons by placing your cursor at the left of the row, where it turns into a selection pointer. Click to select the row of buttons, which then appear in inverse video.
3. Copy the navigation buttons to your clipboard.
4. Create a new Normal page. Paste the navigation buttons onto it, and align them in the center of the page.
5. Edit the Home link to link to the home page in the Far Out Web.
6. Choose File | Page Properties. The Page Properties dialog box appears. Select the Get Background and Colors from Page checkbox, and choose the Far Out There Web Colors page for your style sheet. Click OK to return to the FrontPage Editor.
7. Choose File | Save to save the page as the following:
   Title: Included Navigation - Top
   Page URL: topnav.htm

To create the bottom navigation bar, follow these steps:

1. Copy the bottom row of navigation buttons from the home page to your clipboard.
2. Create a new Normal page. Paste the navigation buttons onto it, and align them in the center of the page.
3. Assign the Web Color style sheet to the page by choosing File | Page Properties.
4. Choose File | Save to save the page as the following:
   Title: Included Navigation - Bottom
   Page URL: botmnav.htm

Move the Text navigation bar, Footer, and Navigation Button pages to the _private directory as you did with the Web Colors page earlier in this chapter.

Workshop Wrap-Up

Well, there you have it; you're well on the way to building your site. The main pages exist on your Web now, and you have a fairly good idea of the direction in which the Web is going. You have a unique home page complete with animation. A custom template enables you to easily add links to your site. You let people know what you've added to your site in the What's New page. Other pages await completion, with the To Do list telling you what you need to complete.

Chapter Summary

You created many pages in this chapter, some of which are nearly complete and others that appear in your To Do list. The pages include custom backgrounds and images, and text and link colors that blend together nicely. The home page features animation. The pages soon will be interlinked through navigation bars and text links that enable visitors to easily navigate to the main pages on your web. It wasn't that hard, was it?

Next Steps

You'll continue your web in Chapter 17, after you learn some advanced features you can use on your pages. You'll take full advantage of the techniques you'll learn in the following chapters:

• See Chapter 13, "Your Tables Are Ready," to learn how to use tables to enhance your page layout.
• See Chapter 14, "Frames-Pages with Split Personalities," to learn how to display more than one page at a time within the space of a single page, using links to change the contents in each of the sections.
• See Chapter 15, "Automating Pages with Bots," to learn how to use the basic bots to simplify your page creation even further.
• See Chapter 16, "Going Beyond the FrontPage Editor," to learn how to use other types of editors with FrontPage and how to use different types of content on your pages.

Q&A