A Frontpage Tutorial

Contents Page

Page 1-2 ……Things to do and know before we start

Page 3………….How to save your web pages

Page 4 ……….Opening an existing web page

Page 5………..Creating more web pages

Page 6-8…….Adding tables

Page 9………….Inserting images

Page 10……….Inserting and formatting text

Page 11……….Changing background colour and adding a title

Page 12……….How to preview work

Page 13-14…Adding hyperlinks

Things to do and know before we start

1. Open FrontPage (Start All Programs Microsoft FrontPage)

2. Click the “New” icon:

3. You are now ready to make a website

Page 1

NEW

This is where

we design our

Web Pages

Standard Menu

Bars

4. Menu Bar Commands we need to know:

Page 2

Format:

Fonts

Background Colour

Bullets

File:

Save As

Preview in Browser

Page Properties

Insert:

Pictures

Hyperlinks

Table:

Insert new table

Alter an existing table

How to Save your Web Pages

This is how you save your file as a Web-Page

1. Click File Save As

2. New window will pop up:

Choose where to save your file

(Web Design My Website HTML folder)

File name of homepage should be index.htm

Click Save

Page 3

Remember!

File Extension for a Web-Page is .htm

Name of Web Page

(MUST be .htm at the end)

Location to

Save in

Opening an existing Web Page

When you need to open a Web Page to either make changes or complete

it use the following steps:

1. Click:

File Open

2. Select the Web Page you want to open

3. Click Open

Page 4

Other Pages you

are working on can

be accessed using

the Tabs

Click Open

Select Web Page

Tabs

Your Web Page

ready for editing

Creating more Web Pages

Your Website is to be made up of more than one page. You need to be

able to create these extra pages in FrontPage.

To create new pages follow these steps:

1. Click:

File New Page

2. In the window that appears click Blank Page

Page 5

Page 6

Page 5

Blank Page

New Blank Page

Tabs

Other Pages you

are working on can

be accessed using

the Tabs

Adding and Amending a Table

1. Click Table Insert Table

2. You now see this box:

Here you can:

Set number of columns/Rows

Set the Width of the table

Set border thickness

Set padding and spacing

3. We now have a table with:

5 Rows

3 Columns

Page 6

All these settings can be changed

later in the Properties later

4. Each Column or Row can be resized by clicking on the appropriate

line and dragging:

5. You can also change table properties to make alterations after the

table has been created (Sizes, Borders, Border Colour etc)

Right Click the table and select Table Properties:

Alter

Border/Background

Colour

Alter

Width/Height

Click the Lines and

Drag to correct size

Page 7

Choose Border thickness

(0 = no border)

6. Table Columns and Rows can be added/removed by Right Clicking

table and selecting either

Insert Columns

Insert Rows

Note: Rows will be add to the

bottom of the table and Columns

will be added to the right

New Row

Page 8

Inserting Images

1. Click Insert Picture

From File

2. New window will pop up

5. Resize the Image to the correct size by clicking and dragging the

handles:

Page 9

3. Browse to where your

images are stored

(Web Design My

Website Images)

4. Select Image you want

then click Insert

Click and Drag

Handles

Inserting and Formatting Text

1. Inserting Text is very simple (Very similar to using Word)

2. Choose where you want to input your text

(I always use a table to keep things neat)

3. Text can be formatted (Like in Word) by highlighting it and

using the Properties Window to make changes:

Page 10

Inserting Text into

a Table

Formatted

Text

Change Size

Align (Left, Centre or Right)

Bold/Italic

Change Colour

Change Font

Changing Background Colour and Adding a Title

1. Very easy to do

2. Click File Properties:

3. To change the Title:

Click General

Add your Title into the Title box

Click Ok

4. To change Background Colour:

Click Background option

Click Background colour box

Select new colour

Click Ok

Page 11

Background

Background

Colour Box

Colour

Options

General

Adding

Title

How to Preview your work

At times you will need to be able to see what your Web Pages will look

like on the actual Internet

To do this you need to be able to preview your work in a Web Browser

(Internet Explorer for example)

1. Click File Preview in Browser

2. Your Web Page will now appear in Internet Explorer and shows you

exactly how it will appear online.

Page 12

Homepage as

previewed in

Internet Explorer

Adding Hyperlinks

All the pages in your Website should be linked together using

hyperlinks. FrontPage makes creating these links very, very easy.

You can use either Images or Text as your Hyperlink.

1. Select the Image or Text which you want to be your Hyperlink:

2. Click Insert Hyperlink

3. Click the “Browse for File button”

4. Browse to your HTML folder

5. Find the Web Page you want to open

6. Click OK

Page 13

Selecting Text for

Hyperlink

Click OK

HTML Folder

Select Web Page

Page 14

Completed

Hyperlink