Experience learning made easy—and quickly teach yourself how to create your own Web sites using FrontPage® Version 2002. With STEP BY STEP, you can take just the lessons you need or work from cover to cover. Either way, you drive the instruction—building and practicing the skills you need, just when you need them!
- Master the tools for creating and managing a professional-looking Web site
- Format and organize Web pages and add hyperlinks
- Use preprogrammed Web components to add exciting functionality to your Web site
- Add database search capabilities and user input forms
- Track and analyze site traffic
- Create a Web site to manage group projects and collaborate
- Prepare for the Microsoft Office User Specialist (MOUS) exam
This book is approved courseware for the Microsoft Office Specialist Program. Go to: http://www.microsoft.com/learning/mcp/officespecialist/default.mspx
About the Author
Online Training Solutions, Inc. (OTSI) is a traditional and electronic publishing company with years of experience in the creation, production, and delivery of computer software training. OTSI is also the author of several Step by Step books about Office System applications.
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
After completing this chapter, you will be able to:
- 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:
- If FrontPage is not already open, start it now.
- Open the GardenCo Web site located in the working folder.
- 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:
- Switch to Folders view, and notice the long list of HTML files and graphics files that make up this Web site:
- Click the Type heading to sort the files by type.
- Select the GIF images, and drag them into the images folder.
- Select the JPG images, and drag them into the images folder.
- 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.
- Assign a name to the new folder by typing Internal and pressing Enter.
- Drag the following four files into the Internal folder:
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.
The most obvious way you can impose some organization on this mess is to move the graphic files 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.
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.
Your site is now organized like this:
Creating a SubwebA subweb is a Web site that is nested inside another Web site. A site that contains a subweb is called a root Web. If you think of a Web site as a set of folders, a subweb would be a subfolder containing a stand-alone Web site.
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:
- Open the GardenCo Web site located in the working folder.
- If Folders view is not displayed, switch to that view now.
- Right-click the Internal folder, and click Convert to Web on the shortcut menu.
- Click Yes.
- Open Windows Explorer, and browse to the SBS\FrontPage\Capabilities\Subweb\GardenCo\Internal folder.
- Close Windows Explorer to return to Folders view in FrontPage.
- Close the Web site.
This warning appears:
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:
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.
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:
Adding Links Between Web PagesWhen you use a wizard to create a Web site, the site's system of navigation is created for you. You can quickly move from page to page without any real need to understand the underlying mechanisms that make this instant navigation possible. When you create a Web site by hand, however, you need to know how to create a system of navigation from the ground up. And if you ever need to make changes to an existing siteno matter how it was createdyou need to understand the basics of navigation in order to avoid breaking thingswhich is not too hard to do!
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:
- Open the GardenCo Web site located in the working folder.
- 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):
- Open index.htm in the Page view editing window.
- Click the comment in the left shared border to select it, and press Del.
- On the Insert menu, click Navigation.
- In the Choose a bar type box, click Bar based on navigation structure, and then click Next.
- Scroll to the Nature bar style, shown here:
- Select the Nature bar style, and click Next.
- In the Choose an orientation box, click Vertical, as shown here:
- Click Finish.
- 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.
- 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.
- 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.
- Drag search.htm from the Folder List, and drop it in the Navigation view window as a second-level page, after Contact Us.
- Switch to Page view.
- Open products.htm in the Page view editing window.
- In the Folder List, click the plus sign next to the Products folder to expand the folder.
- On the Products page, select the Plants for your home! heading.
- 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.
- In the Look in box, click Current Folder, and then double- click the Products folder to open it.
- Click plants_home.htm, and click OK to insert a hyperlink from the selected heading to the file.
- Repeat steps 18, 19, and 21 for the remaining three headings, mapping them as indicated here:
- 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 the top shared border, click the company logo to select it.
- On the Pictures toolbar, click the Polygonal Hotspot button.
- 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.
- Double-click to finish drawing the polygon.
- 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.
- On the Pictures toolbar, click the Highlight Hotspots button to identify the hotspots on this page.
- Click Highlight Hotspots again to remove the highlight, and then close the Pictures toolbar.
- On the File menu, click Preview in Browser.
- 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.
- Browse through the pages using the link bar and the hotspot.
- When you've finished, close the browser and the Web site.
The Insert Web Component dialog box opens with Link Bars selected in the Component type list, like this:
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.
You can hover the pointer over any style to display its name in a ScreenTip.
The Link Bar Properties dialog box opens so that you can select from these options on the General tab:
The home page now has a link bar, as shown here:
One file listed in the Folder List is missing.
The Search page has been added to the link bar.
The link bar is already present on this page, because it is located in a shared border.
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 devicea simple hyperlinkto enable visitors to find these pages.
|Plants for your garden!||plants_garden.htm|
|Plants for hobbyists!||carnivorous_plants.htm|
|Gifts and gadgets!||gifts.htm|
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.
When you've surrounded the logo, the results look something like this:
The Insert Hyperlink dialog box opens.
The outlined area of the logo turns black, like this:
Clicking anywhere in the black area will display the site's home page.
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.
When displayed in Microsoft Internet Explorer, your site looks as shown on the next page.
Adding Links Between Web SitesYou will often want to have links from your Web site to other Web sites, usually to point visitors to external information and resources. For example, the GardenCo Web site might contain links to plant society sites or to specific pages of the Web site maintained by the United States Department of Agriculture.
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.
Other people's Web sites are beyond your control. Nothing makes your site look old and poorly maintained as much as inactive hyperlinks do. So be sure to test any external links regularly to check that their target sites are still active and that they still display the information you think they do.
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:
- Open the GardenCo Web site located in the working folder.
- Switch to Navigation view. If the entire site doesn't show in the window, click the Portrait/Landscape button to change to Portrait mode.
- If the Folder List is not already open, click the Toggle Pane button on the Standard toolbar to open it.
- Double-click index.htm in the Folder List to open that page in the Page view editing window.
- 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.
- Type Employees Only, and click the Center button to center the text within the shared border.
- Highlight the text, and select Arial from the Font drop-down list on the Formatting toolbar.
- Click the Bold button, and then click the Decrease Font Size button to match the new text to the buttons above it.
- 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.
- With Employees Only selected, click Insert Hyperlink.
- 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.
- 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.
- Close the browser to return to FrontPage.
- In the Products folder, double-click carnivorous_plants.htm to open it in the Page view editing window.
- 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.
- Select Carnivorous Plant Database, and click Insert Hyperlink.
- In the Insert Hyperlink dialog box, click the Paste button on the Standard toolbar to paste the copied URL into the Address box.
- Click Target Frame to open the Target Frame dialog box, shown here:
- In the Common targets box, click New Window.
- Select the Set as page default check box to indicate that any hyperlinks opened from this page should open in a new window.
- Click OK to close the Target Frame dialog box, and then click OK to close the Insert Hyperlink dialog box and insert the hyperlink.
- Select http://www.carnivorousplants.org (the URL for the International Carnivorous Plant Society), and copy it to the Clipboard.
- Select the words International Carnivorous Plant Society, and click Insert Hyperlink.
- Paste the URL into the Address box, and click Target Frame.
- Click Cancel to close the Target Frame dialog box without making changes.
- Click OK to close the Insert Hyperlink dialog box and insert the hyperlink.
- Click Save to save the page, and then click the Preview in Browser button to open the page in your browser.
- In the browser, click the Carnivorous Plant Database link.
- Switch back to your site, and click the International Carnivorous Plant Society link.
- Close the browser to return to FrontPage.
- Switch to Hyperlinks view.
- On the Tools menu, click Recalculate Hyperlinks.
- When FrontPage shows you this dialog box, click Yes to continue:
- When you have finished checking everything out, close the Web site.
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.
The text now looks as shown on the next page.
The home page of the Internal subweb appears in your browser.
Under Other Resources, two resources are listed along with their URLs.
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.
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.
In the Common targets box, the Page Default option has changed from (none) to (New Window), which is what you want.
The Carnivorous Plant Database Web site opens in a new window.
The International Carnivorous Plant Society Web site opens in a separate browser window.
The active file, carnivorous_plants.htm, is shown at the center with all hyperlinks to and from the page radiating from it, like this:
FrontPage checks all the internal and external links in your site and refreshes the Hyperlinks view.
Adding Ready-Made Components to a Web PageIn the old days, if you wanted to add fancy effects such as scrolling banners or functional elements such as hit counters to your Web site, you needed to be a programmer. These days, many of these types of elements are available as ready-made Web components. FrontPage provides the following Web components that you can simply drop into your Web pages to give your site a professional look and feel:
|Dynamic Effects||Hover Button
Banner Ad Manager
|Web Search||Current Web|
|Spreadsheets and Charts||Office Spreadsheet
|Hit Counter||Various styles|
|Photo Gallery||Horizontal Layout
Page Based On Schedule
Picture Based On Schedule
|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
|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
Revenue Avenue affiliate link
|Expedia Components||Link to a map
|MSN Components||Search the Web with MSN
|MSNBC Components||Business Headlines
Living and Travel Headlines
|Additional Components||Visual InterDev Navigation Bar|
Most of the Web components available with FrontPage are simple to insert and use. However, some work only in SharePoint team Web sites, and others require that special controls be installed on your system before they can be used. The bCentral components require that you have an account with bCentral in order to use them....
Table of Contents
What’s New in Microsoft FrontPage 2002 Page vii Getting Help Page ix Using the Book’s CD-ROM Page xi Conventions and Features Page xv MOUS Objectives Page xvii Taking a MOUS Exam Page xxi 1 Understanding How FrontPage Works Page 1 Exploring an Existing Web Site Page 2 Exploring an Existing Web Page Page 7 Looking at a Web Site in Various Ways Page 13 Looking Around in FrontPage 2002 Page 17 Understanding FrontPage Concepts Page 22 2 Creating a Web Site to Promote Yourself or Your Company Page 24 Creating a New Web Site Using a Template Page 26 Creating a New Web Site Using a Wizard Page 31 Working with the Tasks List Page 34 Inserting and Editing Text Page 35 Inserting Existing Text Page 38 Formatting Text Page 43 Inserting Hyperlinks Page 47 Seeing Your Web Pages as Visitors Will Page 48 Deleting a Web Site Page 50 3 Presenting Information in Lists and Tables Page 52 Creating a List Page 54 Creating a Table Page 58 Entering and Editing Information in a Table Page 62 Editing the Structure of a Table Page 64 Formatting a Table Page 67 Creating a Table Within a Table Page 71 4 Enhancing Your Web Site with Graphics Page 74 Adding Clip Art Page 76 Adding a Picture Page 79 Editing and Formatting Pictures Page 81 Creating and Displaying Thumbnails Page 86 Adding a Line, Shape, or Drawing Page 87 Creating a Photo Gallery Page 95 Adding Fancy Text Page 98 5 Creating a Web Site from Scratch Page 102 Creating a New Web Site Page 103 Adding a New Web Page Page 106 Assigning a Web Page Title Page 108 Formatting a Web Page Background Page 110 Adding Borders and Shading Page 116 Using Page Banners and Shared Borders Page 119 Formatting an Entire Web Site Page 123 Creating a Custom Theme Page 127 6 Changing Web Page Layout Page 134 Laying Out Web Pages with Tables Page 135 Adding Repeating Elements to a Template Page 140 Applying a Template to Existing Pages Page 144 Creating a Frames Page Page 146 Laying Out Web Pages with Frames Page 151 7 Enhancing the Capabilities of Your Web Site Page 158 Organizing Files and Folders Page 160 Creating a Subweb Page 163 Adding Links Between Web Pages Page 165 Adding Links Between Web Sites Page 172 Adding Ready-Made Components to a Web Page Page 177 Adding Dynamic Elements to a Web Page Page 186 8 Communicating with Your Visitors Page 190 Automatically Updating Information Page 192 Allowing for Visitor Input Page 197 Adding Ways to Find Information Page 201 9 Creating a Web Site to Support Team Projects Page 208 Using a Web Site to Track a Project Page 210 Using a Web Site to Discuss a Topic Page 214 Using a SharePoint Team Web Site to Enhance Productivity Page 221 Maintaining the Security of Web Site Files Page 227 10 Connecting Your Web Site to a Database Page 230 Setting Up a Database Connection Page 232 Publishing a Web Site for Use with a Database Page 234 Adding Database Search Capabilities Page 236 Testing and Refining a Database Interface Page Page 243 Adding Data Collection Capabilities Page 249 11 Publishing Your Web Site Page 254 Finding a Suitable Host for Your Web Site Page 256 Configuring Your Own Computer to Host a Web Site Page 259 Publishing a Web Site to a Local Folder Page 267 Publishing a Web Site to a Web Server Page 270 12 Managing Your Web Site Page 274 Setting FrontPage Options Page 275 Publishing a Web Site for Administrative Purposes Page 277 Administering Your Web Site Page 278 Generating Reports Page 282 Monitoring Statistics About Your Web Site Page 289 QUICK REFERENCE Page 293 Chapter 1:Understanding How FrontPage Works Page 293 Chapter 2:Creating a Web Site to Promote Yourself or Your Company Page 294 Chapter 3:Presenting Information in Lists and Tables Page 296 Chapter 4:Enhancing Your Web Site with Graphics Page 299 Chapter 5:Creating a Web Site from Scratch Page 301 Chapter 6:Changing Web Page Layout Page 303 Chapter 7:Enhancing the Capabilities of Your Web Site Page 305 Chapter 8:Communicating with Your Visitors Page 308 Chapter 9:Creating a Web Site to Support Team Projects Page 309 Chapter 10:Connecting Your Web Site to a Database Page 311 Chapter 11:Publishing Your Web Site Page 312 Chapter 12:Managing Your Web Site Page 314 GLOSSARY Page 317 INDEX Page 325