Chapter 12

Real-Life Examples II: Planning and Developing a Site

• About the Web Site Project
• What Else Do You Get?
• Beginning with a Normal Web
• Creating the Black Style Sheet
• Developing the Welcome Splash Screen
• Creating the Main Style Sheet
• Developing the Main Navigation Bar
• Creating the Main Page Footer
• Building the Framed Home Page
• Building the Full-Screen Home Page
• Working on the Main Section TOC for Frameset
• Working on the Main Pages TOC for Frameset
• Working on the Links TOC for Frameset Page
• Starting the Main Page Template
• Starting the Links Page Template
• Organizing Your Pages
• Workshop Wrap-Up
  • 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 includes a few different sections. You'll develop some of them in this chapter and others in the remaining "Real-Life Examples" chapters in this book. The "Real-Life Examples" chapters summarize the techniques from the chapters in the book by showing real-life examples of their use.

You can customize this site any way you choose as far as content. The examples here should give you enough ideas and groundwork to get you started. You set the groundwork for your Web site in this chapter. You begin by creating style sheets for your Web pages. After that, you add several pages that provide the navigation for your site. You also develop a welcome screen and two versions of a home page.

What Else Do 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! There, you'll take your Web site much further. 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 what's new page, where you can inform your visitors where they can find new content on your web
• 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 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

Beginning with a Normal Web

You're going to create a site called Welcome To My World. 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, start with a normal web:

1. From the FrontPage Explorer, choose File | New | FrontPage Web (Ctrl+N), or use the New FrontPage Web button on the FrontPage Explorer toolbar. The New FrontPage Web dialog box appears.
2. In the Template or Wizard field, select Normal Web and click OK. The Normal Web Template dialog box appears.
3. In the Web Server or File Location field, select the server on which to create the web from the drop-down list. Choose the server you usually use to create webs on your local computer.
4. In the Name of New FrontPage Web field, type myworld to name your web, as shown in Figure 12.1.
   Figure 12.1 : In the Normal Web Template dialog box, assign a name of myworld to your web.

5. Click OK. The web is created with a single normal page.

Creating the Black Style Sheet

This first style sheet contains a black background. Assign this style sheet to the pages for which it is required just before you save them. This way, you can follow along in the screen shots. Basically, this style sheet is used for your welcome splash screen, your framed and not-framed home pages, and the contents sections of your frameset.

To create the black style sheet page, follow these steps:

1. From the FrontPage Explorer, choose Tools | Show FrontPage Editor, or select the Show FrontPage Editor button on the Explorer toolbar. The FrontPage Editor opens.
2. From the FrontPage Editor, select the New button on the Standard toolbar. A blank page appears in the FrontPage Editor.
3. Choose File | Page Properties. The Page Properties dialog box shown in Figure 12.2 appears.
   Figure 12.2 : Choose your colors for the black style sheet in the Page Properties dialog box.

4. Select the Background tab. Make sure that the Specify Background and Colors radio button (default) is selected.
5. From the Background drop-down menu, select Black.
6. From the Text drop-down menu, select Silver.
7. From the Hyperlink drop-down menu, select Custom. The Color dialog box appears. Enter a color formula as follows: Red 102, Green 102, Blue 255. Click OK to return to the Background tab.

8. In the Visited Hyperlink drop-down menu, choose Custom. The Color dialog box appears. Enter a color formula as follows: Red 153, Green 0, Blue 153. Click OK to return to the Background tab.
9. From the Active Hyperlink drop-down menu, select Custom. The Color dialog box appears. Enter a color formula as follows: Red 153, Green 0, Blue 51. Click OK to return to the Background tab.
10. Choose OK to exit the Page Properties dialog box. Your page updates with the background color of black.
11. Choose File | Save (Ctrl+S), or click the Save button on the Standard toolbar. The Save As dialog box appears.
12. In the Page Title field, enter Style Sheet (Black). In the "File path within your FrontPage web" field, enter frstyle.htm.
13. Choose OK to save the page to your web.

Developing the Welcome Splash Screen

You're going to create a welcome screen that contains a splash image and two copies of an animated GIF file. Because the splash image contains hotspots to framed or not-framed versions of the site, you also put a text-only version of those links at the bottom of the page. This is done just in case your site visitors have graphics turned off in their browsers.

The steps to create the welcome screen are simple:

1. From the FrontPage Editor, choose File | Open (Ctrl+O), or click the Open button on the Standard toolbar. The Open File dialog box appears, opened to the Current FrontPage Web tab. Double-click index.htm to open the page.
2. Choose Table | Insert Table. The Insert Table dialog box appears.
3. Set the following settings for your table, as shown in Figure 12.3:
   Figure 12.3 : Set the table properties in the Insert Table dialog box.

   
   Rows               3
   Columns           1
   Alignment         Center
   Border Size      0
   Cell Padding     0
   Cell Spacing     0
   Width               Uncheck the Specify Width checkbox.

4. Choose OK. The table appears on your page. It's very skinny, but it's there.

5. Select all three cells in the table by positioning your mouse at the top of the table, where it turns into a small arrow pointing downward. Click to select the cells.
6. Press Alt+Enter, or right-click and choose Cell Properties from the pop-up menu. The Cell Properties dialog box appears.
7. Change the Horizontal Alignment of the cells to Center, and the Vertical Alignment to Top.
8. Click OK to return to the FrontPage Editor.
9. Click inside the cell in the first row. Choose Insert | Image, or select the Insert Image button on the Standard toolbar. The Image dialog box appears.
10. Select the Other Location tab, and verify that the From File radio button is selected (it is the default selection). Then click the Browse button. A second Image dialog box appears.
11. Locate dots.gif on the CD-ROM that accompanies this book. This is an animated GIF file. Double-click the filename, or highlight it and click Open. The animation appears in the top cell. You need to view the animation in a browser that supports animated GIFs, such as Netscape 2.0 (or later) or Internet Explorer 3.0 (or later).
12. Click to select the image. It becomes surrounded by a bounding box. Use Ctrl+C to copy the image into your clipboard. Next, click inside the bottom cell and use Ctrl+V to paste the image into it. You should now have two copies of the image on your page.
13. Click inside the middle cell of the table. Choose Insert | Image, or select the Insert Image button on the Standard toolbar again. The Image dialog box appears, opened to the Other Location tab.
14. The From File radio button is already selected. Click the Browse button to locate myworld.jpg on the CD-ROM that accompanies this book. Double-click the filename, or select it and click Open. The image appears in the middle cell. Your page should now look as shown in Figure 12.4. You will change the page background to black before you save the page.
    Figure 12.4 : Three images now appear in your table.

15. Click the largest image to select it. The Image toolbar appears.
16. Click the Rectangle button on the Image toolbar. Click and drag the mouse to draw a rectangular hotspot around the text in the image that reads I like frames. When you release the mouse button, the Create Hyperlink dialog box appears.
17. Click the New Page tab, shown in Figure 12.5. In the Page Title field, enter Home Page (Framed). In the Page URL field, enter home-f.htm.
    Figure 12.5 : When you create your new pages, add them to your To Do list so you can focus on your current page.

18. Select the Add New Page to To Do List radio button and then choose OK. The New Page dialog box appears.
19. Select Normal Page (default selection) and choose OK. The Save As dialog box appears. Verify your page title and URL, and click OK to save the page to your web.
20. Choose the Rectangle button in the image toolbar again. Draw a rectangular hotspot around the text on the image that reads I hate frames. The Create Hyperlink dialog box opens.
21. Click the New Page tab. In the Page Title field, enter Home Page (Not Framed). In the Page URL field, enter home-nf.htm.
22. Select the Add New Page to To Do List radio button and then click OK. The New Page dialog box appears.
23. Select Normal Page (default selection) and click OK. The Save As dialog box appears. Verify your page title and URL, and click OK again to save the page to your web.

24. Click beneath the table to position the insertion point on the beginning of the line beneath the table. Choose Normal from the Change Style drop-down menu on the Format toolbar. Center the line with the Center button on the Format toolbar.
25. Enter the following text:
    I like frames | I hate frames
26. Click and drag the mouse to select the text that reads I like frames.
27. Click the Create or Edit Hyperlink button on the Standard toolbar. The Create Hyperlink dialog box appears.
28. Select the Current FrontPage Web tab. Click the Browse button. From the Current Web dialog box, double-click home-f.htm. You return to the Create Hyperlink dialog box. Choose OK to return to the FrontPage Editor.
29. Click and drag to select the text that reads I hate frames. Click the Create or Edit Hyperlink button on the Standard toolbar again.
30. From the Current FrontPage Web tab, click the Browse button. Double-click home-nf.htm from the Current Web dialog box. Choose OK from the Current FrontPage Web tab to return to the FrontPage Editor. Your page should now look as shown in Figure 12.6. You can change the style of the font with the Change Font button on the Format toolbar, if you want. For example, I selected Arial font and added Bold formatting with the Bold button on the Format toolbar.
    Figure 12.6 : A text version of the hotspots appears beneath the page for those users who have graphics turned off in their browsers.

31. Choose File | Page Properties. The Page Properties dialog box appears. In the General tab, change the Title to Welcome to My World.
32. Click the Background tab. Select the Get Background and Colors from Page radio button. Click Browse and then double-click frstyle.htm in the Current Web dialog box.
33. Select the Margins tab. Check the Specify Top Margin checkbox, and leave the setting at its default value of 0. This positions the table at the very top of the page in the FrontPage Editor. You can see the results of this attribute in Internet Explorer 3.0.
34. Choose OK to apply the settings to your page. The background of the page turns black.
35. Choose File | Save (Ctrl+S), or click the Save button on the Standard toolbar. The Save Image to FrontPage Web dialog box appears, asking if you want to save dots.gif to the current web. Answer Yes to All.
36. Choose File | Preview in Browser. In the Browser field, select a browser that supports animated GIFs, such as Netscape 2.0 and above or Internet Explorer 3.0 and above. Choose the resolution in which you want to preview the page from the Window Size area. Then click Preview. You'll see animation on the page.

Creating the Main Style Sheet

The style sheet you create in this task is used for the main pages in your web. This style sheet continues with the violet color scheme that you see in your welcome splash page. The background is a pale lavender, and the text and link colors are customized to blend in with the color scheme.

To create your style sheet, follow these steps:

1. From the FrontPage Editor, select the New button on the Standard toolbar. A blank page appears in the FrontPage Editor.
2. Choose File | Page Properties. The Page Properties dialog box, shown in Figure 12.7, appears.
   Figure 12.7 : You select the color combination for your main pages in the Page Properties dialog box.

3. Select the Background tab. Verify that the default selection, Specify Background and Colors, is selected.
4. From the Background drop-down menu, select Custom. The Color dialog box appears. Enter a color formula as follows: Red 255, Green 238, Blue 255. Click OK to return to the Background tab.
5. From the Text drop-down menu, select Custom. The Color dialog box appears. Enter a color formula as follows: Red 51, Green 0, Blue 51. Click OK to return to the Background tab.
6. From the Hyperlink drop-down menu, select Custom. The Color dialog box appears. Enter a color formula as follows: Red 102, Green 102, Blue 255. Click OK to return to the Background tab.
7. In the Visited Hyperlink drop-down menu, leave the value set at Default.
8. From the Active Hyperlink drop-down menu, select Custom. The Color dialog box appears. Enter a color formula as follows: Red 255, Green 0, Blue 102. Click OK to return to the Background tab.
9. Choose OK again to exit the Page Properties dialog box. Your page updates with the background color.
10. Choose File | Save (Ctrl+S), or click the Save button on the Standard toolbar. The Save As dialog box appears.
11. In the Page Title field, enter Main Style Sheet. In the File Path Within Your FrontPage Web field, enter style.htm.
12. Choose OK to save the page to your web.

Developing the Main Navigation Bar

The Main Navigation Bar is included on the main pages in your web with an Include bot. It appears in your pages whether viewed in frames or in the full browser window. The navigation buttons take the user to the main pages in the web. An example of the Navigation Bar is shown in Figure 12.8.
Figure 12.8 : The Main Navigation Bar appears on all the main pages in your web.

To create your Main Navigation Bar page, follow these steps:

1. From the FrontPage Editor, select the New button on the Standard toolbar. A blank page appears in the FrontPage Editor.
2. Insert ten navigation buttons into this page, one right after the other. To do this, choose Insert | Image or use the Insert Image button on the Standard toolbar for each image you are going to insert. The Image dialog box appears. From the Other Location tab, select the From File radio button (default selection), and click the Browse button. Highlight the images included on the CD-ROM that accompanies this book in the order shown below, and click Open.
   b-home.gif          Home button
   b-new.gif            What's New button
   b-toc.gif            Contents button
   b-srch.gif          Search button
   b-topics.gif      Topics button
   b-links.gif        Links button
   b-cool.gif          Cool Stuff button
   b-disc.gif          Discussion button
   b-guest.gif        Guest Book button
   b-mail.gif          Send Mail button
3. For each button in the Navigation Bar, select the button and then press Alt+Enter. The Image Properties dialog box appears. In the Alternative Representations Text field of the General tab, enter the same label that appears on each button graphic. Then click OK to return to the FrontPage Editor to select the next image.
4. Choose File | Page Properties. The Page Properties dialog box appears.
5. Click the Background tab. Select the Get Background and Colors from Page radio button.
6. Click Browse. From the Current Web dialog box, double-click the style.htm page. Then click OK to return to the FrontPage Editor.
7. Choose File | Save (Ctrl+S), or click the Save button on the Standard toolbar. The Save As dialog box appears.
8. In the Page Bitle field, enter Main Navigation Bar. In the "File path within your FrontPage web" field, enter mainnav.htm.
9. Click OK. FrontPage asks if you want to save b-home.gif to your web. Answer Yes to All.

Creating the Main Page Footer

The main page footer, shown in Figure 12.9, also appears on the main pages in your web through the use of an Include bot. Basically, the footer contains copyright information and your e-mail address. The text is formatted as an Address paragraph.

Figure 12.9 : The main page footer appears at the bottom of each web page.

To create the footer, follow these steps:

1. From the FrontPage Editor, select the New button on the Standard toolbar. A blank page appears in the FrontPage Editor.
2. Choose File | Page Properties. The Page Properties dialog box appears.
3. Click the Background tab. Select the Get Background and Colors from Page radio button.
4. Click Browse. From the Current Web dialog box, double-click the style.htm page. Then click OK to return to the FrontPage Editor.
5. From the Change Style drop-down menu on the Format toolbar, select Address.
6. Start the line of text as follows, adding a space at the end of the line:
   Contents of this page (add a space here)
7. Choose Insert | Symbol. The Symbol dialog box appears.
8. Select the copyright symbol from the fourth row, or use the arrow keys to move through the available symbols.
9. Click Insert. You can also insert a character by double-clicking it. The symbol appears on your page.
10. Click Close to exit the Insert Special Character dialog box.
11. Add another space after the copyright symbol, and complete the line of text with 1997, followed by your name or company name.
12. Press Shift+Enter to insert a normal line break. The insertion point moves to the next line.
13. Enter For questions or comments regarding this page, contact followed by your e-mail address.
14. Click and drag to select the text for your e-mail address, and choose the Create or Edit Hyperlink button on the Standard toolbar. The Create Hyperlink dialog box appears.
15. Select the World Wide Web tab. From the Hyperlink Type drop-down menu, select mailto. Complete the URL field by appending your e-mail address after the mailto: prompt, similar to the following:
    mailto:yourname@youremail.com
16. Click OK to return to the FrontPage Editor. The link appears on your page.
17. To change the font of the entire page, choose Edit | Select All (Ctrl+A). Select your font from the Change Font drop-down menu on the Format toolbar. I selected Arial font and reduced the font size by one with the Decrease Font Size button on the Format toolbar.
18. Choose File | Save (Ctrl+S), or click the Save button on the Standard toolbar. In the Page Title field, enter Main Footer. In the "File path within your FrontPage web" field, enter footer.htm.
19. Choose OK. The page is saved to your web.

Building the Framed Home Page

The welcome splash screen that you created at the beginning of this chapter gives users the opportunity to view your site in frames (if they like frames) or in a full browser window (if they don't like frames). The two versions of the home page are virtually identical except for one thing. The framed version of the home page graphic is sized smaller so that it displays better within the frameset. An example of the framed home page is shown in Figure 12.10 as it appears in the FrontPage Editor.

Figure 12.10 : The framed version of your home page is sized smaller to fit in the frameset.

1. From the FrontPage Editor, choose Tools | Show To Do List. The FrontPage To Do list opens.
2. Highlight the task that reads Finish Home Page (Framed), and click the Do Task button. The page opens in the FrontPage Editor.
3. Choose Insert | Image, or click the Insert Image button on the Standard toolbar. The Image dialog box appears.
4. Select the Other Location tab.
5. Select the From File radio button. Then, click the Browse button. Another Image dialog box appears.
6. Locate world-f.jpg on the CD-ROM that accompanies this book. Select the file and choose Open. The image appears on your page.
7. Center the image with the Center button on the Format toolbar.
8. Choose File | Page Properties. The Page Properties dialog box appears.
9. Click the Background tab. Select the Get Background and Colors from Page radio button.
10. Click Browse. From the Current Web dialog box, double-click the frstyle.htm page.
11. Click the Margins tab. Check the Specify Top Margin radio button, and leave the value at its default setting of 0 pixels.
12. Choose OK to exit the Page Properties dialog box. The page updates with a black background.
13. Choose File | Save (Ctrl+S) or click the Save button on the Standard toolbar. FrontPage asks if you want to mark the task as complete. Choose No.
14. Next, FrontPage asks if you want to save world-f.jpg to your web. Answer Yes.

Building the Full-Screen Home Page

The full-screen version of the home page, shown in Figure 12.11, looks virtually identical to the home page that you created in the previous task except that it contains a larger graphic. As you will see, the steps to create the page are basically the same.

Figure 12.11 : The full-screen version of the home page contains a slightly larger graphic but is otherwise the same as the previous version.

1. From the FrontPage Editor, choose Tools | Show To Do List. The FrontPage To Do list opens.
2. Highlight the task that reads Finish Home Page (Not Framed), and click the Do Task button. The page opens in the FrontPage Editor.
3. Choose Insert | Image, or click the Insert Image button on the Standard toolbar. The Image dialog box appears.
4. Select the Other Location tab.
5. Click the From File radio button. Then, click the Browse button. Another Image dialog box appears.
6. Locate world-nf.jpg on the CD-ROM that accompanies this book. Select the file and choose Open. The image appears on your page.
7. Center the image with the Center button on the Format toolbar.
8. Choose File | Page Properties. The Page Properties dialog box appears.
9. Click the Background tab. Select the Get Background and Colors from Page radio button.
10. Click Browse. From the Current Web dialog box, double-click the frstyle.htm page.
11. Choose OK to exit the Page Properties dialog box. The page updates with a black background.
12. Choose File | Save (Ctrl+S) or click the Save button on the Standard toolbar. FrontPage asks if you want to mark the task as complete. Choose No.
13. Next, FrontPage asks if you want to save world-nf.jpg to your web. Answer Yes.

Working on the Main Section TOC for Frameset

The Main Section TOC for Frameset page, shown in Figure 12.12, is another page that displays in the frameset when the user first navigates to the page. This navigation bar appears in the top frame of the frameset, and contains links to the main sections in your web. You assign this page as a source URL when you develop your frameset in Chapter 18, "Real-Life Examples III: Adding Navigation and Automation." To create the Main Section TOC for Frameset page, follow these steps:

Figure 12.12 : The Main Section TOC for Frameset page is one of the source URLs for the frameset that you will develop in a later chapter.

1. From the FrontPage Editor, select the New button on the Standard toolbar. A blank page appears in the FrontPage Editor.
2. Enter the following text:
   Home | Main | Topics | Cool Stuff | Links | Discussion
3. With the insertion point anywhere on the first line, click the Center button on the Format toolbar to center the text.
4. Choose Edit | Select All. The text is selected.
5. Select Heading 3 from the Change Style drop-down menu in the Format toolbar.
6. Select Arial from the Change Font drop-down menu in the Format toolbar.
7. Choose File | Page Properties. The Page Properties dialog box appears.
8. Click the Background tab. Select the Get Background and Colors from Page radio button.
9. Click Browse. From the Current Web dialog box, double-click the frstyle.htm page.
10. Choose OK to exit the Page Properties dialog box. The page updates with a black background.
11. Choose File | Save (Ctrl+S), or click the Save button to save the page to your web. In the Page Title field, enter Main Section TOC for Frameset. In the "File path within your FrontPage web" field, enter frmaintoc.htm.
12. Choose OK. The page is saved to your web.

Working on the Main Pages TOC for Frameset

The Main Pages TOC for Frameset page, shown in Figure 12.13, is the source URL that appears in a side frame when the user first navigates to the frameset. This table of contents links to the pages that are contained within the main section of your web. You will create the links from this page in Chapter 18. To create the Main Pages TOC for Frameset page, do the following:

Figure 12.13 : The Main Pages TOC for Frameset page displays at the side of the frameset when it first opens.

1. From the FrontPage Editor, select the New button on the Standard toolbar. A blank page appears in the FrontPage Editor.
2. Enter the following text on the first line:
   Home
3. With the insertion point at the end of the line of text, press Shift+Enter to insert a normal line break.
4. Complete the list of pages with the following lines, inserting a line break at the end of each line except the last:
   What's New in My World (press Shift+Enter)
   Contents of My World (press Shift+Enter)
   Search My World (press Shift+Enter)
   Topics in My World (press Shift+Enter)
   Favorite Links in My World (press Shift+Enter)
   Cool Stuff in My World (press Shift+Enter)
   My World Discussion (press Shift+Enter)
   My World Guest Book (press Shift+Enter)
   Send Mail to My World
5. Choose Edit | Select All (Ctrl+A). The text appears in inverse video.
6. Select Arial from the Change Font drop-down menu in the Format toolbar.
7. Reduce the size of the text by clicking the Decrease Font Size button in the Format toolbar twice. Your list should now look as shown in Figure 12.13.
8. Choose File | Page Properties. The Page Properties dialog box appears.
9. Click the Background tab. Select the Get Background and Colors from Page radio button.
10. Click Browse. From the Current Web dialog box, double-click the frstyle.htm page.
11. Choose OK to exit the Page Properties dialog box. The page updates with a black background.
12. Choose File | Save (Ctrl+S), or click the Save button to save the page to your web. The Save As dialog box appears. In the Page Title field, enter Main Pages TOC for Frameset. In the File Path Within Your FrontPage Web field, enter frmnpgtoc.htm.

Working on the Links TOC for Frameset Page

The Links TOC for Frameset page, shown in Figure 12.14, is another contents page that displays in the right side of the frameset, although you do not designate this page as a source URL for the frameset. This page contains links to all the links pages in your web. To create the Links TOC for Frameset page, perform the following steps:

Figure 12.14 : The Links TOC for Frameset page also appears in the side frame of the frameset.

1. From the FrontPage Editor, select the New button on the Standard toolbar, or choose File | New (Ctrl+N) and select Normal Page from the New Page dialog box. A blank page appears in the FrontPage Editor.
2. Enter the following text on the first line:
   Home
3. With the insertion point at the end of the line of text, press Shift+Enter to insert a normal line break.
4. Complete the page with a list of topics in which you are interested. The following example lists some of my favorite topics. You can replace these with your own.
   2-D Animation (press Shift+Enter)
   3-D Animation (press Shift+Enter)
   Graphics Development (press Shift+Enter)
   Graphics Software (press Shift+Enter)
   Multimedia Development (press Shift+Enter)
   Sound and Video
5. Choose Edit | Select All (Ctrl+A). The text appears in inverse video.
6. Select Arial from the Change Font drop-down menu in the Format toolbar.
7. Reduce the size of the text by clicking the Decrease Font Size button in the Format toolbar twice.
8. Choose File | Page Properties. The Page Properties dialog box appears.
9. Click the Background tab. Select the Get Background and Colors from Page radio button.
10. Click Browse. From the Current Web dialog box, double-click the frstyle.htm page.
11. Choose OK to exit the Page Properties dialog box. The page updates with a black background.
12. Choose File | Save (Ctrl+S), or click the Save button to save the page to your web. The Save As dialog box appears. In the Page Title field, enter Main Links TOC for Frameset. In the "File path within your FrontPage web" field, enter frlinktoc.htm.

Starting the Main Page Template

The main reason that you have not completed the links on all the previous pages is because you will use your own, original page templates when you create the links to your new pages. You only develop part of the page templates in this chapter. The techniques discussed in the next section of the book save you a lot of time in the long run and are best included on the page templates before you create your new pages.

At present, the main page template and the subsequent links template don't look like much. You'll add the navigation links and a Timestamp bot in Chapter 18. For now, you add some basic content to the main page template as shown in Figure 12.15.

Figure 12.15 : Add some basic content to your main page template.

1. From the FrontPage Editor, select the New button on the Standard toolbar. A blank page appears in the FrontPage Editor.
2. Choose Insert | Image, or click the Insert Image button on the Standard toolbar. The Image dialog box appears.
3. Select the Other Location tab.
4. Select the From File radio button and then click the Browse button. Another Image dialog box appears. Locate placehdr.gif on the CD-ROM that accompanies this book. Highlight the file and click Open. The image appears on your page.
5. Press Enter. The insertion point moves to the next line. Select Heading 3 from the Change Style button on the Format toolbar.
6. Enter Page Title and press Enter. The insertion point moves to the next line, which is formatted as a normal paragraph.
7. Choose Insert | Comment. The Comment dialog box appears.
8. In the Comment field, enter Enter contents of the page here. Choose OK. The comment appears on your page.
9. With the insertion point at the beginning of the comment, choose Insert | Horizontal Line. Click on the line, and press Alt+Enter. The Horizontal Line Properties dialog box appears.
10. In the Width field, enter 90. Leave the Percent of Window radio button selected.
11. From the Color drop-down menu, select Purple for a line color.
12. Choose OK. The line changes to purple.
13. Position the insertion point at the end of the comment, and choose Insert | Horizontal Line again. This time, the horizontal line uses the settings you set in the previous steps. It will continue to do so until you change the settings or until you close the FrontPage Editor.
14. Choose File | Page Properties. The Page Properties dialog box appears.
15. Click the Background tab. Select the Get Background and Colors from Page radio button.
16. Click Browse. From the Current Web dialog box, double-click the style.htm page.
17. Choose OK to exit the Page Properties dialog box. The page updates with a light purple background.
18. Choose File | Save. The Save As dialog box appears. In the Page Title field, enter My World Main Page Template. In the "File path within your FrontPage web" field, enter mwmain.htm.
19. Click the As Template button. The Save As Template dialog box appears. The Title and Name are already entered for you. In the Description field, enter Main page template for My World Web.
20. Choose OK. The template is saved to the FrontPage page templates directory. If you installed FrontPage using the default settings, it is located in the c:\Program Files\Microsoft FrontPage\pages\mwmain.tem directory.
21. Leave this page open. You'll add more to it to create your links page template in the next section.

Starting the Links Page Template

For the links page template, you expand upon the content that you created for your main page template. Take care not to save your links page template over the main page template. In fact, I'll address that issue first before you make any changes to your template:

1. From the FrontPage Editor, choose File | Save As (this is important-if you choose File | Save, you overwrite your previous template). The Save As dialog box appears. Edit the Page Title field to read My World Links Page Template. In the File Path Within Your FrontPage Web field, enter mwlinks.htm.
2. Click the As Template button. The Save As Template dialog box appears. The Title and Name are already entered for you. In the Description field, enter Links page template for My World Web.
3. Choose OK. The template is saved to the FrontPage page templates directory. If you installed FrontPage using the default settings, it is located in the c:\Program Files\Microsoft FrontPage\pages\mwlinks.tem directory.
4. Replace the title that reads Page Title with Links to [Subject Name]. The brackets remind you that you need to replace the text in the heading.
5. Double-click the comment to open the Comment dialog box. Edit the comment to read Enter a description of the links on the page here. Choose OK to return to the FrontPage Editor.
6. With the insertion point at the end of the comment, press Enter. The insertion point moves to the next line.
7. From the Change Style drop-down menu, select Defined Term. Enter Name of Site or Page 1.
8. Press Enter. The insertion point moves to the next line and formats as a definition, although you see Normal in the Change Style drop-down menu as shown in Figure 12.16. This is correct-you didn't do anything wrong. Enter Description of Site or Page 1.
   Figure 12.16 : Add a defined term and a definition for each link on your page.

9. Press Enter to add placeholders for four more sets of links, numbering them consecutively. For an even quicker way to get this done, copy the first term/definition set into your clipboard using Ctrl+C, position the insertion point at the end of the firstw definition, and then paste four more copies onto your page using Ctrl+V.
10. Use the Bold button, or Ctrl+B, to format the defined terms in bold text.
11. Use the Italic button, or Ctrl+I, to format the definitions in italic text.
12. Choose File | Save to save the links page template over the previously saved version.

Organizing Your Pages

To conclude this chapter, you're going to organize your directories because that home directory is getting a little full. This helps you find your pages and images a lot easier. Follow these steps:

1. Return to the FrontPage Explorer. Choose View | Folder View.
2. Highlight the main directory (the one at the top of the list in All Folders view). You'll find all your pages there.
3. Select all the images, or move them in several steps if that's easier for you. Click and drag to move all the images to the images directory in your web.
4. Select footer.htm, frstyle.htm, mainnav.htm, and style.htm, and move them into your web's _private directory.
5. Highlight the main folder. From the FrontPage Editor, choose File | New | Folder. Create a new folder named frameset. The frameset that you create in Chapter 18, "Real Life Examples III-Adding Navigation and Automation," and all its associated contents pages are stored in this folder.
6. Select frlinktoc.htm, frmaintoc.htm, frmnpgtoc.htm, and home-f.htm. Click and drag to move them into your new frameset folder.

What you should have left now in your main folder are two pages-home-nf.htm and index.htm. By the time you complete the next phase of your Web site, there will be many more. You're off to a rolling start!

Workshop Wrap-Up

Well, there you have it; you're well on the way to building your site. The home pages and the main navigation exist on your web now, and you have a fairly good idea of the direction in which the web is going. You also created two page templates that allow you to create custom content. You have a unique splash page complete with animation. You learned how to add and complete tasks in the To Do list. You created many pages in this chapter, some of which have a way to go before completion. The pages include custom backgrounds and images and text and link colors that blend together nicely. You will soon interlink the pages through links that you add to the navigation pages you have waiting in your web. See, it wasn't that hard, was it?

Next Steps

You'll continue building your web in Chapter 18, "Real-Life Examples III-Adding Navigation and Automation," 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:

• In Chapter 13, "Frames-Pages with Split Personalities," you 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.
• Chapter 14, "Automating Pages with Bots," discusses using the basic bots to simplify your page creation even further.
• You'll learn how to use other types of editors with FrontPage and how to use different types of content on your pages in Chapter 15, "Going Beyond the FrontPage Editor."
• Refer to Chapter 16, "Database Connectivity," to learn how to configure FrontPage to communicate with an ODBC-compliant database.
• You'll learn how to enter your own HTML code in your pages (if you dare) in Chapter 17, "Using Your Own HTML Code."

Q&A