Tom McLaughlin
b-admin, mcse, a+ (mct, linux)
tom@tomax7.com
www.tomax7.com
www.tomax7.com
Table of Contents
Introduction
FrontPage 2003 has a new,
integrated interface that lets you create and edit Web pages and manage entire
Web sites — all within one application. All toolbars and menus are
consistent with Microsoft Office applications and can be fully customized. You
can also use convenient keyboard shortcuts to accelerate common tasks such as
opening webs and pages, printing, and many other commands.
The Standard and Formatting toolbars are displayed by
default. They provide easy access to the commands you will use most often when
working in FrontPage.
The icons on the Views bar provide different ways of looking
at the information on your page or in your web. As you work with FrontPage,
you'll frequently switch between views to match the current task at hand —
from the early steps of creating a page, to the moment a whole Web site is
ready to be published on the World Wide Web.
When you start FrontPage, Page view is displayed by default.
Page view is a powerful editing tool for creating and designing Web pages. As
you enter text, place pictures, insert documents, create tables, make lists,
and design the appearance of your Web pages, Page view displays them as they
will appear in a Web browser. All HTML code is automatically created in the
background and you don't need to manually edit any code unless you want to.
To create a home page
The home page is the front door to your Web site. Greeting
your visitors as you might do in person and providing some information about
the content or subject matter of your site will spark interest in the people
looking at your site. The home page also contains links to the other pages in a
web.
- On
the blank page in Page view, type Welcome to my Web site! and then press ENTER.
Just like in a word processor, pressing ENTER puts the
cursor on a new line.
- Next,
type the sentence Take a look around to learn more about the Year 2000,
see where people all over the world will be celebrating the new
millennium, and look at pictures from past New Year's fireworks.
- Press
ENTER.
After typing such a long sentence, you may wonder how much
typing you'll need to do before getting to the fun stuff. Don't worry, for most
of the Millennium Celebration Web content, we've already done the typing for
you. And when you're ready to make your own Web site, FrontPage lets you import
any of your existing documents directly onto your Web pages without having to
retype anything.
Your page should now look like this:
Next, you will add a picture to the bottom of the current
page. Pictures can be scanned photographs, drawings, or computer graphics
created in a drawing or image-editing program.
For this example, the picture you'll insert is a graphical
button of the FrontPage 2000 web logo.
To insert a picture on the home page
- On
the Insert menu, point to Picture, and then click From File.
FrontPage displays the Picture dialog box. Because you are
editing a page that isn't part of a web yet, FrontPage also opens the Select
File dialog box, which lets you choose a picture to insert from your local file
system.
The picture file you'll insert is located in the Tutorial
folder that was installed with the FrontPage program files.
- In the Select File dialog box, navigate to the folder named Program Files\Microsoft Office\Office\Tutorial by double-clicking each folder in this path until the Look in box displays the Tutorial folder.
If you downloaded the tutorial files from the www.microsoft.com,
navigate to the folder named Fptutor\Samples, or to the folder where you placed
the files. In the Tutorial folder,
several files will be displayed. By default, FrontPage searches for picture
files.
- Click
the file named fp2000, and then click OK.
FrontPage inserts the selected picture file on the current
page. It is a picture of a button that your site visitors will be able to click
to learn more about FrontPage 2000.
- Press
ENTER to create a new line.
Your page should now look like this:
Merely inserting a picture of a button doesn't mean that
anything will happen when someone clicks it in a Web browser. To make a picture
or a word "clickable," it must have a hyperlink associated with it.
A hyperlink is a pointer from text or from a picture to
another page or file on the World Wide Web. On the World Wide Web, hyperlinks
are the primary way to navigate between pages and Web sites.
In the next steps, you'll create a hyperlink from the button
you just placed on the home page.
To create a hyperlink from a picture
On the home page, click the picture of the
FrontPage 2000 button you previously inserted.
When a picture is selected, it is shown with file
handles — eight small squares around the outline of the picture. These can
be used to resize a picture or change its appearance. When a picture is
selected, FrontPage also displays the Pictures toolbar below Page view. The
Pictures toolbar provides picture editing and formatting tools, which you'll
learn about later.
- On
the Insert menu, click Hyperlink.
FrontPage displays the Create Hyperlink dialog box. Here,
you specify the target of the hyperlink you are creating. This can be a page or
a file in your web, on your local file system, on a Web server, or on another
site on the World Wide Web.
Because you're creating a hyperlink from a button that is
labeled "Microsoft FrontPage," you'll link to the Microsoft FrontPage
home page on the World Wide Web. When site visitors click the button in a Web
browser, they will be taken to the right place.
- In
the URL box, type www.microsoft.com/frontpage immediately after the
http:// prefix that FrontPage has provided for you.
URL is an acronym for Uniform Resource Locator. It is the
technical term for what's commonly known as an "Internet address" or
"Web site address." A URL specifies the unique location of a file or
a collection of files on the World Wide Web.
- Click
OK to finish creating the hyperlink.
You may notice that the appearance of the button itself
hasn't changed. Unlike text hyperlinks, which change the color of the clickable
text and underline it, picture hyperlinks do not automatically indicate the
presence of the hyperlink in an obvious way. This is intentional, because
changing the appearance of the picture could obscure the intended page design
in some cases.
You can quickly check the existence of a hyperlink from a
picture by moving the mouse pointer over the picture. If a hyperlink is
present, FrontPage displays the URL the hyperlink points to on the status bar.
Next, you'll insert an animation of the number 2000 at the
top of the page. Animated pictures are inserted in the same way as normal
pictures.
To insert an animated picture on the home page
Press CTRL+HOME to quickly jump to the beginning of the
current page.
The key combination CTRL+HOME places the cursor in the home
position — the top left margin on the current page.
- On
the Insert menu, point to Picture, and then click From File.
This time, FrontPage immediately displays the contents of
the Tutorial folder. For the duration of each work session, FrontPage remembers
the names and locations of the folders you've already navigated to.
- In
the Select File dialog box, double-click the file named 2000.
Double-clicking file names is faster than selecting each
file and clicking OK.
FrontPage inserts the animated picture of the number 2000 on
the current page. This picture will look great against a dark background, which
you'll apply later. While you edit pages in Page view, FrontPage purposely does
not show text or picture animations, so they don't distract you from your work.
You will be able to see what the animation looks like when you preview the home
page later in this lesson.
- Press
ENTER to move the welcome text to the line below.
Your page should now look like this:
To finish the home page, you'll center the text and pictures
on it.
To center elements on a page
- On
the Edit menu, click Select All.
FrontPage selects everything on the current page.
- On
the Format menu, click Paragraph.
FrontPage displays the Paragraph dialog box. Here, you can
change the alignment of selected elements, and apply indentation and custom
spacing for text and graphics.
- In
the Alignment list, click Center, and then click OK.
FrontPage centers the text and the pictures on the home
page.
- Click
anywhere on the page to deselect all page elements.
Now that you've invested some time and completed a number of
steps, it's a good idea to save your page.
To save the current page
- On
the File menu, click Save As.
FrontPage displays the Save As dialog box. Here, you can
specify the location for the current page, and review or change the page title,
the file name, and the file type.
- In
the Save As dialog box, click the My Documents icon on the vertical
Places bar.
The contents of your My Documents folder is displayed.
If no files are displayed in the file list, then you currently do not have any
other Web pages stored here.
- Next
to the Page title field, click the Change button.
FrontPage displays the Set Page Title dialog box. Here, the
default page title is based on the first line of text on the current page. A
title identifies the contents of a page when it is displayed in a Web browser.
For this tutorial, you'll change the page title to something more descriptive.
- In
the Set Page title box, type Millennium Celebration – Home Page and then
click OK.
- In
the Save As dialog box, the default file name is based on the first line
of text on the current page. For this tutorial, change the file name to
something more descriptive.
- In
the File name box, change the suggested text to homepage, and then click
Save.
FrontPage saves the current page.
While creating the home page, you've worked exclusively in
normal Page view, but there are three different ways you can choose to look at
the current page.
To display HTML tags on the current page
- In
Page view, click Reveal Tags on the View menu.
FrontPage displays graphical representations of standard
HTML tags for the current page. This display is useful for people who want to
know where HTML tags are placed while they design their pages.
- To
hide the tags, click Reveal Tags on the View menu a second time.
To display the HTML of the current page
- In
Page view, click the HTML tab at the bottom of the page.
This is the HTML code that FrontPage has created so far
while you were designing the home page. Web browsers decode these instructions
to display the page. The HTML tab in Page view is intended for experienced web
developers and page designers who want to customize the HTML that FrontPage
creates.
If you want to set your preferences for the way FrontPage
will generate HTML code, click Page Options on the Tools menu, and then click
the HTML Source tab. If you're not experienced in HTML, you don't need to make
any changes here. Click Cancel to close the Page Options dialog box.
- Click
the
To preview the current page
- In
Page view, click the Preview tab at the bottom of the page.
Looking at your page on the Preview tab is a quick and
convenient way to see how certain elements — including animations, movie
clips, tables, and lists — will appear in a Web browser.
When you preview the home page you've created, you can see
what the animation at the top of the page looks like. Each of the four digits
rotates into place one by one, until the number 2000 is displayed. The color
and edges of the four digits will look great against a dark background, which
you will add in the next lesson. The animation effect will be repeated for as
long as the current page is previewed or displayed in a Web browser.
- Click
the
To create a new web
- On
the File menu, click Close to close the current page.
- On
the File menu, point to New, and then click Web.
FrontPage displays the New dialog box. Here, you can choose
from several web templates and wizards, specify where you want to save your
web, and what you want to call it.
Make sure the One Page Web template is selected, and then
press TAB.
Pressing the TAB key moves the selection to the field where
you specify the name and location of the new web.
- In
the Specify the location of the new Web box, change the suggested name to
C:\My Documents\My Webs\Millennium and then click OK.
FrontPage creates a new web named "Millennium" and
displays its name in the title bar at the top of the FrontPage application
window. Because you'll be working with several files in your web, FrontPage
also displays the Folder List, where you can see the files and folders in your
current web, similar to files and folders in Windows Explorer.
 |
Navigation icon
|
- Click
the Navigation icon on the Views bar.
When you have a web open, the icons on the Views bar let you
look at the information in your web in different ways.
Navigation view shows a graphical representation of the
structure of your Web site. Because you created a one-page web, FrontPage has
automatically designated it as the web's home page — indicated with a
small icon of a house. While in Navigation view, FrontPage also displays the
Navigation toolbar, which you can drag anywhere on your screen.
Next to the Views bar, FrontPage displays the optional
Folder List, just like it did in Page view.
In a moment, you'll replace the new, empty home page with
the one you created earlier in this lesson. First, however, you'll create the
structure for the other four pages that the Millennium Celebration Web will
have.
Creating a web structure in Navigation view enables features
such as page banners and navigation bars that are automatically updated
whenever you change, add, or remove pages in your web. This makes it easy to
change things around. You'll learn more about these features later.
To create a navigation structure
- In
Navigation view, click the New Page button on the toolbar.
FrontPage creates a new page labeled "New Page 1"
below the home page. Pages in Navigation view aren't the actual pages in the
current web; they are placeholders that point to them. This way, you can easily
experiment with the structure and organization of a web before you create its
content.
- To
quickly create the remaining three pages, hold down CTRL on your keyboard
and press N three times.
CTRL+N is a keyboard shortcut for the New Page command.
FrontPage supports common Windows and Microsoft Office accelerator keys that
help speed up repetitive tasks. The pages you just created appear below the
home page, because the home page was selected when you issued the command.
- In
Navigation view, the selected page is blue, while others are yellow.
- With
the home page still selected, press TAB.
Pressing the TAB key moves the selection to the next page in
the structure and activates the page title for editing.
- When
New Page 1 is selected, type Background and then press TAB.
"Background" is the page title of one of the pages
you'll create for the Millennium Celebration Web. Next, you'll specify the page
titles for the other pages.
- When
New Page 2 is selected, type Destinations and then press TAB.
- When
New Page 3 is selected, type Photo Album and then press TAB.
- Finally,
when New Page 4 is selected, type Links and then press ENTER.
Pressing ENTER after editing a page title saves the new
title without selecting another page. To deselect all pages, click anywhere
outside the pages in Navigation view.
Your screen should now look like this:
You can quickly open pages in Page view for editing by
double-clicking the pages in Navigation view or in the Folder List.
Next, you'll replace the blank home page FrontPage created
from the web template by importing the home page you created and saved to your
My Documents folder earlier in this lesson.
To import a page into a web
In Navigation view, double-click the Home Page to open it in
Page view.
FrontPage opens the blank home page that was created from
the web template.
 |
Folder List button
|
- On
the toolbar, click the Folder List button to hide the Folder List in Page
view.
- On
the Insert menu, click File.
FrontPage displays the Select File dialog box. Here, you can
insert Web pages, word-processing documents, text files, and other documents on
the current page.
In the Select File dialog box, navigate to the
My Documents folder.
When My Documents is displayed in the Look in list of
the Select File dialog box, click the file named homepage, and then click Open.
FrontPage imports your previously saved home page to the
current page.
 |
Save button
|
- To
save the current page to your web, click Save on the File menu, or click
the Save button on the toolbar.
FrontPage displays the Save Embedded Files dialog box. Here,
you can preview, rename, save, and update embedded files that the current web
will use.
When you previously saved this page to the My Documents
folder on your file system, FrontPage left the two pictures you inserted in
their original location — the FrontPage Tutorial folder. The home page
merely pointed to the picture files without copying them to the same folder the
page was saved to. To keep Web sites portable, however, you should always keep
associated pages and files as part of the web that uses them.
- In
the Save Embedded Files dialog box, click OK.
FrontPage saves the home page as Index.htm and saves copies
of the embedded picture files, 2000.gif and Fp2000.gif, to the current web.
To edit the Background page
- Click
the Navigation icon on the Views bar to switch back to Navigation view.
Note that the Folder List now shows the two picture files
you saved to the current web. The file Index.htm is the new home page. You can
later discard the remaining copy of the home page from your My Documents
folder.
In the Folder List, the file names of the other pages were
automatically derived from the page titles you typed into the pages in
Navigation view. For this tutorial, we won't change the names.
- Double-click
the Background page to open it in Page view.
This page will provide some background about the new
millennium and the Year 2000 for site visitors. For this tutorial, we have
provided this text for you, so you can simply insert it on the page without
having to type it.
- When
the blank page is displayed in Page view, click File on the Insert menu.
In the Select File dialog box, navigate to the folder named
Program Files\Microsoft Office\Office\Tutorial by double-clicking each folder
in this path until the Look in box displays the Tutorial folder.
If you downloaded the tutorial files from the
www.microsoft.com, navigate to the folder named Fptutor\Samples, or to the
folder where you placed the files.
- Next,
click the Files of type list and click Text Files (*.txt) to display the
text files in the Tutorial folder.
FrontPage displays the single file matching the criteria.
- Click
year2000 in the list, and then click Open.
The text you are inserting isn't saved in HTML format, so
FrontPage displays the Convert Text dialog box to let you control how the text
will be imported.
In the Convert Text dialog box, click Normal
paragraphs with line breaks, and then click OK.
FrontPage imports the text file and places it at the
insertion point on the Background page.
On the toolbar, click the Save button to save changes to the
Background page.
Next, you will prepare the page titled Destinations. It will
tell site visitors about popular travel destinations that many people will
visit to celebrate the new millennium. On this page, you will also provide a
feedback form that collects travel ideas from people browsing the Millennium
Celebration Web.
To edit the Destinations page
- On
the toolbar, click the Folder List button to show the Folder List in Page
view.
- Double-click
destinations.htm in the Folder List to open the page in Page view.
- Click
the Folder List button to hide the Folder List.
- When
the blank page is displayed in Page view, click File on the Insert menu.
- In
the Select File dialog box, click the Files of type list, and then click
Rich Text Format (*.rtf) to display the formatted text file in the
Tutorial folder.
FrontPage displays the file matching the criteria.
- Double-click
the file events.
Because this type of file contains formatting, FrontPage
automatically converts the formatted text to HTML format.
- On
the toolbar, click the Save button to save changes to the Destinations
page.
To create a bulleted list
- With
the Destinations page still displayed in Page view, find the words "
- Use
the scroll bar to bring the entire list of destinations into view,
beginning with "
- Click
just to the left of the letter T in "
 |
Bullets button
|
- On
the toolbar, click the Bullets button.
FrontPage converts the selected text to a bulleted list.
- Click
anywhere on the page to deselect the list.
Your page should now look like this:
You can also create numbered lists with FrontPage. When you
add new items to a numbered list, FrontPage automatically numbers them
sequentially. You can add to bulleted and numbered lists by pressing ENTER
after an item in the list. To end a list, press ENTER twice after typing the
last list item.
Next, you will place four pictures on the current page and
use positioning features in FrontPage to align the pictures with the paragraphs
they are associated with. This will create a more interesting page layout.
To position pictures with text
With the Destinations page still displayed in Page view,
scroll down to the words "France England
 |
Insert Picture From File button
|
- Click
just to the left of the letter F in "France," press HOME, and
then click the Insert Picture From File button on the toolbar.
When you last inserted a picture, you did not have a web
open, and FrontPage automatically displayed the Select File dialog box. Now
that a web is open, FrontPage assumes you want to work with pictures that are
already part of your web, and therefore displays the Picture dialog box.
 |
Select File button
|
Because you haven't yet added the picture you want to the
current web, click the Select File button in the Picture dialog box.
FrontPage displays the Select File dialog box.
- Click
the file named
FrontPage inserts a picture of the Eiffel
Tower Paris
- Next,
click the picture of the
- On
the Format menu, click Position.
FrontPage displays the Position dialog box.
- Under
Wrapping style, click Right, and then click OK.
The picture is aligned with the right margin of the current
page and the text now flows around it.
- On
the toolbar, click the Save button to save changes to the Destinations
page.
- In
the Save Embedded Files dialog box, click OK.
Your page should now look like this:
You can either place pictures one by one in this way, or you
can import all the pictures you will use on your pages all at once. While
importing single files is done in Page view, inserting a group of files or
entire folders is done in Folders view.
To add a group of files to the current web
 |
Folders icon
|
- Click
the Folders icon on the Views bar to switch to Folders view.
Folders view is an expanded view of the Folders List that
you have seen in Navigation and Page view. Similar to the way you look at files
in Windows Explorer, here you can view details about the files and folders in
your web, and perform such file management tasks as adding, deleting, moving,
copying, and renaming files.
- On
the File menu, click Import.
FrontPage displays the Import dialog box. Here, you can add
files and folders from your local file system, a local area network, a company
file server, or a resource on the Internet or World Wide Web, such as an FTP
server.
- In
the Import dialog box, click Add File.
- In
the Add File to Import List dialog box, navigate to the folder named
Program Files\Microsoft Office\Office\Tutorial by double-clicking
each folder in this path until the Look in box displays the Tutorial
folder.
If you downloaded the tutorial files from the
www.microsoft.com, navigate to the folder named Fptutor\Samples, or to the
folder where you placed the files.
- Next,
click the Files of type list, and then click GIF and JPEG (*.gif, *.jpg)
to display all picture files in the Tutorial folder.
- Click
the file named firewks1 in the list to select it.
- Next,
hold down CTRL, and while doing so, click to select the files named
firewks2, firewks3, firewks4, japan,
FrontPage supports standard Windows file selection methods.
- When
the files are selected in the Add File to Import List dialog box, release
CTRL, and then click Open.
FrontPage adds the pictures you selected to the list in the
Import dialog box.
- Click
OK to import the listed files to the current web.
Now that the remaining pictures are added to your web, it's
time to finish the layout of the Destinations page.
To finish the page layout
- Click
the Page icon on the Views bar to return to Page view.
Locate the sentence beginning with "England is planning
to reconstruct…," click just to the left of the letter E in
"England," and then click the Insert Picture From File button on the
toolbar.
In the Picture dialog box, note that your previously
imported pictures are now available, and then select the file london.gif from
the list.
When you click a single picture file in the Picture dialog
box, FrontPage displays a preview of the picture, so you can make sure it's the
one you want to insert. This is one of the benefits of adding all your pictures
to the web before inserting them on your pages.
The Picture dialog box also links to the clip art gallery
that is included with FrontPage. And if you have a scanner or a digital camera,
you can click the Scan button in this dialog box to acquire original pictures
from those sources.
Click OK to insert the picture
 |
Align Left button
|
- Click
the picture of the
- Next,
scroll down to the sentence beginning with "World-famous Times
Square…," click just to the left of the letter W in
"World-famous," and then click the Insert Picture From File
button on the toolbar.
- Select
the file sanfran.gif from the list, and then click OK.
 |
Align Right button
|
- Click
the picture of the
- Finally,
scroll down to the sentence beginning with "A travel agency in
- Double-click
the file japan.gif on the list.
- Click
the picture of the Japanese temple, and then click the Align Left button
on the toolbar to position the image in the left margin and make the text
wrap around it.
Your page should now look like this:
Positioning pictures and other page elements around text on
your page makes for a more interesting design, much like pages in a magazine or
newspaper. By positioning pictures in the margin, your page layout will be
preserved even when the page is viewed at a different screen size and
resolution in a Web browser.
To finish the Destinations page, you will create a feedback
form so that you can interact with site visitors who want to participate. A
feedback form can be used to collect comments and information from people
visiting your Web site.
To create a feedback form
- In
Page view, press CTRL+END to quickly jump to the bottom of the current
page, or scroll all the way down using the scroll bar.
- On
the new, blank line, type Tell Us Where You'll Be! and then press ENTER.
- On
the next line, type Do you have great travel plans for a millennium party?
Then tell us about them below!
- Press
ENTER to create a new line.
- On
the Insert menu, point to Form, and then click Form.
FrontPage inserts a new form on the current page. The dashed
lines indicate the form's boundary. By default, a new form contains Submit and
Reset push buttons.
Next, you will customize the default form by adding
form-fields and form-field labels, to let site visitors know what kind of
information you want them to enter into the form.
To customize the form
 |
Center button
|
- With
the cursor still positioned to the left of the Submit button, click the
Center button on the toolbar, and then press ENTER to add some space to
the form.
- Press
the UP ARROW key on your keyboard to return the cursor to the beginning of
the form.
- FrontPage
moves the cursor to the middle of the first line of the form.
- On
the first line, type Your Name: and then press SHIFT+ENTER.
- Holding
SHIFT while pressing ENTER creates a line break. Line breaks are useful
for spacing lines of text more closely together than standard paragraph spacing.
- On
the Insert menu, point to Form, click One-Line Text Box, and then press
ENTER.
FrontPage inserts a one-line text input field into the form.
- On
the next line, type Your E-mail Address: and then press SHIFT+ENTER.
- On
the Insert menu, point to Form, click One-Line Text Box once more, and
then press ENTER.
- On
the next line, type Your travel plans are: and then press SHIFT+ENTER.
- On
the Insert menu, point to Form, and then click Scrolling Text Box.
FrontPage inserts a scrolling text input field into the
form.
- Double-click
the scrolling text box you just inserted.
FrontPage displays the Scrolling Text Box Properties dialog
box. Here, you can change the appearance of the text box.
- In
the Scrolling Text Box Properties dialog box, change the Width in
characters to 30 and the Number of lines to 5, and then click OK.
The scrolling text box has increased in size, which will
encourage site visitors to write a little more than just a brief line of text
about their New Year's plans.
Now that your form and the Destinations page are finished,
it's a good idea to save your work.
- On
the toolbar, click the Save button to save changes to the Destinations
page.
Your page should now look like this:
Good work! The feedback form is finished and so is the
Destinations page. In the next part of the lesson, we'll add the last two
pages — an online photo album and a list of links to your favorite sites
on the World Wide Web.
- To
edit the Photo Album page
- On
the toolbar, click the Folder List button to show the Folder List in Page
view.
- Double-click
photo_album.htm in the Folder List to open the page.
- Click
the Folder List button to hide the Folder List.
- When
the blank page is displayed in Page view, type New Year's Fireworks on the
first line, then press ENTER.
- On
the next line, type Here are some great pictures from past New Year's
celebrations. Click each thumbnail to see the full-size picture, then use
your Web browser's Back button to return to this page.
- Press
ENTER twice to create some space.
Next, you'll place four pictures on the current page. They
are already part of the web because you imported them in the previous
procedure.
- On
the toolbar, click the Center button.
- Click
the Insert Picture From File button.
- In
the Picture dialog box, select firewks1.jpg, and then click OK.
FrontPage inserts the first of the four fireworks pictures
you will place on this page. Next, insert the other three pictures, one after
the other. Don't worry about their large size and proper placement just yet.
- Repeat
steps 8 and 9 with the picture files named firewks2.jpg, firewks3.jpg, and
firewks4.jpg.
The remaining pictures are placed on the page, one after the
other.
- On
the toolbar, click the Save button to save changes to the Photo Album
page.
Having lots of large pictures on your Web page for people to
look at is great, but not everyone has a fast connection to the Internet. Over
a dial-up connection with a modem, pages with large pictures and complex
designs can take a long time to download before the Web browser displays the
page.
Imagine changing the channel on your TV and having to wait
several minutes before you see what's playing on that channel. It's no
different on the World Wide Web. There are many other "channels" or
Web sites to look at. No matter how interesting your site may be, people may
quickly lose interest if it takes too long to download.
On the status bar, FrontPage automatically displays
the estimated time it will take for the current page to download over the
Internet when the page is opened in a Web browser. The default measurement
assumes that your site visitors will have a 28.8K modem connection. You can
adjust this measurement for other common connection speeds by right-clicking
the red hourglass icon and choosing another connection speed from the shortcut
menu.
By creating thumbnails — small preview images of
pictures — you can give your visitors the choice of whether they want to
spend time downloading the full-size pictures on your page. FrontPage makes
creating thumbnails easy with the Auto Thumbnail tool.
To create thumbnails of pictures
With the Photo Album page still displayed in Page view,
press CTRL+HOME to quickly jump to the beginning of the current page, or scroll
all the way up using the scroll bar.
- Click
the first fireworks picture to select it.
FrontPage displays the Pictures toolbar below Page view.
 |
Auto Thumbnail button
|
- On
the Pictures toolbar, click the Auto Thumbnail button.
FrontPage creates a thumbnail of the selected picture and
adds a blue border to indicate that it contains a hyperlink to the original
picture in your web. When site visitors visit this page, they can click each
thumbnail to download the full-size pictures.
- Repeat
steps 2 and 3 for the other three pictures on the Photo Album page.
- Click
the second fireworks thumbnail to select it. Drag one of the top corner
handles to make this thumbnail the same height as the first thumbnail.
Repeat this step for the third fireworks thumbnail.
- Click anywhere on the page to deselect the last thumbnail.
Your page should now look like this:
When FrontPage creates thumbnails, it doesn't actually modify the original picture files in any way. Instead, it quickly makes a copy of each picture, resizes it, downsamples the display resolution of the picture, inserts a hyperlink pointing to the original picture file, and adds a border around the thumbnail to indicate the presence of a hyperlink.
You can see why the Auto Thumbnail button is a real
timesaver. Doing all of that manually for each picture could take a while.
- On
the toolbar, click the Save button to save changes to the Photo Album
page.
Because FrontPage made small copies of the pictures that are
represented by a thumbnail, it needs to save the thumbnails to the current web.
The names of the thumbnail picture files are the same as the original pictures,
but FrontPage adds a "_small" suffix to each file name for easy
identification.
- In
the Save Embedded Files dialog box, click OK.
FrontPage saves the four thumbnails to the Millennium
Celebration Web.
Because you have an even number of pictures, you can arrange
them a little better than all on one line. You can treat thumbnails like other
pictures on your pages and move them where you want them.
To finish the Photo Album page
- Click
the first thumbnail and then press HOME to move the cursor to the left of
it.
- Press
the RIGHT ARROW key on your keyboard to move the cursor between the first
and second thumbnail.
- Press
the TAB key.
FrontPage creates space between the first and second
thumbnail.
- Next,
press the RIGHT ARROW key again to move the cursor between the second and
third thumbnail.
- Press
ENTER.
FrontPage moves the third and fourth thumbnail to the next
line.
- Press
the RIGHT ARROW key once more to move the cursor between the third and
fourth thumbnail.
- Press
the TAB key.
FrontPage creates space between the third and fourth
thumbnail.
- On
the toolbar, click the Save button to save changes to the Photo Album
page.
Your page should now look like this:
Now take another look at the FrontPage status bar. The Photo
Album page previously would have taken 97 seconds to download.
After replacing the large pictures with thumbnails, the
Photo Album page now only takes 4 seconds to download. That's much better!
To begin the Links page
- On
the toolbar, click the Folder List button to show the Folder List in Page
view.
- Double-click
links.htm in the Folder List to open the page in Page view.
- Click
the Folder List button to hide the Folder List again.
- When
the blank page is displayed in Page view, type Links to My Favorite Sites
and then press ENTER.
Next, you will create a simple text animation of the
paragraph heading. FrontPage includes a collection of fun text effects that you
can easily apply to text headings or entire paragraphs.
To create hyperlinks from text
- On
the Links page, press the DOWN ARROW key, and then type MSN - The
Microsoft Network and then press ENTER.
- Click
and drag the mouse over the words you just typed to select them.
- On
the Insert menu, click Hyperlink.
FrontPage displays the Create Hyperlink dialog box. Here,
you specify the target of the hyperlink you are creating. This can be a page or
a file in your web, on your local file system, on a Web server, or on another
site on the World Wide Web.
- In
the URL box, type www.msn.com immediately after the http:// prefix that
FrontPage has provided for you, and then click OK.
"HTTP" stands for Hypertext Transfer Protocol.
This is the Internet protocol that allows World Wide Web browsers to retrieve
information from Web servers. The text "www.msn.com" is the URL of
MSN, the Microsoft Network.
- On
your keyboard, press the DOWN ARROW key to deselect the text.
The words "MSN - The Microsoft Network" have
changed from black default text to blue text, and the words are now underlined
to indicate the presence of a hyperlink. When this page is displayed in a Web
browser, clicking this hyperlink will retrieve and display the MSN home page.
Before creating the next hyperlink, you'll insert a special
character symbol to indicate a trademark on the current page.
To insert special characters or symbols
- Click
the mouse just after the letters MSN in the hyperlink you just created.
- On
the Insert menu, click Symbol.
FrontPage displays the Symbol dialog box. Here, you can
select and insert special characters at the insertion point. You can insert
multiple symbols while this dialog box is displayed.
In the Symbol dialog box, select the trademark (TM) symbol,
click Insert, and then click Close.
FrontPage inserts the trademark symbol after the letters
MSN. You can use the Symbol command to insert characters that you may not be
able to type directly with your keyboard.
To create an automatic hyperlink
- On
the Links page, press the DOWN ARROW key, type http://www.yahoo.com, and
then press ENTER.
Yahoo! is a popular Internet service that lets you look for
information on the World Wide Web using search keywords and subject categories.
As soon as you press ENTER, the URL you typed changes from
black to blue text and is underlined to indicate the presence of a hyperlink.
Like other Microsoft Office applications, FrontPage supports automatic
hyperlink creation.
Since a URL by itself is not always very descriptive,
however, you'll want to change it to the name of the site that the hyperlink
points to. You can overtype the text without erasing the hyperlink.
- Using
the mouse, click and drag over the URL you just typed to select it.
When the URL http://www.yahoo.com is selected, type Yahoo!
to replace the selected text.
The hyperlink still points to the same URL, but it is now
labeled with the site's name.
Next, you'll create a hyperlink using your Web browser.
To create a verified hyperlink
Press the DOWN ARROW key to move the insertion point to the
blank line below the previous hyperlink.
- Type
Microsoft FrontPage 2000 and then press ENTER.
- Click
and drag the mouse over the words you just typed to select them.
 |
Hyperlink button
|
- On
the toolbar, click the Hyperlink button.
FrontPage displays the Create Hyperlink dialog box.
 |
Web Browser button
|
- In
the Create Hyperlink dialog box, click the Web Browser button.
FrontPage starts your Web browser. When you visit the page
that the hyperlink should point to and then switch back to FrontPage, the URL
box will contain the address of the target page.
- In
your Web browser's Address (or Location) box, type
http://www.microsoft.com/frontpage and then press ENTER.
The Web browser displays the Microsoft FrontPage home page,
where you can learn more about FrontPage, download updates, and find answers to
common questions.
On your keyboard, press ALT+TAB (or click the Microsoft
FrontPage taskbar button on the Windows taskbar) to switch back to the Create
Hyperlink dialog box.
The URL of the Microsoft FrontPage home page is now entered
into the URL box in the Create Hyperlink dialog box.
- Click
OK.
- On
your keyboard, press the DOWN ARROW key to deselect the text.
The words "Microsoft FrontPage 2000" are now
underlined to indicate the presence of a hyperlink.
- On
the toolbar, click the Save button to save changes to the Links page.
Your page should now look like this:
To apply paragraph styles to headings
- On
the Window menu, click index.htm.
FrontPage brings the home page back into view. When you have
more than one page open in Page view, you can use the Window menu to switch
between them. The current page will always be listed at the top of this menu.
- Click
anywhere in the heading Welcome to my Web site! at the top of the page.
- Click
the Style list on the Formatting toolbar, and change
FrontPage applies the Heading 3 style to the current line of
text. The size of the text isn't affected, but the text is now bold.
Heading styles in the Style list are based on universal HTML
standards. A level 1 heading is the largest possible text style for Web pages,
and a level 6 heading is the smallest.
- On
the toolbar, click the Save button to save the home page.
- On
the Window menu, click background.htm.
FrontPage brings the Background page back into view.
- Click
anywhere in the heading The New Millennium at the top of the page.
- Click
the Style list on the toolbar, and then click Heading 4.
- Repeat
steps 6 and 7 with the heading What's in a Number? on the lower half of
the Background page.
- On
the toolbar, click the Save button to save changes to the Background page.
To repeat paragraph formatting with the Format
Painter
FrontPage provides a convenient way to copy the formatting
styles from one selection of text to another with the push of a button. You'll
practice how to do this on the Destinations page.
- On
the Window menu, click destinations.htm.
FrontPage brings the Destinations page back into view.
- Click
anywhere in the sentence Planning a Millennium Getaway at the top of the
page.
- Click
the Style list on the toolbar, and then click Heading 4.
 |
Format Painter button
|
When the style has been applied, click anywhere in the
heading, and then click the Format Painter button on the toolbar.
- Using
the scroll bar, scroll down to the heading Tell Us Where You'll Be.
 |
Format Painter pointer
|
- Click
the mouse to drag the Format Painter pointer over the words Tell Us Where
You'll Be, and then release the mouse button.
FrontPage copies the formatting from the previous heading
and applies it to the current heading. The Format Painter tool is particularly
useful when you want to easily duplicate several concurrent formatting choices
from one selection of text to another.
- On
the toolbar, click the Save button to save the Destinations page.
To use the multiple Undo command
 |
Undo button with arrow
|
- On
the toolbar, click the small arrow just to the right of the Undo button.
FrontPage displays the Undo history, which shows the last
several actions you can reverse. The first of these actions is selected by
default. If you were to click it, then only that action would be reversed. You
can also move the mouse over other entries in this list to include them in the
Undo command.
Since we want to get rid of all four hyperlinks you just
dragged and dropped onto the home page, move the mouse down the list to select
all four occurrences of Drop.
The status bar in the Undo history window should read Undo 4
Actions.
- Click
the mouse on the last occurrence of Drop in the list.
FrontPage reverses the last four actions you took, and the
four hyperlinks you created are removed from the home page.
- To
save the current page, click Save on the File menu, or click the Save
button on the toolbar.
Adding Shared Borders and Navigation Bars
Shared borders are page regions reserved for content that
you want to appear consistently throughout the pages in your web. These borders
can contain page banners and navigation bars. Page banners display the page
title you gave each page when you created or saved it. Navigation bars are a
row or column of hyperlinks to the other pages in the current web. FrontPage
can automatically update shared borders and navigation bars, so the navigation
structure of your web will always work correctly, even when you add, move, or
delete pages from the web's structure.
To create shared borders across a web
- Click
the Navigation icon on the Views bar to switch to Navigation view.
- Click
the Folder List button to hide the Folder List in this view.
- On
the Format menu, click Shared Borders.
FrontPage displays the Shared Borders dialog box. Here, you
can specify where on your pages FrontPage should insert shared borders. Because
your web structure has two levels of pages — the home page and the pages
below it — you will use two kinds of shared borders and two kinds of
navigation bars.
- In
the Shared Borders dialog box, make sure the All pages option is selected.
For a horizontal shared border, select the Top check box and
select the Include navigation buttons check box just below it.
For a vertical shared border, select the Left check box and
select the Include navigation buttons check box below it.
- Leave
the Right and Bottom check boxes unchecked, and then click OK.
FrontPage creates shared borders and default navigation bars
for all the pages in the current web. You'll see what these look like when you
return to Page view.
To test navigation bar hyperlinks
- In
Navigation view, double-click the Home Page.
- Click
the Folder List button to hide the Folder List in Page view.
Note the changes FrontPage has made to the home page. It now
contains a top and left shared border. The top border contains a page banner
with the name of the current page, and the left border contains a list of
navigational hyperlinks that look exactly like the ones you manually created at
the beginning of this lesson.
In Page view, you can easily test hyperlinks that point to
pages and files in your web.
Introduction to Theme’s
Themes applies a graphical background to the pages in your
web. You can also choose to apply a theme as a cascading style sheet (Apply
using CSS).
- Under
Apply theme to, make sure All pages is selected.
- In
the list of installed themes, click Artsy.
- Clear
the check boxes for Active graphics and Background picture, then click OK
to apply the theme.
Since this is the first time you're applying a theme to a
web, FrontPage displays a message to let you know that applying a theme will
overwrite some of the manual formatting you may have done on your pages.
- Click
Yes to apply the theme.
The theme named "Artsy" is applied to all the
pages in your current web.
- To
save the home page, click Save on the File menu, or click the Save button
on the toolbar.
Your page should now look like this:
As you can see, applying the theme has dramatically changed
the appearance of the home page. The page banner and navigation buttons are no
longer plain text; now they're colorful graphics. The page background has changed
from white to black, which simulates the night sky that the millennium
fireworks will appear in, and the font has changed color and is a little
larger.
Displaying graphical navigation buttons on all pages
- On
the Window menu, click background.htm.
FrontPage brings the Background page back into view.
Note that the page has inherited its theme and theme
elements from the home page, but the vertical navigation bar in the left border
still shows plain text hyperlinks. By default, vertical navigation bars are
displayed as plain text, so they look this way even after you apply a theme.
You can easily change navigation bar settings even after a
theme is applied.
In the left border of the Background page, double-click the
vertical navigation bar.
- Under
Orientation and appearance in the Navigation Bar Properties dialog box,
click Buttons, and then click OK.
- Click
anywhere on the page to deselect the navigation bar.
FrontPage changes the navigation formatting and uses the
graphical buttons included with the theme. The web now has an attractive and
professional look.
- To
save the page, click Save on the File menu, or click the Save button on
the toolbar.
To modify a theme
- On
the Window menu, click index.htm.
FrontPage brings the home page back into view.
- On
the Format menu, click Theme.
FrontPage displays the Themes dialog box. In the list of
themes, the Artsy theme is now the default theme because it has been applied to
the current web.
- In
the Themes dialog box, make sure All Pages is selected.
- Next,
click Modify.
- Under
the question What would you like to modify? click Graphics.
FrontPage displays the Modify Theme dialog box. Here, you
can supply custom graphics for various theme elements such as page banners,
navigation buttons, background pictures, and other elements. FrontPage
superimposes text over these graphics, so there is no need to change graphics
when you change the names of your pages, or add or remove pages.
For this example, we will change the graphical page banner
on which FrontPage places the titles of the pages in the Millennium Celebration
Web.
- In
the Item list, click Banner.
- On
the Picture tab, click the Browse button below the file name of the
current banner graphic.
FrontPage displays the Select Picture dialog box and shows
the current pictures in your current web. Since the graphical banner we want to
use isn't part of the web yet, you will search your file system for it.
- In
the Select Picture dialog box, click the Select File button.
FrontPage displays the Select File dialog box.
- Navigate
to the folder named Program Files\Microsoft Office\Office\Tutorial by
double-clicking each folder in this path until the Look in box displays
the Tutorial folder.
- If
you downloaded the tutorial files from www.microsoft.com, navigate to the
folder named Fptutor\Samples, or to the folder where you placed the files.
- Double-click
the file 2000ban.
FrontPage replaces the current page banner graphic with the
custom graphic.
- Click
OK in the Modify Theme dialog box, and then click OK in the Themes dialog
box.
FrontPage displays a message asking you whether you want to
save changes to the current theme.
- Click
Yes. Enter Millennium as the title of the modified theme, and then click
OK.
FrontPage saves the modified theme and applies the new
banner to all pages.
- To
save the page, click Save on the File menu, or click the Save button on
the toolbar.
To preview the
current web in a Web browser
- On
the File menu, click Preview in Browser.
FrontPage displays the Preview in Browser dialog box. Here,
you can select from the installed Web browsers on your computer, add Web
browsers you installed after installing FrontPage, and select the Web browser
window size in which you want to preview your web.
The Preview in Browser feature loads the current page in
your Web browser, so you can see exactly how the page will appear in your
favorite Web browser before you publish your web
Note that all placeholder text and formatting marks are
hidden from view (for example, the empty vertical navigation bar on the left
side of the home page does not appear).
Organizing the Files in your Web
Now that your web contains several pages and files, you will
use Folders view to organize them. Similar to Windows Explorer, Folders view
lets you manage the files and folders in your web. You can safely rearrange the
pages and files in your web without breaking hyperlinks, page banner titles, or
navigation button labels.
In Folders view, FrontPage displays a hierarchical list of
the folders in your web on the left side of the screen. Clicking on a folder in
the Folder List displays its contents on the right side — the Contents
pane.
In the following steps, you will move all the picture files
in the Millennium Celebration Web to the Images folder FrontPage created as
part of the web.
If you were to use Windows Explorer or another file manager
to move pages and files from one folder to another, you would break the
hyperlinks between your pages and page elements. However, when you maintain
your web in Folders view, FrontPage keeps every page and hyperlink in your web
updated to keep track of the new locations of files and folders that have been
moved.
To move picture files to the Images folder
|
|
Folders icon
|
- On
the Views bar, click the Folders icon.
- FrontPage
switches to Folders view.
- In
the Folder List pane, click the top-level folder labeled
C:\My Documents\My Webs\Millennium.
- In
the Contents pane, click the Type column label.
- Clicking
on a column label sorts the files in the Contents pane by that criteria.
The first time you click a column label, the list is sorted in ascending
order; when you click it a second time, it is sorted in descending order.
The list of files is now grouped by file type, with all GIF
picture files at the top of the list, followed by HTM files (pages) in the
middle, and all JPG pictures at the bottom of the list.
- In
the Contents pane, click the first picture file (2000.gif) at the top of
the list to select it.
- Next,
while holding down SHIFT, click the last GIF picture file in the list
(sanfran.gif).
- In
Folders view, FrontPage supports all standard Windows selection shortcuts,
such as SHIFT+CLICK for selecting ranges of files, and CTRL+CLICK for
selecting noncontiguous files.
- Click
and hold the right mouse button while the pointer is over any of the
selected GIF file icons.
- Next,
drag the mouse pointer over to the Images folder in the Folder List pane.
When the Images folder is selected, release the mouse button
and click Move Here on the shortcut menu.
FrontPage displays the Rename dialog box while it is moving
the selected GIF image files to the Images folder because it is automatically
updating all hyperlinks to these files in the current web.
Repeat steps 4 through 8 with all JPG picture files,
starting with Firewks1.jpg and ending with Firewks4_small.jpg.
- In
the Contents pane, click the Name column label to arrange the remaining
list of folders and files by their name again.
You've successfully grouped all picture files in the Images
folder.
When you work with your own webs, you can group sound files,
movie clips, and other types of files in their own folders. You can create new
folders in Folders view as needed and delete the ones you no longer need.
To create a new folder
- In
the Folder List, click the folder in which you want to create a new
subfolder.
Folders can be expanded and collapsed in the Folder List to
bring their subfolders into view. Click the plus (+) and minus (-) signs next
to a folder's name to display or hide its subfolders.
- On
the File menu, point to New and then click Folder.
FrontPage creates a new folder with a temporary name.
The new folder is renamed, and you can now drag and drop
files into it.
For this tutorial, we don't need the extra folder you just
created, so you will delete it before we get ready to publish the web.
- In
the Folder List, right-click the folder you just created.
- On
the shortcut menu, click Delete.
- In
the Confirm Delete dialog box, click Yes.
FrontPage removes the folder from the web.
Generating a Site Summary
Reports view is an important tool that shows you the overall
health and condition of your web before you publish it to the World Wide Web.
You can generate custom reports about your web in up to 14 categories.
 |
Reports icon
|
- On
the Views bar, click the Reports icon.
FrontPage switches to Reports view. The default report is
the Site Summary. This report shows you the overall statistics of the pages and
files in the Millennium Celebration Web. Here are some important ones to look
at before you publish your web:
All files: you
currently have 21 files in your web, totaling approximately 275K in size. This
is the amount of space you'll need to have available on the Web server that
will host your web.
Slow pages: this category shows pages that are slow to
download at the targeted download speed. Because you created small thumbnails
of the large fireworks pictures in your online Photo Album, your web currently
doesn't have any slow pages for you to worry about.
Broken hyperlinks:
If any broken hyperlinks are reported here, double-click the Broken hyperlinks
row to view details about this category. FrontPage lists unverified hyperlinks,
such as the external hyperlinks on your Links page, and links that are broken
and do not work.
You can verify that a hyperlink still points to an active
Web site by right-clicking the link in Reports view and choosing Verify from
the shortcut menu. To fix a broken hyperlink, you must open the page it is on
and repair the URL the hyperlink points to.
To check spelling in the current web
- On
the Tools menu, click Spelling.
FrontPage displays the Spelling dialog box. Here, you can specify
whether FrontPage should check the spelling of selected pages only, or of the
entire web.
- In
the Spelling dialog box, click Entire web, and then select the Add a task
for each page with misspellings check box.
FrontPage will add a task to the Tasks list for each page on
which misspelled text is found. You will learn about Tasks view in the next
section.
- In
the Spelling dialog box, click Start to begin the spelling check.
FrontPage expands the Spelling dialog box to display the
progress of the spelling check.
When the operation has been completed, FrontPage displays
the misspelled words and the number of tasks that were added to the Tasks list
in Tasks view.
- Click
Cancel to dismiss the Spelling dialog box.
The spelling check is complete, but the corrections will not
be made until you complete the tasks in the Tasks list.
Replacing Text on Pages
The Replace command makes it easy to find and replace
content on selected pages or all pages in the current web. While you can use
the command to replace text on the current page in Page view, using it in any
web view lets you replace text in all (or selected) pages across the current
web.
You can replace any text that can be edited directly on the
page. Other text, such as page titles in page banners or text contained in
FrontPage-based components cannot be automatically replaced.
To replace text on all pages in the current web
- On
the Edit menu, click Replace.
FrontPage displays the Replace dialog box. Here, you enter
the string of text to be found and what you want to replace it with. You can
choose to replace text on all pages in the current web, or on selected pages
only.
- In
the Replace dialog box, type Welcome to my Web site in the Find what box.
- In
the Replace with box, type Thanks for visiting my Web site.
- Click
the Match case check box, and then click Find in Web.
FrontPage expands the Replace dialog box to display the
progress of the search. The search text you want to replace is found on the
home page, Index.htm.
When the operation has been completed, FrontPage displays
the number of occurrences it has found.
- Click
Add Task in the Replace dialog box.
- Click
Cancel to dismiss the Replace dialog box.
The replacement search is complete, but the actual
replacement will not occur until you complete the task in Tasks view.
To publish the Millennium Celebration Web
Close all open pages in Page view.
 |
Publish Web button
|
- On
the File menu, click Publish Web, or click the Publish Web button on the
toolbar.
FrontPage displays the Publish Web dialog box. Here, you
specify the location on the World Wide Web or your corporate intranet to which
you want to publish your web. Your Internet service provider can tell you this
information.
You need Internet access through an Internet service
provider before you can publish your web to the World Wide Web. If you want to
sign on with a Web Presence Provider that can host FrontPage-enabled webs,
click the WPPs button in the Publish Web dialog box.
In the Publish Web dialog box, enter the URL of your target
Web server, (such as http://example.microsoft.com/~myweb), and then click
Publish.
FrontPage publishes the current web from your computer to
the World Wide Web or intranet Web server you specified.
If FrontPage detects that you are publishing to a Web server
that does not support the FrontPage Server Extensions, it will publish the
current web via the FTP file transfer protocol.
If the Web server to which you are publishing your webs has
the FrontPage Server Extensions installed, your webs will have full
functionality of FrontPage-based components and Web scripts that you may have
inserted on your pages.
Publishing webs to a Web server that does not have the
FrontPage Server Extensions installed may disable some functionality contained
on your pages, such as the feedback form you added. FrontPage will display
informational messages during the publication process to alert you of such
conditions.
During the publishing process, FrontPage displays a progress
bar to indicate how much time is required to transfer your web to the target
Web server.
The speed at which FrontPage publishes your web depends on
your connection speed, as well as the number and complexity of the pages and
files in your web.
When FrontPage has successfully published your web, it
provides a hyperlink to your new Web site in the confirmation dialog box. Click
the link to open the published Web site in your Web browser.
