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

Publishing a Local Copy of a Web Site in Microsoft FrontPage 2000... Opening a Web Site in Microsoft FrontPage 2000 Demonstrate the steps for opening a Web site in FrontPage 2000, and th

Publishing a Local Copy of a Web Site in

Microsoft FrontPage 2000

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

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

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

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

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

An Introduction to Microsoft FrontPage 2000

! Microsoft FrontPage 2000

write code

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

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

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

Opening a Web Site in Microsoft FrontPage 2000

! To open a Site Manager Web page in FrontPage 2000, you need to:

! 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

http://website.bCentral.com/<your 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

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

$ 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

Applying a Custom Site Theme

! FrontPage 2000 allows you to customize:

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

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

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

Images enhance the value

of your Web pages in

important ways

It is important to have a balance between the amount of graphics and text

on all of your Web pages Too many graphics with very little text can increase the time it takes to load a Web page

Valid image file types for Web pages

You can add images with the following file formats to your Web pages:

Adding images to your Web pages

Site Manager allows you to insert a limited number of images into your Web pages In addition, Site Manager provides standard layouts To reposition the images on your Web pages, and to insert more images with descriptions, you need to use FrontPage 2000 To insert an image into a Web page, you need to select the page and then the location on the page where the image should be inserted You then search and locate the image file on the local hard disk or Web site, and insert the file

Adding background images to your Web pages

If you want to make your Web pages look more appealing, you can add background images All page elements such as text and graphics will be superimposed on the background picture FrontPage 2000 allows you to use pictures from a Web site, a file system, the World Wide Web, or clip art You can also set the background picture to be a watermark, which means that the picture does not scroll as the page scrolls However, not all Web browsers support watermarks

To add a background image by using FrontPage 2000, you must first open the page into which you want to insert the image Search for the background image you want on the hard disk, local network, or Web site, and then insert the image into the Web page You can also insert a clip-art image into the Web page

You can only add background images to your Web pages if there is

no theme attached to your Web site If your Web site uses a theme, modify the background picture by changing the graphics used in the theme

Note

Note

Important

Applying a wash-out effect on your background image

You can “wash out” the color of an image to reduce its contrast and increase its brightness This feature is useful when you want to create a watermark or use a picture as a background, because washing out the image makes the background less intrusive, even if the image contains bright colors

Inserting Marquee Text

! Marquee text is text that moves across the screen on a colored background

! Marquee text on a Web site should be brief

! Marquee text can be about:

The term “marquee” refers to text that moves across the screen on a colored background The marquee text effect is often used on Web sites to attract the attention of the user The marquee text should display a brief message about your e-commerce Web site, or about the products and services that your Web site offers

Consider the example of Mightyflight Toys The marquee text could display the main categories of toys, such as Soft Toys, Cars, Dolls, and Indoor Games Alternatively, the marquee text could display short slogans such as “Special Discounts and Weekly Lucky Draws for our regular customers”

The following properties can be set for marquee text by using FrontPage 2000:

! Text movement effect The options are Scrolling, Sliding, and Alternate

! Direction of text movement The options are left and right

! Background color for the screen area on which the text will move This can also be set according to the site theme colors, if any

! Size and width of the marquee effect area

! Speed of text movement The options are Delay and Amount

! Text alignment The options are Top, Middle, and Bottom

! Repeat frequency for the text The options are for specifying whether the marquee text will appear continuously or a set number of times

Topic Objective

To discuss the options

provided by the marquee

text component of

FrontPage 2000

Lead-in

Marquee text adds visual

appeal to a Web site

To add marquee text to a page on your Web site, select the page and then select the FrontPage option that lets you specify marquee text properties Properties that can be specified include the direction in which the text should move, the speed at which it should move, and the alignment and background of the text

Delivery Tip

Demonstrate the steps for

adding marquee text to the

default.htm page of your

Web site Save the changes

made to the page, preview

the site in Site Manager,

and then show the students

the marquee text scrolling

across the screen