Microsoft FRONTPAGE 2002 User Manual

FRONTPAGE 2002 – LEVEL 1

Reference Material

Please Do Not Copy

LESSON 1: CREATING A WEB

A. Planning: Things to Consider Before Creating a Web ......... 2

Webs versus the World Wide Web ....................... 2

The Web Creation Process ............................. 3

Are You a Good Web or a Bad Web? .................... 4

B. Creating an Empty Web ................................. 10

View an Existing Web in FrontPage ...................... 10

FrontPage Templates ................................. 12

CONTENTS

C. Creating a Home Page.................................. 17

What is a Home Page? ................................ 17

D. Adding Text to a Page ................................... 21

E. Applying Text Formatting ................................ 22

LESSON 2: WORKING WITH TABLES

A. Inserting a Table........................................ 26

B. Editing a Table’s Structure ................................ 27

C. Formatting a Table...................................... 28

D. Converting a Text File into a Table ......................... 31

E. Splitting a Table......................................... 32

LESSON 3: CONNECTING PAGES

A. Adding Hyperlinks to Pages .............................. 34

What Is a Hyperlink?................................... 34

B. Creating a Shared Border ................................ 37

C. Adding Pages to a Web’s Navigation Structure .............. 39

Importing a File versus Inserting a File..................... 39

iii

CONTENTS

Reference Material

Please Do Not Copy

D. Inserting a Custom Link Bar Web Component ............... 42

E. Removing a Page from a Web’s Navigation Structure ......... 43

LESSON 4: ADDING VISUAL APPEAL TO A WEB

A. Adding a Picture to a Page............................... 46

B. Editing a Picture ........................................ 48

C. Creating an Image Map................................. 50

D. Using the Drawing Tools.................................. 51

E. Adding a Photo Gallery .................................. 52

F. Modifying a Photo Gallery ................................ 56

G. Applying a Theme to an Entire Web ....................... 57

H. Modifying a Theme and Applying It to an Individual Page..... 59

LESSON 5: PREPARING AND PUBLISHING A WEB

A. Creating and Managing Tasks............................ 62

What is a Task? ....................................... 62

B. Organizing Your Web’s Files .............................. 65

C. Viewing FrontPage Reports .............................. 66

D. Correcting a Broken Link Using the Hyperlinks Report......... 68

E. Using Text Editing Tools................................... 70

F. Publishing Your Web to the Personal Web Manager ........... 71

Determining Your Personal Web Manager’s Path .......... 71

G. Creating a Backup Copy of a Web ........................ 75

Index ...................................................... 79

iv

FrontPage 2002 – Level 1

ABOUT THIS COURSE

Reference Material

Please Do Not Copy

Microsoft FrontPage 2002 is a desktop software application you can use to create, edit, and
manage web sites, whether for an intranet or for the World Wide Web.

How would you like to save time on the job? Whether you’re a seasoned webmaster or ready
to create your very first web site, who wouldn’t? Because FrontPage is a flexible, WYSIWYG
software application, you don’t have to waste valuable development time learning and applying
the technological, background complexities that go into creating a web site and its pages. (In
fact, FrontPage uses many of the same features as other Microsoft Office applications. So, for
instance, if you know how to bold text in Microsoft Word, you already know how to do it in
FrontPage.) Although FrontPage can and does do most of the “geek” stuff for you, allowing
you to concentrate on shaping your site’s content, it also provides easy access to and integra­tion with higher-end web technologies—sure to satisfy even the most Web-savvy veteran.

ABOUT
THIS
COURSE

FrontPage now also allows web developers to import, edit, and format their own HTML
code.

Course Prerequisites

To ensure your success, we recommend you first take the following New Horizons course or have
equivalent knowledge:

• Windows 2000 - Level 1

• Word 2002 - Level 1

• Word 2002 - Level 2

• Internet Explorer 5.0 - Level 1

A recommendation is that students have experience surfing the World Wide Web. It is also
recommended, but not required, to have taken the following New Horizons course or have
equivalent knowledge:

• HTML 4.01: Web Authoring - Level 1

v

ABOUT

Reference Material

Please Do Not Copy

THIS

COURSE

How To Use This Book

As a Learning Guide

Each lesson covers one broad topic or set of related topics. Lessons are arranged in order of
increasing proficiency with FrontPage; skills you acquire in one lesson are used and developed
in subsequent lessons. For this reason you should work through the lessons in sequence.

We organized each lesson into results-oriented topics. Topics include all the relevant and sup­porting information you need to master FrontPage, activities allow you to apply this
information to practical hands-on examples.

You get to try out each new skill on a specially prepared sample file. This saves you typing
time and allows you to concentrate on the skill at hand. Through the use of sample files,
hands-on activities, illustrations that give you feedback at crucial steps, and supporting back­ground information, this book provides you with the foundation and structure to learn
FrontPage quickly and easily.

As a Review Tool

Any method of instruction is only as effective as the time and effort you are willing to invest
in it. In addition, some of the information that you learn in class may not be important to you
immediately, but it may become important later on. For this reason, we encourage you to
spend some time reviewing the topics and activities after the course. For additional challenge
when reviewing activities, try the “what to do” column before looking at the “how to do it”
column.

As a Reference

The organization and layout of the book makes it easy to use as a learning tool and as an
after-class reference. You can use this book as a first source for definitions of terms, back­ground information on given topics, and summaries of procedures.

Course Objectives

In this course, you will create, edit, and publish web pages that include formatting, FrontPage
components, tables, text, and images.

You will:

• identify site-planning considerations, create a new web, a home page, and add and format

text on the home page.

• create and modify tables.

• connect pages.

• add, edit, and link pictures, as well apply and modify themes.

• prepare a web for publishing.

vi

FrontPage 2002 – Level 1

LESSON 1

Reference Material

Please Do Not Copy

Creating a Web

Lesson Objectives:

In this lesson, you will identify site-planning considerations, create a new web, a home page,
and add and format text on the home page.

LESSON 1

Data Files:

none

Lesson Time:

60 minutes

You will:

• identify guidelines in the web creation’s planning stage.

• create an empty web based on the Empty Web template.

• create a home page.

• add text to a page.

• apply character and paragraph formatting to text.

Lesson 1: Creating a Web

1

LESSON 1

Reference Material

Please Do Not Copy

Introduction

You’ve been given the assignment to create a web site for your company. You’ve got
Microsoft FrontPage 2002 installed and have some great ideas. You’re ready to launch the
application and begin pounding out web pages! Not so fast! Although your enthusiasm is to be
applauded, and you will be well underway before this lesson is complete, it’s important to take
a moment to step back and look at the big picture. For instance, what is a site? What actually
goes into creating a site? And so on.

Once you understand what typically goes into creating a new web, you will be better prepared
to examine existing webs, as well as create your own. You will be able to avoid unnecessary
pitfalls, and potentially save you and your company embarrassment.

TOPIC A

Planning: Things to Consider Before
Creating a Web

Before doing anything else, the first step to creating a successful web is to put a web plan in
place.

Benjamin Franklin once wrote in Poor Richard’s Almanac “...a little neglect may breed mis­chief: for want of a nail, the shoe was lost; for want of a shoe the horse was lost; and for want
of a horse, the rider was lost...”

You don’t want your site to become lost in the Web shuffle. A clear understanding of what
goes into creating a good web, coupled with intensive planning before you begin producing
any web content, will help you create a clear reason and plan of attack that could save you
countless hours of damage control later—when excuses won’t matter. Remember, the competi­tion’s site is only a click away.

Webs versus the World Wide Web

The word “web” can be quite vague and it would be best if we cleared up any confusion as to
what we mean by this term and all it entails.

Definition: In the context of FrontPage, a web is a specially designated folder location, or

site, on either your hard drive or on a Web server. Within a web’s folder,
sometimes called the root folder, there can be multiple web pages—documents
written in HyperText Markup Language (HTML) with unique filenames and
locations—a variety of subfolders, and even other webs, called subwebs. In
short, a FrontPage-based web is a container to store and manage related files.
A web is not to be confused with the World Wide Web, or the Web, which is a
system of Internet servers that store, or host, individual webs.

2

FrontPage 2002 – Level 1

We will use the terms “site,” “web,” and “web site” synonymously. We will

Reference Material

Please Do Not Copy

also use “web page” and “page” interchangeably.

Example: A good example of a large web is Microsoft’s site. The web is located at:

http://www.microsoft.com/. It contains thousands of subfolders, such as the
FrontPage folder: http://www.microsoft.com/frontpage/, and individual web
pages, like http://www.microsoft.com/frontpage/using.htm. As large as it is,
the Microsoft web is only a small part of the World Wide Web.

Analogy: Think of the World Wide Web as the supreme public library with millions of

books (webs). Each book has its own pages (web pages) that cover a particular
subject. And as you might expect, some books are best sellers and others never
get read.

The Web Creation Process

Creating a web can be distilled into the following cyclical process: Planning, Producing, and
Publishing, as shown in Figure 1-1. Although extremely simplified, each stage includes a vari­ety of steps you should take to ensure a site’s success.

LESSON 1

Figure 1-1: The web site creation process.

Planning, which we will get to in a moment, is the most overlooked stage, even though it’s the
first step. Production, which makes up the bulk of this course, includes the actual creation of
the web and its content—the building, connecting, and maintaining of web pages. The last
stage is publishing, which means putting the web somewhere, typically on a Web server, so
that it will be accessible to your audience.

Lesson 1: Creating a Web

3

LESSON 1

Reference Material

Please Do Not Copy

In general, the site creation process is a bit of a misnomer because it suggests that once you
create a site, your work is done, when in reality, publishing the site should signal the need to
begin the cycle again. Based on feedback and information you receive from clients or people
who visit your web, you will want to plan, implement, and publish changes and updates for
the life of the web. How you will keep the site updated is part of the planning process.

Are You a Good Web or a Bad Web?

Before we begin, we should mention that distinguishing between good and bad webs is purely
subjective: “beauty is in the eye of the beholder”; however, there are certain things you can do
to your web to make it more usable. In general, you want your web’s organization and graphic
design to support your message—not overpower it! Subtle, yet purposeful, design decisions are
best. To that end, here are two sets of “common-sense” guidelines to help you make those
decisions: organizational and graphical.

It helps to get target audience feedback regarding a web’s usability at every stage of the site
development process.

Guidelines: The following organizational dos and don’ts will help you to create a “good

web” that’s easy to use.

• Place similar page content in the same category. At first this sounds rea-

sonable, doesn’t it? But when the content begins to flow in, you might not
take the time you should when considering where you should place
content.

• Consistent placement of repeating elements (navigation bars, logos, and so

on) by putting these items in the same place on every page. This way,
visitors don’t have to “re-learn” where to look for things on each page in
your site.

• Place the most important page items in the upper-left portion of the

screen. This will help ensure that the item is seen immediately—without
requiring a visitor to scroll around the screen.

• Keep your web structure’s hierarchy relatively flat—not too many layers

of content below the home page—and organized. As you can see in Fig­ure 1-2, try to arrange web pages to be as near to the web’s home page as
possible—between three and five levels is ideal. A common web hierarchy
is home page, category pages, and then detailed pages. If it takes a person
more than a few clicks to get to the information, they will likely give up
and go elsewhere.

• Present generic information in pages residing in a web’s upper levels and

place more specific information on pages at the lower levels. This creates
a “drill-down” effect. Figure 1-2 shows the generic home page above gen­eral categories. Those categories have specific pages below them.

• Keep your web lean. Don’t publish superfluous files to your web. Not

only does it waste valuable storage space, but it also slows web
performance. And whenever possible, try to reduce the file sizes for web
pages and graphics. You want fast-loading pages.

4

FrontPage 2002 – Level 1

Figure 1-2: A simple, but proper, navigational hierarchy.

Reference Material

Please Do Not Copy

All organizational guidelines can be summed up in one statement: Don’t
make visitors work at using your site; their time is valuable!

These general graphical guidelines will help you to create a “good web” that’s
easy for your target audience to view.

• Provide a comfortable and pleasant “visual” atmosphere for visitors. Don’t

shock them unnecessarily with extreme color contrasts.

LESSON 1

All graphical guidelines can be summed up in one word: understated.
Just because you can use a dozen different formatting options doesn’t
mean you should.

• Use sufficiently contrasting colors and hues. Each web page element

should be easily distinguishable from other elements.

Although contrasting colors are important, don’t go overboard. Stark
contrasts can be as difficult to view as subtle contrasts.

• Selecting contrasting colors goes for text, as well as for graphics. For the

most part, consider putting dark-colored text on a light-colored
background. Remember, there’s nothing wrong with using the old standby,
black text on a white background! Although light text on a dark back­ground is legible, it’s considered kind of amateurish. Avoid light text on
light backgrounds and dark text on dark backgrounds; the lack of contrast
will make it impossible for visitors to read your message.

• Use color consistently and purposefully. Don’t go changing colors for the

sake of change. Repeating colors can foster a visitor’s comfort level. The
more comfortable a person is using your site, the more likely they’ll
return.

• Organize with color. By making related page elements, such as navigation

bars, the same color, you create a visual connection between them.

• Curb your own color preferences. Just because blue is your favorite color

doesn’t mean you should use it all the time.

• Restrict the number of different colors used in a web to a maximum of

three complementary colors.

Lesson 1: Creating a Web

5

LESSON 1

Reference Material

Please Do Not Copy

• Anticipate your target audience’s perception of your color choices. Colors

can have psychological and cultural meanings; for instance, white can
symbolize purity in Western cultures, but in Japan, white typically is asso­ciated with death. Colors can also have physical implications. If a
significant portion of your target audience has a vision deficiency—such
as poor vision or color blindness—you should consider increasing font
sizes and/or avoid using greens and reds (associated with the most com­mon forms of color blindness).

For more on adding accessibility to your webs, visit W3.org: http://
www.w3.org/WAI/.

• Don’t use color: “After all this, you’re telling me not to use color?” Yes

and no. Not using color, or rather staying with black and white, is in fact
a color decision. Again, let your site’s target audience help you decide.

• Consider the possibility of using appropriate metaphors in your design.

For instance, if your site’s purpose is to tell prospective students about
your college, using a classroom-like setting as a design motif is
applicable. Metaphors can sometimes be tricky, though—especially if your
site is intended to be internationally accepted.

For more on usability, visit Jacob Nielsen’s UseIt.com: http://www.
useit.com/.

Example: To see some good examples of web design, launch your Web browser and

explore the following sites:

• http://www.web100.com/

• http://www.thewebawards.com/

• http://www.projectcool.com/sightings/

Non­Example:

To see some examples or poorly done sites, you can explore these sites:

• http://www.worstoftheweb.com/

• http://www.forkinthehead.com/

• http://www.ecotide.com/

Graphical design decisions can be affected by a visitor’s monitor settings; the
choices you make may not appear as you intended. To avoid “surprises,” you
should preview your webs on several operating systems, at different resolu­tions, using different Web browsers to ensure the best possible results.

6

FrontPage 2002 – Level 1

Planning: Things to Consider Before Creating a

Reference Material

Please Do Not Copy

Web

If you buy into the old adage, “Garbage in, garbage out,” then planning is the single most
important stage of the site creation process. It is here that you will set the course and tone for
your web. With that said, unfortunately, it’s the stage most taken for granted. Since people are
often pressed for time at the start of a web project, they assume they can easily plan during
the site’s production. That’s rarely a successful strategy. It’s best to take the time up front to
discuss the following web planning guidelines:

Be sure to record all of your planning somewhere—we recommend keeping a binder for
each web you develop for planning decisions and notes.

LESSON 1

Guidelines:

• Purpose: Why are you making a site at all? What will you and/or your

company gain by having a site? What will people who visit your site
gain? Once you’ve settled on a purpose, write it down and keep it in front
of you at all times. Some web developers like to create a mission state­ment, because it keeps you and the site focused on the goal. No matter
what the purpose of your web, one goal of every site should be to keep it
fresh. Don’t just publish a web and leave it to rot on the vine. Update the
site regularly.

• Audience: Who’s your target audience? Is your audience made up of

techies or newbies? Are they high-energy teenagers or patient senior citi­zens? Gather demographic information. Do they use the Microsoft Internet
Explorer or the Netscape Navigator browser to surf? Gather technological
information. Does your audience have vision problems? Consider your
audience’s physical requirements. The more you know about your target
audience, the more you can tailor your site to best meet their require­ments, because the production choices you will make should be based on
their needs. (Note that your web audience may differ from your regular
customers, so do as much research as possible. Surveys and questionnaires
of your existing clientele is a great starting point.) Don’t make your site
so generic that it doesn’t serve anyone. By targeting a particular audience,
your web will be more targeted as well.

• Content: What will the site provide? Based on your site’s purpose and

target audience, identify what information or service will meet both those
needs. Will the information be text-heavy or graphically intensive? (Care­fully consider the use of graphics on your web. Too many can make a
page download slowly.) You want your site to be appear “fast”; text and
graphics should be used purposefully—if a piece of content is superfluous,
leave it out. Now’s a good time to identify that content that will need to
be updated, such as news items.

• Organization: Take time to identify some general categories of informa-

tion, and then arrange the specific content within those appropriate
categories. For instance, a category might be named “Catalog,” and in that
category, you might put pages for individual products. Try to anticipate
how site visitors might “click through,” or navigate, the content. If a site
is difficult to navigate through, visitors won’t return no matter how good

Lesson 1: Creating a Web

7

LESSON 1

Reference Material

Please Do Not Copy

your content is! One way to help you organize a web is to storyboard it.
This can involve creating one 3” x 5” index card for each proposed web
page and arranging them in logical category piles. Then connect the cards
with the string to show how pages will link together. You may prefer to
just sketch ideas on a piece of paper or a white board, too—whatever
works best for you.

As a general rule, you want to keep the number of general content cat­egories between five and 10. Again, the purpose is to make it easy for
a visitor to locate the information or service they want.

• Resources: When you identify resources that will help you with your web,

split them into two groups: people and material. On the people side, who
will supply content? Who will be responsible for maintaining the technical
aspects of the site? Who will supply artwork and design help? Who will
edit and manage the content? Who will test the site and how often? On
the material side, do you have access to existing graphics, stock photos,
clip art, or company logos? Can you re-purpose existing content from
newsletters, annual reports, or event flyers? Do you need other software
besides FrontPage, such as an image editing application, to help you build
your web? Creating a web involves a lot of different disciplines and it’s
unrealistic to think you won’t need help somewhere along the line. Take
time now to identify resources that can assist you when necessary. Assem­bling a competent team up front will prevent panic later! This is also a
good time to assign “ownership.” Get firm commitments from any and all
potential web contributors.

Legal assistance may also be useful to advise you on Internet-related
laws, such as drafting copyright, privacy, and usage policies.

• Location: Two things here. First, where will you develop the web?

FrontPage webs can either be disk-based or server-based. Disk-based
webs, like the ones you will use in this course, are stored locally on your
hard disk or some other storage device (floppy disk, CD-ROM, network
drive, and so forth). Ordinarily, disk-based webs are used for developing
simple webs because that’s when the focus is on creating and formatting
page content; simple webs rarely require a server’s support.

As your webs become more complex, you will want to develop them on a test
Web server. Logically enough, these are called server-based webs. Though they
can be more complicated to set up and slower to use (because you connect to
the server over an Internet connection), server-based webs can take advantage
of server technologies to provide support for interactive processes like message
boards, data collection and display, and so on. As a result, developing a web
on a Web server will allow the web to behave more “realistically,” as it would
on the World Wide Web.

Disk-based webs are also great for creating a backup copy of a web.

8

FrontPage 2002 – Level 1

If you are developing a web on a server other than the one that will ulti-

Reference Material

Please Do Not Copy

mately store, or host, your web, the development Web server should be as
similar to the host server as possible to minimize potential problems.

Secondly, who will ultimately store, or host, the web once you’re ready to pub­lish the web? Will you host your own Web server or will you use an Web
Presence Provider (WPP), sometimes called an Internet Service Provider (ISP)?
Although you will give up some control and money, it’s often more convenient
to use a qualified WPP because they can deal with the technology side of
things—such as securing your web’s domain name—again saving you time to
work on your web. Just be sure the WPP you select will support FrontPage
webs and all the things you need your web to do; include the WPP folks in
every stage of development. Note that if you do decide to host your own site,
you will need to learn about a wide range of server technologies.

It’s never too soon to get your web’s domain name and you don’t need a
site yet to reserve one. Search for the domain name you want at http://
networksolutions.com/.

To find a registered FrontPage WPP, go to http://www.microsoftwpp.com/.

LESSON 1

One other guideline in planning is marketing. This may be outside your scope,
depending on your job role, but planning a marketing strategy early is a very
good idea. Start by asking, how will the site be publicized? Will it be adver­tised in various media outlets? Will you submit it to search engines on the
Web? In many ways, this is an afterthought that depends on your audience.
Will it be publicized? You may not even want to “tell the world” if the web
will be an intranet, specifically for your employees. (An intranet is typically a
protected web belonging to a particular group or corporation that is accessible
only to authorized users, such as members or employees.) How will you attract
new visitors? Will you provide “free stuff” or will you run contests? How will
you keep returning visitors? Will you create a web community for them so
they can collaborate on issues? Or will you offer them discounts on various
products?

The purpose of an intranet, a protected web belonging to a particular group
accessible only to authorized users, usually differs from that of a web that’s
part of the World Wide Web because the audiences differ.

Example: For the web you will be creating, the planning process has been done for you.

The web is to be a corporate presence (purpose) for people unfamiliar with
Vision Office Products (audience). It will provide visitors with an overview of
the company and its products, as well as necessary contact information
(content). The content will be arranged logically in general categories, intro­duced by a home page (organization). And although you will primarily be
working alone on this web, other “departments” will have input and provide
some content (resources). The web will be hosted on your company’s server
(location) with advertising to be handled by another department (marketing).

Lesson 1: Creating a Web

9

LESSON 1

Reference Material

Please Do Not Copy

TOPIC B

Creating an Empty Web

Using your browser, you’ve seen sites others have created using FrontPage on the World Wide
Web. Next, you will tour an existing web in FrontPage and begin creating your own new web
based on a template.

Sure you can create webs using other software applications, but by creating a web and its
pages in FrontPage, you harness the program’s hidden managerial power. FrontPage keeps
track of every file and/or folder in a web. FrontPage keeps track so you don’t have to give
them a second thought. So when you add, remove, or edit a page in a web, FrontPage looks at
how the page is used by the web and “notifies” you of the potential damage the change might
cause. For instance, if you try to delete your web’s home page, FrontPage asks you confirm
the deletion, but it also warns you of the repercussions.

Besides the practical benefits of making a web in FrontPage, creating your own web from
scratch is an invaluable learning experience. Not only will you go through the ups and downs
all other webbies go through, the urgency of a deadline and satisfaction of completing a web,
but you will also familiarize yourself with all the various hats a webmaster must wear—writer,
editor, graphic designer, manager, and so on.

Throughout this book, we will use a variety of job titles synonymously; web developer,
webmaster, designer, webbie, and webber are some examples. Every organization calls the
person in charge of creating webs something different.

View an Existing Web in FrontPage

Procedure
Reference:

What is
FrontPage
Anyway?

Opening webs in FrontPage is really no different than opening a file in other
Office XP applications. The general steps follow.

Choose File→Open.

1

Locate the web you want to open.

2

Select it and click Open.

3

Before we open a web, let’s first firm up what we are talking about whenever
we mention FrontPage. Most importantly, what is it? Microsoft FrontPage 2002
is a convenient and encompassing web building tool available. Leveraging
what you already know about Microsoft Office applications, FrontPage allows
you to create and manage every aspect of a web—from individual web pages
to complicated, dynamic e-commerce enterprise webs. FrontPage is a great
program for novices and experts alike. Using the latest Web standards,
FrontPage is also open-ended enough to allow for any new technologies that
come down the developer’s pike.

10

FrontPage 2002 – Level 1

In a nutshell, it’s a web developer’s Swiss Army Knife. But like any other

Reference Material

Please Do Not Copy

multi-purpose tool, FrontPage may not have all the capabilities you want built
in—for instance, it might not have robust enough image editing tools for you.
You can easily supplement it with other “editor” applications by choosing
Tools→Options→Configure Editors.

LESSON 1

Orientation
to
FrontPage
Views

One of most useful aspects of FrontPage is its variety of different views. In
general, these views let you create and edit pages, as well as check a web’s
current condition, contents, and structure. As you can see in Figure 1-3, the
Views bar, located on the left of the application window, gives you fast access
to any of the different views shown below. Table 1-1 describes what each view
displays.

Figure 1-3: The FrontPage application window with a web open.

The View menu, not only also gives you access to all views on the Views
bar, but you can also hide or display both the Views bar and the Folder List
to maximize the space of the content area you have inside your application
window.

Table 1-1: Views Bar Icons and What They Display

Views Bar Icon Display This View To

Create and edit individual pages within a web. (Some­times called Page Editor view.)

Lesson 1: Creating a Web

11

LESSON 1

Reference Material

Please Do Not Copy

Views Bar Icon Display This View To

Manage a web’s files and folders.

Check the condition of a web.

Manage or review how a web is structured.

See a graphical display of how pages are connected.

Build or review a web’s “to-do” list.

Within each of these views, there may be other ways to display things. For
instance, in Page view’s content area, there are three different panes: Normal,
HTML, and Preview. Each view has its own purpose.

Different Page Views Display This Pane To

Normal Add, format, and position an open page’s content. The

Normal pane is where you will work 90 percent of the
time.

HTML View or modify the opened page’s HTML source code.

The HTML pane is a great way to learn HTML by
example. After you use the WYSIWYG tools in the
Normal pane, you can switch to the HTML pane to see
the code FrontPage created.

Preview See how an open page will appear in Microsoft

Internet Explorer. The Preview pane is best used for
taking quick looks at works-in-progress, to show how a
page or page element will appear in a browser.

12

FrontPage 2002 – Level 1

FrontPage Templates

Reference Material

Please Do Not Copy

FrontPage offers a variety of templates to assist in the production stage of the web creation
process. In general, they fall into two categories: page and web site.

Definition: A page template is a predesigned page that can contain a wide range of page

settings (such as frames and background colors), text formatting, and page ele­ments (such as forms, text, and graphics).

Example: As shown in Figure 1-4, FrontPage provides over 20 general page templates

and several web site templates.

LESSON 1

Figure 1-4: Web page templates.

Web site templates are another type of template FrontPage offers. A web site
template is a collection of page templates designed to suit a pre-defined web

purpose, such as customer support or a personal web. As you can see in Figure
1-5, FrontPage provides several site templates as well.

Lesson 1: Creating a Web

13

LESSON 1

Reference Material

Please Do Not Copy

Figure 1-5: Web site templates.

To help use these templates, FrontPage occasionally provides a template
wizard—a tool that walks you through a template step-by-step. The wizard,

like a Form Page Wizard or Corporate Presence Wizard, will prompt you to
enter information, like your company name, or to accept or reject certain page
elements, as a page or pages are being created.

In the Page Templates or Web Site Templates dialog box, wizards show a
“magic wand” on their icons.

Templates, because of their predesigned elements, can at times provide you
with a head start when creating webs or web pages. For instance, templates are
great if you only need to show your boss a “quick-n-dirty” feedback form;
however, the templates that come with FrontPage often hinder more than they
help. Frequently, you have to spend a lot of time customizing the results to fit
your site’s purpose—renaming files, changing colors, graphics, text, and so on.
So even though you may think templates will save you time, in fact, they may
slow you down.

Create an Empty Web

Procedure
Reference:

Because templates can slow you down, we’re going to start our web from
scratch. Well, that’s not entirely true. We are going to use a template, the
Empty Web template to be exact, but we’re using this template only because it
contains the bare necessities to get us going. To create a new web based on the
Empty Web template:

14

Choose File→New→Page or Web.

1

FrontPage 2002 – Level 1

In the New Page or Web task pane, select Web Site Templates.

Reference Material

Please Do Not Copy

2

Select Empty Web.

3

In the Specify Location Of The New Web text box, type or select a name

4

and location for the web.
Click OK.

5

By definition, the Empty Web template is a web site template. Although it
could contain page templates or predetermined formatting, it doesn’t. Other
than a couple folders, it is as the name implies, empty.

LESSON 1

File Naming
Conven­tions

Giving a name to a web and its contents may seem like a no-brainer, since
every piece of the web needs a name if it’s to be referenced properly; how­ever, as the number of files or people working on a site grows, the more
complicated it can become to name and manage a web. By following a few
simple naming conventions, and consistently naming webs, folders, and files at
the start of web site development, you can save yourself, collaborators, and
site visitors a lot of time and trouble.

• Keep name lengths as short as possible. You have two choices: short or

long. Short filenames commonly use the “8.3” naming convention,
restricting your file names to eight alphanumeric characters (or less) with
a three-character file extension. Upside: Compatibility with older servers
and DOS-based PCs. Downside: It’s difficult to name hundreds of files
descriptively using only eight characters. Long filenames, in contrast, can
easily be more descriptive. But, since filenames become part of a web
page’s address, long names can be hard for visitors to remember, as well
as cumbersome to type. If you don’t have to use the short “8.3” method,
we recommend using longer file names, but still try to keep them as short
as possible; no more than 20 characters is a good rule to follow.

Although nearly out of favor for naming web pages, the “8.3” naming
convention is still commonly used to name image files.

• Do not use spaces (use hyphens and underscores instead), punctuation

marks (accents, apostrophes, colons and semicolons, commas, exclamation
points, left or right parentheses, and question and quotation marks), or
special characters (ampersands, asterisks, at symbols, backward or forward
slashes, carets, dollar signs, greater or less than symbols, left or right
brackets, percent signs, pipes or vertical marks, plus or pound signs, or
tildes).

• Use lowercase letters. Some servers, like UNIX, are case sensitive, so

“MyFile.htm” is considered different from “myfile.htm.” By making all
your file names lowercase, it just makes life easier for people working on
your site and site visitors. No one has to remember whether or not a letter
was capitalized or not.

• Use only alphanumeric characters (a-z and 0-9). If you start a file name

with a number or put non-alphanumeric characters in a file name, a Web
server may not display the page.

Lesson 1: Creating a Web

15

LESSON 1

Reference Material

Please Do Not Copy

• Generally, all pages should have the file extension “.htm” or “.html.”

(Webs and folders don’t have file extensions.) Although there are other
permissible file extensions for pages, these two readily identify a file to a
browser as an HTML document. FrontPage automatically adds the neces­sary file extension to every page saved, by default.

• Web servers each have their own set of rules when it comes to naming

files—especially home pages. So check with the person in charge of your
Web server to see what those rules are for the server that will host your
site. (For this course, our web’s home page will be named index.htm.)

• Ask around your company to see if there’s already a file naming conven-

tion in use. If so, follow it exactly.

Be sure to let everyone working on a site know what are considered to
be acceptable filenames so they can name files consistently too.

Rename or
Delete a
Web

Hidden
Folders

If you accidentally misname a web, you can easily rename it. In the web’s
Folder List, select the uppermost folder—the web’s root folder—and choose
Tools→Web Settings. In the Web Name text box on the General tab, type a
new name for the web, and then click OK.

If you would rather not rename the web, you can start over by deleting the
web and trying again. Before you do, however, be absolutely certain that you
want to delete it—this cannot be undone! To delete a web, open it in
FrontPage and select the web’s root folder in the Folder List. Right-click on
the web’s root folder and select Delete. In the Confirm Deletion dialog box,
select Delete This Web Entirely and click OK.

Only use FrontPage to delete webs and web content. If you use Windows
Explorer to delete a FrontPage web that contains connections to other webs,
FrontPage will not be able to continue managing those connections. Only
delete webs using Windows Explorer as a last resort.

Not all content in a web is for “public consumption.” For example, for privacy
reasons, you probably don’t want visitors to be able to browse through your
site’s registration information. FrontPage uses special hidden folders to prevent
this from happening. Hidden folders, preceded by an underscore character,
such as the _private folder, prevent visitors from directly browsing a folder’s
contents. To see a web’s hidden folders, choose Tools→Web Settings. Select
the Advanced tab and select Show Hidden Files And Folders.

16

FrontPage 2002 – Level 1

TOPIC C

Reference Material

Please Do Not Copy

Creating a Home Page

Your new empty web is the shell that will contain your web’s content. It’s time to start creat­ing that content and that begins with your web’s home page.

We’ve all been told not to judge a book by its cover, but let’s face it, we do make judgements.
Think of your home page as your web’s cover. It’s the first thing people are likely to see, and
like a book cover, your web’s home page will have certain elements that you will see on every
web’s home page, such as a title. There are other things you can do to get your home page off
on the right foot, and you’ll learn about them in this topic.

What is a Home Page?

Definition: We’ve bandied the term about until now. Generally speaking, the home page

serves as a starting point or guide to other content categories in a web. If a
person enters your web’s address in a browser, it’s the first page that will
appear. Typically, a home page will contain standard elements such as a

• company logo

• way to navigate to other areas of the site

• notice of current company/site news

• brief statement of a site’s purpose

• search feature

• link to contact and legal information

LESSON 1

Example: As you can see in Figure 1-6, the Microsoft home page is a good example of a

typical home page with many typical elements.

Lesson 1: Creating a Web

17

LESSON 1

Reference Material

Please Do Not Copy

Figure 1-6: Common home page elements.

Create a Home Page

Procedure
Reference:

The physical act of creating a home page is relatively simple. The steps you
will need are as follows:

In Navigation view, create a new blank document by clicking the Create

1

A New Normal Page button.

Creating a home page in Navigation view automatically saves the file
with the appropriate default home page filename—index.htm or Default.
htm, for instance.

In Page view, change the page title in the Page Properties dialog box.

2

In the Page Options dialog box. change the home page’s compatibility

3

settings.

Page compatibility settings will apply to all new pages in a web.

Save the changes to the page.

4

18

Page Prop­erties

Every page in a web has its own unique settings called Page Properties. To
display the page properties of a page displayed in Page view, you can either
choose File→Properties or right-click on the page and select Page Properties
from the shortcut menu.

FrontPage 2002 – Level 1

Page Names

Reference Material

Please Do Not Copy

A single page can have three different names associated with it—each with its
own purpose: a filename, a page title, and a navigation name. A filename iden­tifies a file to a computer. A page title, which can be set using the General tab
in the Page Properties dialog box, is primarily used to describe a page’s con­tent or purpose to a person, usually in the title bar of a browser or in a
Favorite or Bookmark. (You can also view a page’s title in the HTML pane of
Page view.) A navigation name is the name a page displays in FrontPage’s
Navigation view. This name is displayed in the buttons of navigation elements.
For example, the home page has a filename of index.htm, a page name of
“VOP: Home Page,” and a navigation name of “Home.”

Limit page titles around 50 characters and make them as descriptive as pos­sible, using terms people might use in a search. Unlike filenames, page titles
can include punctuation.

LESSON 1

Page Com­patibility

Unlike printed material, you don’t have total control over how your pages will
be viewed in a browser. What users see when they look at your site depends
on what browsers they use, their monitors’ screen sizes and resolution settings,
how fast and clean their Internet connections are, how big their browsers’ win­dows are, and how they’ve configured their browser options. (Some users
might turn off the option to automatically view graphics so that pages load
faster, for example.) Others might use older browsers that can’t interpret tables,
Dynamic HTML, cascading style sheets, or other newer web specifications.

Fortunately, FrontPage addresses many browser-related page design questions
by allowing you to choose which browsers, which versions of browsers, and
which technologies you want to developer for. (See Figure 1-7.) FrontPage
enables or disables certain technologies that may or may not work for the
specified browser based on your choice of browser, version, and server
settings. Observing the technologies that are either unchecked or grayed out
can save you design time because, based on your selections, you will know
which design features will work and which ones won’t before you waste time.

Lesson 1: Creating a Web

19

LESSON 1

Reference Material

Please Do Not Copy

The Preview
Pane versus
the Preview
In Browser
Button

Figure 1-7: Page compatibility options.

The Preview pane, as you already know, mimics how a page will appear in
Microsoft Internet Explorer. Occasionally, though, you might need to view a
page in an actual browser—to verify page titles in title bars, for example. In
these cases, you could save the page, launch your browser, and then open the
page. But a more efficient way is to click the Preview In Browser button

on the Standard toolbar. This automatically opens the page in your default pre­view browser.

You can also preview pages in browsers besides Microsoft Internet Explorer.

To do so, choose File→Preview In Browser. Click the Add button. Name and

locate the browser you want to add and click OK twice. Then whenever you

want to change browsers, just select File→Preview In Browser again, select

the browser from the list, and then click Preview.

20

FrontPage 2002 – Level 1

TOPIC D

Reference Material

Please Do Not Copy

Adding Text to a Page

A blank home page just won’t do. Next, you’re going to add some text to the home page using
a few different methods.

Since it’s likely that the home page will be the first page visitors will see in your web, it’s
your best opportunity to create that all-important first impression. And unless your home page
contains some meaningful information, it may also be the last page visitors ever see, because
they may not come back! So be sure to take extraordinary care in deciding what is added to
this page. You want it to be the best page on your entire site.

The fastest way to convey a meaningful message is concise text. For all its glitz and glamour,
the majority of Web content is plain, work-a-day text. Because text is so prevalent, putting all
that text into pages can be time-consuming. Learning the best way to put text on a page is
critical if you want to have extra time for other things.

Add Text to a Page

LESSON 1

Procedure
Reference:

Adding text to a page can be accomplished a variety of ways: typing, copying,
and pasting from other applications, as well as inserting the contents of text
files. To add text:

Place the insertion point where you want the text to begin.

1

Then, depending on the method you will use, you can:

2

• Type the text directly in FrontPage.

• Copy text from another open application and paste it into FrontPage.

• Insert a file’s contents by choosing Insert→File. Then navigate to the

folder containing the file you want, change the Files Of Type drop­down list to All Files, select the file, and then click Open.

When you paste items in Office XP applications, the Paste Options smart tag
button will appear. Smart tags conveniently display a list of context-sensitive
options, such as whether or not to paste text with existing formatting or just
the text.

Lesson 1: Creating a Web

21

LESSON 1

Reference Material

Please Do Not Copy

TOPIC E

Applying Text Formatting

Your home page is starting to take shape. Now that you know how to add text to a page, let’s
look at how you can make your text more legible and distinctive by considering various text
formatting options.

Text on pages is unavoidable, but that doesn’t mean it has to be dull-looking or difficult to
read. It’s up to you to make text as legible and attractive as possible. Good text formatting will
ensure that your content gets the attention it deserves.

Apply Text Formatting

Procedure
Reference:

Text formatting in FrontPage is as straightforward as it is in other Office XP
applications, with both character and paragraph formatting. Use character for­matting, such as changing fonts, styles, and effects, for a small amount of
text—usually a word or two. Use paragraph formatting, such as changing
alignments, indentations, and spacing, when you want to affect an entire
paragraph. To apply text formatting:

You can also use the FormatPainter tool on the Standard toolbar to
copy formatting from one selection and paste it on another.

Select the text to be formatted. (To apply paragraph formatting, the entire

1

paragraph doesn’t need to be selected. The insertion point just needs to be
in the paragraph to be formatted.)

Either click one of the formatting buttons on the Formatting toolbar or,

2

for more character formatting options,

• Use the Font dialog box (choose Format→Font).
For more paragraph formatting options:

• Use the Paragraph dialog box (choose Format→Paragraph).

From time to time, you may see some peculiar text formatting. To
see where formatting is on a page, you don’t have to switch to the

HTML pane. You can choose View→Reveal Tags.

22

Styles FrontPage supplies some traditional HTML styles listed in the Styles drop-

down list on the Formatting toolbar. (See Figure 1-8.) These styles can be
thought of as text formatting templates because they can contain many differ­ent formatting options—both character and paragraph—within one style name.
By default, the Normal style is used until you apply a different style from the
list. Headings (1 being the largest, 6 being the smallest) and lists (especially
bulleted and numbered) are the most commonly used.

FrontPage 2002 – Level 1