Microsoft Front Page Tutorial

Microsoft Front Page Tutorial
Microsoft Front Page is a graphical
web authoring tool designed by Microsoft, and enables the user to author or update web based files using
either the html code, or the graphical interface. In this tutorial we will
be using the graphical user interface
(GUI), and not using the html code
interface.
Before you begin building your
web files, you’ll need to put some
thought into what your web will
look like. Which graphics will you
be using? Which text files will you
have to create, or have someone
create? What graphics are available
to you, and which ones will you
have to build? In the image above you will see a
folder on the desktop which is opened to show the
files within the folder. These files will be used to
build the web page in this tutorial.
photodraw format, and each element
of the image is saved separately.
Some of the images in this folder include a banner which will be used for
the top of the page, several background images, some G.W.R.R.A.
logo images, along with various other
images which may or may not be used
in this tutorial.
Above you will see some of the files in the desktop
folder in a MSPhotoDraw window. I recommend
highly that you acquire some sort of quality imaging software such as photodraw. The thing I like
about photodraw is you can save your work in a
Save these graphics and text files to a
folder that is separate from the rest of
your files so they can easily be referenced for later use.
After you have your graphics or image
files, along with the text files you will
be using, it’s time to open MSFrontpage.
To the right you will see an image of
MSFrontPage once it is opened. It will always open with a new_page.htm. If you
already have a web site built, you should
have all the files on folders on your local
computer, and you will be opening up existing files on your computer. If you do
not have a web site built, you will begin
with this screen and begin building your
web site from here.
•
•
Open a web
•
On the File menu, click Open Web, and
then do one of the following:
• To open a disk-based web on your
local computer, in the Folder Name
box, type the path to the folder containing the web, and then click
Open.
For example, to open a web named
North wind located on your C:
drive in the My Webs folder, you
would type C:\My Webs\North
wind.
Or, use the Look In box to navigate
to the My Webs folder (or any other
folder containing webs). In the list
of webs, select the web you want,
and then click Open.
•
To open a disk-based web on a ne twork computer, use the Look in
box to navigate to the network drive
and folder containing the web you
want to open. In the list of webs, select the web you want, and then
click Open.
Tip To map a network drive without
leaving the Open Web dialog box,
click Tools, and then click Map
Network Drive.
To open a web on a server, in the
Folder Name box, type the URL to
that web, and then click Open.
For example, to open a web named
North wind on a server named My
Server, you would type http://My
Server/North wind.
To open a sub web displayed in the
Folder List of another web, doubleclick the sub web.
Notes
• To open a web that you've opened recently,
in the Open Web dialog box, click the
drop-down arrow at the right of the Folder
Name box, click the web you want, and
then click Open. Or, if you aren't in the
Open Web dialog box, point to Recent
Webs on the File menu, and then click the
web you want.
• To open the last web you worked on automatically each time you start FrontPage,
click Options on the Tools menu, and then
select the Open last web automatically
when FrontPage starts check
box.
• In the Open Web dialog box,
click an icon on the left (such as
History, Favorites, or Web Folders) to open a web in one of those
locations.
• If you already have a web open,
each subsequent web opens in a
new FrontPage window.
To the right you will see the results if
you choose to open an existing web either on a web server or a web on your
local computer.
From the file structure on the left of the
FrontPage Screen you can select the
folder or file you wish to open. In the
example to the right the index.html file
of the Michigan District Web site has
been selected, and you can see the results of the file displayed to the right of
the file structure. This is a graphical representation of the file, and is updated or
modified in a similar fashion to building
new web pages. You can select individual graphics, or text, and change it very
much line you would change them in
any other Microsoft program.
In this tutorial we will be starting with the
page that is opened when you open
MSFrontPage, which is a new_page.htm.
From here you will begin putting together
the structure of your web site.
If you want to open a specific type of
page, you have several template options
available to you which are discussed on
the next page.
Create a new page
Create a new page in a web, or create
a stand-alone HTML page. Microsoft
FrontPage includes a variety of templates to help you create different
kinds of pages:
• Create a blank page.
• Create a page with a specific
layout, such as a page with
multiple columns.
• Set up a page for a certain
function, such as a table of
contents, a search form, a
guest book, and so on.
• Create a frames page using one
of several frame formats.
On the File menu, point to New,
and then and then click the
template. A thumbnail sketch
of that template, or output
from that wizard, is displayed
in the Preview area.
Tip To create a new blank page using
the Normal Page template, click New
Page .
Once you’ve selected the page template you wish to use, a sample will
be displayed in the preview window.
For this example, we’re going to select Normal Page, which will bring
up a blank new page with no formatting.
After you select Normal Page,
a blank page will be displayed on the
Front Page palate as shown on the
right. Here is where you will begin to
build what your web site will look
like.
Page properties can be set by positioning your curser on the page, and
doing a right click on your mouse.
Here you will see a pop up window
with several options, select the one
that says page properties. This will
bring up an additional pop up window, which will give you the page
properties options, as shown in the
graphic below.
This window will allow you to set
the page properties for normal page,
background, margins, custom, language, and workgroup.
On the Normal tab, set the
name of the page you are working
on. This name will be displayed on
the web as people load this page,
usually at the top of their web
browser.
Here we will name the page
title, and move on to the background
tab.
On this window, you can set the background color or picture, and define
how you want your links to look when
active or visited. For this tutorial, we
will be using a background picture, so
check the background picture, and the
bar below will become active. Then
select the browse button, and a pop up
window will come up allowing you to
select the picture you want to use as
shown in the image on the next page.
If you want to define certain link colors you would also do that at this time
Here you will be able to select the file you
want to use for your background image. This
file could reside on your local computer, or
on the web site you are working on. For this
tutorial, we will be selecting a background
image from a file on your local computer, in
this case migwbkg3.gif. Select the file, and
click on ok, and you will return to the page
background properties window to the left.
Here you will see that the file you selected
has been placed on the bar below the background check box. Click on ok and the background will be placed on your new page.
Now it’s time to begin putting
together the layout of your web
page. The easiest way to do this, and
keep all your graphics and text in the
same place all the time is to use tables. Tables are a series of boxes
aligned so that image files and text
can be place in them, and that the
format of your web page will be
constant.
To begin, click on table on the
tool bar at the top, and draw table
from the drop down menu, and then
move your mouse pointer over the
new web page. Here you will find
your mouse pointer has changed to a
pen.
Some thought will have to be
done on your page layout prior to
drawing your table, such as, where are you going to
place your graphics, are your links going to be on
the left, center, or right of the page, are you going to
have a banner on the top of the page, and what text
are you going to use on your page. On the next page
we’ll draw a table and set it’s properties.
Once you draw your initial table, usually a square or rectangle box, use
your mouse to right click and select
the table properties option from the
drop down menu. Here you will get
this pop up window which is the table
properties window. Here you define
the properties of the table, such as it’s
position on the web page, as in center,
right, or left, top, middle, or bottom of
the page. Usually set center and top.
Here you can also set boarder size,
and the size of the table when displayed in a web browser. In the upper
right, instead of allowing MSFront
Page to define the table size, since this
is the primary table for the web page,
check the in percent check box for
both width and height. This will make
sure that the table is displayed full
page on the web browser. Also here we are going to
change the boarders size from 3 to 0. This will hide
any boarders on the table, and when displayed in
the web browser will not show any table boarders,
only the images and text placed within the table
Add a picture from a file
You can add a picture from your local file system.
Pictures can have the following file formats: GIF
(standard and animated), JPEG (standard and progressive), BMP (Windows and OS/2), TIFF, TGA,
RAS, EPS, PCX, PNG, PCD (Kodak Photo CD),
and WMF.
When you save the page, Microsoft
FrontPage prompts you to save the
picture to your web. If the picture is
not in GIF or JPEG format, pictures
that use 256 or fewer distinct colors
are automatically converted to GIF,
and all other pictures are converted
to JPEG.
In Page view, position the insertion point where you want to
insert a picture.
Click Insert Picture .
Click File .
Browse to the picture you want
from your local file system
and then select the file. You
can specify the type of file
you want to view in the Files
of type box.
In the image to the right you
see the pop up window you
will get when selecting an image from your local computer.
The pop on window allows
you to select a web based file,
or from a folder on your local
computer. Here we will be selecting a file from the folder
you have created to store your
graphics and text files in for
your web. In this case it’s a
desktop folder. Beside the
URL bar, there is a globe and a
folder with a magnifying glass,
select the folder and a second
pop up window will come up
which will allow you to select
Now lets start thinking about
what we want to link to from
our web page. There are many
ways to build links. In this tutorial, we will be using an image with text on it indicating
the place the link will go to.
Links can be anywhere on the
web page, whoever, in this
case we will be placing them
to the far left of the web page.
Position your curser in the far
left cell, then from your tool
bar select insert, then picture
and then from file, and you
will get another pop up win-
a folder from your local computer. Once you’ve selected
the folder, select the file, in this case miweblogo.gif, and
then select ok, and the file will be place where your curser
is currently located.
dow which will allow you to select the file you
want to use. In this case, select hangerbar.gif,
and the image will be place in the far left cell.
Now lets build a link to the
GWRRA National web site. Move
your mouse curser over the
hangerbar.gif image and click
once on it. It will now be highlighted and an image toolbar will
appear at the bottom of the front
page screen. Select the square on
the bottom, and your mouse
curser will be changed to a pen.
Now, draw around the National
hanger bar, and a box will appear
around the hanger bar, and a pop
up window will appear as shown
in the image to the right. On the
URL bar near the bottom, you will
already see http:// indicating that
front page is ready to accept a
web page address. From here you
can also specify an email address,
or a file on your local computer ,
or a text document if you wish.
Since we’re going to use a web
address, finish the address by typing www.gwrra.org, and then
click on ok. You have now built a
link from your web page, to the
GWRRA National web page. If you wanted, you could
choose not to use an image for links, and use text for
the links. To do this, you would from the table tool bar
menu draw several smaller cells in the far left cell, and
then type in the name of the link you are building in
each cell. Once you’ve typed in the name of the link,
you would then use your curser to highlight the name
of the link, then right click on your mouse, and choose
hyperlink at the bottom of the pop up window, and enter the address of the link the same as before. This is
shown in the image below.
Now lets add some text to our
web page. Position your curser in
the large cell to the left of the
hangerbar.gif image. The curser
should be in the middle and at the
top. If not, right click with your
curser in that cell, and select cell
properties as we did earlier, and
select center and top.
From the toolbar to the far left
you’ll see three white bars with
down arrows beside them. On the
far left one, click on the arrow,
and select heading 2. This will
specify the size of the font. On the
next one to the right, click on the
arrow and select ALGERIAN, or
what ever font you want your text
to look like. Here we will be using
ALGERIAN. Farther to the right
you will see a paint can, a brush,
and the letter A with a color bar
below it. Click on the A, and select the color you want
your text to be, then begin typing your text into the cell
you’ve selected. Your text should be centered and at
the top of the cell. After you’ve entered your main
text, hit enter a couple of times to move your curser
further down in the cell, and you are now in the position to enter specific information about your chapter.
the individual lines the same
length they will look like the image to the left. If you wish, you
could click on table from the toolbar, and then insert table, and
specify the number of columns
and rows for your table, then arrange the chapter information text
in the individual cells of your inserted table.
Here, from the tool bar, select bulleted lists, which is
the small square with the line after it, then type in the
officers and staff of your chapter. They will appear in
the center of the cell, and as long as you keep each of
Just like any other Microsoft
product, you can also highlight
the text you want to change the
formatting on, and then use the
toolbar to provide new formatting
for the text, as shown on the next
page.
Here you can see that the text
we want to change formatting
on has been highlighted, and
from the toolbar left align has
been selected, which has moved
the text from the center of the
cell to the left. This process
works for inserted text along
with images that you have inserted. The finished page appears below.
This is what the finished text will look
like after all formatting is completed.
After all the hyperlinks are built either
from the image hangerbar.gif, or aligned
text, you’re ready to save this page as
your primary page.
Most web servers require that the first
page, in order for it to load automatically, be named index.html, so from the
file menu select save as, and input your
file name, and select the folder that you
want the file to be saved in. I suggest that you
keep all web files, images, etc. in a specific
folder just for these files, as you’ll need to
update them from time to time.
Now that you have your index.html page
built, you’re ready to build the other pages
for your web site, such as a COY page, or a
chapter rides page. These pages are built exactly the same as the page we just built.
Good luck, you’re ready to build a web now!!