Microsoft FrontPage Version 2002 Step-by-Step by Online Training Solutions Inc., Inc Online Training Solutions

From the Publisher

Microsoft FrontPage Version 2002 is a user-friendly, fast, effective way to create and manage professional Internet or intranet sites without programming by using familiar Microsoft Office tools and integration features. Microsoft FrontPage Version 2002 Step by Step offers self-paced instruction to the beginning-to-advanced user who wants to get the most out of the FrontPage Web site creation and management tool-and prepare for Microsoft Office User (MOUS) certification. This personal training system offers easy-to-follow lessons full of clear objectives, a wealth of task-oriented procedures, and dozens of real-world business scenarios. Each Step by Step title consists of friendly, straightforward instruction with dozens of full-color screenshots and illustrations to help you learn exactly what you need to know at your own pace. A companion CD-ROM includes practice files that are tightly integrated with the lessons, plus movie-style demonstrations of key procedures. Other features include a "QuickLook Guide" for easy visual navigation, a "Finding the Best Starting Point for You" section to help you decide how to the most out of the book, and a special lay-flat binding to keep the book open during lessons.

Product Details

• Table of Contents
• Read an Excerpt

Table of Contents

Read an Excerpt

Chapter 7: Enhancing the Capabilities of Your Web Site

• Organizing Files and Folders
• Creating a Subweb
• Adding Links Between Web Pages
• Adding Links Between Web Sites
• Adding Ready-Made Components to a Web Page
• Adding Dynamic Elements to a Web Page

• Organize files and folders efficiently from within FrontPage.
• Link between Web pages based on navigational structure or other criteria.
• Create a subweb and link to subwebs and external sites.
• Add ready-made components and dynamic elements to your site.

In the early days of its existence, the Internet was used primarily as a way of making large volumes of information available to government agencies and universities around the world. This information was static text, and it was of interest only to researchers and people who needed it for their jobs. When the World Wide Web was developed, it added graphics and interactivity, and the ability to jump from one item of information to another. Static pages of text are a thing of the past. These days, to create an effective Web site you have to be able to enhance it with the bells and whistles that distinguish dynamic Web sites from static ones.

There is no point in building a site if your visitors can't easily move among its pages to find the information that interests them. If you have organized your site into a logical system of files and folders, FrontPage can intuit the hierarchy of the site and can add navigational tools so that your Web visitors can easily find their way around using elements such as shared borders and link bars. You can also use graphic elements such as image maps to visually show visitors what's available and how to access it. If your Web site must serve the needs of several different groups of visitors, it might be appropriate to divide your site into a main Web site and one or more linked subwebs so that particular categories of visitors aren't distracted by information they don't need. For example, if The Garden Company wants its Web site to cater to both customers and employees, it might create a subweb that is accessible only to employees with a user name and password and then use the subweb to communicate information of internal interest.

In addition to enhancing the navigational capabilities of your site, you will want to explore the categories of Web components and dynamic elements that come with FrontPage. These ready-made components add a professional touch to your Web site by inserting special-purpose mini-programs that perform such tasks as counting the number of visitors or scrolling banners across the page.

In this chapter, you will organize files and folders within a Web site in a way that makes it easier to enhance the site. You will then refine the navigational structure of the Web site by adding shared borders, link bars, hyperlinks, and image maps. You will also create a subweb and link it to the main Web site. Then you'll take a look at some of the dynamic elements that you can add to a page, including the Web components that come with FrontPage.

You will be working with files that are stored in the following subfolders of the SBS\FrontPage\Capabilities folder: Organize, Subweb, LinkPages, LinkSites, Components, and Elements.

Organizing Files and Folders

Being able to effectively organize your files into a system of folders is a fundamental computer skill that makes it easier to find things quickly and easily. When it comes to FrontPage, however, this skill is important for another reason. FrontPage can automate some of the processes involved in creating a sophisticated navigation system for your Web site, and organizing the elements of the site into a logical set of folders makes it easier to identify the structure of the site.

In this exercise, you will organize a Web site consisting of many pages and graphics into a useful folder structure.

The working folder for this exercise is SBS\FrontPage\Capabilities\Organize.

Follow these steps:

1. If FrontPage is not already open, start it now.
2. Open the GardenCo Web site located in the working folder.
3. Close the Folder List, and switch to Navigation view. If the site doesn't fit onto your screen, click the Portrait/ Landscape button to change the orientation, like this:

(Image Unavailable)

In Navigation view, you can see that the site consists of a home page with four second-level pages. The Products page has four third-level pages, and a separate employee site is at the same level as the home page.

4. Switch to Folders view, and notice the long list of HTML files and graphics files that make up this Web site:

(Image Unavailable)

The most obvious way you can impose some organization on this mess is to move the graphic files into the images folder.

5. Click the Type heading to sort the files by type.
6. Select the GIF images, and drag them into the images folder.

FrontPage moves the graphic files and simultaneously updates the links within the content files to reflect the new location of the graphic files.

7. Select the JPG images, and drag them into the images folder.
8. The next step is to organize files into new folders by subject or level. To create a new folder, point to New on the File menu, and then click Folder.
9. Assign a name to the new folder by typing Internal and pressing Enter.
10. Drag the following four files into the Internal folder:
• employee_info.htm
• handbook.htm
• policies.htm
• travel_policy.htm

As you saw in Navigation view, these files are part of the separate employee information site. Again, FrontPage moves the files and simultaneously updates the links within all the content files to reflect the new location of the files.

11. Ideally, the only files that should be located at the root level are the home page and any second-level pages that don't have sub-pages. To achieve this ideal, create another new folder called Products, and move the following files into it:
• carnivorous_plants.htm
• gifts.htm
• plants_garden.htm
• plants_home.htm

12. Click the Name heading to sort the folders and files alphabetically.

Your site is now organized like this:

(Image Unavailable)

13. Close the Web site.

Creating a Subweb

Subwebs are commonly used to display restricted information or information that is pertinent to only one group of people. For example, The Garden Company might use a subweb to allow members of a society that the company sponsors to access information about society activities through the company's public Web site.

In this exercise, you will use pages that have already been created and stored in a folder of the GardenCo Web site to create a subweb that is accessible only by employees.

The working folder for this exercise is SBS\FrontPage\Capabilities\Subweb.

Follow these steps:

1. Open the GardenCo Web site located in the working folder.
2. If Folders view is not displayed, switch to that view now.
3. Right-click the Internal folder, and click Convert to Web on the shortcut menu.

This warning appears:

(Image Unavailable)

4. Click Yes.

FrontPage converts the Internal folder to a Web site that is a subweb of the GardenCo site, as indicated in the Folder List by the Web site icon on the folder, shown here:

(Image Unavailable)

---

IMPORTANT:
If you create a subweb to display information that you don't want all visitors to be able to see, you can assign specific permissions that prevent unauthorized access, or that allow one group of people to view the subweb but only certain people to ad-minister or change it. These permissions are administered through the Web Site Admin-istration page for the subweb.

---

5. Open Windows Explorer, and browse to the SBS\FrontPage\Capabilities\Subweb\GardenCo\Internal folder.

FrontPage modified the contents of this folder when you converted it to a subweb. The Internal folder icon has been replaced with a Web site icon here as well, but more importantly, the supporting structure for the new subweb is in place, as you can see here:

(Image Unavailable)

6. Close Windows Explorer to return to Folders view in FrontPage.
7. Close the Web site.

Adding Links Between Web Pages

You are already familiar with the hyperlinks used to move among pages and items of information on a page. You might even have created a few. But with FrontPage, you can create much more sophisticated systems of navigation that add both functionality and visual appeal to your pages.

The primary method of moving around a FrontPage-based Web site is by means of one or more link bars that appear in a prominent location on each page. A well-designed link bar on the home page acts as a map to the site's major locations, providing easy access to all the important second- level pages that the site contains. These second-level pages in turn have link bars that can point back to the home page, to other second-level pages, and to their own third-level pages. (When a page has its own sub-pages, those pages are known as child pages.)

Another popular navigation technique is to use image maps, which are graphics that contain one or more hot spots. A hot spot is a specific region on a graphic that is associated with a hyperlink. When visitors click anywhere in this region, the hyperlink displays the target page or information. Image maps provide an attractive way to link from one central graphic (usually an overview graphic) to multiple individual pages, sites, or graphics. You can even configure a hotspot to generate an e-mail message when clicked.

In this exercise, you will create the navigational system for a Web site whose pages have already been created. You will use a link bar to navigate to the first-level and second-level files, and hyperlinks to navigate to the third-level files. You will also create an image map that links the company logo to the home page.

The working folder for this exercise is SBS\FrontPage\Capabilities\LinkPages.

Follow these steps:

1. Open the GardenCo Web site located in the working folder.
2. Switch to Navigation view, and familiarize yourself with the structure of the site, which looks like this (click the Portrait/Landscape button to change the orientation if necessary):

(Image Unavailable)

3. Open index.htm in the Page view editing window.
4. Click the comment in the left shared border to select it, and press Del.
5. On the Insert menu, click Navigation.

The Insert Web Component dialog box opens with Link Bars selected in the Component type list, like this:

(Image Unavailable)

6. In the Choose a bar type box, click Bar based on navigation structure, and then click Next.

The Choose a bar style list includes about 75 choices, ranging from simple to fancy. Many of them correspond to the built-in FrontPage themes.

7. Scroll to the Nature bar style, shown here:

(Image Unavailable)

---

TIP:
You can hover the pointer over any style to display its name in a ScreenTip.

---

8. Select the Nature bar style, and click Next.
9. In the Choose an orientation box, click Vertical, as shown here:

(Image Unavailable)

10. Click Finish.

The Link Bar Properties dialog box opens so that you can select from these options on the General tab:

(Image Unavailable)

11. To set the link bar to show the home page and second-level pages, click the Child pages under Home option, select the Home page check box, and then click OK.

The home page now has a link bar, as shown here:

(Image Unavailable)

12. Switch to Navigation view, and verify that the Products, Class Offerings, Press Releases, and Contact Us pages shown on the link bar are all child pages of the home page.
13. If the Folder List is not already open, click Folder List on the View menu, and check that all the pages in the Folder List are shown in Navigation view.

One file listed in the Folder List is missing.

14. Drag search.htm from the Folder List, and drop it in the Navigation view window as a second-level page, after Contact Us.
15. Switch to Page view.

The Search page has been added to the link bar.

16. Open products.htm in the Page view editing window.

The link bar is already present on this page, because it is located in a shared border.

17. In the Folder List, click the plus sign next to the Products folder to expand the folder.

There are four files in this folder, corresponding to the four subheadings of the Products page. Because the link bar displays only the first-level and second-level files of this Web site, the product detail pages are not currently accessible by means of the link bar. You need to add another type of navigational device—a simple hyperlink—to enable visitors to find these pages.

18. On the Products page, select the Plants for your home! heading.
19. On the Standard toolbar, click the Insert Hyperlink button. Select Existing File or Web Page on the Views bar to open the dialog box shown on the next page.

(Image Unavailable)

20. In the Look in box, click Current Folder, and then double- click the Products folder to open it.
21. Click plants_home.htm, and click OK to insert a hyperlink from the selected heading to the file.
22. Repeat steps 18, 19, and 21 for the remaining three headings, mapping them as indicated here:

Heading	File
Plants for your garden!	plants_garden.htm
Plants for hobbyists!	carnivorous_plants.htm
Gifts and gadgets!	gifts.htm

23. Now you'll turn the company logo into an image map. If the Pictures toolbar is not visible, right-click any toolbar, and select Pictures from the shortcut menu.

In FrontPage, image maps can be shaped as rectangles, circles, or polygons, or they can be represented as highlights. The Pictures toolbar provides buttons for generating these four types of hotspots.

24. In the top shared border, click the company logo to select it.
25. On the Pictures toolbar, click the Polygonal Hotspot button.
26. Move the pencil pointer to one corner of The Garden Company's logo, and click to start a line. Then follow along the border of the logo, clicking each time you want to change the line's direction.

When you've surrounded the logo, the results look something like this:

(Image Unavailable)

27. Double-click to finish drawing the polygon.

The Insert Hyperlink dialog box opens.

28. Browse to the SBS\FrontPage\Capabilities\LinkPages folder, select the index.htm file, and then click OK to insert a hyperlink from the logo to the home page.
29. On the Pictures toolbar, click the Highlight Hotspots button to identify the hotspots on this page.

The outlined area of the logo turns black, like this:

(Image Unavailable)

Clicking anywhere in the black area will display the site's home page.

30. Click Highlight Hotspots again to remove the highlight, and then close the Pictures toolbar.

---

TIP:
To change a hotspot link, right-click the hotspot and select Picture Hotspot Properties from the shortcut menu to open the Edit Hyperlink dialog box.

---

31. On the File menu, click Preview in Browser.
32. In the Preview in Browser dialog box, select your preferred browser and window size, select the Automatically save page check box to save your changes, and then click Preview.

When displayed in Microsoft Internet Explorer, your site looks as shown on the next page.

(Image Unavailable)

33. Browse through the pages using the link bar and the hotspot.
34. When you've finished, close the browser and the Web site.

Adding Links Between Web Sites

One of the great things about the Web is that it quickly builds communities around special interests. If you know of other compatible, but not competitive, Web sites in your general area of specialty, you can often arrange to put a link to those sites on your Web site in exchange for a similar link on their sites to yours. This is a great way to build traffic to your site and to get the word out about your products and services.

The most common method of linking to another Web site is to insert a hyperlink from the site name or description to the URL of the site's home page or a particular page file.

In this exercise, you will insert hyperlinks to a subweb and to an external Web site. You will then look at how FrontPage automatically recalculates links from your site to ensure that they are all working.

The working folder for this exercise is SBS\FrontPage\Capabilities\LinkSites.

Follow these steps:

1. Open the GardenCo Web site located in the working folder.
2. Switch to Navigation view. If the entire site doesn't show in the window, click the Portrait/Landscape button to change to Portrait mode.

Notice that the GardenCo Web site includes an Internal subweb, which is indicated in the Folder List by the Web site icon and in Navigation view by its gray color.

3. If the Folder List is not already open, click the Toggle Pane button on the Standard toolbar to open it.
4. Double-click index.htm in the Folder List to open that page in the Page view editing window.
5. In the left shared border, click the link bar to select it, and then press End and Enter to insert a new line after the link bar.
6. Type Employees Only, and click the Center button to center the text within the shared border.
7. Highlight the text, and select Arial from the Font drop-down list on the Formatting toolbar.
8. Click the Bold button, and then click the Decrease Font Size button to match the new text to the buttons above it.
9. On the Format menu, click Paragraph. Then in the Spacing area of the Paragraph dialog box, type 6 in the Before box and 3 in the After box, and click OK.

The text now looks as shown on the next page.

(Image Unavailable)

10. With Employees Only selected, click Insert Hyperlink.
11. Browse to the employee_info.htm file in the Internal subweb, and click OK to insert a link from Employees Only to the home page of the subweb.
12. On the Standard toolbar, click the Preview in Browser button. When the Web site opens in your browser, click the Employees Only link to test it.

The home page of the Internal subweb appears in your browser.

13. Close the browser to return to FrontPage.
14. In the Products folder, double-click carnivorous_plants.htm to open it in the Page view editing window.

Under Other Resources, two resources are listed along with their URLs.

15. Select http://www2.labs.agilent.com/bot/cp_home/ (the URL for the Carnivorous Plant Database), and click the Copy button on the Standard toolbar to copy it to the Office Clipboard.
16. Select Carnivorous Plant Database, and click Insert Hyperlink.
17. In the Insert Hyperlink dialog box, click the Paste button on the Standard toolbar to paste the copied URL into the Address box.
18. Click Target Frame to open the Target Frame dialog box, shown here:

(Image Unavailable)

19. In the Common targets box, click New Window.

You are telling FrontPage to configure the hyperlink to open the target page in a new window instead of replacing the content of the current window with the new content. The main reason for doing this is so that visitors don't lose track of your site while they go off on this side trip.

---

TIP:
When you select New Window, the Target setting box is automatically filled in with the name _blank. The Target setting name is primarily used with frame-based sites, where each frame has a name, but you can also use this box to assign a name to a target browser window.

---

20. Select the Set as page default check box to indicate that any hyperlinks opened from this page should open in a new window.
21. Click OK to close the Target Frame dialog box, and then click OK to close the Insert Hyperlink dialog box and insert the hyperlink.
22. Select http://www.carnivorousplants.org (the URL for the International Carnivorous Plant Society), and copy it to the Clipboard.
23. Select the words International Carnivorous Plant Society, and click Insert Hyperlink.
24. Paste the URL into the Address box, and click Target Frame.

In the Common targets box, the Page Default option has changed from (none) to (New Window), which is what you want.

25. Click Cancel to close the Target Frame dialog box without making changes.
26. Click OK to close the Insert Hyperlink dialog box and insert the hyperlink.
27. Click Save to save the page, and then click the Preview in Browser button to open the page in your browser.
28. In the browser, click the Carnivorous Plant Database link.

The Carnivorous Plant Database Web site opens in a new window.

29. Switch back to your site, and click the International Carnivorous Plant Society link.

The International Carnivorous Plant Society Web site opens in a separate browser window.

30. Close the browser to return to FrontPage.
31. Switch to Hyperlinks view.

The active file, carnivorous_plants.htm, is shown at the center with all hyperlinks to and from the page radiating from it, like this:

(Image Unavailable)

32. On the Tools menu, click Recalculate Hyperlinks.
33. When FrontPage shows you this dialog box, click Yes to continue:

(Image Unavailable)

FrontPage checks all the internal and external links in your site and refreshes the Hyperlinks view.

34. When you have finished checking everything out, close the Web site.

Adding Ready-Made Components to a Web Page

Component Type	Effect
Dynamic Effects	Hover Button Marquee Banner Ad Manager
Web Search	Current Web
Spreadsheets and Charts	Office Spreadsheet Office Chart Office PivotTable
Hit Counter	Various styles
Photo Gallery	Horizontal Layout Montage Layout Slideshow Layout Vertical Layout
Included Content	Substitution Page Page Based On Schedule Picture Based On Schedule Page Banner
Link Bars	Bar with custom links Bar with back and next links Bar based on navigation structure
Table of Contents	For This Web Site Based on Page Category
Top 10 List	Visited Pages Referring Domains Referring URLs Search Strings Visiting Users Operating Systems Browser
List View	(only available for SharePoint team Web sites)
Document Library View	(only available for SharePoint team Web sites)
BCentral Web Components	bCentral Banner Ad bCentral Commerce Manager Add-In FastCounter Revenue Avenue affiliate link
Expedia Components	Link to a map Static map
MSN Components	Search the Web with MSN Stock quote
MSNBC Components	Business Headlines Living and Travel Headlines News Headlines Sports Headlines Technology Headlines Weather Forecast
Additional Components	Visual InterDev Navigation Bar
Advanced Controls	HTML Java Applet Plug-In Confirmation Field ActiveX Control Design-Time Control