Learning Center
Plans & pricing Sign in
Sign Out

frontpage handout


									Front Page Training
Microsoft FrontPage is an HTML Editor. It is a powerful tool for creating websites. When you
create a website you work on two basic levels: web design and page design. This means you have
two related jobs. You need to design a web structure that visitors can use to navigate from page to
page and you need to design the web pages themselves.

FrontPage Webs
Webs are organized collections of files that are associated with a website. Most sites are composed
of many web pages and every website has many files: HTML, web pages, media files, images, etc.

A web, according to FrontPage, is a set of web pages and all files associated with it in a single
folder or directory structure. This means that the first step in creating a website in FrontPage is to
design the FrontPage web.

Web Pages
Web pages differ from other document in that they are designed to be interpreted by browsers.
Browsers take the text, graphics and interactive elements and enable them to be accessed by your
site visitors. Browsers interpret and display the web page content by reading the HTML. FrontPage
translates what you design into HTML code. FrontPage saves each page as a .htm file into the
directory structure and the folder you choose.

Generating a Web
You may be tempted to create a web page before defining a FrontPage site but this is not a good
idea. The FrontPage site structure should be defined and created before making any pages.

You have a choice when creating a web. You can create an empty web or a new one from a
template. Creating from a template means that much of the formatting and navigation structure is
defined for you. Some of the templates are quite complicated to use and some are designed for the
beginner in mind.

Below is a listing of some of the Template choices:
 One Page Web – A new web with a single blank page
 Corporate Presence Web – A complex Web with dozens of pages that can be converted into a
   web site for a corporation
 Customer Support Web – A Web site that includes input forms for customer questions and
 Empty Web – A Web site without pages
 Personal Web – A four page Web site that works for individuals to share interests

Whether you choose to use a template or design your own site from scratch, basic knowledge of
HTML is a good idea to understand what FrontPage is actually generating behind the scenes.

FrontPage                                                                                       Page 1
At this point many are tempted to just jump right in and start using FrontPage to create a website
but the first step in using FrontPage actually doesn’t start with FrontPage; it starts with
storyboarding. You may associate the term with motion picture or cartoon development and it is
very similar. Storyboarding a website is creating a “rough” outline of what you want the site to
look like.

Unlike Word or Excel, where a user can compose as a document is created, website creation
requires the author to establish a plan first. Consider these questions:
 What is the goal of your site?
 How will you “chunk” or separate your information?
 What will the navigation look like?
 What color combinations will you use
 Will you design your own backgrounds and layouts?
 Where will you get the content, graphics and other media elements for the pages?
 If you need professional services for these elements, what is your budget and time frame?
 Do you have permissions to post any copyrighted material?
 Who will host your site?
 If you are using FrontPage, will your ISP install the FrontPage extensions needed to post a
   FrontPage site?

After you have answered these and any other important questions about your site, you need to
create a rough draft of what you want it to look like, including all content. Many people use pencil
and blank paper or a storyboard design to create this.

Having all this information before you create your FrontPage web will make life easier as you
design in the software.

 Exercise: View the storyboards handed out in class

Home Page
After a site is created, a home page must be defined. All the templates, except for the empty web,
define one for you. A home page is assigned the filename of default.htm(l) or index.htm(l)

 Exercise: Create a One Page Web

Titles and Filenames
Web pages have both titles and filenames. A filename is used to organize the site and all elements
within it. The title is the “public” name of the web page and is displayed in the browser’s title bar.

 Exercise: Change the Title of the Home Page

FrontPage                                                                                      Page 2
After you create or open a FrontPage site, it can be viewed various ways utilizing choices located
on the screen.

 Exercise: Explore the View options

 Exercise: Add text to the home page and format

 Exercise: Add a 2nd page to the site, add text and format

Normal, Preview and HTML
There are three view available to the designer to see a page in different ways.
Normal – editing view
HTML – code that FrontPage generates; can be edited
Preview – Approximates how the page looks in a browser. There is also a preview button located
on the browser. This is a more accurate view of the page and gives the user a choice of browsers in
which to view the site.

 Exercise: Explore the views and Preview options

Adding Images
There are several ways to quickly add images to a web page
Insert-File from a drive
Use FrontPage’s collection of clipart

Text can also be directed to low around an image. Simply right-click the graphic and choose the
appearance tab and select Left or Right. Note however that browsers may show the graphic
positioned differently than you see on your editing screen. One way to have better control over
your elements on a web page is to use tables, which we will cover later in the day.

The best kinds of images to add to your site are JPEG, GIF or, in some cases, PNG (only works in
newest browsers).
JPEG – Image that can hold millions of colors; best for photographs
GIF – Image can hold up to 256 colors; best for graphics that have a large area of similar, solid
colors or do not contain a large variety of color; can also have a transparent background
PNG – best of both worlds but only newer browsers can be used to view them

If you are adding your own photos to your website, it is import to save the photo to the smallest
possible size (not just dimensions but also filesize) using photo editing software such as Photoshop
or Fireworks. Not only must the website be hosted on a server, which takes up space, but users
visiting your site may not have broadband access and you want to give them the best possible
viewing experience as possible.

 Exercise: Add images to your web pages and format

FrontPage                                                                                   Page 3
Many websites contain links to other places on the web. A link can be text or a graphic. You can
use the hyperlink button the toolbar or the menu.

 Exercise: Insert hyperlinks

Bookmarks are hyperlinks within a page that target another area of the page (Return to Top is a
good example). When creating the bookmark, you must first identify where you want the
bookmark to “jump” the cursor when the visitor clicks it. Then you must create the hyperlink to
that spot.

 Exercise: Insert a bookmark and hyperlink to the mark.

Websites use a hierarchical structure to take visitors through a site. Creating navigation buttons
that match your formatting and color schemes can be a challenge. Usually it requires a high degree
of proficiency in photo editing software such as Photoshop or Fireworks. Luckily, FrontPage has
navigation bars already created that you can choose from to add to your site.

 Exercise: Insert navigation to your site.

FrontPage provides a variety of tools to use to place text, graphics and other objects on web pages.
The most basic technique for layout out pages is to create tables to display your data in neat rows
and columns and to lay out pages. This gives you more complete control over placement of
elements on the page.

 Exercise: Insert a new page and insert a table with text

Formatting a Table
Cells, rows, columns and even the entire table can be formatted with colors, shading and images.

 Exercise: Format the table with various options

FrontPage Themes are pre-defined color combinations, navigation elements, backgrounds and
page formats that are designed to give a website a consistent look.

 Exercise: Apply a Theme to your site

FrontPage                                                                                    Page 4
FrontPage also offers templates for individuals to use. Let’s s pend some time exploring the
Personal Website Templage.

 Exercise: Create a new Website using the Personal Website Template

Resources: - Storyboards - FrontPage 2000 tutorial - FrontPage 2000 tutorial - graphics format

On Your Own
 Exercise: Open your website in FrontPage and practice editing the content.

Don’t worry, this won’t really alter your online website; it’s just for practice.

FrontPage                                                                                      Page 5

To top