Microsoft FrontPage 2002 Tutorial Contents
Introduction.... 2 Before You Begin.... 2 Overview.... 2 If you have Web server software installed... 3 FrontPage and Microsoft Internet Explorer... 3 If you are using Windows NT Workstation 4.0 or Windows NT Server 4.0. 3 What You Will Learn.... 3 Lesson 1: Creating Web Pages... 3 Lesson 2: Enhancing and Publishing a Web Site.. 4 Learning More About FrontPage... 4 Lesson 1 Creating Web Pages... 6 Overview....6 Opening FrontPage... 6 Workspace Overview.... 7 Getting Started.... 8 To create a home page... 9 To insert a graphic on the home page... 10 To create a hyperlink from a picture.. 11 To center elements on a page... 13 To save the current page... 13 Page View Options.... 15 To display HTML tags on the current page... 15 To display the HTML of the current page... 15 To preview the current page... 15 Creating a Web site with FrontPage... 17 To create a new Web site... 17 To create a navigation structure... 18 To import a page into a Web site... 20 Creating Web site Content... 22 Edit the About Us page... 22 To edit the Products page.... 23 Designing a Page.... 23 To create a bulleted list... 24 To position pictures with text... 25 To add a group of files to the current Web site.. 26 To finish the page layout.... 27 To create a feedback form... 28 To customize the form... 28 Creating a Photo Gallery... 31 To edit the Photo Gallery page... 31 Linking to Other Web Sites.... 33 To begin the Links page... 33 To create a dynamic text effect... 33 To create hyperlinks from text... 34
Microsoft FrontPage 2002 Tutorial
To insert special characters or symbols... 35 To create an automatic hyperlink... 35 To create a verified hyperlink.... 36 Formatting Paragraph Headings... 37 To apply paragraph styles to headings.. 37 To repeat paragraph formatting with the Format Painter.. 38 To finish applying paragraph styles to headings... 39 Whats Ahead.... 39 Finishing Lesson 1... 39 To close Microsoft FrontPage... 39 Lesson 2 Enhancing and Publishing a Web site.. 40 Overview.... 40 Enhancing the Appearance of a Web site.. 40 To open an existing Web site.... 40 To create hyperlinks to other pages.. 41 To use the multiple Undo command.. 42 Adding Shared Borders and Navigation Bars... 44 To create shared borders across a Web site... 44 To test link bar hyperlinks... 45 To customize link bars.... 45 Applying a Theme... 48 To apply a theme to the Web site... 48 To display graphical navigation buttons on all pages... 49 Modifying a Theme.... 50 To modify a theme... 51 Previewing the Championzone Web site... 53 To preview the current Web site in a Web browser.. 53 Organizing the Files in your Web site... 55 To move picture files to the Images folder.. 55 To create a new folder.... 56 Generating a Site Summary... 57 To generate a Site Summary report.. 57 Spelling Checking... 59 To check spelling in the current Web site... 59 Replacing Text on Pages.... 60 To replace text on all pages in the current Web site.. 60 Completing Web Site Tasks... 62 To complete tasks in Tasks view.... 62 Publishing the Championzone Web site... 64 To publish the current Web site... 64 Finishing Lesson 2... 65

Introduction

Whether youre at work or home, a Web site is one of the easiest ways to distribute information. For example, in a large corporation, each department could have its own Web site on an intranet to let the rest of the company know whats going on. With Microsoft FrontPage 2002, anyone can build professional, attractive Web pages and Web sites. The best way to get acquainted with FrontPage 2002 is through hands-on practice. In the following two lessons, youll build a Web site that provides information about a fictional sporting goods store called Championzone. There is a prepared folder of files for you to practice with while you create this Web site. These practice files were installed in the FPTutor2002 folder on your hard disk along with this tutorial. The following image shows the Web site you will create using this Tutorial.

Lesson 1 Creating Web Pages
In this lesson, youll create a Web site that provides information about a fictional sporting goods store called Championzone. The site will contain merchandise information, an online photo gallery, and a list of links to other sites. There is a prepared folder of various files for you to practice with while you create this Web site. The folder is located at <drive>:\FPTutor2002, where <drive> represents the hard disk where you installed the tutorial. When you have completed the lessons, you should have a good understanding of FrontPage and its features.
You will learn how to: Open FrontPage. Create Web pages. Work with text and hyperlinks. Insert pictures and files. Format lists. Position objects. Add a feedback form. Design a photo gallery. Create a Web site structure. Save your work.

Opening FrontPage

To run Microsoft FrontPage, do the following: On the Windows taskbar, click the Start button and then click Microsoft FrontPage. , point to Programs,
If this is the first time youve used FrontPage, the program opens and displays a blank page ready for editing. Notes o If FrontPage has been used to edit another Web site, it will open the last Web site automatically. o To close a Web site: on the File menu, click Close Web.

Workspace Overview

FrontPage 2002 has an integrated interface that helps you create and edit Web pages as well as manage entire Web sites within one application. All toolbars and menu behaviors are consistent with Microsoft Office XP programs, so toolbars and menus can be fully customized. You can also use convenient keyboard shortcuts to accelerate common tasks such as opening Web sites and pages, printing, and many other commands. The graphic and table below highlight some of the commonly used elements of the FrontPage 2002 interface.
Item Page Tab Title Bar Menu Bar

Ask a Question Box

Close Page Scroll Bars
Description An easy way to select the page you want when you have several pages open. Displays the name of the current page, and its location in your Web site. Contains menus like File, Edit, View, and Insert, and is the starting point for many of the tasks you will undertake in FrontPage. To find more information about a procedure in FrontPage, type a question in the Ask a Question box, which accesses the online Help system. This button closes the page that is currently in view. These let you move the page so a

Status Bar

Page View Panes
Progress Indicator Estimated Download Time Task Pane
Standard and Formatting toolbars Views bar
different portion is displayed. Represents the state of a current task. For instance, the Status Bar may display the text Retrieving Index.htm when opening the home page, or show the destination of a hyperlink when you move your mouse cursor over a link in the Normal pane. These represent the different panes of the workspace. For example, the Normal pane is where you will do most of your work in this tutorial. Other panes are the HTML pane and the Preview pane. Shows the status of a current action. Gives you an idea of how long it will take a user to view your page in a Web browser. A pane within Office XP programs that provide commonly used commands. Its location and small size allow you to use these commands while still working on your files. Displayed by default. They provide easy access to the commands you will use most often when working in FrontPage. What you see in the main program window depends on the currently selected view. The icons on the Views bar provide different ways of looking at the information on your page or in your Web site.
Tip You can customize your workspace by displaying additional toolbars or changing the buttons they contain. On the View menu, point to Toolbars, and then select the toolbars you want to display. To add or remove buttons from toolbars, click Customize.

Getting Started

For this tutorial, youll create a Web site with four pages, on which you will tell site visitors about a fictional sporting goods store. If the task of putting together a whole site seems daunting, dont worry. You can gradually add information and other pages to your Web site. Unlike printed letters, memos, and word-processing documents, Web sites can be changed or updated even after theyve been published. You can add, delete, and modify text, pictures, and entire pages at any time. With FrontPage, you can get started by typing text on the blank document that Page view provides. For this lesson, well begin with the home page the default document that greets your visitors when they first navigate to your Web site.

To create a home page

The home page is the front door to your Web site. It provides information about the content or subject matter of your site in order to spark interest in your site visitors. The home page also contains the links to the other pages in your Web site. 1. On the blank page in Page view, type Welcome to Championzone! and then press ENTER. Just like in a word processor, pressing ENTER puts the cursor on a new line. 2. Next, type the sentence Take a look around to learn more about our sporting goods, see pictures of our merchandise, and look at our Sports Photo Gallery. 3. Press ENTER. Most of the content for your Championzone site is already created. When youre ready to make your own Web site, FrontPage lets you import any of your existing documents directly onto your Web pages without having to retype anything. Your page should now look like this:
Next, you will add a picture to the Web page. Pictures can be scanned photographs, drawings, or computer graphics created in a drawing or image-editing program.
For this example, the picture youll insert is a graphic of the FrontPage logo:
To insert a graphic on the home page
1. On the Insert menu, point to Picture, and then click From File. FrontPage displays the Picture dialog box. Note The picture file youll insert is located in the Tutorial folder that was installed with the FrontPage program files. 2. Next to Look In, select the hard disk where you installed the tutorial. You most likely installed the tutorial on your C or D drive. 3. Navigate to the folder named FPTutor2002 by double-clicking each folder in this path until the Look in box displays FPTutor2002. You will see several files in the FPTutor2002 folder. By default, FrontPage searches for picture files when you are inserting a picture. 4. Click the file named frontpage, and then click Insert. FrontPage inserts the selected picture file on the current page. It is a graphic that your site visitors will be able to click to learn more about FrontPage 2002. 5. Press ENTER to create a new line. Your page should now look like this:
Merely inserting a picture of a button doesnt mean that anything will happen when someone clicks it in a Web browser. To make a picture or a word clickable, it must have a hyperlink associated with it. A hyperlink is a pointer from text or from a picture to another page or file on the World Wide Web or on an intranet. On the World Wide Web, hyperlinks are the primary way to navigate between pages and other Web sites. In the next steps, youll create a hyperlink from the graphic you just placed on the home page.
To create a hyperlink from a picture
1. On the home page, click the picture of the FrontPage 2002 button you inserted. When a picture is selected, it is shown with file handles eight small squares around the outline of the picture. These can be used to resize a picture or change its appearance. When a picture is selected, FrontPage also displays the Pictures toolbar. The Pictures toolbar provides picture editing and formatting tools, which youll learn about later. Note If the Pictures toolbar doesnt appear automatically, on View menu, point to Toolbars, and then click Pictures. 2. On the Insert menu, click Hyperlink. FrontPage displays the Insert Hyperlink dialog box. Here, you specify the target of the hyperlink you are creating. 3. In the Address box, type www.microsoft.com/frontpage.

6. If the Folder List is not showing, do the following: On the standard toolbar, click the arrow to the right of Toggle Pane and then click Folder List. on the Views bar. ,
7. Click the Navigation icon
When you have a Web site open, the icons on the Views bar let you look at the information in your Web site in different ways. Navigation view shows a graphical representation of the structure of your Web site. Because you created a one-page Web site, FrontPage has automatically designated it as the Web sites home page indicated with a small icon of a house.
While in Navigation view, FrontPage also displays the Navigation toolbar. You can drag the Navigation toolbar anywhere on your screen.
Next to the Views bar, FrontPage displays the optional Folder List, just like it did in Page view. In a moment, youll replace the new, empty home page with the one you created earlier in this lesson. First, however, youll create the structure for the other pages in the Championzone Web site. Creating a Web site structure in Navigation view enables features such as page banners and navigation bars that are automatically updated whenever you change, add, or remove pages in your Web site. This makes it easy to change things around. Youll learn more about these features later.
To create a navigation structure
1. In Navigation view, click New Page on the standard toolbar.
FrontPage creates a new page labeled New Page 1 below the home page. Pages in Navigation view arent the actual pages in the current Web site; they are placeholders that point to them. This way, you can easily experiment with the structure and organization of a Web site before you create its content. 2. To quickly create the remaining pages, hold down CTRL on your keyboard and press N three times. CTRL+N is a keyboard shortcut for the New Page command. FrontPage supports common Windows and Microsoft Office XP shortcut keys that help speed up repetitive tasks. The pages you just created appear below the home page, because the home page was selected when you issued the command. Note In Navigation view, the selected page is blue, while others are yellow.
3. With the home page still selected, press TAB. Pressing the TAB key moves the selection to the next page in the structure and activates the page title for editing. It also selects the text representing the name of the page, so you can easily type a new name. 4. Type About Us, and then press TAB. About Us is the page title of one of the pages youll create for the Championzone Web site. 5. Repeat the previous step with the other pages, renaming New Page 2 as Products, New Page 3 as Photo Gallery, and New Page 4 as Links. 6. Pressing ENTER after editing a page title saves the new title without selecting another page. To deselect all pages, click anywhere outside the pages in Navigation view. Your screen should now look like this:

You can quickly open a page in Page view for editing by double-clicking the page in Navigation view or in the Folder List (pages will not show up in the Folder List until you save them). Next, youll replace the blank home page FrontPage created from the Web site template by importing the home page you created and saved to your My Documents folder earlier in this lesson.
To import a page into a Web site
1. In Navigation view, double-click index.htm to open it in Page view. FrontPage opens the blank home page that was created from the Web site template. 2. On the Insert menu, click File. FrontPage displays the Select File dialog box. Here, you can insert Web pages, word-processing documents, text files, and other documents on the current page. 3. In the Select File dialog box, navigate to the My Documents folder if its not already showing. 4. Click the file named homepage, and then click Open. FrontPage imports your previously saved home page to the current page. 5. To save the current page to your Web site, click Save toolbar. on the standard
FrontPage displays the Save Embedded Files dialog box. Here, you can preview, rename, save, and update embedded files that the current Web site will use. When you previously saved this page to the My Documents folder on your computer, FrontPage left the two pictures you inserted in their original location the FrontPage Tutorial folder. The home page merely pointed to the picture files without copying them to the same folder the page was saved to. To keep Web sites portable, however, you should always keep associated pages and files as part of the Web site that uses them. 6. In the Save Embedded Files dialog box, click OK. FrontPage saves the home page as Index.htm and saves copies of the embedded picture files to the current Web site. Tip Home pages have reserved names. FrontPage will automatically name home pages one of two reserved names that you should not change unless you need to. If you are running local Web server software such as Internet Information Services (IIS) on your computer, the home page will be named Default.htm. If you do not have a local Web server installed, or when you save a page to your local hard drive instead of a Web site on a Web server, the home page will be named Index.htm. These names are reserved for home pages because Web browsers will automatically look for them when a site visitor types the URL to your Web site without a specific page reference.
Creating Web site Content
Now that the home page is part of the current Web site, you will create the content for the other pages in the Championzone Web site.

Before creating the next hyperlink, youll insert a special character symbol to indicate a trademark on the current page.
To insert special characters or symbols
1. Click to insert the mouse cursor just after the letters MSN in the hyperlink you just created. 2. On the Insert menu, click Symbol. FrontPage displays the Symbol dialog box. Here, you can select and insert special characters at the insertion point. You can insert multiple symbols while this dialog box is displayed. 3. In the Symbol dialog box, select the symbol, click Insert, and then click Close. FrontPage inserts the symbol after the letters MSN. You can use the Symbol command to insert characters that you may not be able to type directly with your keyboard. Next, you will create an automatic hyperlink. This method of creating hyperlinks is quick and easy, because it lets you bypass the Create Hyperlink dialog box.
To create an automatic hyperlink
1. On the Links page, press the DOWN ARROW key, type www.sports.yahoo.com, and then press ENTER. As soon as you press ENTER, the URL you typed changes from black to blue text and is underlined to indicate the presence of a hyperlink. Like other Microsoft Office XP programs, FrontPage supports automatic hyperlink creation. Since a URL by itself is not always very descriptive, however, youll want to change it to the name of the site that the hyperlink points to. You can overtype the text without erasing the hyperlink. Note Yahoo! is a popular Internet service that lets you look for information on the World Wide Web using search keywords and subject categories. This particular URL goes to the Yahoo sports page. 2. Using the mouse, click and drag over the URL you just typed to select it. 3. When the URL http://sports.yahoo.com is selected, type Yahoo! to replace the selected text. The hyperlink still points to the same URL, but it is now labeled with the sites name. Next, youll create a hyperlink using your Web browser. This method of creating hyperlinks is the most accurate, because you actually visit the page the hyperlink will point to before creating the hyperlink. In addition, FrontPage copies the URL from
the Web browser address field, so once the address is verified, you dont have to type it again. Note If you do not have access to the World Wide Web while taking the FrontPage Tutorial, skip the following procedure and practice these steps the next time youre connected to the Internet.
To create a verified hyperlink
1. Press the DOWN ARROW key to move the insertion point to the blank line below the previous hyperlink. 2. Type National Basketball Association, and then press ENTER. 3. Click and drag the mouse over the words you just typed to select them. 4. On the toolbar, click the Hyperlink button.
FrontPage displays the Insert Hyperlink dialog box. 5. In the Insert Hyperlink dialog box, click the Browse the Web button.
FrontPage starts your Web browser. When you visit the page that the hyperlink should point to and then switch back to FrontPage, the URL box will contain the address of the target page. 6. In your Web browsers Address (or Location) box, type http://www.nba.com, and then press ENTER. The Web browser displays the National Basketball Association (NBA) home page, where you can learn more about the NBA, teams, players, schedules, and more. 7. On your keyboard, press ALT+TAB to switch back to the Create Hyperlink dialog box. The URL of the Microsoft FrontPage home page is now entered into the URL box in the Create Hyperlink dialog box. 8. Click OK. 9. On your keyboard, press the DOWN ARROW key to deselect the text. The words National Basketball Association are now underlined to indicate the presence of a hyperlink. 10. On the toolbar, click the Save button to save changes to the Links page.

7. On the toolbar, click the Save button to save the Products page. Tip You can repeat text formatting over more than one selection of text by double-clicking the Format Painter button after selecting the format you want to copy. Select the various text locations you want to copy the formatting to, and then click the Format Painter button again when youre finished. Next, youll finish formatting the page headings on the remaining two pages.
To finish applying paragraph styles to headings
1. Click the Page tab for photo_gallery.htm. FrontPage brings the Photo Gallery page back into view. 2. Click anywhere in the heading Sports Photos at the top of the page. 3. Click the Style list on the toolbar, and then click Heading 4. 4. On the toolbar, click the Save button to save the Photo Gallery page. 5. On the Window menu, click links.htm. 6. Click anywhere in the sentence Links to Sports Sites. 7. Click the Style list on the toolbar, and then click Heading 4. 8. On the toolbar, click the Save button to save the Links page. Congratulations! Youve successfully completed Lesson 1.

Whats Ahead

In Lesson 2, youll enhance the appearance of the Championzone Web site by adding shared borders, navigation bars, and a graphical theme, and you will learn how to preview, test, organize, and publish the finished Web site.

Finishing Lesson 1

You can continue with Lesson 2 now, or close Microsoft FrontPage and continue the tutorial at a later time.
To close Microsoft FrontPage
On the File menu, click Exit.

FrontPage closes.

Lesson 2 Enhancing and Publishing a Web site
In Lesson 1, you learned how to create Web pages with Microsoft FrontPage and then add them to a new Web site. In this second lesson, youll continue working with the Championzone Web site you created by adding navigation bars to its pages, applying and customizing a graphical theme, previewing and testing the Web site, and then preparing the Web site for publication on the World Wide Web. Before you publish a Web site, youll want to make sure its pages and files are well organized, all of its hyperlinks are working, pages are free of spelling errors, and you have enough space available on the target Web server. FrontPage can help you complete these important tasks.
In this lesson, you will learn how to: Create hyperlinks to other pages within a Web site. Add shared borders and navigation bars. Apply and customize a graphical theme. Preview and test a Web site in a Web browser. Organize files and folders. Generate a Site Summary report. Check spelling on a page and across a Web site. Replace text on Web pages. Publish a Web site to the World Wide Web.
Enhancing the Appearance of a Web site
If youre continuing this lesson directly from Lesson 1, the Championzone Web site should still be open in FrontPage. If this is the case, skip down to the procedure named To create hyperlinks to other pages. If youre continuing this tutorial from a previous session, then you must first open the Web site before you can work with its pages.

To open an existing Web site
1. On the Windows taskbar, click the Start button, point to Programs, and then click Microsoft FrontPage. 2. On the File menu, point to Recent Webs, and then click Championzone to open the Championzone Web site you created in Lesson 1.
FrontPage opens the Web site. The application title bar now reads Microsoft FrontPage <drive>:\My Documents\My Webs\Championzone. The lessons in this tutorial are designed to be completed using FrontPage 2002 on a computer running Microsoft Windows 98, Microsoft Windows 2000, or Microsoft Windows Millennium Edition. Depending on the operating system youre using, you may notice minor differences in the path to your Web site. While creating hyperlinks from pictures and text in Lesson 1, you may have noticed that you dont have any connections yet between the pages in your Web site. Even if someone visited your current home page, they would have no way of getting to the other pages. In the next section, youll learn how easy it is to make navigation hyperlinks to other pages.
To create hyperlinks to other pages
Youll keep the Folder List visible while you create hyperlinks to the other pages in your Web site. 2. Double-click index.htm in the Folder List to open the home page in Page view. 3. When the home page is displayed in Page view, press CTRL+END to place the cursor at the end of the home page. 4. Next, locate the page About_Us.htm in the Folder List. The folders and files in the Folder List are shown in alphabetical order. The icon of each file gives you a clue about what kind of file it is. You will now drag and drop the About Us page onto the bottom of the home page. When you do this, FrontPage will create a hyperlink to the About Us page on the home page. 5. Click and hold the mouse button on About_Us.htm in the Folder List, move the mouse pointer on the line below the FrontPage button at the bottom of the home page, and then release the mouse button. FrontPage displays the shortcut mouse pointer while you drag the mouse to indicate that it will not actually insert the About Us page, but will create a hyperlink pointing to it. FrontPage inserts the page title of the About Us.htm file (About Us) as the hyperlink text. The blue underlined text shows the presence of the hyperlink. 6. Repeat steps 4 and 5 with the other pages in the Championzone Web site, including Products.htm, Links.htm, and Photo_gallery.htm. Place each link just after the previous one.
7. On your keyboard, press the DOWN ARROW key to deselect the last hyperlink. Your page should now look like this:
While you can manually create hyperlinks to the other pages in your Web site this way, doing so for all pages in a Web site can become a time-consuming and tedious task, especially for larger Web sites. Worse, if you decide to add or remove pages in the current Web site after creating hyperlinks, youll have to manually add or remove the hyperlinks to them. FrontPage has a better way to create, manage, and automatically update the navigation hyperlinks that connect your pages together. Before you learn how to do this, lets get rid of the four hyperlinks you just made.

To use the multiple Undo command
1. On the standard toolbar, click the small arrow just to the right of the Undo button. 2. FrontPage displays the Undo history, which shows the last several actions you can reverse. The first of these actions is selected by default. If you were to click it, then only that action would be reversed. You can also move the mouse over other entries in this list to include them in the Undo command. 3. Since we want to get rid of all four hyperlinks you just dragged and dropped onto the home page, move the mouse down the list to select all four occurrences of Drop. The status bar in the Undo history window should read Undo 4 Actions.
4. Click the mouse on the last occurrence of Drop in the list. FrontPage reverses the last four actions you took, and the four hyperlinks you created are removed from the home page. 5. To save the current page, click Save on the File menu, or click the Save button on the toolbar.
Adding Shared Borders and Navigation Bars
For the Championzone Web site, you will let FrontPage manage the hyperlinks that site visitors will click to move around the pages in your Web site. FrontPage achieves this with a combination of two powerful features: shared borders and automatic navigation bars. Shared borders are page regions reserved for content that you want to appear consistently throughout the pages in your Web site. These borders can contain page banners and navigation bars. Page banners display the page title you gave each page when you created or saved it. Navigation bars are a row or column of hyperlinks to the other pages in the current Web site. FrontPage can automatically update shared borders and navigation bars, so the navigation structure of your Web site will always work correctly, even when you add, move, or delete pages from the Web sites structure. In Lesson 1, you already completed the first step required for automatic navigation bars: creating the basic Web site structure in Navigation view. Because you have already done this, youll now enable shared borders throughout your Web site.
To create shared borders across a Web site
1. Click the Navigation icon on the Views bar to switch to Navigation view. 2. Click the arrow to the right of Toggle Pane hide the Folder List in this view. 3. On the Format menu, click Shared Borders. FrontPage displays the Shared Borders dialog box. Here, you can specify where on your pages FrontPage should insert shared borders. Because your Web site structure has two levels of pages the home page and the pages below it you will use two kinds of shared borders and two kinds of navigation bars. 4. In the Shared Borders dialog box, make sure the All pages option is selected. 5. For a horizontal shared border, select the Top check box and select the Include navigation buttons check box just below it. 6. For a vertical shared border, select the Left check box and select the Include navigation buttons check box below it. 7. Leave the Right and Bottom check boxes unchecked, and then click OK. FrontPage creates shared borders and default navigation bars for all the pages in the current Web site. Youll see what these look like when you return to Page view. , and then click Folder List to

Modifying a Theme

Although the page banner of this theme looks nice, something directly related to the subject matter of the Championzone Web site might fit better. Weve prepared a custom page banner with which you will modify the current theme.

To modify a theme

1. Click the Page tab for index.htm. FrontPage brings the home page back into view. 2. On the Format menu, click Theme. FrontPage displays the Themes dialog box. In the list of themes, the Blends theme is now the default theme because it has been applied to the current Web site. 3. In the Themes dialog box, make sure All Pages is selected. 4. Next, click Modify. 5. Under the question What would you like to modify? click Graphics. FrontPage displays the Modify Theme dialog box. Here, you can supply custom graphics for various theme elements such as page banners, navigation buttons, background pictures, and other elements. FrontPage superimposes text over these graphics, so there is no need to change graphics when you change the names of your pages, or add or remove pages. For this example, we will change the graphical page banner on which FrontPage places the titles of the pages in the Championzone Web site. 6. In the Item list, click Banner. 7. On the Picture tab, click the Browse button below the file name of the current banner graphic. FrontPage displays the Open File dialog box and shows the pictures in your current Web site. Since the graphical banner we want to use isnt part of the Web site yet, you will search your file system for it. 8. Navigate to the folder named FPTutor2002. 9. Double-click the file czbanner. FrontPage replaces the current page banner graphic with the custom graphic. 10. Click OK in the Modify Theme dialog box, and then click OK in the Themes dialog box. FrontPage displays a message asking you whether you want to save changes to the current theme. 11. Click Yes. FrontPage displays the Save Theme dialog box with the message This theme is read-only. Please enter a new theme title to save as:.
12. Enter Championzone as the title of the modified theme, and then click OK. 13. Click Yes to apply the theme. FrontPage saves the modified theme and applies the new banner to all pages. 14. To save the page, click Save on the File menu, or click the Save button on the toolbar. Your page should now look like this:
Tip For this tutorial, weve provided only a custom page banner to help show you how easy it is to customize existing themes. To create your own designs, repeat the steps in the previous procedure to customize other theme elements with your own custom graphics. Congratulations, the Championzone Web site is almost finished! To make sure everything will look great on the World Wide Web, youll now preview the Web site in your Web browser.

In the following steps, you will move all the picture files in the Championzone Web site to the Images folder FrontPage created as part of the Web site. If you were to use Windows Explorer or another file manager to move pages and files from one folder to another, you would break the hyperlinks between your pages and page elements. However, when you maintain your Web site in Folders view, FrontPage keeps every page and hyperlink in your Web site updated to keep track of the new locations of files and folders that have been moved.
To move picture files to the Images folder
1. On the Views bar, click the Folders icon FrontPage switches to Folders view.
2. In the Folder List pane, click the top-level folder labeled <drive>:\My Documents\My Webs\Championzone. This will ensure that the contents pane displays all of the folders and files contained in the root Web site. 3. In the Contents pane, click the Type column label.
Clicking on a column label sorts the files in the Contents pane by that criterion. The first time you click a column label, the list is sorted in ascending order; when you click it a second time, it is sorted in descending order. The list of files is now grouped by file type, with all GIF picture files at the top of the list, followed by HTM files (pages) in the middle, and all JPG pictures at the bottom of the list. 4. In the Contents pane, click the first picture file (czbanner) at the top of the list to select it. 5. Next, while holding down SHIFT, click the last GIF picture file in the list (frontpage.gif). In Folders view, FrontPage supports all standard Windows selection shortcuts, such as SHIFT+CLICK for selecting ranges of files, and CTRL+CLICK for selecting noncontiguous files. 6. Click and hold the right mouse button while the pointer is over any of the selected GIF file icons. 7. Next, drag the mouse pointer over to the Images folder in the Folder List pane. 8. When the Images folder is selected, release the mouse button and click Move Here on the shortcut menu. FrontPage displays the Rename dialog box while it is moving the selected GIF image files to the Images folder because it is automatically updating all hyperlinks to these files in the current Web site. 9. Repeat steps 4 through 8 with all JPG picture files, starting with FPTutor003.jpg and ending with FPTutor006.jpg. 10. In the Contents pane, click the Name column label to arrange the remaining list of folders and files by their name again. Youve successfully grouped all picture files in the Images folder. When you work with your own Web sites, you can group sound files, movie clips, and other types of files in their own folders. You can create new folders in Folders view as needed and delete the ones you no longer need.

Replacing Text on Pages

The Replace command makes it easy to find and replace content on selected pages or all pages in the current Web site. While you can use the command to replace text on the current page in Page view, using it in any other Web site view lets you replace text in all (or selected) pages across the current Web site. You can replace any text that can be edited directly on the page. Other text, such as page titles in page banners or text contained in FrontPage-based components, cannot be automatically replaced.
To replace text on all pages in the current Web site
1. On the Edit menu, click Replace. FrontPage displays the Replace dialog box. Here, you enter the string of text to be found and what you want to replace it with. You can choose to replace text on all pages in the current Web site, or on selected pages only. 2. Click All Pages. 3. In the Replace dialog box, type Welcome to Championzone in the Find what box. 4. In the Replace with box, type Thanks for visiting Championzone. 5. Click the Match case check box, and then click Find in Web. FrontPage expands the Replace dialog box to display the progress of the search. The search text you want to replace is found on the home page, Index.htm. When the operation has been completed, FrontPage displays the number of occurrences it has found.
6. Click Replace in the Find and Replace dialog box. 7. FrontPage opens the home page, with the phrase Welcome to Championzone highlighted. 8. Click Replace. 9. When the Finished checking pages box appears, click Back to List, and then click Cancel.
Completing Web Site Tasks
Tasks view displays the list of all outstanding tasks associated with the current Web site. Tasks are items that need your attention before you publish the Web site. In the previous exercises, you added tasks to a list when you deferred certain actions. For example, when you checked the spelling of the pages in your Web site, you chose to add a new task for each page containing misspellings. By adding tasks to the list, you can complete such corrections all at once. If you are working in a Web development environment or on an intranet, Tasks view makes it easy to track Web site tasks and assign them to other authors who work on the same Web site.
To complete tasks in Tasks view
1. On the Views bar, click the Tasks icon FrontPage displays the Tasks list.
2. Double-click the first task on the list, labeled Fix misspelled words. FrontPage displays the Task Details dialog box. Here, you can see details about the task youve selected. You can set the priority of the task, assign it to another author on your network, or complete the task and remove it from the list. 3. In the Task Details dialog box, click Start Task. FrontPage switches to Page view and opens the page containing the misspelled words. 4. In the Spelling dialog box, click Add when FrontPage questions the name Championzone. This adds the word Championzone to the dictionary. Note FrontPage shares custom dictionaries with other Microsoft Office XP programs, so you dont need to add custom words in each program separately. When you add verified words to your dictionary, they will not be questioned again. 5. Click OK. 6. FrontPage completes the spelling check. If you want, you can now return to Tasks view and mark this task as completed.

Using Microsoft FrontPage 2002 How to Begin
Using your mouse, go to Start (lower left button), choose Programs, then Microsoft FrontPage. With FrontPage open, go to File, then New, then to Page or Web. A side pane opens on the right, if not already open (FrontPage is defaulted to have that window open when you start the program, so unless it has been changed, it will open with the program).
In the New Page or Web pane on the right of your screen, under New, click once on Empty Web. This will open a dialog box (Web Site Templates) that asks what type of web is being created and gives you several options.

Pierce 1

In the field to the right, choose the place on your computer where you would like to set up your web folder: on your C: drive, your diskshare, or your diskette. In this case, you will set up your web folders on the C drive. In the Specify the location of the new web: type: C://Myweb. Then click OK. FrontPage will create a new web folder, Myweb, for you on the C: drive, and the Folder List will open with the views bar on the left side of your window. There are two subfolders listed in the Folders List that FrontPage automatically creates: _private, where form results and other information can be saved and not viewed through the browser; and images, which is a folder where you can keep all the images in your web (you may choose not to use this folder -- it is not mandatory).

Pierce 2

Now you need to open a blank page to work in. There are two ways to do this. The first is only if you want a blank page. In the standard toolbar, click the New Blank Document button that looks like a sheet of paper with the corner folded. If you want a blank page that has prefabricated settings on it, called a template, you will have to refer back to the New Page or Web pane that you opened earlier in page 1 (File, New, Page or Web, and then click the settings that are needed for your page; in this case, click blank page).
Either way that you create this new page, you will come out with a view like the one below.

Pierce 3

Before you start to work in this page, you will begin by saving it as your home page. Go to File, choose Save As. Then at the top of the save as dialog box, you will see Save In, make sure that you are saving your page in your web folder that you created earlier. So click the down arrow to get a pop-down menu like the one below and check that you are saving the page in Myweb under the C: drive.
Notice that FrontPage already has a name entered for the page (index.htm). This is because the homepage for your web site must have the name index.htm or default.htm, so your home page can be found by web browsers. Otherwise, when a browser looks at your site, it will not know which page to start with. Another thing to change while saving a page is the title of your page. This is the name that people see when they browse your page. If this was on the web right now, a person viewing this page would see New Page 1 for the title of your page. It is much nicer if the pages are named something that makes it easy for the user to understand where they are in your site. Since this is your home page, title this page Home Page. First, click the Change title button. After clicking the button, you will have a small window open that says Set Page Title. Then type Home Page in the box and click OK.
Click Save at the bottom of the dialog box. Now your home page is set up, saved, and titled so you are ready to begin building your site!

Pierce 4

If you have not already noticed, the toolbar at the top of the window is a lot like Microsoft Word and most of the buttons in the standard toolbar act the same way. This is a great time to type a few words on your page and experiment with all the formatting buttons! A word to the wise though, as you play with the different formatting and options, think about fonts that are easy for you to read and which ones are not. If this is going to be on the web, you want your audience to understand what is being said, because some (fonts are tough to read). They may look pretty, but you have to remember your audience! Type This is my testing text! Testing 1, 2, 3! on the home page or index.htm. Now that you have created and saved your home page, you can notice some of the different features on the page. The first is that asterisk (*) that is above the index.htm on the page tab. This tells you that this page has not been saved since you made changes to it. This is a nice feature when you have several pages open and no clue which ones have been saved and which have not.

Second, notice the three tabs at the bottom of the page that say Normal, HTML, and Preview. The Normal view is what you are in right now. This view is where you can work with your page and see the changes that you make to the page (very visual and usually best for beginners to work in). The next tab is HTML. This is one of the programming languages used in web pages.

Pierce 5

You can click there to see the program behind the page that you are creating. As you become more advanced, this view can be used to add features not available in FrontPage. The last tab is Preview and this allows you to see what your page will look like on the web without actually going to the web (which will be done later). It is a good idea, as you work, to jump to this view on occasion to see how the page is looking and make sure that everything is aligned the way you want it to be. If you are wondering where the title Home Page that you created went, well, it is there, just not used until your page is on the web. If you click on the HTML tab, you will see the title Home Page in the code there. Now that you have done some work on the home page or index.htm, you should create a second page for your web. Click the New Blank document button that you used in page 3 to open a new page. This will open a new page with the name new_page_1.htm. If you are using a template page, you can also go to File, New, and Page or Web and select from there. On your new page, type This page is my personal history so lets name it aboutme.htm! Notice that both pages have asterisks on the tabs at the top of the page. This means that neither has been saved.
Now repeat the save process that you performed earlier to save your second page. (File, Save As) Save the page as aboutme.htm and change the title to Personal History. After you have finished saving, the asterisks should disappear and the title on the tab should change to aboutme.htm. There should also be another page listed in the folder list on the left.

Pierce 6

Notice aboutme.htm is added in the folder list in this picture and is changed on the tab. The asterisk on the home page or index.htm should still be there though, because it has not been saved, so you need to do that. Click on the index.htm tab to make that page active. Now the tab will have a white background like aboutme.htm does in the picture above (the gray means not active). There are a couple very quick ways to save this page, since you already have it saved and named. Click on the save button in the toolbar (looks like a disk) or use the keyboard shortcut to quickly tell FrontPage to save the active window (Ctrl+S). *NOTE* When naming pages, make sure that you keep the names short and avoid using spaces or characters other than letters and numerals. These will cause your address, when you put it on the web, to be long and cumbersome. Do you ever see a web address with spaces? No, because the web automatically puts in a symbol (typically %) to fill the space, which makes your pages name difficult to remember. Hyperlinks Hyperlinks are used to link pages together, link to other web sites, or link to email addresses. Make the home page or index.htm your active page and put a hyperlink on this page to the MSU-Billings home page for your students or friends. If that page is not active, click on the tab to make it active. Now type MSU-Billings on index.htm a few spaces below the text that you saved there (This is my testing text! Testing 1, 2, 3!). Notice, as soon as you type the M, an asterisk appears on the tab telling you that this page is not saved, since you have changed it! Now highlight MSU-Billings by clicking and dragging your mouse over it. Then, with it highlighted, click Insert from the menu bar and go all the way to the bottom where hyperlink is located. (If you have different settings on your computer you may have to wait a second for the full pop down menu to come down, so if it is not there right away, do not panic, the menu should open after a couple seconds.) There is a picture of this on the next page.

Pierce 7

After clicking hyperlink, you will see a dialog box that looks like the one below. This window has a lot of features that are used regularly. The text to display is the text that you highlighted on the page MSU-Billings. When linking to a page in your web (discussed at bottom of next page), it will be listed just like when saving earlier in the open window in the middle.
You want to link to a different web site though, so you need to do one of two things. You can type the address on the blank line at the bottom of the window (type http://www.msubillings.edu) or you can browse the internet for the pages that you want to link to. If you do not know the address, click the Browse the Web button toward the top of the page and find the page you want to link to. When you are there, go back to FrontPage and the address you were at will appear in the Address line at the bottom of the page. Then click OK.

Pierce 8

Now when you go back to your home page or index.htm, you will notice that the MSU-Billings on the page is now blue and underlined. If you have done much web surfing, it will look very familiar. It is now a hyperlink to www.msubillings.edu.
When you place your cursor over your newly created hyperlink, you will see a couple of nice features. The first is pretty noticeable. It will be in a yellow text box under your cursor and says that you can click and hold down CTRL to follow the hyperlink. When you have several pages you can check that you linked it the correct page easily without leaving the normal view. The other is not so noticeable. In the bottom left hand corner of the window, it tells you the site or page that you are linking to. Now lets make a link to your personal history page from the home page. This time you will create the hyperlink using the shortcut menu from right clicking on the highlighted text. Type Personal History somewhere below MSU-Billings (a space or two is fine). Now highlight the text as before, right click on the highlighted text, and go to hyperlink at the bottom. You should see the same window pop up that you had when you went to Insert and then Hyperlink (bottom back one page). This time, instead of typing anything or browsing for a web address, you can just click on the page from the listing that you want to link to (mentioned back one page, refer to insert hyperlink picture). In your case, you should click on aboutme.htm and then click OK. This will create a link from your home page to your personal history page. Now make personal history the active page and put a link on it to go from it to home page. Use one of the two processes that you have created hyperlinks with before.

Pierce 9

You have done a lot of work now and, as you all know, with a computer, that is a great time to save your work. Click on each page and save it by clicking the save button, going File then Save, or pressing CTRL+S. Make sure to do this to both pages separately. Now the asterisk should be gone from each page. If not, the page is not saved, so make sure those are gone. Now that you have links going between one page and the other (home to history and history to home), you have to check them and make sure they work. On the bottom of the page, there are those three tabs we discussed earlier. One was preview. With home page as the active window, click Preview. In this view, you can view pages as if they are on the web (but are not really). Click your hyperlink to go to personal history and then click the link to go back to home page. They should take you back and forth. Now click the link to MSU-Billings. It should take you to the MSU-Billings home page. If not, make sure the address is entered correctly. To get out of the preview mode, you have to click the normal tab at the bottom of the page. This is the editing page and here you can fix any errors that you just found or continue to build your pages. You have checked your page in the preview function, but as your pages get more advanced your site will have to be viewed in the browser to really see what it looks like. To do this, you have to do one of two things. You can select Preview in Browser from the File menu or you can click on the Preview in Browser button on the toolbar.

Pierce 10

*NOTE* If you click the button on the toolbar, it takes you into whatever program is your default web browser either Explorer or Netscape, usually. *NOTE* If you go through the file menu, you will see a window that lets you select which browser opens the FrontPage documents. This will list any web browsing program that is available on your computer. In this case, there is only Explorer 6.0, but most would list that and Netscape as options. After highlighting the browser you want to use, click Preview and the page will automatically open for your testing.
Another type of hyperlink that is used often in web pages is a mailto. This means setting up the page so a user can send you an email. Make sure that index.htm is your active page that you are editing. Then click a couple lines below personal history. Now open a hyperlink using the shortcut menu (right-clicking) or going insert hyperlink.
Click Email Address at the bottom left corner.

Pierce 11

Now you will see this window - probably without recently used addresses. In the Text to display box, type what you want the user to see. If you want users to see email me here, type that in the box. I will type in For broken links click here.
Then you can type your email address in the E-mail address line. Now, when someone clicks on that link, it will open an email program to send an email to us. Then click OK and your page will have a hyperlink that says For broken links click here that sends us an email.
*NOTE* The after product on the next page.

Pierce 12

Notice that when the cursor is on the link that says For broken links click here, the bottom corner shows the mailto function, that means it will send an email to that address.
Another thing you should notice is that you have done some work on the page and it is showing that you have not saved the changes, so you can click save again.

Adding Colors

There are a lot of ways to add color to your site and make it look more professional. The best way to look at some of the different options that you have is to go to Format on the menu bar and then Background. The Page Properties box will open and allow you to change some of the colors in the page.

Pierce 13

This is where you can set your background as a picture if you like, or you can just set the background as a constant color. Click the pop-down menu and select the constant color for your background. Below that, you can also set the color of the text on the page. This can also be done using the toolbars in FrontPage without coming into this menu (just like in Word). If you would like your hyperlinks to be in a different variation of colors than the standard colors, you can also do that here with the pop down menus on the right. Another way to add color is to use the Themes formatting. Go to the Format menu and go down to Themes. This is the arc theme that is available. On the left are the names of the available themes. As you choose one, it appears in the Sample frame.
Look through all the themes and pick one that you like. You can select the theme on one page or on all the pages in your web and that is in the upper left hand corner. Click OK after you have made your theme selection.

Pierce 14

A Few Tips When typing test in your web page, you may be tempted to use elaborate or decorative fonts. Resist that temptation! You may have some very nice fonts loaded on your computer. But if you use them in your web pages, they may not display properly when a visitor to your web site does not have the same fonts loaded on their computer. If the computer does not have the font, it will choose a replacement font, which may not look good at all. Here are a few of the best fonts to use on your website. Times New Roman Arial Verdana Comic Sans If you are accustomed to typing in Word or any word processing program, you will notice that when you hit the Enter key, the cursor will move down a double space. If you want to move one space, you will have to hold down the Shift key while you hit Enter. You may insert text that was already created in Word into a FrontPage document. You can open the Word document and then highlight the text and copy. Then go to the FrontPage document, click in the spot you want the text, and select Paste from the Edit menu. Tab functions do not work in FrontPage either. When in a FrontPage document, the best way to set text to an area is to use tables. Tables in FrontPage are set up much the same as the tables in Word. You can have visible borders or you can set them to zero so they can be viewed while editing the page but not while viewing it in a browser.

Tables

With your cursor on the place where you would like to insert the table, go to Table in the menu bar, Insert, and then Table.
After that a box like the one below should appear.

Pierce 15

At the top is size so that is how many rows and columns you would like in your table. Alignment is the horizontal setting in the cell. Border size is how large the borders are (0 is invisible in a browser). Cell padding is the space between the edge of the cell and the text. Cell spacing is the space between each of the cells. The Specify width on the right is the percentage of the window you would like the cell to cover or how many pixels you would like it to cover. **Percentages are easier to deal with when your page is viewed by many different browsers. So leave 2 in the size boxes and Default as alignment. Then change border size to 0, cell padding to 5, and cell spacing to 5. Then set the width to 90 percent. Click OK. You should see this table come up on your home page.
Notice the borders on the table are dotted; that is so they can be seen while working with them but disappear in a browser or preview. The cursor should be away from edge of the cell somewhat; that is the cell padding, so your text is not tight in the cells. There are thicker dotted lines on the outside of the table and that is cell spacing. This makes the cells look as if they have some spacing between them (not so crowded).

Pierce 16

Now, you decided that the borders would look nice. There are a couple of ways to put on the borders. Right click on the table and go down to table properties. The table properties dialog box will appear. Now you have a lot of options that you did not have before. Alignment refers to the horizontal position of the table and Float is a lot like alignment, but it allows text to be written or wrapped alongside the table. The rest of the top we have discussed earlier. In the borders section you have Size which is the thickness of the borders in the table and a Color. This can pop down to expose different colors for the borders. The light and dark borders can be used to add some contrast to your table. Background color pops down the same as the other color menus and changes the background color only in the table. Now lets change your border to a 5 and the light border color to a fluorescent yellow that is in the bottom left hand corner of the colors and the dark border to the lime next to it. Then set the background color as silver, the middle of the bottom row.
As you perform your changes to the table, you should see this. *NOTE* A fun way to play with the different settings in this window is to just change something and click Apply. It will change it in the web page behind the dialog box, so you can watch as topics are adjusted in the page.

Pierce 17

Now your table should look like this.
Notice that the light border (yellow) that you set went to the top and the dark border (lime) went to the bottom. These settings can be adjusted in the whole table like you have just performed, or it can be adjusted cell by cell in the same manner, using the cell properties when you right click on a cell. This is a great time for you to play with putting in some of the different images and text and explore what the different settings do.

Exiting

After you are finished, save your web pages. Make sure the asterisks are gone from both tabs and then go to File and click Close Web from the menu. Now you can exit FrontPage.

Opening

To re-open your web page, open FrontPage and then go to File and Open Web. This dialog box should appear.

Pierce 18

Use the pop down menu to locate your web on the computer. You were under the C: drive and called it Myweb, so you find it and then click open in the bottom corner. When the page is opened, this is the view that you should see. The most important thing to see is the Folder List. The Folder List is where you select the page that you will be active. If it is not available, there is no way to get into the page that you wish to work on or fix. If your window looks like this, you can double click on the name of the page, and it will open in the gray area for editing.
If the window is all gray, then you will have to open the Folder List. To do this, click View from the menu bar, go down to Folder List, and click. Then the Folder List will open on the left of your window.

Pierce 19