Creating A Simple Webpage Using Microsoft Frontpage 2003

Creating a Simple Webpage
using Microsoft FrontPage 2003
Professor Carrie Damschroder

ENGL 317: Technical Communication
October 27, 2009
Brandi Goodman
Heather Stanfield
Dylan Thompson
Nikki Truong
Page 1 of 16
Getting Started with Front Page:
Creating a Simple Webpage Using Microsoft FrontPage 2003 is designed for computer users
who have a basic knowledge of Windows and the Internet. These instructions will teach you how
to format the background, add scrolling text, hyperlinks, images, buttons, and videos.
Required Materials:
• Microsoft FrontPage 2003
• Basic knowledge of Windows
• “Hahaha” YouTube Video: http://www.youtube.com/watch?v=5P6UU6m3cqk
Create a New Webpage
1. Click File and select New...
2. The New menu appears on the right.

Under the heading New Web page in the
New menu, click One page web page...
Page 2 of 16
Create a New Webpage
3. The Web Page Templates window

appears. Select One Page Web Page.
4. Click OK.
5. The Web Page view and Folder List will

appear. Double click index.htm to begin
editing your web page
Page 3 of 16
Format the Layout
Add a layout that includes a header, body, sub-header for the body, and left sections.
1. Click Table and select Layout Tables and

Cells...
2. The Layout Tables and Cells Menu appears

to the right.
Drag your mouse over the icons in the Table

Layout section.
Click the button with the yellow label

Header, Left, Top Right, and Body
3. A table layout will be created.
Note: Resize the cells by clicking on the borders and

dragging to the desired size or by using the Show
Layout Tool button.
Toggle the
Layout
Page 4 of 16
Format the Background
This section demonstrates how to change the background of your Webpage using a color or
theme.
1. Click Format and select Background.
2. Click the Formatting tab.
Page 5 of 16
Format the Background
3. Under Colors, click the color you want in

the background list. Once the color is
selected click OK.
4. To apply a theme, click Format and select

Theme.
5. Under Select a Theme, choose a

background theme of your choice. The
background will automatically change
Page 6 of 16
Scrolling Text
This section demonstrates how to make your text scroll across your Webpage.
1. Click on Insert and select Web

Component. The Insert Web Component
window will appear
2. Select Dynamic effects on the left.
3. Select Marquee on the right. 2 3
4
4. Click Finish.
5. Marquee Properties window will appear.

Choose the text, direction, speed, behavior,
size, and repetition for the scrolling text.
6. Select OK.
Page 7 of 16
Create link to another webpage
1. Click the cursor where you want to place

your link.
2. Click Insert and select Hyperlink.
3. Insert Hyperlink window appears. Select

Existing File or Web Page icon on the left.
4. Type the label of your link in the Text to

display field.
5. Type web address in Address field.
6. Click OK.
Page 8 of 16
Create link to a specific place on your page
1. Click the cursor where you want to go to on

your webpage.
Note: Make sure no text is highlighted.
2. Click Insert and select Bookmark.
3. Name your bookmark in Bookmark name

field.
Page 9 of 16
Create link to a specific place on your page
4. Click OK. The blue flag appears; which is

your bookmark.
5. Click the cursor where you want your link

to be at.
6. Click Insert and select Hyperlink.
7. Name the link in Text to display field and

click Place in This Document icon on the
left.
8. Bookmark name is highlighted. Click OK.
Page 10 of 16
Add a Hit Counter
A hit counter tracks the number of visitors to your website.
1. Place the insertion point where you want the

hit counter.
2. Click Insert, select Web Components.
3. Select Hit Counter.
4. Under Choose a counter style, choose the 3 4

design of your hit counter.
5
5. Click Finish.
6. Hit Counter Properties appears. Click OK.
Page 11 of 16
Adding an Email Me Button
Adding an interactive button is a graphic way of adding a hyperlink to your page. Interactive
buttons can link to websites, email, videos, etc.
1. Click Insert and select Interactive Button.
The Interactive Buttons window appears.
2. Change the style of your button by selecting

an option from the Buttons list.
The preview pane shows what the button

will look like on your page.
3. Write “Email Me” in the Text section.
4. In the Link section, write mailto:[your

email address]. For example, a CSULB
student would write
mailto:studentname@csulb.edu.
Note: Use the font tab to change the font of the

button. Use the picture tab to use an image as the
button background.
5. Click OK.
The window will close, and you will see the

button on your webpage.
Page 12 of 16
Adding an Image
This section teaches you how to add an image from the computer’s hard drive to your webpage.
1. Click Insert, select Picture, and select

From File. The Picture window will
appear so that you can locate the file.
2. Select My Documents and My Pictures.
3. Select Sample Pictures.
Page 13 of 16
Adding an Image
4. Select an image to add to your webpage.

Click Insert.
5. The image will appear on your webpage.

Resize the image by clicking on it, and then
dragging the corners to the desired size.
Note: To add an image of your own, follow the same

steps and instead of going to My Documents, locate
the image on your hard drive.
Page 14 of 16
Add a YouTube Video
1. Using your Internet browser, go to

http://www.youtube.com/watch?v=5P6UU6
m3cqk
2. Click on the Embed code in the grey box to

the left of the video.
You will be given options to customize the

appearance of the video on your webpage.
3. After you have customized the video,

highlight the Embed text again. Right-click
and select Copy.
4. Return to FrontPage 2003.
5. Click Insert, select Web Component...
The Insert Web Component window

appears.
Page 15 of 16
Add a YouTube Video
6. Under Component type, scroll down and

select Advanced Controls.
7. Under Choose a Control, select HTML. 3
4
8. Click Finish.
2
9. The HTML Markup window appears.

Right-click in the text box, and select Paste.
10. Click OK.
11. A little yellow box appears on your web

page where the cursor was placed.
Note: Drag or cut and paste the box anywhere you

would like to place the embedded video
Symbol for your video
Page 16 of 16

Creating A Simple Webpage Using Microsoft Frontpage 2003

Uploaded by

Copyright:

Available Formats

Creating A Simple Webpage Using Microsoft Frontpage 2003

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Creating A Simple Webpage Using Microsoft Frontpage 2003

Uploaded by

Copyright:

Available Formats

Creating a Simple Webpage

using Microsoft FrontPage 2003

Professor Carrie Damschroder

• Basic knowledge of Windows

• “Hahaha” YouTube Video: http://www.youtube.com/watch?v=5P6UU6m3cqk

Create a New Webpage

1. Click File and select New...

2. The New menu appears on the right.

3. The Web Page Templates window

5. The Web Page view and Folder List will

1. Click Table and select Layout Tables and

2. The Layout Tables and Cells Menu appears

Drag your mouse over the icons in the Table

Click the button with the yellow label

3. A table layout will be created.

Note: Resize the cells by clicking on the borders and

1. Click Format and select Background.

2. Click the Formatting tab.

3. Under Colors, click the color you want in

4. To apply a theme, click Format and select

5. Under Select a Theme, choose a

1. Click on Insert and select Web

2. Select Dynamic effects on the left.

3. Select Marquee on the right. 2 3

5. Marquee Properties window will appear.

1. Click the cursor where you want to place

2. Click Insert and select Hyperlink.

3. Insert Hyperlink window appears. Select

4. Type the label of your link in the Text to

5. Type web address in Address field.

1. Click the cursor where you want to go to on

2. Click Insert and select Bookmark.

3. Name your bookmark in Bookmark name

4. Click OK. The blue flag appears; which is

5. Click the cursor where you want your link

6. Click Insert and select Hyperlink.

7. Name the link in Text to display field and

8. Bookmark name is highlighted. Click OK.

1. Place the insertion point where you want the

2. Click Insert, select Web Components.

3. Select Hit Counter.

4. Under Choose a counter style, choose the 3 4

6. Hit Counter Properties appears. Click OK.

1. Click Insert and select Interactive Button.

The Interactive Buttons window appears.

2. Change the style of your button by selecting

The preview pane shows what the button

3. Write “Email Me” in the Text section.

4. In the Link section, write mailto:[your

Note: Use the font tab to change the font of the

The window will close, and you will see the

1. Click Insert, select Picture, and select

2. Select My Documents and My Pictures.

3. Select Sample Pictures.

4. Select an image to add to your webpage.

5. The image will appear on your webpage.

Note: To add an image of your own, follow the same

1. Using your Internet browser, go to