Creating Web Pages with FrontPage Editor

This tutorial will teach you how to:

1. Create a new website using FrontPage XP 2003.
2. Create a new web page using the FrontPage editor.
3. Create numbered (ordered) and bulleted (unordered) lists.
4. Modify pages in an existing web site.
5. Add links to other pages.
6. Add some formatting to a page.

Creating a One-Page Web Site

1. Start Microsoft FrontPage using the icon on your desktop or in your Start Menu.
2. Under the File menu, choose the New... option. The New pane will appear on the right side of the window.

3. Under the New Web site heading, click the One page Web site... link.  The Web Site Templates window will appear.
4. Under the Options heading, browse to the location where you wish to save your new web site, and give it a name.

5. Choose the template you wish to use for your web site from the available list, and click the OK button.

When you open your new web site for the first time, you are looking at the Web Site view, which can be seen as a tab at the top of the window.  This view shows all the files - including images and pages - currently in use on your web site. By clicking the next tab over, you can view your website's home page.  Each time you open an additional document, it will be given a new tab at the top of the editor.

When viewing a web page, there are four different views one can use while editing. The buttons to select each view are located at the bottom of the editor window. The Design button is a WYSIWYG (What You See Is What You Get) editor with an interface that resembles Microsoft Word. The display that you see in the Design window is very similar to the display that you will see when viewing the final page from a web browser.

The Code button displays the HTML code that describes the web page you are creating. Only use this display mode if you are familiar with HTML and CSS coding. Making a mistake in this area could cause your page to not display properly.

The Split button divides the display into two panes. One pane displays the page in Design mode, and the other pane displays the page in Code mode.

The Preview button displays the web page as it will appear in a web browser. No editing can be done while using this mode.

Choose the editing mode that best suits your preference and abilities with web page design.

Entering Text Using FrontPage Editor

Editing text in FrontPage is not very different from editing text in Microsoft Word or other Microsoft Office applications. Web pages, however, attempt to simplify the formatting process by defining a hierarchy of headers ranging from Header 1 (the largest, boldest, most noticeable text) to Header 6 (the smallest, least invasive text). These headers can be used for labeling various sub-sections of your page, but for typing large amounts of text and paragraphs, there is also a Normal text setting.

To set the text heading value:

1. Place the cursor in the document where you wish to add the text.
2. In the upper-right corner of the window, locate the Style menu (it is not labeled) and choose the heading value that you wish to use.

3. Type the text that you wish to use that style. When you are finished, hit the [Enter] key.
4. After hitting the [Enter] key, your style will automatically revert to Normal text. Repeat this every time you wish to use a different style.

To save the page after you've made changes to it, under the File menu, choose Save. You will know if your current document needs to be saved because an asterisk will appear next to its name on its tab.

When using the headers isn't enough for achieving the style you want, you can use the Format menu. All these options have the same functions as they do in Microsoft Word, and the same results can be achieved by simply highlighting the text you wish to format, and choosing the desired formatting options from the menu or toolbar.

Creating a List

There are two types of lists you can create in FrontPage: (ordered numbered, lettered, etc.) and unordered (bulleted). You can choose to create either type of list by using the list buttons on the Formatting toolbar.

1. Place the cursor in your document where you wish to add the new list.
2. Click the list button that corresponds to the type of list you wish to add.
3. Type the text you wish to add as a list item.
4. When you are finished with a list item, press [Enter] to start the next list item.
5. After you have added the last list item, press [Enter] twice to go back to editing Normal text.

You are not limited to the default ordering or bullet styles when creating a list. It is possible to change the ordering method or choose a different symbol to use as a bullet.

1. Right-click inside of the list that you wish to change, and choose the List Properties... option. A window will appear that displays a variety of display options for your list.

2. Click on the style that best suits the style you wish to use, or use the tabs at the top of the window to browse additional styles.
3. Once you have chosen the desired style, click the OK button to return to the editing screen.

Adding Hyperlinks

Hyperlinks - also called "links" - allow you to view additional pages on your website, or elsewhere on the Internet.  You can also make a hyperlink that allows you to send an e-mail to a specific address.

1. Highlight the text and/or images that you wish to turn into a hyperlink.
2. Right-click on the highlighted information, and choose Hyperlink... from the menu that appears.  You will see the Insert Hyperlink dialog box.

If you are linking to another page on your website...

3. Locate the page in the large browse window, and highlight it.

If you are linking to another page on the Internet...

3. Type the full URL (i.e. http://www.someothersite.com) in the Address text box.

If you are linking to an e-mail address...

3. Click the E-mail Address button in the lower-left corner of the dialog box.  In the E-mail address text box, type the e-mail address to which you are linking.  The mailto: at the beginning of the text will be added automatically.
    
4. Once you have filled in all the required information, click the OK button.  The area on the page that you have highlights is now a hyperlink.

Previewing Pages in a Browser

1. Save your progress.
2. Under the File menu, choose Preview in Browser.
3. The Preview in Browser submenu contains at least four previewing options, depending on which web browsers are installed on your computer.  Choose the option that best suits how you wish to preview the page.

• Microsoft Internet Explorer 6.0 (640×480) - use this option to see how the page would look on an older system with a low screen resolution
• Microsoft Internet Explorer 6.0 (800×600) - use this option to see how the page would look at the accepted standard resolution
• Microsoft Internet Explorer 6.0 (1024×768) - use this option to see how the page would look on a newer system with a high screen resolution
• Microsoft Internet Explorer 6.0 - use this option to see how the page would look on your computer with your current browser and screen settings

4. The browser will open with the settings you chose.  Use this feature to verify that the page looks as you'd expect on another computer.

Opening an Existing Website

1. Start Microsoft FrontPage.
2. Under the File menu, choose Open Site....
3. Using the Open Site dialog box that appears, locate the web folder with the name of the site that you wish to open.  Double-click on it so that you can see the contents of the folder.
4. With nothing highlighted in the browse box, click the Open button.  The web site will be opened, and all the files it contains will be available for use.

Formatting your Web Page

Microsoft FrontPage includes a large number of formatting options that you can use to change the appearance of your page when automatic styles and headers are not enough.  Most of these options are borrowed from Microsoft Word, and they all function similarly.

Note:  to make formatting easier, make sure the Formatting toolbar is visible.  To do this, right-click anywhere on the upper portion of the window (where the menus are located), and make sure that Formatting is checked in the drop-down menu that appears.

Bold

1. Highlight the text you wish to bold.
2. Click the Bold icon on the Formatting toolbar.

Italics

1. Highlight the text you wish to italicize.
2. Click the Italics icon on the Formatting toolbar.

Underline

1. Highlight the text you wish to italicize.
2. Click the Underline icon on the Formatting toolbar.

Alignment

1. Position your cursor in the paragraph for which you want to set the alignment.
2. Click the appropriate alignment icon on the Formatting toolbar - Align Left, Center, Align Right, or Justify.

Text Color

1. Highlight the text of which you want to change the color.
2. Click on the arrow next to the Font Color icon on the Formatting toolbar.
3. From the drop-down menu that appears, choose the new color for the text you have selected.  If the color you want is not in the list, click More Colors... at the bottom of the menu, and choose your color from the window that appears.  Click OK when you are finished.

If you wish to change the default color of all the text on a page, use the Page Properties options.

1. Right-click anywhere inside your page, and choose Page Properties... from the menu that appears.
2. Click the Formatting tab at the top of the Page Properties dialog box.

3. Under the Colors heading, choose a color from the Background drop-down menu.  If the color you are looking for is not there, click More Colors... and choose a color from the wheel that appears.
4. Click OK once you have made your changes.

Text Size

1. Highlight the text of which you want to change the font size.
2. Click the arrow next to the Font Size menu on the Formatting toolbar.
3. From the drop-down menu that appears, choose the relative font size that you wish to apply to the highlighted text.

As an alternative, the Increase Font Size and Decrease Font Size buttons on the Formatting toolbar can also be used to change the size of the text.

Indentation

1. Position your cursor in the paragraph that you wish to indent.
2. Click either the Decrease Indent or Increase Indent icon on the Formatting toolbar.

Background Color

1. Right-click anywhere inside your page, and choose Page Properties... from the menu that appears.
2. Click the Formatting tab at the top of the Page Properties dialog box.

3. Under the Colors heading, choose a color from the Background drop-down menu.  If the color you are looking for is not there, click More Colors... and choose a color from the wheel that appears.
4. Click OK once you have made your changes.

Link Colors

1. Right-click anywhere inside your page, and choose Page Properties... from the menu that appears.
2. Click the Formatting tab at the top of the Page Properties dialog box.
3. Under the Colors heading, choose a color from the Hyperlink drop-down menu, the Visited hyperlink drop-down menu, and/or the Active hyperlink drop-down menu.  If the color you are looking for is not there, click More Colors... and choose a color from the wheel that appears.

The Hyperlink menu chooses the color for hyperlinks when a user has not yet clicked on that link.  The Visited hyperlink menu chooses the color for hyperlinks after the user has already visited the page or document to which it points.  The Active hyperlink menu chooses the color for hyperlinks as they are being clicked.

4. Click OK once you have made your changes.

Page Title

The page title appears at the very top of your browser window when visiting a web page.  It is a good idea to include a unique, descriptive page title on every page to make it easier for your site to be found using search engines.

1. Right-click anywhere inside your page, and choose Page Properties... from the menu that appears.

2. Type the title for your page in the Title text box, and click the OK button once you've finished.