FrontPage Basics for Online Lessons

1
FrontPage Basics for Online Lessons
(Among Other Things)
2
What is FrontPage?
FrontPage is a program that creates HTML code,
the code necessary to develop web pages, for you.

Rather than devote time to remembering and
writing code, you can devote time to being
creative and developing the best internet lesson
possible.
Because the program is part of the Microsoft
Office suite, its tools, layout and functions are
very similar to those you find in Word or
Publisher.
3
Why Use FrontPage?

• Use it to
• Create a website where information about the
  school and its programs is posted.
• Display student work on the web and create a
  virtual tour of the projects.
• Develop teacher web pages where assignments,
  activities and information can be shared.

4
FrontPage Basics

• During these sessions, we will learn to
• Access the program
• Create a background
• Create Additional Pages
• Add Text
• Preview Pages in a Browser
• Add Images
• Use hyperlinks
• Establish bookmarks within a page
• Include a Table

5
Accessing FrontPage
To open Frontpage, look for the Frontpage icon on
your desktop and double-click it OR Go to Start
(lower left corner) Go to Applications or
Programs and Select FrontPage
6
Creating a Background
There are several ways of creating a background.
You can

• Use an image drawbacks
• Use an appropriate color continuity
• Use a theme

7
There are several ways of creating a background.
You can go to Format and select background.
Then, select appropriate background, text and
hyperlink colors. Try to find a complementary
set! Next, click OK.
A Color Background
8
Some of the most attractive pages include a dark,
perhaps even black background.
In fact, the district pages have a dark
background it is a dark teal color that is
similar to this color.
Since we will be using some bold graphic elements
for our sample page, I recommend a very dark or
black background.
A Dark Background
9
Please take a moment to select background, text
and hyperlink colors.
10
Adding Design Elements Images
The first design element to include will be a
banner. I have loaded a collection of graphic
elements on each desktop. Go to Insert Select
Picture Select Clipart Type banner in the subject
field Press enter Select one of the banners by
double-clicking On it Lose the clipart window or
minimize it
11
Marquee
Heading
Banner
Some Elements
12
Adding a Marquee
A marquee is an animated banner which
continuously scrolls information across the
screen. To include a marquee Go to Insert Select
Component Select Marquee Select a Background
color Or use none Type the text you want to
continuously scroll across the screen. You can
also set timings on the text Also, go to Style,
Format and Font in order to select Arial and to
change the text color. Click OK
13
Task

• Preview you page as well as your animated
  marquee by selecting the Preview option (as
  opposed to the normal view) in the lower left
  corner of your screen.

14
Making Decisions Take a few moments to discuss
the same basic categories each of you will
include on your first page.
15
Saving Pages Lets take a moment to save our
first page. For now, lets use the first four
letters of your last name and home. i.e. guarhome
16
Adding Headings/Text
Using text in FrontPage is very similar to using
text in Word. Unfortunately, browsers only allow
you to view several default fonts . . .
Type a greeting such as Welcome to the Campus
School page Highlight the text by clicking and
dragging the left mouse button Go to the upper
left corner of the screen and select Heading 1, a
large font size.
17
Changing Font Colors
In order to change the color of text Highlight
the text by clicking and dragging Then look for
the Font Color icon on the upper or lower
menu. Click the down arrow and select a color or
custom color. Click OK, if necessary. While you
have the text selected,
Center the Text
18
Centering the Text
Highlight the text Click once on the Center text
icon on the upper or lower menu
19
Task

• Next, press the Return key a few times and then
  type the word Vision.
• Highlight the text and select Heading 2.
• A slightly smaller font will appear.
• Highlight it and change the font to Arial
  Black.
• Then, change the color of the font to a color
  which complements your layout.
• Repeat these steps for the other four or five
  headings you intend to include.

20
Task

• Next, press the Return key a few times and then
  type the word Vision.
• Highlight the text and select Heading 2.
• A slightly smaller font will appear.
• Highlight it and change the font to Arial
  Black.
• Then, change the color of the font to a color
  which complements your layout.
• Repeat these steps for the other four or five
  headings you intend to include.

21
Task

• Add two or more bars between headings that are
  not closely related.

22
Creating Additional Pages
Before we add buttons or link pages, we will need
to create additional pages, name them and save
them. Lets name them by using the first four
letters of your last name and the first letters
of the heading. In this case, we will use res for
resources. i.e. resourcepage
23
Task

• On your resources page
• Add the background color you used for the home
  page
• Add a marquee that has to do with resources
• Add a heading that indicates that this is the
  resources page
• Then, save the page with the added features and
  open/return to your home page.

24
Adding a Button
Insert a button next to the headings that will
lead to additional pages such as Assignments and
Resources. To do so, go to Insert Picture
Clipart Then, find an appropriate image and
insert it. Scale it to the size of a
button. Place it to the left of the heading to
which it applies.
25
Task

• Add an image next to each heading.
• Resize the images.

26
Adding a Hyperlink
You can make text or an image a hyperlink to
another page you have created OR to a website. To
do so Select/Click on the image next to
Resources. Go to the hyperlink icon on the upper
menu and click.
You will be prompted to indicate the page to
which you want the button to link.
27
Go to the folder with a magnifying glass click
once and search for the resources page you
created. Select it and click OK.
28
This concludes our FrontPage Basics session. I
hope you enjoyed the experience! May your pages
all be beautiful!
29
The next time, we will explore Bookmarks Hyperlink
s to Other Sites Tables Navigation Bars