FrontPage 2003

Introduction

• Starting FrontPage
• Opening a website
• The FrontPage User Interface Window
• Add a new page
• View entire website files and folders
• Delete a web page
• Preview a page in a web browser

Managing a Webpage

• Insert graphic, revised time
• Hyperlinks and Emails
• Adding/Importing files
• Creating Tables

Advance FrontPage Features

• Adding Themes
• Modify a Theme

Welcome to Basic FrontPage 2003

This tutorial is intended for users who would like to learn FrontPage 2003.

Important:  If you do not have or obtain a FrontPage account, please fill-out the professional frontpage request from this address:  http://faculty.ucc.edu/requestform/ .  Before you submit the request, please print the form and have a chair person sign and interoffice the form to: Dorothy Andrews, Information Technologies, Cranford Campus.  We will notify you when your website is ready.
 

In this Microsoft FrontPage basic tutorial, we’ll discuss a number of the basic procedures used in creating and editing webpages using FrontPage 2003. In addition, we’ll also introduce other essential features in FrontPage. 

Introduction

Microsoft's FrontPage is an HTML editor that lets you add text, insert images, sound and video to direct you to the path in becoming a master at web site creation. No it’s easy; it's fun and limited only to your imagination. 

Starting FrontPage

To Start FrontPage:

·         Go to Start à  All Programs à  Microsoft Office à  Microsoft Office FrontPage 2003

Figure 1: FrontPage 2003

Opening a website

To open your website:

- Click File on the menu bar and choose Open Site

Figure 2: Open Site dialog box

- At the Site name text box, type in the website address in this format: “http://faculty.ucc.edu/department-username” or the site address that is given to you

- Click Open.

- This will prompt you to enter your username and password. 

Figure 3: FrontPage User Interface

The FrontPage User Interface Window

FrontPage features contain many of the same tools as other Microsoft applications that you may already be familiar with.  However, there are some important new tools we will be using consistently in FrontPage and these are shown below.

Preview in Browser:  Activates Internet Explorer allowing you to preview your site in a web setting.

Hyperlink Tool:  Used to link text/pictures to other pages within your site or to Internet sites.

Folder List:  Displays all folders/files contained in this site.

File Name:  Displays the file name given to this page.

Page View Tabs:

Design:  Used for editing pages.

Split:  Splits the screen to display the HTML code and page.

Code:  Displays the HTML code used in creating the page.

Preview:  Allows you to preview the page in a web setting. (Not recommended.  Use Preview Browser instead.)

Download Time:  Estimates the time it will take for the page to load in the browser.

By default, FrontPage includes an Images folder, a private folder and (depending on the version) a “default.htm”, or “index.htm” page when you create a site for the first time.  The default page is the website’s “Home Page” or the first page a browser searches for to open a website.  It is extremely important that you do not rename this page.  If this default/index page does not display in the folder list, you will need save this page as default.htm or index.htm.

FrontPage includes many simple preset templates you can use right away.

You can use Save As or Page Template to add new pages

Using Save As

Open any existing page and go to File > Save As

Using Page Template (Recommended)

Go to File > New.  Click "Blank page" in the right column.

View entire website files and folders

All of your saved web pages are listed in the Folder List view.  

1. On the Menu bar, select View | Folder List.  
2. Double click any web page in the Folder List.  This will take you to the Page view for that web page. 
3. To hide the Folder List view, select View | Folder List.

 Delete a web page

1. To delete a web page, right click the web page you want to remove in the Folder List view and select Delete.
2. To delete an entire website, right click the website at the top of the Folder List and select Delete. (Not advisable to delete entire website)

Preview a page in a web browser

1. Click any web page in the Folder List.
2. Click the Preview button on the Toolbar or select File | Preview in browser on the Menu bar.

Managing a Webpage

Insert graphic, revised time

Insert a graphic

On the Menu bar, select Insert | Picture | From File. 

Insert a Revised Date

On the Menu bar, select Insert | Date and Time.

Hyperlinks and Emails

Hyperlinks

A hyperlink is a connection from one page to another destination such as a web page in the World Wide Web or a file in the local computer.  

1.       Type the text you want to use as a hyperlink and then click and drag the mouse over the words you just typed to highlight them.

2.       On the Menu bar, select Insert | Hyperlink. FrontPage displays the Create Hyperlink dialog box.

3.       In the URL or Address box, type a web address such as www.yahoo.com immediately after the http:// prefix.  If you want to link to a local file in your computer, click the file button or Look in box.

E-Mails

1.  Select either text or a picture.

2.  Click Insert Hyperlink

3.  On the left side, under Link to, click E-mail Address.

4.  Either type the e-mail address you want in the E-mail address box, or select an e-mail address in the Recently used e-mail addresses box.

5.  In the Subject box, type the subject of the e-mail message.

Note:  Some Web browsers and e-mail programs may not recognize the subject line.

Adding/Importing files

1. Click once on the http://...... folder list in FrontPage or select the folder into which you will import your file.
2. Click File, Import…The Import window displays.
3. Click Add Folder… or Add File.  Depending on what your are importing
4. Click Open.
5. Click Open.  Your import window should now contain the individual files.
6. Click OK. Your folder/file should now appear in your folder list window. 
7. Link as needed to the imported files.
   

Creating Tables

A table is made up of rows and columns of cells in which you can insert text and graphics.

You can use a table to present information in a grid-like format, such as timetables, product information, rates, and so on.

Example:

Insert a table

1. On the Menu bar, select Table | Insert | Table 
2. You can set the layout of a table by changing the following properties:
• Rows - the number of rows you want.
• Columns - the number of columns you want.
• Alignment - alignment of the table relative to the page
• Border size - thickness of the table's outer border
• Cell padding - the space between text and cell borders
• Cell spacing - the distance between cells in a table

Table / Cell background

You can choose background color or background pictures for the entire table or for individual cells.

1. Move the insertion point inside the cell or table for which you want to set the background.
2. Right-click, and then click Cell Properties or Table Properties, depending on whether you want to set the background for a cell or table.
3. Do one of the following:

o        Color background - under Background, in the Color list, select a color for the table background.

o        Picture background - under Background, select the Use background picture check box, and then click Browse.

Table / Cell border color

You can set the border color for the entire table or for individual cells.  The border size must be greater than zero; otherwise, the border color will not be displayed.  If your web page uses theme, you can't set border color for a table.  

1. Move the insertion point inside the cell or table for which you want to set the border color.
2. Right-click, and then click Cell Properties or Table Properties, depending on whether you want to set a border color for a cell or table.
3. Do one of the following:

o        To set one color for the border, under Borders, select a color from the Color list.

o        To set a two-color border, under Borders, select colors from the Light border and Dark border lists.  The color from the Color list will not be used. However, if you select only a Light border or a Dark border, the color selected from the Color list will be used as the second color.

Text alignment in a cell

1. Right-click the cell and select Cell Properties.
• Horizontal alignment - horizontal alignment of the cell's content relative to the cell
• Vertical alignment - vertical alignment of the cell's content relative to the cell

Adding Themes

FrontPage includes many preset themes that you can use right away.  A theme contains background picture, page banner, bullets, navigation buttons, horizontal lines, etc.

1. Open an existing page or create a new page to which you want to apply a theme
2. On the Format menu, select Theme.
3. On theme task pane on the right hand side, point to the thumbnail for the theme you want to apply, and then click the arrow.  Click Apply as default theme to apply a theme to all pages or click Apply to selected page(s)

Modify a Theme

You can modify a theme using your own graphics, color sets, and styles. For example you can change a theme's background picture or page banner's font.

1. On the Menu bar, select Format | Theme.  

In the Theme task pane, point to the thumbnail for the theme you want to change, and then click the arrow.  Click Customize.

2. Change the font color or background color:

Click Colors button.  Select Custom tab.  In the Item box, select an item.  In the Color list, select a color.  Save your changes.

3. Change theme graphics:

Click Graphics button. In the Item box, select an item.  Click Browse to select a new graphic. 

When you have finished editing a theme, click Save As to save the theme as a new theme, or click Save to overwrite the original theme with your changes. Note that you cannot overwrite the original FrontPage themes that are shipped on the FrontPage compact disc. These themes are read-only.

Union County College
December, 2006