Chapter 17

Real-Life Examples

CONTENTS

Well, you're about to learn about one of the facts of life about developing Web pages. As new features are added to the HTML standards, the first thing you want to do is add those new features to your pages. Some of the things you learned in this section of the book incorporate some of the latest and greatest enhancements to the HTML standard. So, you'll get a crash training course in modifying some existing pages to apply the features as well as adding some automation to your pages with those bots you've been hearing so much about.

Changing Your Home Page

You're going to change the layout of the home page a little bit by inserting the contents that are already there into a table. This brings the footer from the bottom of the page to directly below the Star Map animation file.

Open the Far Out There Web in the FrontPage Explorer. Then, open the home page and edit it by following these steps:

  1. Open the Far Out There home page in the FrontPage Editor by choosing File | Open from Web. The screen shots show this page against a white background, so you easily can see the table guides on the page.
  2. Position the insertion point at the end of the guide graphic at the top of the page. Choose Table | Insert Table to insert a table with the following properties:
    Rows: 5
    Columns: 3
    Alignment: Center
    Border Size: 0
    Cell Padding: 0
    Cell Spacing: 0
    Width: 456 Pixels

    TIP
    Click the Show/Hide button on the Standard toolbar to see the guides around borderless tables as well as other formatting marks.
  3. Select the cells in the first and third columns of the table. To select the first row, place your cursor directly above the column, where it changes to a small arrow. Click to select the cells. Shift+click to select the third column in a similar manner.
  4. Right-click and choose Cell Properties from the context menu. Set the properties for the selected cells to the following:
    Horizontal Alignment: Center
    Vertical Alignment: Middle
    Specify Width: 88 Pixels
  5. Select the cells in the second column and use the Cell Properties dialog to change their settings to the following:
    Horizontal Alignment: Center
    Vertical Alignment: Middle
    Specify Width: 280 Pixels
  6. Select the first row of cells by placing the cursor just outside the left side of the table. Click to select the cells, and choose Table | Merge Cells to merge them into one cell.
  7. Select the text in the text navigation bar, and press Ctrl+X to cut it and place it on the Clipboard. Then paste it into the first row of the table by pressing Ctrl+V.
  8. Merge the cells in the bottom row into one cell. Cut the footer from the page and paste it into this cell. See Figure 17.1 to see what your table should look like at this point.
    Figure 17.1:You begin to enhance your page layout by using tables.
  9. Click and drag to select the three navigation buttons in the middle of the top row of buttons on the page. They appear in inverse video when selected. Cut them and move them to the Clipboard by pressing Ctrl+X. Then paste them into the center cell in the row below the text navigation bar, using Ctrl+V.
  10. Cut and paste the animated GIFs in the first and third cells in the same row as the navigation buttons you just added.
  11. Cut and paste the remaining two buttons from the top navigation bar into the first cell in the third row. Figure 17.2 shows what your table should look like at this point.
    Figure 17.2:The animations and first row of navigation buttons are relocated to the table.
  12. Cut the Far Out There Site graphic from the page and paste it into the center cell of the third row (the cell next to the two navigation buttons).
  13. Cut the three navigation buttons from the center of the bottom navigation bar on your page, and paste them into the cell below the header graphic.
  14. Select the two remaining navigation buttons from the bottom navigation bar and paste them into the cell at the right of the main header graphic.
  15. Click and drag your mouse in the page area below the table to select any stray formatting that may still exist from the previous contents. Delete any selection by pressing Delete.
  16. Your page is now complete and should look like the page shown in Figure 17.3. Save the updated page to your web by choosing File | Save.

Figure 17.3:The layout of the home page is greatly improved with a table.

Creating a Template for Your Main Pages

In Chapter 12, "Real-Life Examples," you created new pages while you generated links from the navigation text and graphics. It would have been easier if you had a custom template of your own on which to base the pages. I held off on creating that template first, because I wanted you to use tables to enhance the layout for those pages as well. After you create and save the following template, you'll use it to revise the pages that already exist on your web.

You'll create a template that you can use for all the main pages in your web. This template features table layout for the text and graphic navigation bars. You'll also place bookmarks and links on the template to prepare for pages that might be long. This way, your pages can have a consistent layout from one section to the next.

Follow these steps:

  1. Create a new page in the FrontPage Editor by choosing File | New. Choose to base the page on the Normal page template.
  2. Assign the Far Out There Web colors to the page by choosing File | Page Properties.
  3. You'll be inserting a table into this page. Keep the Insert Table dialog open after you assign the following table properties, because you'll be adding some extended attributes in the next step:
    Rows: 2
    Columns: 3
    Alignment: Center
    Border Size: 5
    Cell Padding: 0
    Cell Spacing: 0
    Width: 460 Pixels
    The following attributes enhance the appearance of the table when you view it in Internet Explorer (2.0 or 3.0) and the upcoming version of Netscape 3.0 (now available in beta from Netscape's site). The values make the background color of the cells the same shade of light blue as the background image. The border around the cells has a 3-D appearance, with the light purple from the background color as the lighter shade and the dark shade of purple from the background as the darker shade.
  4. From the Insert Table dialog box, click the Extended button. The Extended Attributes dialog appears. Add extended attributes to the table using the following names and values:
    Name: BGCOLOR
    Value: #C8EDFF
    Name: BORDERCOLORLIGHT
    Value: #Ecc8FF
    Name: BORDERCOLORDARK
    Value: #C8D3FF

    TIP
    How'd I get those weird values to enter in the Extended Attributes dialogs? I used one of my graphics programs to determine the RGB formulas for the light blue and purple in the background:
    Background: R 200 G 237 B 255
    Light Purple: R 236 G 200 B 255
    Dark Purple: R 200 G 211 B 255
    There are a couple of ways you can convert to hexadecimals. One is to use the calculator built into Windows 95. Select the calculator from the Start menu (it's in the Accessories submenu). After the calculator opens, follow these steps:
    1. From the View menu, choose Scientific.
    2. Select the Dec radio button in the Number System group, and enter the decimal number you want to convert to hexadecimal.
    3. Select the Hex radio button in the Number System group. The equivalent hexadecimal number appears in the calculator display.
    If you're the type of person who likes visual references that you can put your hands on, I made up a table so that I could easily translate each of these decimal numbers to its hexadecimal equivalent. Take a look at Table 17.1, and you can use it, too! The first row of the table contains the hexadecimal values of the decimal numbers 0 through 15, the second row contains the hexadecimal values for the numbers 16 through 31, and so on. You'll have to do a bit of counting using this table, but it's a lot easier than calculating it.
    Using the first color as an example, 200 (red) translates to C8; 237 (green) translates to ED, and 255 (blue) translates to FF. Put these together, and you get the value I entered for the background of the table: C8EDFF

    Table 17.1. Hexadecimal equivalents of decimal numbers.

    Decimal Values
    Hexadecimal Equivalent
    0-150001 0203 0405 0607 0809 0A0B 0C0D 0E0F
    16-311011 1213 1415 1617 1819 1A1B 1C1D 1E1F
    32-472021 2223 2425 2627 2829 2A2B 2C2D 2E2F
    48-633031 3233 3435 3637 3839 3A3B 3C3D 3E3F
    64-794041 4243 4445 4647 4849 4A4B 4C4D 4E4F
    80-955051 5253 5455 5657 5859 5A5B 5C5D 5E5F
    96-1116061 6263 6465 6667 6869 6A6B 6C6D 6E6F
    112-1277071 7273 7475 7677 7879 7A7B 7C7D 7E7F
    128-1438081 8283 8485 8687 8889 8A8B 8C8D 8E8F
    144-1599091 9293 9495 9697 9899 9A9B 9C9D 9E9F
    160-175A0A1 A2A3 A4A5 A6A7 A8A9 AAAB ACAD AEAF
    176-191B0B1 B2B3 B4B5 B6B7 B8B9 BABB BCBD BEBF
    192-207C0C1 C2C3 C4C5 C6C7 C8C9 CACB ccCD CECF
    208-223D0D1 D2D3 D4D5 D6D7 D8D9 DADB DCDD DEDF
    224-239E0E1 E2E3 E4E5 E6E7 E8E9 EAEB ECED EEEF
    240-255F0f1 f2f3 f4f5 f6f7 f8f9 FAFB FCFD FEFF

  5. Select the cells in the first and third columns and format them as the following:
    Horizontal Alignment: Center
    Vertical Alignment: Top
    Specify Width: 90 Pixels
  6. Select the cells in the center column and format them as the following:
    Horizontal Alignment: Center
    Vertical Alignment: Top
    Specify Width: 280 Pixels
  7. Select the cells in the first row and merge them into a single cell by choosing Table | Merge Cells.
  8. Insert the faroutsm.gif file (or .jpg) from your web into the cell in the top row.
  9. The insertion point should be at the end of the image at this point. Insert the following Annotation bot: 
    Replace this Annotation with the appropriate title bar graphic.
  10. With the insertion point at the end of the Annotation bot, press Enter. This starts a new normal paragraph on the next line. Enter the following text: 
    This page was last updated on (space)
  11. Choose Insert | Bot and choose Timestamp. Select your date and time preferences, and choose to update the timestamp the last time the page was edited.
  12. With the insertion point at the end of the timestamp, insert an Include bot. Choose to include the Included Text navigation bar from your current web (_private/textnav.htm). Figure 17.4 shows the upper portion of the complete table.
    Figure 17.4:The upper portion of the table contains the header graphics, a timestamp, and some text links.
  13. In the left cell in the bottom row of the table, insert another Include bot, placing the Included Navigation - Top page (_private/topnav.htm) into the cell.
  14. In the right cell in the bottom row of the table, insert another Include bot, placing the Included Navigation - Bottom page (_private/botmnav.htm) into the cell.
  15. Place the insertion point in the center cell and right-click. Choose Cell Properties from the context menu. Choose Horizontal Alignment: Left for this cell.
  16. Place the insertion point at the top of the center cell. Choose Heading 2 from the style bar and enter Page Title.
  17. Select the Page Title text, and press Ctrl+G or choose the Edit | Bookmark command to assign it a bookmark name of top.
  18. Position the insertion point after the page title and insert the following Annotation bot: 
    Enter a brief description of the page contents here.
  19. Use the Style Bar in the FrontPage Editor Format toolbar to format the Annotation bot as a normal paragraph.
  20. With the insertion point at the end of the annotation, insert a horizontal line. Leave the line at its default settings.
  21. Format the next line as Heading 3, and enter the following text: 
    Contents of This Page:
  22. On the next line, insert a bulleted list, and enter some placeholders for links to sections on your page, as shown in Figure 17.5. You can delete these links if the contents of the pages you develop from the templates don't need them.

    Figure 17.5:Enter a bulleted list for links to bookmarks that might appear on longer pages.

    Note
    Most of the pages you develop in this project are fairly short and don't require the bulleted list and bookmarks, but you might have pages that need to be arranged into several sections down the road. This template covers the bases.
  23. Below the table, insert divider.gif from the images in your Web. Align it to the center of the page by clicking the Center button on the Format toolbar.
  24. Place the insertion point at the end of the divider, and insert Heading 3. Enter the following text: 
    Section 1 Title
  25. Insert the following Annotation bot: 
    Insert section contents here
  26. Press Enter to add a normal paragraph to your page. Enter the following text: 
    Back to Top
  27. Select the text you just entered and click the Create Link button to create a link to the Top bookmark (the page title in the table). Figure 17.6 shows the results so far.
    Figure 17.6:A divider and placeholders are added for each section of the template.
  28. Copy the divider, Section 1 Title, the Annotation bot, and the link to the Top bookmark to your Clipboard.
  29. Paste these items onto your page so that you have as many sections on the bottom of the page as you added links to them in the table (in the example shown, there are five items in the bulleted list in the table, so four additional copies were pasted in). To paste each item, place the insertion point on the line after the Back to Top link, and press Ctrl+V to paste the contents of the Clipboard. Center the divider graphic on the page if necessary.
  30. Edit the titles of each new section appropriately (Section 2 Title, Section 3 Title, and so on).
  31. Select each section title and choose Edit | Bookmark or press Ctrl+G to create a bookmark for each. Call the bookmarks sect1, sect2, and so on. Figure 17.7 shows additional sections with bookmarks added.
    Figure 17.7:Additional sections are added, and bookmarks are created for them.
  32. Copy the divider graphic and paste it on the line after the last Back to Top link on the page. Center the divider.
  33. Position the insertion point at the end of the divider and insert an Include bot. Include the footer (_private/footer.htm). Figure 17.8 shows the results.
    Figure 17.8:The footer is added to the page with an Include bot.
  34. Return to the bulleted list in the table, and add the links to the bookmarks on the page. Select the Open Pages tab in the Create Link dialog, and choose the bookmark from the Bookmark drop-down listbox.
  35. The template now is complete. Choose File | Save As. In the Save As dialog, enter the following:
    Page Title: Far Out Main Page Template
    Page URL: faroutmn.htm
  36. Click the As Template button in the Save As dialog. In the Save As Template dialog, enter the following:
    Title: leave as is
    Name: faroutmn
    Description: Template for main pages in Far Out Web
  37. Click OK to save the template. FrontPage asks whether you want to save the images to a file. Click Yes to All.

Finishing the Favorite Far Out There Links Page

You saw how much work it was to create that template for your main pages; now you'll see how much time it can save you in the long run. You'll start by using your new template to complete the Far Out There Links page you started in Chapter 12.

To complete your Far Out There Links page, follow these steps:

  1. From the FrontPage Editor, choose File | New. Select the Far Out Main Page template and click OK. There's everything already in place for you: the bots, the navigation links, the whole shooting match.
  2. Choose File | Open from Web to open the Favorite Far Out There Links page.
  3. Click on the Favorites header graphic to select it. Copy it to your Clipboard.
  4. Choose Window | Tile to display both pages in the FrontPage Editor window.

    NOTE
    If you have other pages open in FrontPage Editor, you can minimize them before you choose the Window | Tile command. They won't become part of the tiled display that way.
  5. Return to the template page, and click the Annotation bot at the top of the page to select it. It appears in inverse video. Paste the header graphic in its place.
  6. Edit the title in the new page to read Favorite Far Out There Links. You can edit the title without removing the bookmark. Place the insertion point after the first letter in the bookmark and type your new title. Use the backspace and Delete keys to remove the letters that were originally there.
  7. Figure 17.9 shows what your page should look like at this point.
    Figure 17.9:Contents from the original page are pasted into the new page created with the main page template.
  8. Select the text below the title in the original page (the text that describes what your Favorites section is all about) and copy it to your Clipboard.
  9. Select the Annotation bot below the heading in the template page and paste the contents of the Clipboard in its place.
  10. This page is brief enough that you won't need the bulleted list and sections that are in the Template page. Select the bulleted list and the horizontal line before it, and delete them from the Template page by pressing Delete. In the example shown in Figure 17.10, I added the Definition list from the original Template page to the table in the template because it was brief enough to fit there.
    Figure 17.10:If the contents of your Favorite Links page are brief enough, you can insert them in the table in the new Template page.
  11. Delete the dividers, section titles, Annotation bots, and links from the Template page. Leave only one divider and the footer below the table, as shown in Figure 17.10.
  12. Choose File | Save to save the page to your Web, using the same title as the previous version:
    Title: Favorite Far Out There Links
    URL: favorite.htm
  13. When FrontPage asks whether you want to overwrite the previous version of the page, click Yes. When you are asked whether you want to replace the existing graphics, click Use Existing.
  14. Close the old version of the Favorite Far Out There Links page. That way, you won't mistakenly get confused between the two and overwrite the newer one with the older one. When FrontPage asks whether you want to save the changes to the original version, click No.
  15. Open the To Do list and mark the task for the Favorite Far Out There Links page as complete.

Revising the Far Out There Links Template

The Far Out There Links template creates pages that are subsections of the Favorites section of the Web. You won't place the navigation buttons on this template, but you will include the text links, timestamp, and the footer on this page. You can copy these items from the Favorites page you currently have open in the FrontPage Editor.

You need to choose File | Open File in the FrontPage Editor to open this file and save it back to the correct directory. Follow these steps:

  1. From the FrontPage Editor, choose File | Open File.
  2. Open the farlinks.htm page. If you installed FrontPage using the default typical installation, it appears in the following directory: 
    c:\Microsoft FrontPage\pages\farlinks.tem
  3. Return to the Favorites page. Select the first row of the table by placing the insertion point to the left of the table, where it turns into a small arrow. Click to select the row (it appears in inverse video). Copy the contents of the row to your Clipboard.
  4. Return to the Far Out There Links template. Highlight the small header graphic and the title plate so that they appear in inverse video. Paste the contents of the Clipboard in their place. Figure 17.11 shows what your page should look like.

    Figure 17.11:The header cell from the table in your Master Page template is pasted into the Links template.

    NOTE
    Copying and pasting the contents of the cell from the Far Out There Links template does something nice. The Clipboard didn't contain only the items in the cell; it also took a copy of the table cell along with it. The graphics, text navigation, and timestamp stand out from the rest of the page. In Internet Explorer, the Links pages look as though they have one large header graphic.
  5. Choose Insert | Bot to include the footer at the bottom of the page, or you can copy it from the Favorites page and paste it at the bottom of the Far Out There Links Template page.
  6. Save the page by choosing the File | Save command. The template is saved back to its original template directory. When you are asked whether you want to replace the graphics, click Use Existing.

Creating a Table of Contents Page

Now you're going to work on the Table of Contents page. This page also appears in your To Do list, but you won't open it from there. You'll use the main Page template to create the table of contents and overwrite the blank version that already exists on your web. Then you'll mark the task as complete when you're done.

Follow these steps:

  1. Choose File | New and select the Far Out Main Page template to generate your new page.
  2. Highlight the Annotation bot that appears at the top of the page. With the annotation text selected, replace this text by choosing Insert | Image to insert contents.gif (or .jpg) from the CD-ROM that accompanies this book.
  3. Replace the page title in the table with the following text:
    Table of Contents
  4. Replace the bulleted list and horizontal line in the center cell with some introductory text for the table of contents, as shown in Figure 17.12.
    Figure 17.12:Enter some introductory text in the second row.
  5. Position the insertion point immediately after the divider below the table, and insert a Table of Contents bot. Assign it the following settings:
    Page URL for Starting Point: index.htm (or the name of your home page)
    Heading Size: 3
    Show Each Page Only Once: Checked
    Show Pages with No Incoming Links: Checked
    Recompute Table of Contents: Choose your preference here. There won't be many pages in this site, so it shouldn't take long to recompute the contents. If your site gets very large, you might want to leave this option unchecked.
  6. Delete the extra content from the Table of Contents page, leaving the last divider and the footer at the bottom. Figure 17.13 shows what your page should look like at this point.
    Figure 17.13:The Table of Contents page is now complete.
  7. Choose File | Save As to save your page to the web, overwriting the previous version of the Table of Contents page. When FrontPage asks whether you want to overwrite the previous version, click Yes. Save the page with the following title and URL:
    Page Title: Far Out There TOC
    Page URL: toc.htm
  8. FrontPage asks whether you want to save the graphics to your web. The first graphic already exists on your web, so you can click Use Existing. The second graphic is new, so you'll want to save that graphic to the web. The third graphic exists on the current web, so you can click Use Existing for that one.
  9. Open the To Do list and mark the task for the What's New page as complete.

Creating Your Frameset Content

The Cool Stuff section of your web features advanced techniques that you'll learn how to incorporate in Chapter 22, "Real-Life Examples." These techniques are presented in a frameset, which you'll create now. In order to complete the frameset, though, you'll need to create some pages that load into the frameset when it first opens. You'll create those pages now and add the content to them in Chapter 22.

The frameset is divided into four frames. The left-most frame contains navigation buttons that take the user to the main pages in the Cool Stuff section of your web. The upper middle frame contains the table of contents for each of the sections. The lower middle frame is the main viewing window for the contents in the Cool Stuff section. Finally, the right frame contains navigation buttons that take the user back to some of the main pages on your web.

The Cool Stuff Main Window Style Sheet

The main viewing window of the Cool Stuff frameset has a different background than what you've been using on the Web so far. You'll use the same background color that you applied to the tables with extended attributes in your other pages. This time, applying the background color to the page is easier; you can specify it by its RGB values. The text and link colors are the same as those used by the main style sheet.

To create the style sheet, follow these steps:

  1. From the FrontPage Editor, choose File | New.
  2. Choose to create the page from the Normal template.
  3. After the page opens in the FrontPage Editor window, assign the following properties to the page:
    Page Title: Cool Stuff Main Window Style Sheet
    Background color: Custom Color - R 200 G 237 B 255
    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)
  4. Choose File | Save to save your page to the Web. Assign it the
    following URL: 
_private/csstyle.htm

The Cool Stuff Main Navigation Page

The Main Navigation page contains an image map that navigates to the main pages in the Cool Stuff section of the Web. When the user clicks one of the hotspots in this frame, it changes the contents of the upper middle frame in the frameset, which is the target frame for this page.

To create the Cool Stuff Main Navigation page, follow these steps:

  1. From the FrontPage Editor, choose File | New.
  2. Choose to create the page from the Normal template.
  3. After the page opens in the FrontPage Editor window, assign the following properties to the page:
    Page Title: Cool Stuff Main Navigation
    Background Color: R 0 G 0 B 128 (Navy Blue)
    Text/Link Colors: Leave as default. There won't be any text on this page
    Default Target Frame: cssect
  4. Choose Insert | Image to place the climgmap.gif image onto your page.

You use the Rectangle button in the Image toolbar to place a rectangular hotspot around each of the navigation areas on the image. After you create each hotspot, the Create Link dialog appears. You'll create links to new pages that appear in the upper middle frame in the frameset. For each of these new pages, use the following steps:

  1. Use the Rectangle tool in the Image toolbar to create a rectangular hotspot around each of the navigation areas on the image map in the Cool Stuff Main Navigation page. The Create Link dialog appears.
  2. Create a link to a new page for each hotspot. Assign the following page titles, URLs, and target frame to the appropriate page, using the New Page tab in the Create Link dialog.

    NOTE
    Assign the target frame of cssect to all the links you create here, using the New Page tab of the Create Link dialog. When users click on links from these new pages, they generate changes in the upper middle frame of the frameset.
    Page Title Page URL Target Frame
    Cool Pages TOC clpgtoc.htm cssect
    Cool Sounds TOC clsndtoc.htm cssect
    Cool Marquees TOC clmartoc.htm cssect
    Cool Animation TOC clanmtoc.htm cssect
    Cool Plug-Ins TOC clplgtoc.htm cssect
    Cool Other TOC clothtoc.htm cssect

  3. Choose to edit each new page immediately. Base each new page on the Normal Page template.
  4. Each of these new pages uses the style sheet that is used in the main pages of your Web. Assign the default target frame of csmain to these new pages after they appear in the FrontPage Editor. To complete both these items, choose the File | Page Properties dialog for each new page and assign the following properties:
    Get background from Page: _private/faroutwc.htm
    Default Target Link: csmain
  5. Save each new page to your current web by choosing File | Save.
  6. Choose Edit | Add To Do Task while each new page is opened to add a task to complete the contents of each page. The task would look something like this:
    Name: Complete Cool Pages TOC
    Description: Add links to pages in main frame

After all the hotspots are completed on the Cool Stuff Main Navigation page, it should look as shown in Figure 17.14. Now you can save the Cool Stuff Main Navigation page to your web by choosing File | Save. Save this page to your web with the following URL:

Figure 17.14:The hotspots are added to the image map. The new pages appear in the upper middle frame and generate changes in the main frame.

Title: Cool Stuff Main Navigation
URL: csnav.htm

The Cool Pages TOC

The Cool Pages TOC appears in the upper middle frame of the frameset when it first opens. The other TOC pages you created (Cool Sounds TOC, Cool Multimedia TOC, and so on) should appear similar to the page you'll create in this example.

In the Cool Pages section, you'll place the best pages you've designed-pages that incorporate lots of fancy graphics, effects, multimedia, Java applets, and whatever else you can think of. So, you want this TOC to list those pages. As you create your new pages, don't forget to add links to them on this page.

Because this is the first table of contents that appears in the frameset when it first loads, you might want to include a link that displays a master table of contents in the main frame. You should have a page named Far Out There Cool Stuff (cooltoc.htm) on your web, which fits the bill quite nicely.

To complete the Cool Pages TOC page, follow these steps:

  1. From the FrontPage Editor, choose File | Open from Web, or switch to the Cool Pages TOC page if it still is open in the FrontPage Editor.
  2. Add a brief introduction to the table of contents. Keep in mind that this page appears in a very narrow window. One or two sentences should be sufficient, as shown in Figure 17.15.
    Figure 17.15:A brief introduction and list of files in the Cool Pages section appears on this page.
  3. Add a bulleted list to prepare for links to pages you'll place in this section. Place text that links to the Far Out There Cool Stuff page on the first line.
  4. Highlight the Far Out There Cool Stuff text and click the Create Link button.
  5. From the Current Web tab in the Create Link dialog, select the Far Out There Cool Stuff page from your current web, or enter cooltoc.htm in the Page field.
  6. Click OK to exit the Create Link dialog. Choose File | Save to save the Cool Pages TOC to your current web.

The Cool Stuff Navs to Main Web

The final frame in the frameset contains the navigation buttons that take the user back to the main pages on your web. You'll use the same navigation links you've already created here, through the use of Include bots.

NOTE
You'll need to use one of those "special" default target frame names I discussed in Chapter 14 for this page. You want the frameset to be removed after the user clicks the buttons in this frame.

Follow these steps:

  1. From the FrontPage Editor, choose File | New.
  2. Choose to create the page from the Normal template.
  3. When the page opens in the FrontPage Editor window, assign the following properties to the page, leaving the remaining settings at their default values:
    Page Title: Cool Stuff Navs to Main Web
    Get Background: Far Out There Web Colors
    Default Target Frame: _top
  4. Use two Include bots, one right after the other, to include the following two pages within this page. When they are inserted, your page should look like Figure 17.16.
    Upper row: Included Top Navigation Links (_private/topnav.htm)
    Lower row: Included Bottom Navigation Links (_private/botmnav.htm)
    Figure 17.16:Make it easy; include what you've already created on your pages when you can.
  5. Save the page to your web using the following URL: 
csout.htm

The Alternate Table of Contents Page

In Chapter 14, you cut and pasted contents from the other pages in your frameset to generate an alternate table of contents for the frameset. Although it wasn't that difficult a job to do it that way, it created a situation where you'd have to keep track of your pages and add links to two different pages. Things could get out of sync
that way.

Now that you know how to automate your pages with bots, you can use the Table of Contents bots to your advantage here. Use them to generate an automatic list of the pages in each section of your frameset. Then you can use this for an introductory page in your frameset and for an alternate page for those who don't have frame-compatible browsers.

To create the page, follow these steps:

  1. The Far Out There Cool Stuff page should be in your To Do list. Choose Do Task from the To Do list to open the page.
  2. Choose File | Page Properties to assign the Cool Stuff Main Window style sheet (_private/csstyle.htm) to the page.
  3. Insert Heading 3 (remember, this will also be in a frameset, so you don't want the heading too large!). Enter the following text: 
    Far Out There Cool Stuff
  4. Switch to Normal text and enter a brief introduction for those who don't have frame-compatible browsers. Figure 17.17 shows an example.
    Figure 17.17:A heading, some introductory text, and six Tables of Contents bots are placed on the page.
  5. Now you'll place a Table of Contents bot on your page for each of the sections in the Cool Stuff frameset (those that appear on the left navigation bar). Choose Insert | Bot | Table of Contents for each of the sections. The Table of Contents Bot dialog appears.
  6. Start the Table of Contents bots with the following pages in your current web, in this order so that the automatic table of contents agrees with the order of the buttons on the left navigation bar. You can use the Browse button in the dialog to choose the pages by their names, or you can enter the URL in the URL field.
    Cool Pages TOC (clpgtoc.htm)
    Cool Sounds TOC (clsndtoc.htm)
    Cool Marquees TOC (clmartoc.htm)
    Cool Animation TOC (clanmtoc.htm)
    Cool Plug-Ins TOC (clplgtoc.htm)
    Cool Other Stuff TOC (clothtoc.htm)
  7. For the remaining properties for the Table of Contents bots, choose the following for each:
    Show Pages Only Once: Checked
    Show Pages with No Incoming Links: Unchecked-otherwise, every page on your site will be listed
    Recompute TOC: Your choice
  8. Click OK to place each Table of Contents bot on your page.
  9. After all six Table of Contents bots are complete, insert an Include bot at the bottom of the page. Include the footer (_private/footer.htm) here.
  10. Save the page to your web by choosing File | Save. When FrontPage asks whether you want to remove the page from your To Do list, click Yes.

Creating the Cool Stuff Frameset Page

Now that you've completed all the prep work for the frameset, you'll probably get mad at me for saying this. You didn't really have to put all that content in your pages before you generated your frameset. I had you do that so that you would have a good idea of what would be in each section before you got to this point. It also saved the fun part for last.

To generate your frameset, follow these steps:

  1. Choose File | New. Select to base the page on the Frames Wizard. The first screen in the Frames Wizard appears.
  2. Choose to make a custom grid, and click Next to continue.
  3. Start the table off with one row and three columns. Adjust the columns so that the center column takes up the largest amount of space. The outer columns are narrow (the graphics within them are 100 pixels wide).
  4. Shift+click to select the center column. Click the Split button and split it into two rows and one column.
  5. Adjust the height of the center top section to match the width of the two columns on the side. This portion of the frameset holds brief text and bulleted lists. When you're finished, your frame grid should look like
    Figure 17.18.
    Figure 17.18:Your frameset contains four sections.
  6. Click Next to continue. Now you assign frame names and the content pages you created earlier to the frameset.
  7. Click the left column, where your Cool Stuff Main Navigation page appears. Assign the following settings:
    Name: csnav
    Source URL: csnav.htm (Cool Stuff Main Navigation)
    Margin Width: 0
    Margin Height: 0
    Scrolling: Auto
    Not Resizeable: Unchecked
  8. Click the upper middle frame, where the Cool Pages TOC appears. Assign the following settings:
    Name: cssect
    Source URL: clpgtoc.htm (Cool Pages TOC)
    Margin Width: 0
    Margin Height: 0
    Scrolling: Auto
    Not Resizeable: Unchecked
  9. Click the larger middle frame, where your automatic table of contents appears, and assign it the following settings:
    Name: csmain
    Source URL: cooltoc.htm (Far Out There Cool Stuff)
    Margin Width: 0
    Margin Height: 0
    Scrolling: Auto
    Not Resizeable: Unchecked
  10. Click the right frame and assign it the following settings:
    Name: csout
    Source URL: csout.htm (Cool Stuff Navs to Main Web)
    Margin Width: 0
    Margin Height: 0
    Scrolling: Auto
    Not Resizeable: Unchecked
  11. Click Next to continue. You are asked to specify an alternate page URL for the frameset. Choose the Far Out There Cool Stuff page here as well (cooltoc.htm).
  12. Click Next to continue. You are asked to save the frameset. Save it with the following title and URL:
    Title: Cool Stuff Frame Set
    URL: csframe.htm
  13. Click Finish to generate the frameset.

If you want to see your frameset page, you'll need to open it in a frame-compatible browser. With the Personal Web server running, open your browser and enter the following URL: 

http://localhost/FarOutThere/csframe.htm

Your frameset should appear in the browser, complete with the pages you created in this chapter, as shown in Figure 17.19.

Figure 17.19:Viewing your frameset in a frame-compatible browser.

Editing the Home Page and Navigation Links

When you created the links on your home page and on the Included Navigation Links pages, you didn't know how to create framesets. The following pages contain links to the page that you now use as your alternate table of contents. You want to change the links so that they open the frameset instead. Open each of the following pages and edit the links:

Creating the Happenings Page

What's the Happenings page all about? It's a page that tells your site visitors about monthly happenings on a topic or subject of interest. You'll use Scheduled Include bots to insert a list of upcoming events, meetings, conferences, or other newsworthy events that are to occur over the next month. A Scheduled Image bot places a calendar graphic on the page as well. If you're in the know about a topic and want to share the latest and greatest events about it, this is the place to share.

To complete the Happenings page, follow these steps:

  1. Create a new page based on the Far Out There Main Page template.
  2. Delete the horizontal line and bulleted list from the table.
  3. Delete the section bookmarks and dividers from below the table, leaving only one divider and the footer at the bottom of the page.
  4. Replace the Annotation bot text in the table with the happen.gif (or .jpg) image located on the CD-ROM that accompanies this book.
  5. Enter some introductory text below the title, as shown in Figure 17.20.
    Figure 17.20:Enter the header graphic, revise the title, and add a brief description of what the Happenings page is all about.
  6. Position the insertion point at the beginning of the divider below the table and press Enter. This adds a new normal paragraph to the page and also provides an area between the two tables in case you want to add content between them later.
  7. Choose Table | Insert Table. Format this table with the following settings. I also used extended attributes to apply the same background colors from the table in the main page template to this new table.
    Number of Rows: 2
    Number of Columns: 1
    Alignment: Center
    Border Size: 5
    Cell Padding: 5
    Cell Spacing: 5
    Table Width: 90 percent
    Extended Attributes:
    BGCOLOR: #C8EDFF
    BORDERCOLORLIGHT    : #Ecc8FF
    BORDERCOLORDARK    : #C8D3FF
  8. Select the cell in the first row and choose Table | Split Cells to split it into two columns.
  9. Place the insertion point in the left cell of the first row. Format the line as Heading 3. Enter a title that's descriptive of what the Happenings page is about.
  10. Return to the FrontPage Explorer and choose File | Import to import one or more of the calendar images into your web. These calendar images are provided on the CD-ROM included with this book in the Miscellaneous Graphics section in .jpg format only. If a graphic doesn't exist on your web, you can assign a name to it in advance by entering it in the URL field.

    For the example, I imported the following: 

    aug_96.jpg
sep_96.jpg
oct_96.jpg
  11. Position the insertion point in the right cell in the top row. Use the Scheduled Image bot for each of the calendar graphics you want to import. Use the Browse button to select the image from your current web. Start each image on the first day of the month that the calendar represents, at midnight (00:00), and end each scheduled image on the first day of the following month at midnight. For example, the August calendar would have a start and end date:
    Starting Date and Time: 01-Aug-1996 00:00
    Ending Date and Time: 01-Sep-1996 00:00
  12. Before you insert a Scheduled Include bot into the table, place an extra space in the table. Insert the Scheduled Include bot on the line above the extra space.
  13. Place three Scheduled Include bots in the cell in the bottom row, using the same procedure as you did for the Scheduled Image bots. You can enter the URLs of pages that do not yet exist in your Web or click the Browse button to choose pages from those in your current Web. The pages I include by Scheduled Includes, for example, have the monthly happenings for those who like to haunt flea markets.

    After you enter your bots, the page is complete.

  14. Save the page to your web as Far Out There Happenings, with the URL of happen.htm.
  15. Click Yes to overwrite the previous version of the file.
  16. Click Yes to save the new graphics to your Web also.
  17. Mark the task as complete in your To Do list.

All that remains is to generate the content that will be included on those given dates, and that can be done at your leisure. Figure 17.21 shows an example of what the page looks like during the month of August. The page that was included through the Scheduled Image bot contained yet another table with a row for each day of the month. That table was inserted inside this table through the Scheduled Include bot.

Figure 17.21:When the month of August rolls around, the page contains the correct calendar and page content.

Completing Your What's New Page

Complete your What's New page using the same steps as outlined for the Favorite Far Out Links page:

  1. Generate a new page with the Far Out There Main Page template.
  2. Cut and paste the contents from the original whatsnew.htm page into the new page where appropriate.
  3. Add the pages you created in this chapter to the What's New page.
  4. Save the new version of the page over the version that exists on your web, using the same title and URL.
  5. Remove the What's New page from the To Do list.

Workshop Wrap-Up

Many of the features you added to the pages in this chapter are fairly new to the Web. For certain, Netscape and Internet Explorer handle tables very well. The next versions of both these browsers offer greater features still. You probably want to check out your pages now in several different browsers to see how you like the look.

Chapter Summary

In this chapter, you incorporated many features that are relatively new to the Web. You've come a long way! You learned how to use tables to enhance page layout. You learned how to apply special cell and border colors to tables using extended attributes. You learned how to convert decimal numbers to their hexadecimal equivalents. You generated an automatic table of contents in a couple of different ways. Through the use of Scheduled Image and Scheduled Include bots, you created a page that automatically updates its content on a monthly basis. Finally, you created a frameset and many related pages, in which you will soon add multimedia and other, even more advanced features.

Next Steps

Q&A

Q: Can I create any kind of template I want for my webs?
A: Sure you can! You might not want to do this for page styles you think you'll only use once in a while, but for pages you use repeatedly (section pages, links pages, and so on), templates help maintain a degree of consistency in the look of your web while saving you time in the process.
Q: Do I have to use a Scheduled Image bot and Scheduled Include bot separately, or can I put regular images on a page and include them along with the page content in a Scheduled Include bot?
A: Scheduled Image bots and Scheduled Include bots don't have to be used separately. I put them separate in this chapter for two reasons: one, to have you work with both in a real-life example, and two, to arrange the calendar beside the heading of the page content rather than below it. A Scheduled Include bot can include anything a "normal" Include bot does.
Q: Why are color numbers entered in hexadecimal? Isn't that really confusing?
A: Yes, and tedious. But it's one of those "computer things" we have to live with. It would be nice to enter those color values by clicking on a color somewhere, and I hope that as the standards for page development are set in stone, we'll see this capability in future releases of FrontPage. I'd much rather click a button than calculate a hexadecimal value myself!