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 more pages to your webs. You can combine web and page templates to your heart's content with a few mouse clicks. In this chapter, you'll do just that.
In this chapter, you create a corporate Web site that has the following features:
Sounds like a tall order, right? Not with FrontPage. It makes combining Web templates and pages easy. You'll have the basic work done in a matter of minutes.
In Chapter 3 "If You Mean Business," you learned how to develop a site, using the Corporate Presence Web Wizard. You use this wizard again to start your corporate presence Web project. To begin, follow these steps:
The second screen in the wizard, shown in Figure 5.2, asks what types of pages you want to include in your Web site. The home page is required, and you do not have the option to uncheck the page. In this screen, complete the following steps:
The third screen of the Corporate Presence Web Wizard prompts you to choose the sections you want to appear on your home page. To complete the screen shown in Figure 5.3, follow these steps:
In the fourth screen, select the type of information you want to appear on your What's New page. Keep this simple and select only one option. To complete the screen shown in Figure 5.4, do the following:
In the fifth screen, you select how many products and services pages you want to add to your Web site. ACME Corporation is a manufacturer and primarily offers products. This company does not need service description pages. To complete the screen shown in Figure 5.5, follow these steps:
In the sixth screen, shown in Figure 5.6, you choose the options for your products pages. The service pages options are disabled, because in the previous screen you elected not to include them. You won't select the Information request form option in this example. To complete this screen, follow these steps:
In the seventh screen, you select the options for your table of contents page. To complete the screen shown in Figure 5.7, perform the following steps:
In the eighth screen of the Corporate Presence Web Wizard, shown in Figure 5.8, you are asked what you want to appear at the top of each page (the page header) and at the bottom of each page (the page footer). You can include links to your main web pages in the top section, bottom section, or both. Some prefer to place links at the top of the page so that users can navigate to other pages as soon as the page opens. Others like to place links at the bottom of the page, which makes navigation more convenient when the user reads the entire page and reaches the bottom. Still others like to place the navigation bars in both places. Choose both so you have all bases covered.
Figure 5.8 : Select what you want to appear at the top and bottom of each page from this screen.
To complete this screen, follow these steps:
In the ninth screen, you are asked to choose a graphic style for your web. The four options are Plain, Conservative, Flashy, or Cool. Your selection determines which header graphics and navigation buttons are included in the web.
As you select each option, a preview of the style appears in the preview window at the left side of the dialog box, shown in Figure 5.9. I selected the Cool style, but feel free to choose your own preference. After you make your selection, click Next to continue.
Figure 5.9 : Select the graphics style for your web from this screen.
In the tenth screen of the wizard, you can customize the appearance of your pages further. The background image, text, and link colors appear in the preview window at the left of the screen. As you customize your colors, the preview window updates to reflect your selections. To complete the screen shown in Figure 5.10, follow these steps:
In the eleventh screen, you are asked whether you want to include an under construction icon on your pages. Most people realize sites are always under construction, and many feel these icons are a bit redundant. I elected not to include them, by choosing No. If you would rather include the under construction icons, choose Yes. Remember to remove them when your pages are done! Then, click Next to continue.
In the twelfth screen, shown in Figure 5.11, you enter your company name and location. I used a rather over-used fictitious company name in my examples; if you'd rather use your own company name, go right ahead. The one-word version of the name is an abbreviation that appears in all the page titles. You can edit them later. To complete this screen, you can respond with the values I entered or enter your own responses as follows:
In the thirteenth screen, shown in Figure 5.12, you enter company contact information. To complete this screen, respond to the questions as follows:
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 "Show To Do List after web is uploaded" option.
To create the Web site, click the Finish button. Your web site appears in the Explorer window.
Based on the options that you selected in the Corporate Presence
Web Wizard, your Web site has nine pages. The pages that appear
in the web's home folder are shown in Table 5.1. The pages that
appear in the web's _private folder are shown in Table
5.2.
| Page Name | Page Title |
| index.htm | ACMECORP Home Page |
| news.htm | ACMECORP News Page |
| prod01.htm | ACMECORP Product 1 |
| products.htm | ACMECORP Products Page |
| search.htm | ACMECORP Search Page |
| toc.htm | ACMECORP Table of Contents Page |
| Page Name | Page Title |
| logo.htm | Included Logo Page |
| navbar.htm | Included Navigation Links |
| style.htm | Web Colors |
Now that you have completed the corporate presence portion of your web, you can add additional pages to your web. After you add three more pages, you will examine all your pages a little more closely to see what you need to edit.
Using the FrontPage Editor, add an employee directory, a hot list page, and a hyperdocument to your web. You can add these pages in a matter of minutes.
To add your employee directory page, follow these steps:
Now, add the hot list. The steps are basically the same as those in the previous task, except there are no images to save to your web. To add the hot list to your web, follow these steps:
Now, add the hyperdocument page, which is similar to a chapter in a book. This page is suitable for online books, manuals, reports, company training material, or other similar content. The steps to add the page should be very familiar to you by now. To add the hyperdocument to your web, perform the following steps:
Now, you can return to the FrontPage Explorer by clicking the FrontPage Explorer button on your Windows taskbar, or by choosing the Show FrontPage Explorer button on the FrontPage Editor's Standard toolbar. Notice the new pages in your home folder. You might want to move the images into the Images folder in your web. To do this, follow these steps:
Now, take a look at each page you created in your web. Decide
what you need to do to pull them all together. The following sections
contain a list of general pointers for you and the chapters where
you can learn how to complete the pages.
| TIP |
Create a footer page, such as that discussed in Chapter 14, and save this footer into your web's _private folder. An example is shown in Figure 5.15. You can copy the footer contents from one of the corporate presence Web pages to do this. Then, include it on all your Web pages with Include bots. If there is a need to change your footer information, you only need to change one page. |
Figure 5.15 : Create a footer for your pages and include it on all your pages with an Include bot.
The Included Logo page (logo.htm) is located in the _private folder of your web. This page includes a generic graphic that reads Company Logo. Replace this with your own company logo, as shown in Figure 5.16.
The Included Navigation Links page is also located in your _private folder. This page contains the links to the main pages in your web. It automatically included the pages that you selected in the Corporate Presence Web Wizard, but you probably want to add links to some or all of the pages you add to your web as well. For example, you could create new button graphics that read Employees (for the employee directory), Links (for any or all of your hot links pages), and Reports (for the hyperdocument page). You have to modify one of the graphics in the navigation bar, as shown in Figure 5.17, or create all new matching buttons of your own.
The Web Colors page is located in your _private folder, and it is the style sheet on which the other pages in your web are based. You don't need to make any changes to this page unless you want to replace the background image with one that better suits the other graphics in your web.
The ACMECORP employee directory page is located in your web's main folder. You need to complete several items on this page:
The hot list page is located in your web's main folder. It is designed to provide a list of links to other pages on the Web. These pages can be internal to your site or can link to external sites on the World Wide Web. A completed example of a hot list page is shown in Figure 5.19. To complete the hot list page, here are some tips:
Figure 5.19 : Add links to other pages on the World Wide Web or in your site to the hot list page.
| TIP |
You can also use your favorite browser to generate a hot list very quickly. Navigate to your favorite page with your browser, and copy its URL into your clipboard, using Ctrl+C. Then, paste it on your page or into the URL field in the World Wide Web tab of the Create Hyperlink dialog box. |
The hyperdocument page is located in the main folder in your web. It is designed to be one section of a large manual or report. In actuality, it is at the third level of several pages that are hierarchically linked. Consider this page the same as a chapter, within a section, within a book or report.
Open your hyperdocument page. You notice predefined links at the top of the page that take you to two pages which do not yet exist in your web. The first link takes you to hyperdocument name (hdoc.htm). The second takes you to SectionName (hdocsect.htm).
I'll use an analogy to make this a little clearer. Consider the hyperdocument name (hdoc.htm) page to be the title of this book. I create a page titled Laura Lemay's Web Workshop: FrontPage 97 to fit the bill here. On this page, I then create links to six new section pages, titled Fast Track to Webs and Pages, Basic Techniques, Advanced Techniques, Still More Advanced Techniques, Putting It All Together, and Appendixes. Each of the six section pages contains a link back to the main title page and to the chapters contained in its section. These six section pages are the equivalent of the link you now see as SectionName (hdocsect.htm).
Now, you get to the hyperdocument page you have in your web right now. This page is the equivalent of one of the chapters in the book. If, for example, this page contains the contents of the chapter you are now reading, its title is Chapter 5 "Real-Life Examples I: Using What You've Got." In place of the link to the hyperdocument name (hdoc.htm) page, you create a link to the Laura Lemay's Web Workshop: FrontPage 97 page. In place of the link to the SectionName (hdocsect.htm) page, you create a link to the Fast Track to Webs and Pages page. Then you have links to the previous two levels, as shown in Figure 5.20.
Now, for the contents of the page itself, you need to edit the title of the page, or perhaps I should say titles. You need to edit the title in the Page Properties dialog box (by using the File | Page Properties command) and the title that appears on the page itself. Of course, you want to replace the gray buttons on the page with some cute little icons that represent each of the subsections in the page. Rename the subsection titles appropriately and add the content. Finally, include the same footer used on the other pages in your web on the bottom of this page.
Take a look at your home page, which is very basic in the example shown in Figure 5.21. It is located in your web's main folder. To complete your home page, you need to do the following:
Figure 5.21 : Complete the home page with an introductory paragraph about your company.
| NOTE |
If you try to edit the company information for the web and find that you can't because the bot icon gets in the way, here's where you find the information. Open the FrontPage Explorer and choose Tools | Web Settings. Then click the Parameters tab. There you see all the contact information that you entered in the web, as shown in Figure 5.22. To edit the information, highlight the entry you want to change and click the Modify button. The Modify Name and Value dialog box appears. Edit the entry in the Value field and choose OK. |
| NOTE |
If you edit the entry in the Name field of the Modify Name and Value dialog box, you need to reconfigure all Substitution bots that place that variable name on your pages. It's easiest to leave the names as they are. |
The ACMECORP News page is basically the What's New page in your web. You can give the page a new title by choosing File | Page Properties from the FrontPage Editor. As you add new items to the site, place text, descriptions, and links to the new pages on this page as shown in Figure 5.23. Dress it up by adding a New icon here and there, and add some graphics to draw interest. Don't forget to remove the under construction icon if it's there.
Figure 5.23 : As you add new items to the site, provide links to them on the what's new page.
When you create one product or one services page, it gives you the opportunity to add any other global elements to the page before you create additional pages from it. You can then save the page as a template.
After you create your custom products pages from your template, you need to title each page appropriately to describe the product that you are highlighting on the page. Change the title that appears on the page and use the File | Page Properties command to change the title that appears at the top of your browser window and in the site's table of contents.
To complete additional items on the page, follow these steps:
The ACMECORP Products page, shown in Figure 5.26, links to all the product pages on your company's site. You start the page with a brief overview of the products you provide. Then, you create a list of products on the page, providing links to each of your product pages (described in the previous section). You also want to replace the footer with an Include bot, as mentioned for the previous pages.
Figure 5.26 : The Products page provides links to all the product sheets on your site.
The ACMECORP Search page utilizes a Search bot that allows a user
to search through your site for a word or phrase. You'll learn
how to configure this Search bot in Chapter 22, "Runtime
Bots-The Heartbeat of FrontPage Forms."
| TIP |
One thing that improves the Search page is the addition of a query language section, as shown in Figure 5.27. You can create a new page using the Search Page template (selected from the New Page dialog box), and copy the query language section from it into your corporate presence Web search page. |
The Search bot on this page is configured to search through your entire web. When the Search bot finds documents that match the user's search terms, it returns a list of pages that includes the date of the page and its file size (in kilobytes).
For the ACMECORP Table of Contents page, you need to add an introductory paragraph that highlights the contents of your Web site, as shown in Figure 5.28. The Table of Contents bot included on the page does the rest for you automatically. By default, the table of contents lists all pages in your web that begin with your home page (index.htm).
Figure 5.28 : Complete the table of contents with an introductory paragraph.
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.
In this chapter, you learned how to combine pages from FrontPage's Web and page templates into a single Web site. You can add pages easily with FrontPage. With templates and wizards, designing webs is a piece of cake.
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 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.
To complete the pages in your corporate presence Web, see the following additional chapters for help:
| Why is the background image a JPEG file? | |
| 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 JPEG format reduces its size and, therefore, decreases the download time. The other reason is that JPEG files can contain more than 256 colors. Backgrounds with subtle color differences can be very effective when viewed in hi-color (65,000 color) or true-color (16 million color) resolution. You can place true-color images in your web pages if you use JPEG file format. | |
| I replied No when FrontPage asked me whether I wanted to save an image or images to the web as I saved my page. Now I have broken links on my page. How do I fix that? | |
| One of two things might be occurring. The link on your page might be pointing to an image that is in your current web but is located in a directory other than that referenced in the page link. You can use the FrontPage Explorer's Tools | Verify Hyperlinks command to repair your broken links. The procedures are explained in Chapter 28, "Testing and Publishing Your Web." If the image is not in your web, you need to insert it on the page again and save the page and its images to your web. You learn how to work with images in Chapter 10, "Sprucing Up Your Pages." |
