Tài liệu Module 4: Customizing Web Pages Using Microsoft FrontPage 2000 doc

Contents
Overview 1
An Introduction to Microsoft FrontPage
2000 2
Opening a Web Site in Microsoft FrontPage
2000 4
Customizing a Web Site Using Microsoft
FrontPage 2000 6
Saving a Web Site Locally 20
Publishing a Local Copy of a Web Site in
Site Manager 21
Lab 4: Customizing Web Pages Using
Microsoft FrontPage 2000 22
Review 28

Module 4: Customizing
Web Pages Using
Microsoft FrontPage 2000


Information in this document is subject to change without notice. The names of companies,
products, people, characters, and/or data mentioned herein are fictitious and are in no way intended
to represent any real individual, company, product, or event, unless otherwise noted. Complying
with all applicable copyright laws is the responsibility of the user. No part of this document may

be reproduced or transmitted in any form or by any means, electronic or mechanical, for any
purpose, without the express written permission of Microsoft Corporation. If, however, your only
means of access is electronic, permission to print one copy is hereby granted.

Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual
property rights covering subject matter in this document. Except as expressly provided in any
written license agreement from Microsoft, the furnishing of this document does not give you any
license to these patents, trademarks, copyrights, or other intellectual property.

 2000 Microsoft Corporation. All rights reserved.

Microsoft, BackOffice, bCentral, FrontPage, Hotmail, LinkExchange, MS-DOS, MSN,
PowerPoint, Windows, Windows Media Player, and Windows NT are either registered trademarks
or trademarks of Microsoft Corporation in the U.S.A. and/or other countries.

The names of companies, products, people, characters, and/or data mentioned herein are fictitious
and are in no way intended to represent any real individual, company, product, or event, unless
otherwise noted.

Other product and company names mentioned herein may be the trademarks of their respective
owners.

Development Lead: P.M. Murali (NIIT)
Instructional Designers: Sangeeta Nair (NIIT), Vijayalakshmi Narayanaswamy, (NIIT)
Technical Contributors: Scott Swigart (3 Leaf Solutions, LLC); Gary Gumbiner (Great Barrier
Technologies)
Program Manager: Steve Merrill
Graphic Artist: Scott Serna
Editing Manager: Lynette Skinner
Editor: Dennis Rea

Copy Editor: Ed Casper (S&T Consulting)
Publications Manager: Miracle Davis
Test Manager: Eric Myers
CD Build Specialist: Jenny Boe; Eric Wagoner
Production Coordinator: Marlene Lambert (Online Training Solutions, Inc.); Susie Bayers (Online
Training Solutions, Inc.)
Manufacturing Manager: Bo Galford
Manufacturing Support: Laura King
General Manager: Robert Stewart


Module 4: Customizing Web Pages Using Microsoft FrontPage 2000 iii


Instructor Notes
This module discusses the importance of customizing an e-commerce Web site
to ensure greater benefits for an online business. The module provides students
with the knowledge and skills necessary for customizing a Web site created in
Site Manager by using Microsoft
®
FrontPage
®
2000, a Web site creation and
management tool.
After completing this module, students will be able to:
!
Identify some of the features of Microsoft FrontPage 2000.
!
Open a Web site in FrontPage 2000.
!

Customize a Web site by using FrontPage 2000.
!
Save a local copy of a Web site by using FrontPage 2000.
!
Publish a local copy of a Web site in Site Manager.

Materials and Preparation
This section provides the materials and preparation tasks that you need to teach
this module.
Required Materials
To teach this module, you need the following material:
!
Microsoft PowerPoint
®
file 1933A_04.ppt
!
Module 4, “Customizing Web Pages Using Microsoft FrontPage 2000”
!
Lab 4, “Customizing Web Pages Using Microsoft FrontPage 2000”

Preparation Tasks
To prepare for this module, you should:
!
Read all of the materials for this module.
!
Complete the lab.

Presentation:
135 Minutes

Lab:
60 Minutes
iv Module 4: Customizing Web Pages Using Microsoft FrontPage 2000


Module Strategy
Use the following strategies to present this module:
!
An Introduction to Microsoft FrontPage 2000
Briefly introduce Microsoft FrontPage 2000 before you open the new site
that you created in FrontPage 2000 for customization. Emphasize that the
site created in Site Manager may require more sophisticated customization,
and that this can be done in FrontPage 2000.
!
Opening a Web Site in Microsoft FrontPage 2000
Demonstrate the steps for opening a Web site in FrontPage 2000, and then
show the various views such as Page view and Folder view.
!
Customizing a Web Site Using Microsoft FrontPage 2000
Explain the various types of customization available in FrontPage 2000,
such as applying site themes, shared borders, and marquee text; inserting
tables and graphics; and creating hyperlinks. Demonstrate the steps for
carrying out these customizations. After each change to the site, preview the
site in Site Manager and point out the changes to the students.
!
Saving a Web Site Locally
Mention the advantages of editing a local copy of the Web site, and describe
how this editing is done. Briefly demonstrate how a Web site can be saved
locally by using FrontPage 2000.
!

Publishing a Local Copy of a Web Site in Site Manager
Make a small modification to the local copy of the home page, and then
upload the Web site back to Site Manager. Point out that your change is now
reflected in the uploaded copy of the Web site.

Module 4: Customizing Web Pages Using Microsoft FrontPage 2000 1


Overview
!
An Introduction to Microsoft FrontPage 2000
!
Opening a Web Site in Microsoft FrontPage 2000
!
Customizing a Web Site Using Microsoft FrontPage 2000
!
Saving a Web Site Locally
!
Publishing a Local Copy of a Web Site in Site Manager


Web sites created by using the Site Manager service of Microsoft
®
bCentral
™

follow standard themes and layouts. If you do not like the look and feel of a site
that you created by using Site Manager, you can modify it by using Microsoft
FrontPage
®

2000. Alternatively, you might need to modify the look and feel of
your Web site to meet the requirements or standards of your organization. For
example, an organizational Web site might require specific colors, or text
arranged in a tabular format.
You might also want to make a more sophisticated modification than is possible
through Site Manager, such as adding client-side HTML script. You can make
such modifications to your Web site by using Microsoft FrontPage 2000.
After completing this module, you will be able to:
!
Identify some of the features of Microsoft FrontPage 2000.
!
Open a Web site in FrontPage 2000.
!
Customize a Web site by using FrontPage 2000.
!
Save a local copy of a Web site by using FrontPage 2000.
!
Publish a local copy of a Web site in Site Manager.

Topic Objective
To provide an overview of
the module topics and
objectives.
Lead-in
In this module, you will learn
how to open your Web site
in Microsoft FrontPage
2000, how to customize
your site by using
FrontPage 2000, and how to

publish your site to Site
Manager on the Web.
2 Module 4: Customizing Web Pages Using Microsoft FrontPage 2000


An Introduction to Microsoft FrontPage 2000
!
Microsoft FrontPage 2000
#
Helps users to create, edit, and format Web pages
#
Does not require users to have programming skills and
write code
#
Is a WYSIWYG Web-authoring tool


Microsoft Front Page 2000 enables you to create, edit, and format Web pages.
Because FrontPage 2000 does not require you to have any programming skills,
it is ideally for use by non–Web programmers.
Although FrontPage 2000 is sold as a stand-alone product, it is also bundled
together with and fully integrated into Microsoft Office 2000 Premium edition.
FrontPage 2000 has the same user-friendly menu commands and options that
are common to all Microsoft Office products. For example, you can utilize the
usual Office 2000 Standard and Formatting toolbars to edit Web pages in
FrontPage.
Topic Objective
To give a brief introduction
to Microsoft FrontPage
2000.

Lead-in
Microsoft FrontPage 2000 is
a powerful user-friendly
Web-authoring tool. You can
modify the layout and text
formatting of all pages on a
Web site by using Microsoft
FrontPage 2000. To make
these modifications, you first
need to open the Web site
in FrontPage 2000.
Module 4: Customizing Web Pages Using Microsoft FrontPage 2000 3


FrontPage 2000 is a WYSIWYG (“What you see is what you get”) Web-
authoring tool. This means that any Web page that you create and edit by using
FrontPage will be designed in the FrontPage editor. What you see while
designing the Web page is what you get as the output when the final copy of the
Web page is viewed through a Web browser. This is similar to Microsoft Word
,

where the document is created by typing and using formatting commands. The
final printed copy of a document you create in FrontPage 2000 appears the
same as if it had been designed with Word.
In FrontPage 2000, you do not need to write any code for creating Web pages.
When you type the content and design the page in the FrontPage editor, the
HTML code is generated automatically.
4 Module 4: Customizing Web Pages Using Microsoft FrontPage 2000

Opening a Web Site in Microsoft FrontPage 2000
!
To open a Site Manager Web page in FrontPage 2000,
you need to:
#
Copy and paste your Site Manager Web site address
#
Specify your e-mail ID and password
#
Double-click the appropriate page in the folder list
!
The FrontPage 2000 interface provides several views
that allow you to see different types of information


To edit a Web site by using FrontPage 2000, you need to do the following:
!
Access the start page in Site Manager.
!
Open Microsoft FrontPage 2000.
!
Click the Open Web option on the File menu.
!
Copy your Site Manager Web site address and paste it into the Folder
name: text box.

The Web site address will be in the format
domain name>.

!

Enter your user name and password.

When you open your Web site in FrontPage 2000, you will see the list of Web
pages on your site in the Folder List pane. You can open a Web page by
double-clicking it.

The home page of your site will be shown as default.htm in the folder
list.

Topic Objective
To outline the steps for
opening a Web site created
in Site Manager in
FrontPage 2000.
Lead-in
To open your Web site in
FrontPage 2000, you need
to access the Site Manager
start page and then specify
the Web site address in
FrontPage 2000.
Delivery Tip
Demonstrate the steps for
opening the Web site that
you created in Site Manager
in FrontPage 2000. On the
Site Manager start page,
click Edit with FrontPage
2000. Scroll down the page
Edit Your Site with

Microsoft FrontPage 2000!
until you reach the list of
steps for opening a site in
FrontPage 2000. In step 1,
show the students the URL
to be copied and pasted in
FrontPage 2000.
Note
Note
Module 4: Customizing Web Pages Using Microsoft FrontPage 2000 5


After opening a Web page in FrontPage 2000, you can directly edit it. Any
changes you make will be updated on the Web while you edit your site.
However, if your Internet connection is slow, it is recommended that you save a
copy of your Web site on your computer’s hard disk. You can then customize
this local copy of your site and upload the customized version to the Web when
all of your modifications are complete.
To learn how to create a local copy of your Web site, refer to the topic “Saving
a Web Site Locally” in this module.
To learn how to upload the customized local copy of your Web site to Site
Manager, refer to the topic “Uploading the Customized Web Site to Microsoft
Site Manager” in this module.
FrontPage 2000 provides the following views:
!
Page view. This view allows you to edit a Web page. While editing in the
normal Page view, you can view the HTML code that is auto-generated for
that page, and also view a preview of the Web page.
!
Folder view. This view displays details such as the size and modification

date of all of the files associated with the open Web site.
!
Reports view. This view displays the site summary and other detailed
reports on the Web site.
!
Navigation view. This view displays a diagrammatic view of the flow from
one page to another, for all of the pages on the Web site.
!
Hyperlinks view. This view displays a diagrammatic view of all of the Web
pages and image files with their links to each other.
!
Tasks view. This view displays the tasks assigned to any users. You can
manage your workflow more effectively by assigning files and tasks to users
or workgroups, by categorizing pages, by monitoring and updating the
status of tasks, and by indicating the review status of the files to be released
for publishing to your live Web site.


Delivery Tip
Because the Internet
connection in the classroom
is fast and efficient,
demonstrate all FrontPage
2000 customizations on the
actual Web site and not on
its local copy. Mention that
users can also save a local
copy of the Web site and
make changes on it. State
that you will briefly

demonstrate this procedure
at the end of the module.
Delivery Tip
Open the default.htm page
of your Web site in
FrontPage 2000. Click each
view and show it to the
students. Briefly explain
what each view displays.
6 Module 4: Customizing Web Pages Using Microsoft FrontPage 2000


$
$$
$

Customizing a Web Site Using Microsoft FrontPage
2000
!
Applying a Custom Site Theme
!
Adding Images
!
Inserting Marquee Text
!
Adding Shared Borders
!
Writing Text in a Tabular Format
!
Creating Hyperlinks

!
Adding Lists


After creating a local copy of your Web site, you can begin to customize it. The
following are several types of customizations that you can perform on a Web
site by using FrontPage 2000:
!
Inserting graphics or images into your Web pages and converting them into
hyperlinks
!
Applying separate color themes for various Web pages, where the color
themes determine font and graphics colors
!
Adding scrolling or animated text to attract the attention of users
!
Writing text in a tabular format
!
Conducting spelling checks on the text
!
Adding shared borders to your Web pages
!
Creating text and image hyperlinks
!
Writing text in bulleted lists of various types

Topic Objective
To present some of the
customizations that can be
performed on a Web site by

using FrontPage 2000.
Lead-in
Specific customizations can
be performed on Web pages
by using FrontPage 2000.
Module 4: Customizing Web Pages Using Microsoft FrontPage 2000 7


Applying a Custom Site Theme
!
FrontPage 2000 allows you to customize:
#
Background color
#
Text colors for various text styles
#
Graphics displayed on the Web page
#
Fonts for various text styles


Both Site Manager and FrontPage 2000 provide site themes. However,
FrontPage has more site themes to choose from, and they are more
sophisticated.
In FrontPage 2000, a site theme allows you to determine settings for the
following:
!
Background color
The background color is based on various color schemes such as Bubbles,
Checkers, and Saturday TV Toons.

!
Text colors for various text styles
You can set colors separately for headings, hyperlinks, and banner text.
!
Graphics displayed on the Web page
You can set the image file for the page background, banner, bullets, and
lines.
!
Fonts for various text styles
You can set the fonts separately for each type of heading or hyperlink.

To create a custom theme in FrontPage 2000 and apply it to your Web site, you
first need to open the site. You can set a separate theme for each page on the
Web site that you want to modify, or you can set a common theme for all of the
pages on the site.
After opening the site, you can select and modify the following:
!
Color scheme
!
Graphics associated with the scheme
!
Fonts

Topic Objective
To describe the options
used for applying a site
theme.
Lead-in
A site theme determines the
color and style of the text

and graphics used on a
Web site.
Delivery Tip
First, open the Themes
dialog box by clicking the
Theme option on the
Format menu. Click Modify
in the dialog box and show
the students the various
elements that a user can
modify, such as colors and
text. Then, demonstrate the
procedure for customizing
the theme for all of the
pages on the Web site.
8 Module 4: Customizing Web Pages Using Microsoft FrontPage 2000


FrontPage 2000 allows you to fine-tune the colors of all elements of your site,
such as hyperlinks on a Web page. FrontPage 2000 also helps you to select and
modify a background graphic for your Web pages, and lets you define the fonts
for each text element on a page, such as headers and body text.
As in Site Manager, you will need to experiment with various color themes
before choosing the theme that best suits your site.
Delivery Tip
Save the theme changes
that you made on the
default.htm page and then
preview the site in Site
Manager. Point out the

changes in the appearance
of the Web site.
Module 4: Customizing Web Pages Using Microsoft FrontPage 2000 9


Adding Images
!
Images display the products being sold on an e-
commerce Web site
!
Different images are required for different types of Web
pages
!
Image formats that can be used on a Web site include:
#
GIF
#
JPEG
#
BMP
#
PNG


Images greatly enhance the effectiveness of text on your Web pages. A graphic
adds value to your Web site by providing a simpler and more visually appealing
representation of the same ideas expressed in a paragraph of text.
Customers prefer e-commerce Web sites that display images of the products
offered by the site. Potential customers want visual proof of products before
actually purchasing them.

Consider the following examples:
!
A Web site that sells office equipment and furniture should display images
that show how the equipment is used in an office environment.
!
A Web site that sells toys and games should display images of various
products such as model trains, cars, dolls, and puzzles.
!
A Web site that sells gifts, greeting cards, and flowers should display
images of these products to enhance text descriptions.

You can use different types of images for different types of Web pages. The
following types of images are used on various pages of a Web site:
!
Typically, all product pages display images of the product on sale.
!
Department or category pages display images and short descriptions of
selected products. Special discounts for some of the products may be
highlighted.
!
Your home page should display your company logo image. This page might
also contain images and short descriptions of selected products that are
important for you or attract more customers. For example, Mightyflight
Toys can display images of the toys categorized as “Pick of the Month” or
“Top 10 Best-Selling Toys”.
!
The About Us page may or may not have an image. Typically, if the page
does contain an image, it is of your company headquarters.
!
The FAQ page normally does not display any images.

Topic Objective
To discuss the various
points to be considered
when adding images to Web
pages.
Lead-in
Images enhance the value
of your Web pages in
important ways.