Chapter 6

Real-Life Examples


CONTENTS

In the previous chapters, you learned how to use FrontPage's templates to develop Web sites quickly and easily. What if you want to create your own Web site, using many of the pages that the templates and wizards provide? In FrontPage, it is easy to add the contents of one of the Web templates to another. It is just a matter of enabling a checkbox.

The Scenario

In this chapter, you create a Web site that has the following features:

Sounds like a tall order, right? Not with FrontPage. It makes combining Web templates and pages easy.

Building the Presence

In Chapter 4 "If You Mean Business," you learned how to develop a site using the Corporate Presence wizard. This project does not use everything that the Corporate Presence Web has to offer, but some pages fit the bill well. Use the Corporate Presence wizard to generate some of the pages in the Web. The steps are

  1. Choose File | New Web. The New Web dialog box appears.
  2. In the New Web dialog box, highlight Corporate Presence Wizard. Click OK to continue. The New Web from Wizard dialog box appears.
  3. In the Web Server field, choose your server from the drop-down menu if it does not already appear in the designated field.
  4. In the Web Name field, assign a name for the Web. Enter
    AcmeCorp
  5. Click OK to create the pages in the Corporate Presence Web.

You've Been Here Before

At this point, the introductory screen of the Corporate Presence wizard appears. Click Next to choose the pages that you want to include.

Products

The second screen in the wizard asks what types of pages you want to include in your Web site. The only pages required are the home page-which is automatically included-and the products page. Therefore, choose the Products and Services option, and click Next to continue.

The Initial Impression

In the third screen of the Corporate Presence wizard, you choose the options that you want to include in your home page. This time, don't include a mission statement, but choose these options:

Figure 6.1 shows an example of the home page. After you make your selections, click Next to continue.

Figure 6.1 : The home page is the entry page in your Web site.

Remember? Only Products

In the fourth screen of the Corporate Presence wizard, you choose how many products and services pages to include in the site. For the time being, create one product page. After you customize the initial page, you can save it as a template and use it for additional pages. Service pages are not necessary for this Web site. Enter 1 for products and 0 for services.

When you specify only products pages, the FrontPage Explorer creates a products page, as in Figure 6.2. After you make your selections, click Next to continue.

Figure 6.2 : The products page provides links to all the product data sheets in your site.

What Should You Tell Them?

The fifth screen in the wizard asks what type of information you want to include in your product data sheets, shown in Figure 6.3. The options for the service description pages are grayed out because you elected not to create them. For the products page, choose the following options:

Figure 6.3 : The product data sheet provides information about the products that you offer.

After you make your selections, click Next to continue.

Top and Bottom

In the sixth screen of the wizard, you choose what you want in the header and the footer of the pages. For the header information, select

At the bottom of the form, you want to include a copyright notice and the date when the page was most recently modified. You also want to include your e-mail address. For the footer information, select

After you make your selections, click Next to continue.

Setting the Style

The seventh screen of the wizard asks what type of graphic style you want for your pages. Select the style that you want, and click Next to continue.

Setting More Style

In the eighth screen of the wizard, you choose the color scheme for your pages. All the pages in the Web use this color scheme. The steps are

  1. In the Colors section, choose the Custom radio button.
  2. For the background texture, choose Gray Texture 5 from the drop-down menu.
  3. For the normal text color, click the color square and choose the seventh color in the fifth row in the Color dialog box (very dark purple). Click OK to return to the wizard.
  4. For the visited link color, click the color square and choose the seventh color in the third row in the Color dialog box (deep burgundy). Click OK to return to the wizard.
  5. For the link color, click the color square and choose the sixth color in the second row in the Color dialog box (deep aqua). Click OK to return to the wizard.
  6. For the active link color, click the color square and choose the last color in the third row in the Color dialog box (deep rose). Click OK to return to the wizard.
  7. Click Next to continue with the Discussion Web wizard.

TIP
You can change color selections later. Edit the page properties of the Web Colors page in the Corporate Presence Web by using the File | Page Properties command. The other pages in your Web update with the new choices automatically.

Putting on the Hard Hat

The eighth screen in the wizard asks whether you want to include the Under Construction icon in your pages. This is your choice. Click Next to continue.

Where Your Company Is

In the ninth screen in the wizard, you enter the company information and a name for the Web. Enter the following information:

After you enter your information, click Next to continue.

The Number You Have Dialed

In the tenth screen, you enter company contact information. Enter the following information:

After you enter your information, click Next to continue.

Creating the Web

The final screen in the wizard asks whether you want to view the To Do list after the Web is created. You do not want to view it at this time because you have more pages to add, so uncheck the option. To create the Web site, click the Finish button. Your Web site appears in the Explorer window. Figure 6.4 shows an expanded view of the links in Summary View.

Figure 6.4 : Your Corporate Presence pages appear in the Explorer window.

Reviewing the Web

Based on the options that you chose, your Web site has seven pages. They are described in Table 6.1.

Table 6.1. The ACME Corp Corporate Presence web.

Filename (URL)Description
index.htmACME Corp home page
prod01.htmACME Corp product 1 data sheet
products.htmACME Corp products page
_private/inforeq.htmResults from Form 1 of the prod01.htm page
_private/navbar.htmIncluded navigation links
_private/logo.htmIncluded logo page
_private/style.htmWeb colors

Now that you have completed the Corporate Presence portion of your web, you can create the public discusqèœn group.

Adding One Web to Another

You want to add a Customer Support discussion area to your Web site. You could use the Customer Support Web template, which is discussed in Chapter 3 "Can We Talk?" However, you can also use the Discussion Web wizard. It enables you to customize your Discussion web.

To add the Discussion Web wizard pages to your current Web:

  1. Choose File | New Web. The New Web dialog box appears.
  2. Highlight the Discussion Web wizard.
  3. Check the Add to the current Web checkbox, which appears beneath the Web option list, as shown in Figure 6.5.
    Figure 6.5 : Check the Add to the current Web checkbox to add the Discussion Web to your existing Web site.
  4. Choose OK to continue creating your Discussion Web.
  5. The introductory screen in the Discussion Web Wizard now appears on your screen. Click Next to continue.

Pulling Out the Stops

You want a full-featured discussion web in your site. It should have a table of contents for the articles, a search form, threaded replies, and a confirmation page. Constructing everything is an easy task. In the second screen of the Discussion Web wizard, select all the options. Click Next to continue.

Your Discussion Needs a Name

In the third screen in the Discussion Web wizard, you assign a descriptive title for the discussion. This title appears in the main pages of your discussion web. Enter the following name:

ACME Corp Customer Support Discussion

Based on this name, the wizard informs you that the articles in this discussion will be stored in the _accsd directory or folder. In addition, the files generated by this discussion will be prefixed with accs. Click Next to continue.

Custom Fields Are Required

In the fourth screen in the wizard, you choose a set of input fields for the submission form. Choose the Subject, Category, Comments option, and click Next to continue.

Let Everyone In

In the fifth screen in the wizard, you choose whether the discussion takes place on a protected web. This part of the web is public, so select the Anyone Can Post Articles option. Click Next to continue.

Sorting Your Articles

In the sixth screen in the wizard, you choose how the table of contents sorts the list of posted articles. Select the default option, which is to sort from oldest to newest. Click Next to continue.

Watch That Home Page

The seventh screen in the wizard asks whether you want the Table of Contents page for the discussion to be the home page in the web. The web already has a home page, so you should choose no. Click Next to continue.

The Report

In the eighth screen in the wizard, you choose the information that the search form reports for matching documents. Select the Subject, Size, Date option. Click Next to continue.

Choose Your Style

In the ninth screen in the wizard, you choose colors for the pages. For the sake of consistency, you should select the same colors as you did for the corporate presence web. The steps are

  1. In the Colors section, choose the Custom radio button.
  2. For the background texture, choose Gray Texture 5 from the drop-down list.
  3. For the normal text color, click the color square and choose the seventh color in the fifth row in the Color dialog box (very dark purple).
  4. For the visited link color, click the color square and choose the seventh color in the third row in the Color dialog box (deep burgundy).
  5. For the link color, click the color square and choose the sixth color in the second row in the Color dialog box (deep aqua).
  6. For the Active Link color, click on the color square and choose the last color in the third row (deep rose).
  7. Click Next to continue.

TIP
You can change the page properties of the Discussion pages to use the Corporate Presence Web colors page as an alternative.

Select Your Frame Options

In the tenth screen in the wizard, you choose how the articles should be displayed in the discussion. Select the Dual Interface option. This means that the articles are displayed in frames if the browser supports them or in regular pages if the browser does not. Click Next to continue.

You Are Done

The final screen in the wizard notifies you that you have answered all the questions. It tells you that there are two main screens in the discussion:

NOTE
You need to provide a link to the frame set for the ACME Corp Customer Support discussion. In the figures in this chapter, a link is added to the included navigation links page.

Click Finish to create the web. You are asked whether you want to replace the existing grytxtr5.jpg file. Answer no. The wizard then uploads files based on the template in the Program Files\Microsoft Frontpage\Webs\Vtidisc.wiz directory on your hard drive.

What Has Been Added

The Discussion Web appears in the Outline View of the FrontPage Explorer. Figure 6.6 shows the Web added to the pages that you created with the Corporate Presence wizard. Fourteen additional pages are added to your Web site. They are described in Table 6.2.

Figure 6.6 : The new pages appear in the FrontPage Explorer.

Table 6.2. Customer Support discussion pages that are added to the web.

Filename (URL)Page Title
accsfrm.htmFrameset for ACME Corp Customer Support Discussion
accstoc.htmACME Corp Customer Support Discussion TOC
accstocf.htmACME Corp Customer Support Discussion TOC (Framed)
accswelc.htmACME Corp Customer Support Discussion Welcome
accscfrm.htmACME Corp Customer Support Discussion Confirmation
accssrch.htmACME Corp Customer Support Discussion Search Form
accspost.htmACME Corp Customer Support Discussion Submission Form
accsaftr.htmIncluded Article Footer for ACME Corp Customer Support Discussion
accsahdr.htmIncluded Article Header for ACME Corp Customer Support Discussion
accsfoot.htmIncluded Footer for ACME Corp Customer Support Discussion
accshead.htmIncluded Header for ACME Corp Customer Support Discussion
accsstyl.htmACME Corp Customer Support Discussion Web Colors
_accsd/toc.htm_accsd Discussion
_accsd/tocproto.htm_accsd/tocproto.htm

TIP
To view the files in the hidden directories in your web, use the Tools | Web Settings command. Click the Advanced tab in the Web Settings dialog box. Under Options, check Show documents in hidden directories.

Examining the Customer Support Discussion Pages

Now take a closer look at the pages that the Discussion Web wizard generates. The home page of the discussion is the frame set for the Customer Support discussion. If your browser supports frames, Figure 6.7 shows how the frame set looks. The contents are displayed in a frame at the top of the page, and the Welcome section with the discussion articles is displayed at the bottom of the page.

Figure 6.7 : The first page of the Customer Support Discussion displayed in frames.

If your browser does not support frames, the table of contents shown in Figure 6.8 appears. This is the page titled Customer Support Discussion TOC.

Figure 6.8 : This version of The Table Of Contents page appears if the browser does not support frames.

The Customer Support Discussion TOC (framed) page is shown in Figure 6.9. It is included in the frame set shown in Figure 6.7.

Figure 6.9 : This version of the Table Of Contents page appears within the frame set.

The Customer Support Discussion Welcome page, shown in Figure 6.10, is also included in the frame set. If your browser does not support frames, however, it appears as shown in Figure 6.10. The Welcome page tells visitors to your site how to use the discussion and submit articles.

Figure 6.10: The Welcome page provides instructions on how to use the discussion.

When a visitor submits an article to the discussion, he receives a confirmation message. The Customer Support Discussion Confirmation page, shown in Figure 6.11, includes the title of the article submitted. It instructs the visitor to return to the table of contents to see the article in the list.

Figure 6.11: When site visitors submit articles, the Confirmation page provides an acknowledgment.

Site visitors can also search through the articles in the discussion for a word or phrase by using the Customer Support Discussion search form. This form, shown in Figure 6.12, includes a basic search engine. You might want to add examples of how to search for text.

Figure 6.12: Site visitors can search for a word or phrase within the articles with the Search page.

A site visitor submits an article to the discussion with the Customer Support Discussion Submission page, shown in Figure 6.13. He enters the subject of the message, selects a category from a drop-down list box, and enters the body of the article in the Comments field. When the visitor clicks the Post Article button, the article is submitted to the discussion.

Figure 6.13: Site visitors use the Discussion submission page to post articles to the discussion.

The included article header for the Customer Support discussion, shown in Figure 6.14, contains links to the home page, the discussion's Table of Contents page, the discussion search form, and the discussion submission form. In addition, visitors can post replies to messages, navigate to the previous and next messages in the thread, and go to the first article in the discussion. This header appears on the articles in the discussion. The included article footer for the Customer Support Discussion contains no information. You can add content to it if you want.

Figure 6.14: This header appears on all discussion articles. The footer is blank.

Figure 6.15 shows the included header and the included footer for the Customer Support discussion. They both appear on the main pages in the discussion. The included header contains links to the home page, the discussion's Table of Contents page, the discussion search form, and the discussion submission form. The included footer contains the date when the page was last updated.

Figure 6.15: This header and footer appear on all the main pages in the discussion.

Figure 6.16 shows the table of contents for the discussion. Initially, this page contains a heading that displays the directory name for the discussion. You may want to edit this to be more descriptive of the discussion you created. As users submit articles to the discussion, the subject of the article is placed in the table of contents page.

Figure 6.16: The table of contents updates automatically as articles are submitted.

Adding a Survey Page

Now use the Survey Form template to add a customer survey form to the site. The steps are

  1. From the FrontPage Editor, choose File | New. The New Page dialog box appears.
  2. From the New Page dialog box, highlight the Survey Form option. Click OK. The page appears in the FrontPage Editor.
  3. To set the Web colors for the page, choose File | Page Properties. The Page Properties dialog box appears.
  4. Change the title of the page to ACME Corp Customer Survey.
  5. Under Customize appearance, check the Get Background and Colors from Page option.
  6. Click the Browse button. The Current Web dialog box appears.
  7. Highlight Web Colors, the last file in the list, and click OK. The new color scheme is added to the page. The Page Properties dialog box appears.
  8. Click OK. The new colors appear in the page.
  9. Change the URL of the page to custsurv.htm.
  10. Click OK to save the file to the web.

The upper portion of the survey form, shown in Figure 6.17, contains the purpose for the form, and a table of contents of the sections on the page. The visitor jumps to the appropriate section by clicking its link. Following the contents are brief instructions of how to complete the survey.

Figure 6.17: The upper portion of the survey form contains a description of the form and the page's table of contents.

In each section in the survey form, you ask a series of questions, as in Figure 6.18. You can modify the form to suit any purpose.

Figure 6.18: Each section of the page has questions that relate to its heading.

After the visitor completes the survey, he submits it to your site by using the Form Submission area, shown in Figure 6.19. A footer is included in the lower part of the page.

Figure 6.19: The lower portion of the page contains the submission area and footer information.

Creating the Private Web

You want to add a private discussion to your web so that employees can coordinate projects, exchange messages, or keep in contact with colleagues who are frequently on the road. You cannot add the private discussion to the current web, though. To restrict a Web with FrontPage's Personal Web Server, you must include a special Web registration form in your FrontPage root web. This registration form requires that an entire Web site be classified as restricted; you cannot mix public and private areas within a single Web site with the Personal Web Server. The way to get around this is to create a new Web site for the private section and to provide links between the public and private webs.

Building a Private Discussion

Creating the Private Employee discussion is easy because the choices that you made when you created the Customer Support discussion will be the default values when you step through the Discussion Web wizard again. Return to the FrontPage Explorer to create a new Web for the private employee discussion. The steps are

  1. Choose File | New Web. The New Web dialog box appears.
  2. In the New Web dialog box, highlight Discussion Web Wizard. Click OK to continue. The New Web from Wizard dialog box appears.
  3. In the Web Server field, choose your server from the drop-down menu if it does not already appear in the designated field.
  4. Verify that the Add to the Current Web checkbox is unchecked; it should be unchecked by default. Click OK to continue.
  5. In the Web Name field, assign a name for the web. Enter ACMECorpEmp. Click OK to return to the New Web dialog box.
  6. When the introductory screen in the Discussion Web wizard appears, click Next.
  7. In the second screen in the wizard, verify that all the options (Table of Contents, Search Form, Threaded Replies, and Confirmation Page) are checked. Click Next to continue.
  8. In the third screen, enter the following descriptive title for the discussion:
    ACME Corp Employee Discussion
    You are informed that the discussion articles will appear in the _aced directory or folder. In addition, your filenames will contain the prefix aced. Click Next to continue.
  9. In the fourth screen, verify that the Subject, Category and Comments option is still selected for the article input fields. Click Next to continue.
  10. The fifth screen asks whether the discussion will take place in a protected Web. Choose the Yes, Only Registered Users Can Post Articles option.
  11. In the sixth screen, verify that the article sorting option is set to Oldest to Newest. Click Next to continue.
  12. Because this web also has an employee directory, you must create a custom page or another home page that provides links to it and the discussion. In the seventh screen, verify that you do not want the Table of Contents page to be the home page of the web. Click Next to continue.
  13. In the eighth screen, verify that the search form reporting option is set to Subject, Size, and Date. Click Next to continue.
  14. In the ninth screen, the color selections that you chose earlier should still be selected. Click Next to continue.
  15. In the tenth screen, verify that the article display option is set to Dual Interface. Click Next to continue.
  16. The final screen tells you that the main pages are the frame set for the ACME Corp Employee Discussion and the ACME Corp Employee Discussion Submission Form. Click Finish to generate the new Web pages.

Registering the Web

Before the pages appear in the FrontPage Explorer, the FrontPage Editor opens. Then you see the Web Self-Registration form, shown in Figure 6.20. This form uses a Registration bot, which asks visitors to your site for their name and password before they can enter the protected discussion.

Figure 6.20: You need to put the Web Self-Registration form in your server's root web.

The Web Self-Registration form contains instructions for you. First, you change the permissions for the web. Next, you open the root web. Finally, you save the registration form to the root web.

Setting the Web Permissions

To change the permissions for a protected discussion web:

  1. Return to the FrontPage Explorer. Choose Tools | Permissions. The Web Permissions dialog box appears.
  2. The Settings tab should be selected by default. Choose the Use Unique Permissions for This Web option. Then click the Apply button.
  3. Click the End Users tab. Choose the Registered Users Only radio button. Then click the Apply button.
  4. Click OK to exit the Web Permissions dialog box and apply the new settings to the web.

Opening the Root Web

Now you need to open the root web of your server so that you can save the registration form to it. To open the root web on your server,

  1. From the FrontPage Explorer, choose File | Open Web. The Open Web dialog box appears.
  2. Choose the server on which you created the discussion web. To view the list of webs on the server, click the List Webs button.
  3. From the Web list, highlight <Root Web>. Click OK. The root web opens in the FrontPage Explorer.

Saving the Registration Form to the Root Web

To save the Web Self-Registration Form into the root web:

  1. Return to the FrontPage Editor. The Web Self-Registration Form is still there.
  2. Choose File | Save. The Save As dialog box appears. Change the page title to ACME Employee Discussion Registration Form. Change the page URL to acedreg.htm.
  3. Click OK to save the file to your root web.

Viewing the Result

Reopen the ACMECorpEmp Web with the FrontPage Explorer's File | Open Web command. The Discussion Web appears in the Outline View of the FrontPage Explorer. Figure 6.21 shows the fourteen pages that are added to the private Web site. Their content is identical to that of the pages in the Customer Support discussion. The page titles and their URLs are listed in Table 6.3.

Figure 6.21: The pages in the Employee discussion are added to your web.

Table 6.3. Employee discussion pages that are added to the Web.

Filename (URL)Page Title
acedfrm.htmFrameset for ACME Corp Employee Discussion
acedtoc.htmACME Corp Employee Discussion TOC
acedtocf.htmACME Corp Employee Discussion TOC (Framed)
acedwelc.htmACME Corp Employee Discussion Welcome
acedcfrm.htmACME Corp Employee Discussion Confirmation
acedsrch.htmACME Corp Employee Discussion Search Form
acedpost.htmACME Corp Employee Discussion Submission Form
acedaftr.htmIncluded Article Footer for ACME Corp Employee Discussion
acedahdr.htmIncluded Article Header for ACME Corp Employee Discussion
acedfoot.htmIncluded Footer for ACME Corp Employee Discussion
acedhead.htmIncluded Header for ACME Corp Employee Discussion
acedstyl.htmACME Corp Employee Discussion Web Colors
_aced/toc.htm_aced Discussion
_aced/tocproto.htm_aced/tocproto.htm

Adding the Employee Directory

You want to add an employee directory in this Web site. Links to the employees' home pages appear on this page. The steps are

  1. From the FrontPage Editor, choose File | New. The New Page dialog box appears.
  2. In the New Page dialog box, highlight the Employee Directory page. Click OK.
  3. To set the Web colors for the page, choose File | Page Properties. The Page Properties dialog box appears.
  4. Under Customize appearance, check the Get Background and Colors from Page option.
  5. Type acedstyl.htm, or use the Browse button to select ACME Corp Employee Discussion Web Colors from the Current Web dialog box.
  6. Change the title of the page to ACME Corp Employee Directory.
  7. Click OK. The Name and Password Required dialog box appears. It tells you that you need end user permission for the AcmeCorpEmp web.
  8. You have rights to the web as an administrator. Enter your name and password. Then click OK to update the page properties.
  9. Choose File | Save to save the page to the web. The Save As dialog box appears.
  10. Change the page URL to acempdir.htm. Click OK to save the page.
  11. When you are asked whether you want to save the graphics to the web, check Yes to All. The new page is saved to the web.

Now you can return to the FrontPage Explorer. The new page is added to your web. If you do not see all your pages listed in the Outline View of the FrontPage Explorer, use the View | Refresh command to update the display.

Figures 6.22 and 6.23 show the employee directory. The upper portion provides links to the employees listed on the page. For each employee, a picture, title and department information, and contact information appear. Links to the employee's home page and e-mail address are also provided.

Figure 6.22: The upper portion of the employee directory contains links to all the employees listed on the page.

Figure 6.23: The employee sections on the page include departmental and contact information.

Workshop Wrap-Up

Creating large Web sites is no longer tedious. Combining webs and pages with FrontPage makes the job a snap. You can add pages to your webs to your heart's content. As your page library grows, the job gets even easier.

Chapter Summary

In this chapter, you learned how to combine pages from FrontPage's Web and page templates into a single Web site. You also learned how to register a protected web. You can add pages easily with FrontPage. With templates and wizards, designing webs is a piece of cake.

Next Steps

In the next chapter, you examine your pages more closely and decide what to add to your To Do List. You learn how to add tasks and how to mark them as complete when the pages are finished. You will soon learn how to build your own pages from scratch and edit them. You will find that the steps in building your own pages are just as simple.

Q&A

Q:
Why is the background image a JPG file?
A:
The first reason is to minimize the size of the file. The background appears on all the pages and is downloaded often. Saving the file in JPG format reduces its size and, therefore, decreases the download time. The other reason is that JPG files can contain more than 256 colors. Backgrounds with subtle color differences can be very effective. You can place true-color images in your Web pages if you use JPG file format.
Q:
Can a visitor respond to a discussion group article by e-mail?
A:
No, all responses to discussion group articles are stored on the Web as consecutively numbered Web pages (.htm extension).
Q:
Can some visitors be allowed access to some private groups while others are allowed access to other private groups?
A:
Yes, each private discussion can be configured to allow as many visitors as you like. A single user can also be granted permission to access more than one Web by entering his or her name and password in each Web's Permissions dialog box. Refer to Chapter 23 to learn how to assign permissions for an end user to gain access to your private webs.