Lesson 1: Building a New Website

  • Article
Archived content. No warranty is made as to technical accuracy. Content may contain URLs that were valid when originally published, but now link to sites or pages that no longer exist.

In lesson 1, you will learn how to use the FrontPage Explorer to create a four-page Web site with professionally designed Web graphics and functional navigation bars. You will also learn how to edit the pages by adding text, images, formatted lists, and hyperlinks using the FrontPage Editor.

On This Page

Getting Started
The FrontPage Explorer
Navigation and Themes Views
Working With Pages
Applying a FrontPage Theme
Opening Pages in the Front Page Editor
Editing the Home Page
Saving the Page
Editing the "Interests" Page
Editing the "Photo Album" Page
Editing the Favorites Page
Previewing the Personal Web
Finishing Lesson 1

Getting Started

In this first lesson, you will use the Personal Web as a model for building a new FrontPage web template in the FrontPage Explorer.

To Create a New FrontPage Web

  1. On the Windows task bar, click the Start button, point to Programs, and then click Microsoft FrontPage.

    The FrontPage Explorer opens and the Getting Started dialog box is displayed. The Getting Started dialog box is a convenient starting point whenever you begin working in FrontPage. You can open an existing FrontPage web from a list of recently opened webs, or you can create a new FrontPage web.

  2. In the Getting Started dialog box, choose Create a New FrontPage Web and then click OK.

    The New FrontPage Web dialog box is displayed. Here, you tell FrontPage what kind of FrontPage web you want to create, and what the title of the new web will be.

  3. In the New FrontPage Web dialog box, select One Page Web next to the number 1.

    This option will create a site consisting of a single home page.

  4. Next to the number 2 in the New FrontPage Web dialog box, type Personal Web into the title field.

    "Personal Web" is the title of your new FrontPage web. This title helps you distinguish between multiple Web sites you create with FrontPage. As you type the name of your new FrontPage web, the FrontPage Explorer suggests a location where this FrontPage web will be stored. For this tutorial, accept the suggested location.

  5. Click OK.

    FrontPage creates a new FrontPage web called "Personal Web."

    Note: Depending on the type of Web server you are using, you may be prompted for name and password authentication before the new FrontPage web is created. To proceed, enter the administrator name and password you chose during FrontPage Setup.

The FrontPage Explorer

The FrontPage Explorer is a main component of Microsoft FrontPage. You use the FrontPage Explorer to build new Web sites and later to change, maintain, administer, and publish established FrontPage webs. The seven buttons on the FrontPage Explorer's Views bar provide different ways of looking at information in your FrontPage web. You can choose how you want to view the contents of your Web site throughout the project—from the early steps of creating a new Web site, to the moment it is ready to be published on the World Wide Web.

les11

Navigation button

Select the Navigation view by clicking the Navigation button on the FrontPage Explorer's Views bar.

The Navigation view consists of a split-screen display that shows the top-level structure of your FrontPage web in the upper half of the screen (the Navigation pane), and a familiar Windows Explorer-like file and folder list in the lower half of the screen (the Files pane).

Cc750834.les12(en-us,TechNet.10).gif

During this lesson, you will primarily use the Navigation view and the Themes view for the construction of your new FrontPage web.

The Navigation view is the most useful view for constructing a new Web site, because it provides a useful outline of your site structure and it can automatically create navigation bars on all pages in your FrontPage web. A navigation bar is a page region that provides access to other pages in your FrontPage web, using textual or graphical hyperlinks. In larger Web sites, linking all of the pages together in a consistent and accurate manner could take hours of work. If you create your site structure in the Navigation view, FrontPage can do this work for you.

You will use the Themes view to apply a set of professionally designed graphics to your FrontPage web. A theme consists of design elements for bullets, fonts, images, navigation bars, and other page elements. When applied, a theme gives the pages and navigation bars in a FrontPage web an attractive and consistent appearance.

Later, in Lesson 3 of the FrontPage tutorial, you will learn about some of the other FrontPage Explorer views that help you organize files and folders, check and repair the hyperlinks on your pages, and remind you of tasks that must be completed before you publish your site on the World Wide Web.

For a complete discussion of all FrontPage Explorer views, see "FrontPage Webs and the Microsoft FrontPage Explorer".

Working With Pages

Your Personal Web will consist of four pages that will be linked together. When you first constructed the Personal Web, FrontPage created the first of these pages, called the home page.

The home page is the front door to every Web site. It is the page that is displayed by default in the Web browser when you visit a Web site. The home page that FrontPage created in the previous steps will eventually contain hyperlinks to the other pages in your FrontPage web.

To finish creating your Personal Web's site structure, you will now use the Navigation view to add three new pages below the home page.

To Add New Pages to Your FrontPage Web

les13

New Page button

  1. In the Navigation view, make sure "Home Page" is still selected.

    Selected pages in the Navigation view are displayed in blue.

  2. On the FrontPage Explorer's toolbar, click the New Page button.

    FrontPage adds a new page labeled "New Page 1" below the home page in the Navigation pane.

  3. When prompted to let FrontPage create navigation bars that link your pages together, answer Yes.

  4. Now click the New Page button two more times. FrontPage adds two more pages below the home page, labeled "New Page 2" and "New Page 3."

    Cc750834.les14(en-us,TechNet.10).gif

  5. Note the hierarchical structure between the four pages. The Navigation view shows the pages connected by lines—much like the relationship of fields in an organizational chart. This is the hyperlink structure that FrontPage will use to generate navigation bars on your pages.

    Before working with the pages you have just created, you should give each page a meaningful title. Page titles not only help you identify and distinguish the pages in your FrontPage web, they are also displayed in the title bar of the FrontPage Editor, as well as your Web browser. You can change page titles without leaving the Navigation view.

To Add Titles to Pages

  1. With the Home Page still selected in the Navigation view, press the TAB key on your keyboard.

    FrontPage highlights the left page below the home page and activates its page title for editing.

  2. Type Interests, then press the ENTER key.

    FrontPage changes the page title "New Page 1" to "Interests."

  3. On your keyboard, press the TAB key.

    FrontPage highlights the middle page below the home page and activates its page title for editing.

  4. Type Photo Album, then press the ENTER key.

  5. Press the TAB key once more.

    FrontPage highlights the right page below the home page and activates its page title for editing.

  6. Type Favorites, then press the ENTER key.

    Your screen should now look like this:

    Cc750834.les15(en-us,TechNet.10).gif

FrontPage Tip

An Alternate Way to Add Pages: You can add new pages in the Navigation view by right-clicking a page and choosing the New Page command from the shortcut menu. This command will create a new page below the selected page.

Any changes you make to the site structure in the FrontPage Explorer's Navigation view are not actually applied until you take one of several actions, including switching views in the FrontPage Explorer, switching to another Windows application, or opening a page in the FrontPage Editor.

les16

Undo button

If you make a mistake or change your mind about a modification you have made, you can use the Undo button on the FrontPage Explorer's toolbar to undo the last action.

Applying a FrontPage Theme

With Microsoft FrontPage, you can easily create dynamic and visually consistent Web sites by applying one of several pre-designed themes.

Before applying a theme, you can preview its appearance in the FrontPage Explorer's Themes view. In the steps below, you will add the "Global Marketing" theme to the Personal Web.

To Apply a FrontPage Theme to the Personal Web

les17

Themes button

  1. On the FrontPage Explorer's Views bar, click the Themes button.

  2. Click on different themes in the scrolling list box.

    The Theme Preview pane lets you preview the graphical elements as they will appear on your Web pages. You can preview a theme before applying it by selecting it from the list of themes.

    Before applying a theme, you can select theme options that affect the appearance of the theme's components. Selecting Vivid Colors will apply brighter colors to text and graphics, selecting Active Graphics will animate certain theme components, and selecting Background Image will apply a background image to the pages in your current FrontPage web.

  3. For this lesson, select Vivid Colors and Background Image.

  4. From the list of themes, select Global Marketing, then click the Apply button. The selected theme is applied to the pages in your current FrontPage web. In the next section of this lesson, you will see how the selected theme gives your pages a consistent and attractive appearance.

Opening Pages in the Front Page Editor

Now that the layout of the Personal Web is in place, you will add content to each of the pages. While page creation and file management tasks are best handled in the FrontPage Explorer, designing and editing pages is done in the FrontPage Editor.

The FrontPage Editor is used to create, edit, and view pages using a familiar WYSIWYG (What You See Is What You Get) interface similar to word-processing programs such as Microsoft Word. All text, styles, and page formatting is based on Hypertext Markup Language (HTML) standards.

The following exercises will introduce you to the FrontPage Editor's basic features. In Lesson 2, you will explore FrontPage Editor features in more depth.

To Open the Home Page in the FrontPage Editor

les18

Navigation button

  1. In the FrontPage Explorer, click the Navigation button on the Views bar.

  2. Double-click the home page in the Navigation pane or select the page and choose Open on the FrontPage Explorer's Edit menu.

    The home page opens in the FrontPage Editor.

    Cc750834.les19(en-us,TechNet.10).gif

Editing the Home Page

When the home page is opened in the FrontPage Editor, note the page elements that have been applied by the FrontPage theme you selected in the previous section: the page has a textured background image, a page banner with the page's title, and a navigation bar with linked buttons pointing to the other pages in the Personal Web.

To add text on the page, simply begin typing as you would in a new word processing document.

To Add Text to the Home Page

The home page of a Web site should have a greeting for your visitors (people that will "surf" to your site after it has been published on the World Wide Web).

  1. Type Welcome to my Web site! on the home page, then press ENTER.

    Pressing ENTER creates a new paragraph on the page.

  2. On the new line, type Please make sure you take a look at the other pages at my site. and then press ENTER.

    You can later replace this text with a personal greeting in your own words, along with a description of what your site has to offer.

    Your page should now look like this:

    Cc750834.les110(en-us,TechNet.10).gif

Saving the Page

Before continuing, it is a good idea to save your work.

To Save the Current Page

  1. On the FrontPage Editor's File menu, choose Save As.

    The Save As dialog box is displayed.

    You can choose to save the current page to your FrontPage web, to the World Wide Web, to your file system, or as a page template. You can also change the page title and the URL of the page in the Save As dialog box. URL stands for Uniform Resource Locator. It is the unique name that will be used by a Web browser to locate and display the page.

  2. Click OK without making any changes.

    FrontPage saves the current page.

Editing the "Interests" Page

The second page in your FrontPage web will display a brief, bulleted list of your personal interests. You can later customize this page by adding a more detailed list of your interests, hobbies, or projects.

To Open the Interests Page in the FrontPage Editor

  1. On the FrontPage Editor's File menu, choose Open.

    The Open dialog box is displayed. This dialog box displays the pages and folders in your FrontPage web. You can open pages from the current FrontPage web, files on your local file system, pages on another Web server, or live pages on the World Wide Web.

  2. From the list of files in your FrontPage web, select interest.htm and click OK.

    The Interests page is displayed in the FrontPage Editor.

When the Interests page is opened in the FrontPage Editor, note the page elements that have been applied by the FrontPage theme. As you complete the steps below, you will see two new theme elements on this page: a horizontal line and image bullets.

To Add Formatted Text to the Interests Page

  1. Type Here are just some of the things I like to do in my spare time:

    les111

    Center button

  2. With the cursor at the end of the line of text you just typed, click the Center button on the FrontPage Editor's toolbar to center the text.

    When you apply paragraph formatting like centering text, FrontPage creates the correct HTML tags for each paragraph on your current page. HTML code is stored when you save the page.

  3. On the Insert menu, choose Horizontal Line.

    A horizontal line is inserted on the page, just below the text you typed.

In the following steps, you will add a bulleted list to the Interests page. This list will consist of three interests, each followed by descriptive text.

To Add a Bulleted List

les112

Bulleted List button

  1. On the FrontPage Editor's toolbar, click the Bulleted List button.

    FrontPage begins a bulleted list and displays the first bullet.

    Because you previously applied a theme to the Personal Web, the normally plain list bullets are replaced by graphical image bullets.

  2. Type Interest 1: This will be a description of a favorite activity or hobby. and then press ENTER.

    Pressing ENTER ends the current list item and creates the next bullet in the list.

  3. On the next line, type Interest 2: followed by a space, then press ENTER.

  4. On the third line, type Interest 3: followed by a space, then press ENTER two times.

    Pressing ENTER twice ends the current list.

Your screen should now look like this:

Cc750834.les113(en-us,TechNet.10).gif

Next, you will copy and paste the descriptive text after the first list bullet and paste it behind the text after the second and third bullets. You can copy and paste text in the FrontPage Editor exactly like you do in a Windows word processor.

To Copy and Paste Text in the Bulleted List

  1. From the first bullet, select the sentence "This will be a description of a favorite activity or hobby."

  2. On the Edit menu, select Copy.

    The text is copied to the Windows clipboard.

  3. Next, position the insertion point after "Interest 2:" on the second line of the list and click the left mouse button.

    The cursor appears after the words "Interest 2."

  4. On the Edit menu, select Paste.

    The text is pasted from the Windows clipboard.

  5. Position the insertion point after "Interest 3:" on the third line of the list and click the left mouse button.

  6. While holding down the CTRL key, press V.

The key combination CTRL+V pastes the copied text after the third list item. FrontPage supports standard Windows keyboard shortcuts.

Your screen should now look like this:

Cc750834.les114(en-us,TechNet.10).gif

Before continuing, it is a good idea to save your work.

To Save the Current Page

les115

Save button

  • On the FrontPage Editor's toolbar, click the Save button.

Editing the "Photo Album" Page

On the third page in your FrontPage web, you will insert two images—one of a sunset, and one of a metropolitan city skyline. Images add decoration and personality to your Web pages and can be imported from a variety of popular graphics file formats.

To Open the Photo Album Page in the FrontPage Editor

  1. On the FrontPage Editor's File menu, choose Open.

    The Open dialog box is displayed.

  2. From the list of files, select photo.htm and click OK.

    The Photo Album page is displayed in the FrontPage Editor.

When the Photo Album page is opened in the FrontPage Editor, note the page elements that have been applied by the FrontPage theme.

To Add Formatted Text to the Photo Album Page

  1. On the Photo Album page, type Here are two cool photographs that came with the FrontPage Clip Gallery.

  2. With the cursor at the end of the line of text you just typed, click the Center button on the FrontPage Editor's toolbar to center the text.

  3. On the Insert menu, choose Horizontal Line.

  4. Press ENTER.

Your page should now look like this:

Cc750834.les116(en-us,TechNet.10).gif

Next, you will add two images to the page.

To Import Images to the Photo Album Page

  1. On the Insert menu, choose Image.

    The Image dialog box is displayed. In this dialog box, you can select an image to be inserted from the current FrontPage web, from another Web server, from a scanner, from the Microsoft Clip Gallery, or from your local file system.

    les117

    File button

  2. In the Image dialog box, click the File button.

    The File button lets you browse your local file system for an image to insert. For this exercise, the image file you want to insert is named sunset.gif.

  3. In the Select File dialog box, navigate to the following folder (assuming you installed FrontPage in the \Program Files folder on your C:\ drive):

    C:\Program Files\Microsoft FrontPage\tutorial\

    If you changed the default installation drive or folder during FrontPage Setup, you will need to adjust the path accordingly.

  4. In the tutorial folder, select the file sunset.gif, then click OK.

    The photograph of a sunset is placed on the page.

  5. Press ENTER to create a new line for the next image.

Your screen should now look like this:

Cc750834.les118(en-us,TechNet.10).gif

Now repeat steps 1 - 5 in the previous exercise to insert the second image, which is named city.gif. This image is also located in the C:\Program Files\Microsoft FrontPage\tutorial\ folder.

To Save the Current Page

les119

Save button

  1. On the FrontPage Editor's toolbar, click the Save button.

  2. In the Save Embedded Files dialog box, click OK to save the images you inserted.

Editing the Favorites Page

The fourth page in your FrontPage web will consist of a brief list of hyperlinks that point to other sites on the World Wide Web. After taking the FrontPage tutorial, you can customize this page by changing the hyperlinks to those of your favorite Web sites.

To Open the Favorites Page in the FrontPage Editor

les120

Open button

  1. On the FrontPage Editor's toolbar, click the Open button.

    The Open dialog box is displayed.

  2. From the list of files, select favorite.htm and click OK.

    The Favorites page is displayed in the FrontPage Editor.

When the Favorites page is opened in the FrontPage Editor, note the page elements that have been applied by the FrontPage theme.

To Add Formatted Text on the Favorites Page

  1. On the Favorites page, type Here is a list of my favorite sites on the World Wide Web!

  2. With the cursor at the end of the line of text you just typed, click the Center button on the FrontPage Editor's toolbar to center the text.

  3. On the Insert menu, choose Horizontal Line.

  4. Press ENTER.

Your page should now look like this:

Cc750834.les121(en-us,TechNet.10).gif

Next, you will add hyperlinks on the current page. A hyperlink is a pointer from text or from an image to a page or other type of file on the World Wide Web. On World Wide Web pages, hyperlinks are the primary way to navigate between pages and among Web sites.

You will create the first hyperlink from descriptive text, using the FrontPage Editor's Hyperlink command.

To Create Hyperlinks From Text

  1. Type The Microsoft Network and then press ENTER.

  2. Click and drag the mouse over the three words you just typed to select them.

  3. On the Insert menu, choose Hyperlink.

    The Create Hyperlink dialog box is displayed. In this dialog box, you can select the target of the hyperlink. This can be a page or a file in your current FrontPage web, on your local file system, on another Web server, or on the World Wide Web. You can also create an e-mail hyperlink (which you will learn in Lesson 2).

  4. In the URL field, type https://www.msn.com and then click OK.

    "https://" stands for Hypertext Transport Protocol. This is the Internet protocol that allows World Wide Web browsers to retrieve information from Web servers. "www.msn.com" is the URL of "The Microsoft Network." To learn more about URLs, see "Welcome to the World Wide Web" .

  5. On your keyboard, press the DOWN ARROW key to deselect the text.

    The words "The Microsoft Network" have changed from black default text to colored text and the words are now underlined to indicate the hyperlink. When this page is displayed in a Web browser, clicking this hyperlink will retrieve and display the home page of The Microsoft Network. The color and appearance of the hyperlink on this page is derived from the theme you applied earlier in this lesson.

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 Favorites page, type https://www.yahoo.com and then press ENTER.

    "Yahoo!" is a popular Internet service that lets you look for information on the World Wide Web using search keywords.

    As soon as you press the ENTER key, the URL you just typed changes from black to colored text and the address is underlined to indicate the hyperlink. FrontPage, a member of the Office 97 family of products, supports automatic hyperlink creation.

    Since a URL by itself is not always very descriptive, however, you will want to change it to the name of the site the hyperlink points to. You can overtype the text without erasing the hyperlink.

  2. Using the mouse, click and drag over the URL you just typed to select it.

  3. Now type the word Yahoo! to replace the selected text.

    The hyperlink still points to the same URL, but it is now labeled with the site's name.

Next, you will 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.

Note: If you do not have access to the World Wide Web while taking the FrontPage tutorial, you should skip the exercise on the following page and proceed to the next section, "Previewing the Personal Web."

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 Microsoft FrontPage and then press ENTER.

  3. Click and drag the mouse over the words you just typed to select them.

  4. On the Insert menu, choose Hyperlink.

    The Create Hyperlink dialog box is displayed.

    les122

    World Wide Web button

  5. In the Create Hyperlink dialog box, click the World Wide Web button.

    The FrontPage Editor launches your Web browser. When you visit the page that the hyperlink should point to and then switch back to FrontPage, the URL field will contain the address of the target page.

  6. In your Web browser's Address (or Location) field, type https://office.microsoft.com/en-us/FX010858021033.aspx and then press ENTER.

    The Web browser displays the Microsoft FrontPage home page, where you can learn more about FrontPage, download new software, and find solutions to common questions.

  7. On your keyboard, press ALT+TAB (or click the FrontPage Editor tile on the Windows task bar) to switch back to the FrontPage Editor's Create Hyperlink dialog box.

    The URL of the Microsoft FrontPage home page is now entered into the URL field in the Create Hyperlink dialog box.

  8. Click OK.

  9. On your keyboard, press the DOWN ARROW key to deselect the text.

The words "Microsoft FrontPage" are now underlined to indicate the hyperlink.

Your page should now look like this:

Cc750834.les123(en-us,TechNet.10).gif

To Save the Current Page

les124

Save button

On the FrontPage Editor's toolbar, click the Save button.

Previewing the Personal Web

Now that the Personal Web is finished, you can display it in your Web browser to preview your site's layout and appearance. You can also navigate between the four pages and test the hyperlinks you created. Previewing a FrontPage web works just like browsing to a site on the World Wide Web.

You will learn how to publish your site on the World Wide Web in Lesson 3.

To Preview the Home Page in a Web Browser

  1. In the FrontPage Editor, click Window on the menu bar.

    The list of pages appears. Assuming that you did not close any of the pages used in this lesson, you should see the Home Page, the Interests page, the Photo Album page, and the Favorites page listed here.

  2. Click the Home Page to bring the home page back into view.

    If you previously closed the home page, simply open it again to display it in the FrontPage Editor.

  3. On the File menu, choose Preview in Browser.

    Preview in Browser displays the active page in your Web browser. This lets you see exactly how the page will appear in your favorite Web browser before you publish your FrontPage web. You must have at least one Web browser installed on your system for this feature to work.

  4. In the Preview in Browser dialog box, click on the Web browser you want to use, and then click Preview.

    Cc750834.les125(en-us,TechNet.10).gif

The home page is displayed in your Web browser. Click the buttons on the navigation bar to display the other pages in your Personal Web.

FrontPage Tip

A Faster Way to Preview Pages While Editing: If you have Microsoft Internet Explorer installed on your system, you can immediately preview the pages in your FrontPage web by selecting the FrontPage Editor's Preview tab

Finishing Lesson 1

You can continue with Lesson 2 now, or close Microsoft FrontPage and continue the FrontPage tutorial at a later time.

To Close Microsoft FrontPage

  1. On the FrontPage Editor's File menu, choose Exit.

    The FrontPage Editor closes.

  2. On the FrontPage Explorer's File menu, choose Exit.

    The FrontPage Explorer closes.