The Visibooks Guide To FrontPage 2003 (2006)

Table of Contents
FrontPage Basics ............................................ 1

Set up a Web site....................................................................................2
Format text............................................................................................16
Create links to new pages ...................................................................48
Create e-mail and external links .........................................................63
Insert graphics .....................................................................................70
Create a navigation system.................................................................85
Change page and link colors ..............................................................98
Layout & Navigation ................................... 109

Lay out pages using tables ...............................................................110
Create navigation bars.......................................................................132
Add subsections to site.....................................................................149
Utilities........................................................ 159
Find and Replace................................................................................160
Check spelling....................................................................................167
Change HTML code............................................................................168
Check for broken links.......................................................................176
TABLE OF CONTENTS i
Interactivity .................................................183
Employ forms..................................................................................... 184
Employ templates .............................................................................. 203
Upload sites to a Web server............................................................ 210
Advanced Layout.........................................225
Employ background graphics .......................................................... 226
Employ custom styles ....................................................................... 232
Employ spacer GIFs .......................................................................... 238
Specify page margins........................................................................ 242
Create rollover effects ....................................................................... 245
ii TABLE OF CONTENTS
FrontPage Basics
In this section, you’ll learn how to:
• Set up a Web site

• Format text
• Create links to new pages
• Create e-mail and external links
• Insert graphics
• Create a navigation system
• Change page and link colors
FRONTPAGE BASICS 1
Set up a Web site
Create a new site
1. Open Microsoft FrontPage.
It should look like this:
2 FRONTPAGE BASICS
2. On the Menu Bar, click File, then New.
3. When the New pane appears, click One page Web site.
FRONTPAGE BASICS 3
4. When the Web Site Templates window appears, make sure the
One page Web site icon is selected.
4 FRONTPAGE BASICS
5. Click the button.
FRONTPAGE BASICS 5
6. When the New Web Site Location window appears, navigate to
the My Documents folder.
7. Click the icon.
6 FRONTPAGE BASICS
8. When the New Folder window appears, type:
Dogs
in the Name box.
FRONTPAGE BASICS 7
10. In the New Web Site Location window, type:
Dogs Web Site
in the Site name box.
8 FRONTPAGE BASICS
Tip: If an alert window appears, click the button.
Then click the button.
FRONTPAGE BASICS 9
12. In the Web Site Templates window, click the button.
10 FRONTPAGE BASICS
13. Double-click index.htm to open the home page.
If the New pane is open, click the icon.
FRONTPAGE BASICS 11
Create a home page
1. In the blank page, type:
Dogs Home Page
Notice the file name of the page on the page tab: index.htm.
This is the home page of the Dogs Web site.
Home page file names
The home page of any Web site has the file name index.html. Or, in
FrontPage, index.htm.
That’s because index.htm and index.html come up automatically

when the address of a Web site or directory is typed into a browser.
For instance, if you go to www.visibooks.com, the home page

appears automatically. That’s because its file name is index.html.
If the file name of the Visibooks home page was homepage.htm,

you’d have to type www.visibooks.com/homepage.htm to get it to
appear.
12 FRONTPAGE BASICS
2. Right-click in blank space on the page.
When the menu appears, click Page Properties.
FRONTPAGE BASICS 13
3. When the Page Properties window appears, type:
A Home Page About Dogs
in the Title box.
14 FRONTPAGE BASICS
Page titles
The title of a Web page describes the page. It’s what appears in a
browser’s History list.
The title also shows up as a link when a page comes up in a search

engine. If all your pages have different, descriptive titles, they’ll be
easier for people to find.
The page title shows up in the top, or “title,” bar of the browser used
to view it. The title of this page is Dogs.
5. On the Toolbar, click the icon.
You have created a home page titled A Home Page About

Dogs.
The home page’s file name is index.htm.
It is located in a folder called Dogs in the My Documents folder.
FRONTPAGE BASICS 15
Format text
Create a style sheet
2. In the New pane, click More page templates.
16 FRONTPAGE BASICS
3. Click the Style Sheets tab.
4. Double click the Normal Style Sheet icon.
FRONTPAGE BASICS 17
A blank style sheet should appear:
5. On the Menu Bar, click Format, then Style.
18 FRONTPAGE BASICS
6. When the Style window appears, click h1 in the Styles list.
FRONTPAGE BASICS 19
8. When the Modify Style window appears, click the
button, then Font in the menu that appears.
20 FRONTPAGE BASICS
9. When the Font window appears, click Verdana in the Font list.
10. Under Font style, click Bold.
FRONTPAGE BASICS 21
12. Click the button in the Modify Style window.
22 FRONTPAGE BASICS
13. Click the button in the Style window.
FRONTPAGE BASICS 23
15. When the Save As window appears, type:
format.css
in the File name box.
24 FRONTPAGE BASICS
The style sheet should look like this:
FRONTPAGE BASICS 25
Integrate a style sheet
1. Click the page tab for index.htm.
2. On the Menu Bar, click Format, then Style Sheet Links.
Tip: If Style Sheet Links doesn’t appear in the menu, click the
double-down arrows to make the whole menu appear.
26 FRONTPAGE BASICS
3. When the Link Style Sheet window appears, click the All pages
radio button, then click the button.
4. When the Select Style Sheet window appears, click format.css.
FRONTPAGE BASICS 27
6. Click the button in the Link Style Sheet window.
7. When the alert window appears, click the button.
28 FRONTPAGE BASICS
Apply formatting
1. Click the words
Dogs Home Page
to place the cursor on the same line.
2. Click the drop-down arrow beside the Style list.
FRONTPAGE BASICS 29
3. In the menu, click Heading 1.
The text should now look like this:
30 FRONTPAGE BASICS
Change text size
1. Click the format.css tab.
FRONTPAGE BASICS 31
3. When the Style window appears, click the button.
32 FRONTPAGE BASICS
4. Click the button, then Font.
FRONTPAGE BASICS 33
5. In the Size box, type:
16pt
7. Click the button again in the Modify Style window.
34 FRONTPAGE BASICS
8. Click the button in the Style window.
format.css should now look like this:
9. Click the icon.
10. Click the index.htm tab.
FRONTPAGE BASICS 35
Change text weight
1. Make sure the cursor is at the end of the text Dogs Home
Page.
Then press the ENTER key on your keyboard to start a new

paragraph.
2. Type:
These are my favorite breeds of dog:
3. Save the page.
36 FRONTPAGE BASICS
5. In format.css, click the line beneath h1 to place your cursor
there.
7. When the Style window appears, click HTML tags in the List
drop-down menu.
FRONTPAGE BASICS 37
8. In the Styles list, click p.

button, then Font.
38 FRONTPAGE BASICS
11. When the Font window appears, click Arial in the Font list, then
10pt in the Size list.
FRONTPAGE BASICS 39
13. Click the buttons in the windows beneath.
14. Click the icon to save the style sheet.
40 FRONTPAGE BASICS
16. Highlight the words favorite breeds.
18. Click on the page to un-highlight the words.
The page should look like this:
19. Save the page.
FRONTPAGE BASICS 41
Align text
1. Click in the sentence to place the cursor there.
3. The page should look like this:
4. Click the icon.
42 FRONTPAGE BASICS
5. Click the icon.
6. Save the page.
FRONTPAGE BASICS 43
Indent text
1. Type three new paragraphs:
Chesapeake Bay Retriever
German Shepherd
Yorkshire Terrier
44 FRONTPAGE BASICS
2. Highlight all three paragraphs, then click the icon.
3. Save the page.
FRONTPAGE BASICS 45
Create lists
1. With the paragraphs highlighted, click the icon.
2. Click on blank space to un-highlight the paragraphs.
3. Save the page.
46 FRONTPAGE BASICS
Practice
1. Change the title of the home page, index.htm, to My Favorite

Dogs.
2. Change the bulleted list to a numbered list.
3. Change the numbered list back to a bulleted list.
4. Make the list items bold.
5. Save the page.
FRONTPAGE BASICS 47
Create links to new pages
Step 1: Create a new page
2. Right-click the new page.
If the Layout Tables and Cells pane is open, close it.
3. When the menu appears, click Page Properties.
48 FRONTPAGE BASICS
4. In the Title box, type:
Chesapeake Bay Retrievers
FRONTPAGE BASICS 49
chesapeake.htm
in the File name box.
50 FRONTPAGE BASICS
File names for the Web
Most Web servers are Unix- or Linux-based, which don’t deal cleanly
with spaces in file names. For instance if you name a file fido
page.html, it may show up in the URL box of the browser as
fido%20page.html.
Also, Web servers are case-sensitive, so keeping file names lower-

case eliminates a potential source of mistakes.
Make all file names in a Web site—pages, graphics and folders—

lower-case, with no spaces.
Correct file name: chesapeake.html
Incorrect: Chesapeake Bay.html
9. Type:
Chesapeake Bay Retrievers
FRONTPAGE BASICS 51
10. On the Menu Bar, click Format, then Style Sheet Links.
When the Select Style Sheet window appears, click format.css.
52 FRONTPAGE BASICS
12. Click the buttons.
This links the page to the site’s style sheet, format.css.
13. Save chesapeake.htm.
15. In format.css, click the line beneath p to place your cursor

there.
FRONTPAGE BASICS 53
17. When the Style window appears, click HTML tags, then h2.

button, then Font.
54 FRONTPAGE BASICS
20. When the Font window appears, click Verdana, then 14pt.
21. Click the buttons in the three windows.
FRONTPAGE BASICS 55
22. Save format.css.
23. Click the chesapeake.htm tab.
24. With the cursor on the first line, click Heading 2 in the Style list.
56 FRONTPAGE BASICS
25. Save the page.
Providing navigation clues with text size
The heading of the Chesapeake Bay Retriever page is one size

smaller than the heading of the home page. That’s because the CBR
page is one step down in the site hierarchy.
Dogs
Dogs Home Page
size 1 heading
font-size:16pt
Chesapeake
Chesapeake Bay Retrievers Bay
size 2 heading Retrievers
font-size:14pt
Making the heading of the Chesapeake Bay Retrievers page smaller

than the home page’s heading helps show people where they are in
the site.
FRONTPAGE BASICS 57
Step 2: Link to the new page
2. Highlight the words Chesapeake Bay Retriever.
58 FRONTPAGE BASICS
4. When the Insert Hyperlink window appears, click chesapeake.
6. Click the page.
The words Chesapeake Bay Retriever should now be a link:
FRONTPAGE BASICS 59
7. Save the page.
A browser should open with the home page inside:
60 FRONTPAGE BASICS
9. Click the Chesapeake Bay Retriever link.
It should take you to chesapeake.htm:
10. Close the browser.
FRONTPAGE BASICS 61
Practice
1. Create new pages for German Shepherds and Yorkshire

Terriers.
Page Title File Name

German Shepherd German Shepherds german.htm
Yorkshire Terrier Yorkshire Terriers yorkshire.htm
Tip: Open chesapeake.htm, then Save As with the file name

german.html. Then change its title and text.
Do the same thing to create yorkshire.htm.
2. On the home page, link the words German Shepherd and

Yorkshire Terrier to their pages.
3. On the home page, remove the words
Home Page
after
Dogs
4. Make sure the headings of the German Shepherd and Yorkshire

Terrier pages are the same size as the heading of the
Chesapeake Bay Retriever page.
5. Save all pages.
6. Click the home page’s links to make sure they work.
62 FRONTPAGE BASICS
Create e-mail and external links
Create an e-mail link
1. In the Folder List pane, double-click all the files to open them.
2. In index.htm, beneath the bulleted list, type:
For more information, contact dogs@dogs.com.
FRONTPAGE BASICS 63
3. Highlight dogs@dogs.com.
When the Insert Hyperlink window appears, click the E-mail

Address icon.
64 FRONTPAGE BASICS
5. In the E-mail address box, type:
dogs@dogs.com
It should change to this:
6. Click the button, then click on the page.
7. Save the page.
FRONTPAGE BASICS 65
Link to an external site
1. Below the email link, type:
Please also visit www.dogs.com.
2. Highlight www.dogs.com, then click the icon.
66 FRONTPAGE BASICS
3. When the Insert Hyperlink window appears, click the Existing
File or Web Page icon.
FRONTPAGE BASICS 67
4. When the Target Frame window appears, type:
new
in the Target setting box.
6. Click the next button, then save the page.
68 FRONTPAGE BASICS
8. When the page comes up in the browser, click the
www.dogs.com link.
It should open a new window with an external Web site.

(Probably PetSmart, a site linked to the dogs.com address.)
FRONTPAGE BASICS 69
Insert graphics
Capture a graphic from the Web
1. Using the browser, go to:
www.visibooks.com/books/fp2003/dogpics
2. Place your cursor on top of the picture of the Chesapeake Bay

Retriever, then click with your right mouse button.
Right
mouse
button
3. When the menu appears, click Save Picture As.
4. When the Save Picture window appears, navigate to the Dogs

Web Site folder in the Save in drop-down list.
70 FRONTPAGE BASICS
5. Double-click the images folder so it appears in the Save in drop-
down list.
This should save the graphic inside the images folder.
FRONTPAGE BASICS 71
Insert a graphic
1. Open chesapeake.htm, then place the cursor below the

heading.
3. When the Picture window appears, double-click the images

folder.
72 FRONTPAGE BASICS
4. Click the chessie graphic, then click the button.
FRONTPAGE BASICS 73
Align a graphic
1. Place the cursor in a new paragraph below the graphic, then

type:
Chesapeake Bay Retrievers love water. If you throw tennis

balls in the water, these dogs will chase them and bring
them back until your arm falls off.
74 FRONTPAGE BASICS
2. Right-click the graphic.
When the menu appears, click Picture Properties.
FRONTPAGE BASICS 75
3. In the Alignment drop-down list, click Left.
The page should now look like this:
76 FRONTPAGE BASICS
5. Save the page, then click the icon.
It should look like this in the browser:
FRONTPAGE BASICS 77
Format a graphic
1. In FrontPage, right-click the graphic again, then click Picture

Properties.
2. When the Picture Properties window appears, click the

General tab.
78 FRONTPAGE BASICS
3. In the Text box, type:
Chesapeake Bay Retriever
This assigns “alt” text to the graphic.
Alt text
“Alt” text allows visually-impaired people to know what a graphic

represents. Alt text also allows search engines to index visual
content.
4. Click the Appearance tab.
FRONTPAGE BASICS 79
5. Assign Horizontal spacing of 12, and Vertical spacing of 4.
6. Change Border thickness to 1.
80 FRONTPAGE BASICS
7. Click the button, then save the page.
The text should be aligned with the top of the graphic:
A Border of 1 creates a 1-
pixel border around the
graphic
Horizontal spacing of 12
creates a horizontal
space of 12 pixels around
the graphic that nothing
can occupy
FRONTPAGE BASICS 81
8. Click the icon.
82 FRONTPAGE BASICS
Practice
1. Go to:
www.visibooks.com/books/fp2003/dogpics
2. Save the German Shepherds graphic in the graphics folder, with

the file name shepherds.gif.
3. Save the Yorkshire Terrier graphic in the graphics folder, with

the file name yorkie.gif.
4. Insert shepherds.gif into the German Shepherds page below

the heading.
5. Insert yorkie.gif into the Yorkshire Terriers page below the

heading.
6. On the German Shepherds page, insert the text:
German Shepherds are smart dogs.
as a paragraph below the graphic.
7. On the Yorkshire Terriers page, insert the text:
Yorkshire Terriers are cute.
as a paragraph below the graphic.
FRONTPAGE BASICS 83
8. On both pages, align the text to the side of the graphic, as on the
Chesapeake Bay Retrievers page.
9. In both pages, give the graphics a Border of 1, Vertical spacing

of 4, and Horizontal spacing of 12.
10. Save both pages.
11. Close FrontPage.
84 FRONTPAGE BASICS
Create a navigation system
Link back to the home page
1. Open FrontPage, then open all pages in the Dogs site.
2. View chesapeake.htm.
3. Beneath the paragraph, type:
Home
FRONTPAGE BASICS 85
4. Highlight the word Home, then click the icon.
5. When the Insert Hyperlink window appears, click index, then

click the button.
86 FRONTPAGE BASICS
6. Click the page to de-select the text.
7. Save chesapeake.htm, then view it in the browser.
The word Home should now be a link:
FRONTPAGE BASICS 87
8. Click the Home link.
The home page should appear in the browser:
9. Click the Chesapeake Bay Retriever link.
The Chesapeake Bay Retriever page should appear in the

browser.
88 FRONTPAGE BASICS
10. In FrontPage, view german.htm.
11. Create a link back to the home page just like in the Chesapeake
Bay Retriever page:
12. On yorkshire.htm, create a link back to the home page in the

same way.
FRONTPAGE BASICS 89
Link pages to each other
1. View chesapeake.htm.
2. Following the Home link, type:
| Chesapeake Bay Retriever | German Shepherd | Yorkshire

Terrier
3. Make the words Chesapeake Bay Retriever bold:
90 FRONTPAGE BASICS
4. Link the words German Shepherd to german.htm:
5. Link the words Yorkshire Terrier to yorkshire.htm:
FRONTPAGE BASICS 91
6. Save the page and view it in the browser.
Tip: If the browser is already open and showing the page, just
click its icon to see the changes.
Showing “you are here”
A site’s navigational system should show people two things: where

they are, and where they can go.
To show people where they are, make the link corresponding to the
current page into plain text. This lets users know that if they can’t go
to that page, they must be looking at it.
Home | Chesapeake Bay Retriever | German Shepherd | Yorkshire Terrier
You are here
Making the text bold reinforces the “you are here” message.
92 FRONTPAGE BASICS
Use graphics as links
1. View index.htm.
2. Below the bulleted list of links, insert the Chesapeake Bay

Retriever, German Shepherd and Yorkshire Terrier graphics:
FRONTPAGE BASICS 93
3. Click the Chesapeake Bay Retriever graphic to select it, then
click the icon.
94 FRONTPAGE BASICS
4. When the Insert Hyperlink window appears, click chesapeake,
then the button.
5. Save the home page, then preview it in the browser.
6. Click the Chesapeake Bay Retriever graphic.
It should take you to the Chesapeake Bay Retriever page.
FRONTPAGE BASICS 95
Practice
1. View german.htm.
2. Following the Home link, type:
| Chesapeake Bay Retriever | German Shepherd | Yorkshire

Terrier
3. Make the words German Shepherd bold.
4. Link the words Chesapeake Bay Retriever and Yorkshire

Terrier to their corresponding pages.
5. Save the page.
6. Using the same system, create navigation links for the Yorkshire
Terriers page. Then save the page.
7. On the home page, link the German Shepherd graphic to the

German Shepherds page.
8. Link the Yorkshire Terrier graphic to the Yorkshire Terriers page.
96 FRONTPAGE BASICS
9. View the site in the browser.
It should look like the site at
www.visibooks.com/books/fp2003/dogs
FRONTPAGE BASICS 97
Change page and link colors
Change background color of pages
1. View format.css.
2. In format.css, click the blank line beneath h2 to place your

cursor there.
4. When the Style window appears, click HTML tags under List.
98 FRONTPAGE BASICS
5. In the Styles list, click body.

button, then Border.
FRONTPAGE BASICS 99
7. When the Borders and Shading window appears, click the
Shading tab.
8. In the Background color drop-down list, click Yellow.
100 FRONTPAGE BASICS

9. Click all the buttons.
10. Save format.css.
11. View the site’s pages.
The background color of each page should now be yellow.
FRONTPAGE BASICS 101

Change link colors
1. View format.css.
In format.css, click the blank line beneath body to place your

cursor there.
3. When the Style window appears, click HTML tags under List.
4. In the Styles list, click a.

button, then Font.
6. When the Font window appears, click Red in the Color drop-
down list.
7. Click all the buttons.
8. Save format.css.
9. View the site’s pages in the browser.
The links on each page should be red.
Consistent link colors
Link colors should be consistent throughout a Web site. If the links on

one page are red, they should be red on every page.
Learning that “red equals link” once is easier than having to figure out
the link color for each page or section of a site.

Practice: FrontPage Basics
2. In the New pane, click One page Web site.
3. When the Web Site Templates window appears, make sure the
One Page Web Site icon is selected, then click the
button.
4. When the New Web Site Location window appears, navigate to

5. Create a new folder in it called Cats.
6. Name the Web site Cats also.
11. Double-click index.htm to open the home page.

12. Title the home page:
The Wonderful World of Cats
13. Make the main heading of the home page read
The Wonderful World of Cats
14. Using a style sheet, make the main heading size 1.
Tip: Reuse another style sheet: open format.css from the Dogs
site, then save it in the Cats folder.
15. Below the main heading on the home page, insert a bulleted list:
• House Cats
• Alley Cats
• Big Cats
16. Using the style sheet, put these list items in the Arial font, with a
size of 10 points.
Tip: Format the ul style in format.css.
17. Create three new pages:
housecats.htm
alleycats.htm
bigcats.htm

18. View index.htm, and link each list item to a new page about it.
For instance, link the words House Cats to housecats.htm.
19. On each of these new pages, put a descriptive heading at the

top of the page.
For instance, the words House Cats at the top of the house cats
page.
20. Using the style sheet, put the main headings of all four pages in
the arial font:
Tip: Just edit format.css directly, replacing the word “Verdana”

with the word “Arial.”
Format the home page’s heading as heading 1.
Format the headings of the other pages as heading 2.
21. On each page, write a descriptive sentence or two in a new

paragraph below the main heading.

22. Go to:
www.visibooks.com/books/fp2003/catpics
and capture the three cat graphics there.
Put them in the images folder within the Cats folder.
23. Insert the appropriate graphic on each of the 3 pages between

the main heading and the descriptive paragraph below.
24. Align each graphic left, then specify Vertical spacing of 4 and
Horizontal spacing of 16.
25. Link each of the three pages back to the home page, and to
each other.
On each page, make the “you are here” link into bold, plain text.
26. Using the style sheet, make the background color of each page
light gray.
Tip: Edit the
body { background: #FFFF00 }
formatting in the style sheet.
The color code for light gray is #CCCCCC.

27. Preview the site in the browser.
It should look like the site at
www.visibooks.com/books/fp2003/cats
28. Close FrontPage.

Layout & Navigation
• Lay out pages using tables

• Create navigation bars
• Add subsections to site
LAYOUT & NAVIGATION 109

Lay out pages using tables
Tables and Web page layout
Almost all professional-quality Web sites are laid out using tables. A
table on a Web page has cells that contain links, graphics, and text.
The lines on this page clearly show its layout with table cells:
cell cell cell
110 LAYOUT & NAVIGATION

Create a table
1. Open FrontPage.
2. Create a new One page Web site in a folder called Travel within
3. Open the home page and title it Traveling Down South.
5. When the table grid appears, drag across the first two cells:

6. Release the mouse button.
The table on the page should look like this:
7. Click in the first cell, and type:
links
8. Click in the second cell and type:
content
9. Save the page.

Format a table
1. Right-click on the table.
When the menu appears, click Table Properties.

2. When the Table Properties window appears, set the border size
to 0:

The table should look like this:
4. Right-click on the first cell.
When the menu appears, click Cell Properties.

5. When the Cell Properties window appears, click Silver in the
Color list.
You’ll notice that the word links is right up against the edge of the
left-hand cell.

7. Add a 16-pixel margin between the edge of the cells and their
contents:
Right click on the table, then click Table Properties.
When the Table Properties window appears, change the Cell

padding to 16:
8. Now eliminate the spacing between cells:
Change the Cell spacing to 0:

Cell Padding creates a

cushion of pixels between
the edge of the cell and
Cell Spacing is
what’s inside it.
the space
between cells. In
this case, 0
pixels

Create a table-based home page
www.visibooks.com/books/fp2003/travelpic
2. Capture the graphic there (uva.gif) and save it in the images

folder.
3. In the right-hand cell on the home page, replace the word

content with the heading:
Traveling South
4. Format the heading as Heading 1.
5. Insert the graphic beneath the heading.
6. Under the graphic, add the following paragraph:
If you've got a couple of weeks for vacation, you might want to visit
the South. Richmond, Williamsburg, and Charleston are all
beautiful cities.

7. In the left-hand cell, replace the word links with the names of this
site’s main sections:
Richmond
Williamsburg
Charleston

9. Right-click the first cell, then click Cell Properties.

10. When the Cell Properties window appears, change the Vertical
alignment to Top.
11. Check the Specify width checkbox.

12. Click the In percent radio button, then type:
20
in the width box.
14. Right-click the second cell, then click Cell Properties.

15. Change its Width to 80 percent.

It should now look like this:

Create new table-based pages
1. On the Menu Bar, click the icon.
2. View index.htm.
On the Menu Bar, click Edit, then Select All.
3. Click Edit, then Copy.

4. Click the new_page_1.htm tab, then click Edit, then Paste.
5. Save the new page as richmond.htm.
6. Title the new page Richmond, VA.
www.visibooks.com/books/fp2003/travelpic/richpic
8. Capture the Richmond, Virginia graphic there (capitol.jpg) and

save it in the images folder.
9. Replace the Traveling South heading with one that reads:
Richmond, Virginia

10. Format the heading as Heading 2.
11. Replace the home page graphic with the Richmond graphic.
12. Beneath the graphic, insert a new paragraph:
Richmond is the capital of Virginia.
13. Add the word Home below Charleston in the left-hand cell:

14. Save richmond.htm and view it in the browser.

Practice
1. Create pages for Williamsburg and Charleston just like the

Richmond page.
Get the graphic and text for the Williamsburg page at:
www.visilbooks.com/books/fp2003/travelpic/willpic
Get the Charleston page’s graphic and text at:
www.visibooks.com/books/fp2003/travelpic/charlpic
2. Using the words Richmond, Williamsburg, Charleston, and Home

in the left-hand cell of each page, link all the pages in this Web
site to each other.
Tip: Don’t forget to transform the link that shows “You Are Here”
into bold, plain text.
3. Insert the text and graphics in their appropriate pages.
4. Align all graphics to the left.
Give them Vertical spacing of 4 pixels and Horizontal spacing

of 12 pixels.
Give each graphic appropriate Alt text.

5. When you’re done, preview the site in the browser.
It should look and work like the one at:
www.visibooks.com/books/fp2003/travel

Create navigation bars
Create a navigation bar for a home page
1. On the Menu Bar, click File, then Close Site.
The Travel Web site should close.
2. Using Windows Explorer, or My Computer, create a folder called

Vacation within the My Documents folder.
3. In FrontPage, create a new One page Web site within the

Vacation folder.
4. Open the home page and title it Traveling West On Vacation.
6. Drag across the first three cells:

A three-cell table should appear on the page:
7. Right-click the table, then click Table Properties.
8. When the Table Properties window appears, specify a Width of

100%, Border Size of 0, Cell padding of 4, and Cell spacing of
0:

10. In the table’s first cell, type:
California
11. In the second cell, type:
The Rockies
12. In the third cell, type:
The Midwest

13. Center the contents of each cell:
14. Right-click the first cell, then click Cell Properties.
15. Specify a width of 33% and a Background Color of Silver.

16. Make the center cell 34% wide.
Give it a Silver background.
17. Make the last cell 33% wide, with a Silver background.
18. Open format.css from the Dogs Web site.

19. Save the style sheet as west.css in the Vacation Web site.
20. In west.css, change the page background to white:
body { background-color: #FFFFFF }
21. View the home page, index.htm, in the Vacation Web site, and
link it to the west.css style sheet.
The home page should look like this:

22. Below the table, type:
Traveling West
23. Format the text as Heading 1.
24. Below the heading, add a new paragraph:
When you go West, be sure to visit the sights of California,

the natural wonders of the Rockies, and the cities of the
Midwest.


Create navigation bar for a main section page
1. Create a new page.
Save it as california.htm.
2. Title it Vacationing in California.
3. View index.htm, then highlight the table.
4. Click Edit, then Copy.
5. View california.htm, then click Edit, then Paste.

6. Click in the last cell of the table.
Tip: Do not highlight the text.
7. Click Table, Insert, then Cell.

A new cell should appear:
8. Right-click the new cell, then click Cell Properties.
Specify a width of 25%, and a background color of Silver.
9. Change the cell widths of the other three cells to 25%.
Tip: There are now four cells in the table, and their widths must
add up to 100%. That means 25% per cell.
10. Cut the text The Midwest from the last cell and paste it in the
third cell.
Center it within the cell:

11. Right-click the first cell, then change its background color to
Yellow.
Tip: Changing the color of the California cell on the California

page shows “You are here.”
12. In the last cell, type:
Home

13. Link the word Home to index.htm.
14. Link the page to the style sheet west.css.

15. Save california.htm and view it in the browser.
16. View index.htm and link the word California to california.htm.
17. Save index.htm.

Practice
1. Create a new blank page and save it with the file name
midwest.htm.
It will be The Midwest page, but leave it blank for right now.
2. Create a new page with file name rockies.htm.
This is The Rockies page.
Title it Nature in the Rocky Mountains.
3. Copy the navigation table from california.htm and paste it into

rockies.htm.
4. Change the “You are here” yellow background color from the
California cell to The Rockies cell.
Color the California cell Silver.
5. Link the words California, The Midwest and Home to their

respective pages.

6. When you’re done, preview the page in the browser.
7. Repeat this process with the California and Midwest pages so

they’ve got functioning navigation bars that show “you are here.”
8. View index.htm, and in the navigation bar, link the words The
Rockies and The Midwest to their respective pages.
9. Make all “you are here” text that corresponds to the current page
bold. (Example: make the words The Rockies bold on The
Rockies page.)
10. Link both pages to the style sheet west.css.

11. Save the pages, then preview the site in the browser.
It should look like the site at:
www.visibooks.com/books/fp2003/vacation

Add subsections to site
Insert a table for content and subsection links
1. View california.htm.
2. Below the navigation bar table, add another table with two cells:
3. Right-click the table and give it these attributes:
Width = 100%
Border Size = 0
Cell padding = 16
Cell Spacing = 0
4. Make the first cell 25% wide and the second cell 75% wide.

5. In the left-hand cell, put the subsections for the main California
section:
The Golden Gate Bridge
Highway 101
Big Sur
6. In the right-hand cell, put the heading:
Places to visit in California
Format it as Heading 2.
7. Below the heading, put the paragraph :
When in California, be sure to see the Golden Gate bridge,

Highway 101, and Big Sur.

8. Change the Vertical alignment of both cells to Top.

Create subsection pages
1. Create new blank pages for subsections The Golden Gate

Bridge, Highway 101 and Big Sur:
Page Title File Name
The Golden Seeing the Golden goldengate.htm

Gate Bridge Gate Bridge
Highway 101 Driving Highway highway101.htm

101
Big Sur Staying in Big Sur bigsur.htm
Tip: If you can’t see all the tabs across the top of the window,
click the X icon.
2. Copy the tables from california.htm and paste them into

goldengate.htm.
3. On goldengate.htm, un-bold the word California in the

navigation bar.
Tip: Highlight the word, then click the icon.
4. Change the heading to read:
Seeing the Golden Gate Bridge
Then format the heading as Heading 3.

5. Link the page to the style sheet west.css.
6. View west.css, then click the blank line beneath the existing
tags to place your cursor there.
7. Format the h3 style as Verdana, 12pt.
8. Save west.css.
9. View goldengate.htm.
Below the heading, change the paragraph to read:
The Golden Gate Bridge isn't golden--it's actually orange.
10. Link the words California, Highway 101, and Big Sur to their
respective pages.

Leave The Golden Gate Bridge as plain text to show “you are
here.”
11. Save goldengate.htm, then view it in the browser.
Consistent page layout
Copying tables from one page and pasting them into new pages
ensures that all pages share the same layout.
This consistency makes site navigation easier: no matter which page

in the site is being viewed, a person knows where the page’s links
and content will be.

Practice
1. View california.htm.
2. Link the words The Golden Gate Bridge, Highway 101 and Big
Sur to their respective pages.
3. Save california.htm.
4. Open goldengate.htm and copy both tables.
5. Paste these tables into highway101.htm.
6. Link highway101.htm to the style sheet west.css.
7. On highway101.htm, link the words The Golden Gate Bridge

to goldengate.htm.
8. Right-click the text Highway 101, then click Hyperlink

Properties.
When the window appears, click the button.

9. Change the Highway 101 page’s heading and descriptive text
beneath it so it looks like this:
10. Make the layout and navigation of bigsur.htm consistent with

the Golden Gate Bridge and Highway 101 pages.
Heading:
Staying in Big Sur
Paragraph:
There are many excellent hotels right on the ocean in Big

Sur.
Tip: Don’t forget to link the page to west.css.
11. Save all pages and view the site in the browser.
It should look and work like:
www.visibooks.com/books/fp2003/vacation2

Practice: Layout & Navigation
1. In the Vacation2 site, lay out the Rockies page using tables so it
looks like the California page.
Heading for the Rockies page:
Nature in the Rocky Mountains
2. Create pages for three subsections of The Rockies main

section:
streams.htm
snow.htm
rocks.htm
3. Make sure that these pages are linked and laid out just like the
Golden Gate Bridge, Highway 101 and Big Sur pages.
Page Heading
streams.htm Mountain Streams
snow.htm Snow in the Rockies
rocks.htm Rock Formations
4. Repeat this process with the Midwest section of the site:
Page Heading
midwest.htm Cities of the Midwest

Subsections in the Midwest section:
Page Heading
stlouis.htm St. Louis
chicago.htm Chicago
desmoines.htm Des_Moines
5. On the St. Louis page, link to the external Web site

www.stlouis.com.
Paragraph for St. Louis page:
Find out what’s going on in St. Louis at www.stlouis.com.
Link to
www.stlouis.com
6. When you’re done, view the site in the browser.
It should look and function like the one at:
www.visibooks.com/books/fp2003/vacation3
7. Close FrontPage.

Utilities
• Find and replace

• Check spelling
• Change HTML code
• Check for broken links
UTILITIES 159
Find and Replace
1. Open FrontPage.
2. On the Menu Bar, click File, then Open Site.
160 UTILITIES
3. When the Open Site window appears, navigate to the Travel
Web site in the My Documents folder.
4. Open the home page, index.htm.
UTILITIES 161
5. On the Menu Bar, click Edit, then Replace.
Tip: If Replace doesn’t appear in the menu, click the double

down arrows.
162 UTILITIES
6. When the Find and Replace window appears, type:
Richmond
in the Find what box.
7. In the Replace with box, type:
River City
UTILITIES 163
8. Under Find where, click the All pages option.
164 UTILITIES
The Find and Replace window should now look like this:
UTILITIES 165
12. View each page of the Travel site.
Richmond should be replaced with River City.
166 UTILITIES
Check spelling
1. View the home page.
3. When you’re finished checking the spelling of the site, click File,
then Close on the Menu Bar.
UTILITIES 167
Change HTML code
Changing HTML
HTML stands for Hypertext Markup Language, a set of instructions

that tells the browser how to display pages and text. For instance,
surrounding a block of text in <p>, or paragraph, tags makes the text
a paragraph.
In the Web’s early days, people used to have to write HTML to create
Web pages, but now programs like FrontPage write HTML for you.
However, sometimes you may want to bypass FrontPage’s point-and-
click interface to work directly with the HTML code it generates.
1. Open the Vacation Web site.
2. View the home page, index.htm.
168 UTILITIES
3. Click the icon at the bottom of the window:
UTILITIES 169
170 UTILITIES
4. In front of the words Traveling West, type:
<i>
FrontPage will automatically insert a closing </i> tag as well:
UTILITIES 171
5. Cut the closing </i> tag, and paste it after the words
Traveling West:
6. Save the page.
7. Click the icon.
172 UTILITIES
8. Click the icon again.
9. In the <table> tag, change its width=”100%” attribute to:
width=”50%”
UTILITIES 173
11. Click the icon, then change the table width back to
100%:
174 UTILITIES
12. Remove the <i> tags from around the words Traveling
West:
UTILITIES 175
Check for broken links
Check internal links
1. On the Menu Bar, click View, then Hyperlinks.
176 UTILITIES
The window should look like this:
UTILITIES 177
Any broken links within a site will show up as broken lines:
Broken
link
In the sample Web site above, the link from the home page to
california.htm shows up as broken.
178 UTILITIES
Check external links
1. On the Menu Bar, click View, Reports, then Site Summary.
2. In the Site Summary pane, click External Hyperlinks.
UTILITIES 179
3. When the Reports View window appears, click the
button.
If you have Internet access, the www.stlouis.com link will be

verified as OK:
4. Close the site.
180 UTILITIES
Practice: Utilities
1. Open the Dogs Web site.
2. Throughout the site, replace all instances of the phrase

“Yorkshire Terriers” with the word “Yorkies.”
3. Check the spelling of all pages in the site.
4. In the HTML source code of the home page, change the border
of each graphic to 1.
Tip: Find the <img> tags in the home page’s HTML code. Then
change border=”0” to border=”1” and save the page.
5. Check the site for broken internal links.
6. When finished, close the Dogs Web site, then close FrontPage.
UTILITIES 181
182 UTILITIES
Interactivity
• Employ forms
• Employ templates
• Upload sites to a Web server
INTERACTIVITY 183
Employ forms
Create a form
1. Open FrontPage, then open the Vacation site.
2. Create a new page, and save it with the file name infoform.htm.
3. Title the page Request for Information.
4. Link it to the west.css style sheet.
5. On the page, type:
Fill out the following form to get more information about

traveling West:
6. Press the ENTER key on your keyboard to place the cursor in a

new paragraph.
184 INTERACTIVITY
7. On the Menu Bar, click Insert, then Form, then Form.
Tip: The cursor should be blinking in front of the button. If

it’s not, use the arrow keys on your keyboard to place it there.
INTERACTIVITY 185
8. On the Toolbar, click the icon, then drag down and across to
select four rows of two cells each:
186 INTERACTIVITY
9. Right-click the table, then click Table Properties.
Make its width 50%, give it Cell padding of 4, and a Border

Size of 1.
INTERACTIVITY 187
10. In the top three left-hand cells, type:
Name:
Address:
Email:
188 INTERACTIVITY
13. Click in the top right-hand cell to place the cursor there.
14. On the Menu Bar, click Insert, Form, then Textbox.
A textbox should appear in the cell:
INTERACTIVITY 189
15. Insert textbox input fields in the table cells next to Address and
Email as well.
16. Right-click on the first textbox, then click Form Field Properties.
190 INTERACTIVITY
17. When the Text Box Properties window appears, type:
name
in the Name box.
19. Right-click on the second textbox, then click Form Field

Properties.
INTERACTIVITY 191
20. When the Text Box Properties window appears, type:
address
in the Name box.
then click the button.
21. Use the same process to assign the name
email
to the third textbox in the form.
192 INTERACTIVITY
It should now look like this:
INTERACTIVITY 193
24. Drag-and-drop the button into the last row’s right-hand
cell.
25. Click the button, then press the DELETE key on your
keyboard.
194 INTERACTIVITY
26. Right click the button, then click Form Field Properties.
27. When the Push Button Properties window appears, type:
Send me information
in the Value/label box.
INTERACTIVITY 195
196 INTERACTIVITY
30. Align the text in the left-hand cells to the right.
31. Make the left-hand cell in the first row 5% wide, and the right-
hand cell in the first row 45% wide.
Tip: By specifying the width of cells in the first row, the cells in
the rows beneath will assume the same widths.
32. Change the table’s Border Size to 0.
INTERACTIVITY 197
35. View index.htm.
Add a new paragraph linked to infoform.htm:
Get more information about Western Travel mailed to you.
37. Click the linked sentence.
It should bring up the page with the form.
198 INTERACTIVITY
Make the form work
1. View infoform.htm.
2. Click the icon.
In the <form> tag, highlight all the attributes:
<form method="POST" action="--WEBBOT-SELF--"

OnSubmit="location.href='_derived/nortbots.htm'
;return false;" webbot-onSubmit>
highlight the tags below as well:
<input TYPE="hidden" NAME="VTI-
GROUP" VALUE="0">

3. Press the DELETE key on your keyboard.
INTERACTIVITY 199
4. In the <form> tag, add a method:
<form method=”post”>
Tip: There are two methods used in forms, post and get.
Post is used to send information to the server, get to get
information from it.
5. Add an action:
<form method=”post”
action=”http://www.yourdomain.com/cgi-
bin/formmail.pl”>
6. Save the page.
Making a form work
To make a form work, an action must be assigned to it.
Consult with your Web server administrator to specify what action

you should assign.
The action above tells the form to post its data to a program called
formmail.pl at yourdomain.com.
The formmail.pl program might take the form data visitors submit
and e-mail it to you.
200 INTERACTIVITY
Practice
1. Create a new page in the Vacation site with the file name
favoritesform.htm.
2. Title it My Favorite Places.
3. Insert a form, then insert a table with four rows and two cells in
each row.
4. Fill the cells with the text and form objects seen below:
Drop-
down box
Option
buttons
5. Put these values in the drop-down box:
California
The Rockies
The Midwest
INTERACTIVITY 201
6. When finished, save the page and preview it in the browser.
202 INTERACTIVITY
Employ templates
FrontPage templates
Creating a page from a template is like copying the layout from a

page and pasting it into a new one. Unlike cutting and pasting,
templates can be set so that some features can’t be changed.
This helps keep things consistent when different people are working
on the same site. Also, after a site is finished, the pages created from
a template can be changed just by changing the template itself.
FrontPage templates enable better control of layout and content, and

streamline site management.
Create a template
1. Open the California page, california.htm.
2. Change the page to look like this, with Subsections in the left-
hand cell of the lower table, and Heading/Text in the right-hand
cell:
INTERACTIVITY 203
3. On the Menu Bar, click File, then Save As.
Main Section
in the File name textbox.
5. In the Save as type drop-down menu, click Front Page

Template.
204 INTERACTIVITY
7. When the Save As Template window appears, give it the title:
Main section page template
8. Check the Save Template in Current Web Site checkbox, then

click the button.
INTERACTIVITY 205
It’s now saved in the _sharedtemplates folder, within the
pages/main section.tem folder, under the file name main
section.htm.
206 INTERACTIVITY
Create a new page from a template
2. In the New pane, click More page templates.
3. When the Page Templates window appears, click the My

Templates tab.
INTERACTIVITY 207
4. Double-click the Main Section Page Template icon.
A new page should appear:
208 INTERACTIVITY
5. Modify the page so it looks like below:
6. Save the page as california2.htm.
When the Save Embedded Files window appears, click the

button.
INTERACTIVITY 209
Upload sites to a Web server
WS_FTP
FTP stands for File Transfer Protocol, a way to transfer files between
computers over the Internet. If you have trouble configuring
FrontPage to upload pages to a Web server, use an FTP program.
Using an FTP program is the most straightforward way to upload a

Web site to a Web server. WS_FTP is the most popular FTP program
used to upload and download Web pages.
The Home version is free to use for 30 days, and can be downloaded
at www.ipswitch.com.
1. Download WS_FTP Home and install it.
210 INTERACTIVITY
2. Open the program.
The Connection Wizard window should appear:
INTERACTIVITY 211
3. When the Site Name screen appears, type the name of your
upload process, such as:
Upload my Web site
in the Site Name box.
212 INTERACTIVITY
5. When the Server Address screen appears, type the name or IP
address of your Web server in the Server Address box.
It can be something like:
www.visibooks.com
washington.patriot.net
or
207.176.7.217
INTERACTIVITY 213
Tip: Contact your Web server administrator to find out the Host
Name or IP Address of your Web server.
The Web server administrator can also supply your User ID and
Password.
7. Type your User Name and Password.
214 INTERACTIVITY
When the Connection Type screen appears, leave it set at FTP.
INTERACTIVITY 215
The Connection Wizard window should now look something like
this:
216 INTERACTIVITY
9. When the Tip of the Day window appears, uncheck the Show
tips at startup checkbox, then click the button.
WS_FTP should connect to your Web server:
Your Web server

computer
INTERACTIVITY 217
10. In the left-hand My Computer pane, double-click the icon to
move up in the file hierarchy.
11. Double-click it until you see the folder that contains your Web
site.
12. Double-click the folder containing your Web site to open it.
You should see all the pages in your Web site listed.
218 INTERACTIVITY
13. In the right-hand pane with the name of your Web site, double-
click on the public_html folder, html folder, or the folder that
contains your Web pages on the server.
You should now see the contents of your Web site on the server:
14. To send your Web pages to the Web server, highlight them, then
click the button.
Tip: If there are already pages on your Web server, the new
pages you send will replace the old versions with the same file
name.
INTERACTIVITY 219
Practice: Interactivity
Create a new home page and site
1. Create a new home page titled World Dances, and save it within
the HTML Files folder in a new folder called Dance.
2. Make the home page for the site look like this:
Get the graphics and text for this page at:
www.visibooks.com/books/fp2003/dancing
3. At the bottom of this and every other page in the site, put an e-
mail link to info@worlddance.org.
220 INTERACTIVITY
Create main section pages
1. Link the words American, Latin, and European in the

navigation bar to new main section pages on American, Latin,
and European dance, respectively:
american.htm
latin.htm
european.htm
Get the images and text for these pages at:

www.visibooks.com/books/fp2003/dancing
The American dance page should look like this:
2. Make the Latin and European pages look consistent with the
American dance page.
INTERACTIVITY 221
Create subsection pages
1. On the American dance page, link the words Lindy Hop and
Foxtrot to new subsection pages on those dances.
The Lindy Hop page should look like this:
Get the images and text for this and the other subsection pages
at: www.visibooks.com/books/fp2003/dancesub
2. Make the Foxtrot page look consistent with the Lindy Hop page.
3. Create the subsection pages Tango, Merengue, and Salsa for

the Latin section.
4. Create the subsection pages Waltz and Contra Dancing for the
European section.
222 INTERACTIVITY
Creating forms
1. On the home page, insert a form that looks like this:
2. When you’re done, preview the whole Web site in the browser.
It should look like the site at:

www.visibooks.com/books/fp2003/worlddancing
3. Close FrontPage.
INTERACTIVITY 223
224 INTERACTIVITY
Advanced Layout
• Employ background images

• Employ custom styles
• Employ spacer GIFs
• Specify page margins
• Create rollover effects
ADVANCED LAYOUT 225

Employ background graphics
1. Open FrontPage.
2. Using Windows Explorer or My Computer, create a new folder in

the My Documents folder called Advanced Layout.
3. In FrontPage, create a new One page Web site in the Advanced

Layout folder.
4. Open the home page, index.htm.
226 ADVANCED LAYOUT

5. Insert a one-row, two-cell table on the page with these attributes:
Width: 100%
Border Size: 0
Cell padding: 18
Cell spacing: 0
ADVANCED LAYOUT 227

6. Title the page Advanced Layout and save it.
7. Color both cells in the table dark blue.
Tip: In the Color drop-down menu in the Cell Properties

window, click More Colors.
Use color #000099.
8. Make the first cell 10% wide, and the second cell 90% wide.
www.visibooks.com/books/fp2003/advancedlayout/pics
and save techtool.gif in the images folder within the Advanced

Layout site.
228 ADVANCED LAYOUT

10. Insert techtool.gif in the left-hand cell.
11. Go to:
and save bkgd.gif in the images folder.
ADVANCED LAYOUT 229

12. Make it the background of the right-hand cell.
Tip: Use Cell Properties, then click the Use background

picture checkbox.
13. In the right-hand cell, type:
The Magazine for People Who Like Gadgets
14. Format the text as Heading 1.
15. Open west.css from the Vacation site, then save it in the
Advanced Layout site as layout.css.
16. In layout.css, change the formatting for the h1 tag so it’s in the
Arial font, 14 points, bold, and colored white.
230 ADVANCED LAYOUT

17. Save layout.css.
18. Link the home page to layout.css.
Tip: Notice the line towards the bottom of the right cell where
bkgd.gif begins repeating. It repeats because background
graphics tile to fill all available space in a cell.
The cell is 136 pixels tall: 100 pixels for techtool.gif, plus 36 for
cell padding (18 pixels at the top and bottom of
techtool.gif). bkgd.gif is only 123 pixels tall; therefore, there’s
13 pixels of space left to fill.
To fix this, use an image editing program like Photoshop,

Fireworks or Paint Shop pro to make the background image 136
pixels tall.
ADVANCED LAYOUT 231

Employ custom styles
1. Below the first table, insert a three-cell table with a width of
100% and cell padding of 4.
Make both its border and cell_ spacing 0.
2. Make the cells equal width and color them black.
3. In the first cell, type:
Laptops
4. In the second cell:
Cell Phones
5. In the third:
PDAs
232 ADVANCED LAYOUT

6. Center the text within each cell.
7. View layout.css, then click the blank line beneath the existing
9. When the Style window appears, click the button.
ADVANCED LAYOUT 233

10. When the New Style window appears, type:
.navbar
in the Name (selector) box.
Tip: Make sure a period (.) precedes the word navbar.
234 ADVANCED LAYOUT

11. Click the button, then Font.
Specify the Arial font, 12pt, and the color white.
12. Click the buttons, then save layout.css.
13. View the home page.
14. Click in the first cell of the lower table.
ADVANCED LAYOUT 235

15. In the Style list, click .navbar.
16. Apply the .navbar style to the text in the other two cells.
236 ADVANCED LAYOUT

ADVANCED LAYOUT 237

Employ spacer GIFs
Why use spacer GIFs?
GIF graphics can be used as spacers to stretch table cells to an

exact width. If they’re transparent, they remain invisible regardless of
the cell’s background color.
A spacer GIF is used in the exercise below. It keeps the width of the
left-hand cell constant, regardless of the size or resolution of the
screen used to view it.
1. In the browser, go to:
and save spacer.gif in the images folder.
2. In index.htm, below the two tables, insert a third table just like
the top table.
238 ADVANCED LAYOUT

3. Insert spacer.gif in the left-hand cell.
4. Right-click the graphic (it’s transparent, so right-click in the

middle of the cell).
When the menu appears, click Picture Properties.
5. When the Picture Properties window appears, uncheck the

Keep aspect ratio checkbox, then give it a Width of 100 pixels
and Height of 1 pixel.
Tip: Most spacer GIFs are 1x1 pixel, which load very quickly
online. This one started out as 50x50 to make it easier to see
and save.
ADVANCED LAYOUT 239

6. Change the background color of the cell containing spacer.gif to
yellow.
7. Change the background color of the right-hand cell to white.
8. Enter paragraphs in the right-hand cell so the page looks like this
when viewed in the browser:
Tip: You can format the text like above by highlighting it, then
clicking the Font and Size drop-down lists on the Toolbar.
It’s not as sound as using a style sheet for formatting, but as a

quick-and-dirty method, this will work.
240 ADVANCED LAYOUT

9. Set the monitor to a higher resolution, or make the browser
window wider if you can.
Notice how the left-hand cells in the top and bottom tables stay
the same width, regardless of the width of the window used to
view them.
ADVANCED LAYOUT 241

Specify page margins
1. View layout.css.
2. In formatting for the <body> tag, add the attributes
margin-top:0
margin-right:0
margin-bottom:0
margin-left:0
body { background-color:#FFFFFF; margin-top:0;

margin-right:0; margin-bottom:0; margin-left:0
}
3. Specify a background color of dark blue (color code #000099) for

the page itself:
body { background-color:#000099; margin-top:0;

margin-right:0; margin-bottom:0; margin-left:0
}
4. Save layout.css.
242 ADVANCED LAYOUT

5. View index.htm.
ADVANCED LAYOUT 243

244 ADVANCED LAYOUT

Create rollover effects
1. View layout.css, then click the blank line beneath the existing
When the Style window appears, click HTML tags.
ADVANCED LAYOUT 245

3. Click the a:hover style, then click the button.
4. In the Modify Style window, click the button, then

Font.
5. In the Font window, click Bold in the Font Style list.
246 ADVANCED LAYOUT

6. Click the buttons, then save layout.css.
7. View index.htm.
8. Highlight the word Laptops, then click the icon.
9. When the Insert Hyperlink window appears, click the Create

New Document icon.
10. In the Name of new document box, type:
Laptops
ADVANCED LAYOUT 247

12. View and save index.htm, then view it in the browser.
248 ADVANCED LAYOUT

13. Place your cursor on the Laptops link.
It should turn bold:
14. View layout.css and add italics to the hover formatting:
a:hover {font-weight:bold; font-style:italic}
15. Eliminate underlining from the links:
Add the text-decoration:none attribute to the a formatting:
a {color: #FF0000; text-decoration:none}
ADVANCED LAYOUT 249

16. Save layout.css, then view index.htm in the browser.
17. Place your cursor over the Laptops link.
250 ADVANCED LAYOUT

Practice: Advanced Layout
1. In the navigation table (the one with Laptops, Cell Phones and
PDAs), insert two additional cells between the existing cells.
2. Put | characters (on the same key as the backslash \ character

on your keyboard) in the two new cells (they surround the cell
that contains Cell Phones).
3. Change the width of the center cell to 32%.
4. Give the cells with the | characters a width of 1%, and center the
| characters within the cells.
5. Color the | characters white.
6. Link the words Cell Phones and PDAs to new pages named
phones.htm and pdas.htm, respectively.
7. In layout.css, modify the link (a) color so it’s white.
ADVANCED LAYOUT 251

It should look like the one at:
www.visibooks.com/books/fp2003/advlayout
252 ADVANCED LAYOUT

Where to Get Visibooks
If you liked using this book, and would like to use more like it, visit:
www.visibooks.com
Visibooks offers more than 30 titles on subjects such as:
• Computer Basics
• Microsoft Office
• Desktop Linux
• OpenOffice.org
• Web Site Layout
• Web Graphics
• Web Programming
Visibooks: the simplest way to learn

and teach computer subjects.
www.visibooks.com

The Visibooks Guide To FrontPage 2003 (2006)

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

The Visibooks Guide To FrontPage 2003 (2006)

Загружено:

Авторское право:

Доступные форматы

Table of Contents

FrontPage Basics ............................................ 1

Layout & Navigation ................................... 109

• Set up a Web site

1. Open Microsoft FrontPage.

It should look like this:

7. Click the icon.

in the Name box.

9. Click the button.

Dogs Web Site

in the Site name box.

11. Click the button.

Then click the button.

If the New pane is open, click the icon.

1. In the blank page, type:

Dogs Home Page

This is the home page of the Dogs Web site.

Home page file names

That’s because index.htm and index.html come up automatically

For instance, if you go to www.visibooks.com, the home page

If the file name of the Visibooks home page was homepage.htm,

When the menu appears, click Page Properties.

A Home Page About Dogs

in the Title box.

4. Click the button.

The title also shows up as a link when a page comes up in a search

5. On the Toolbar, click the icon.

You have created a home page titled A Home Page About

The home page’s file name is index.htm.

It is located in a folder called Dogs in the My Documents folder.

1. On the Menu Bar, click File, then New.

2. In the New pane, click More page templates.

4. Double click the Normal Style Sheet icon.

5. On the Menu Bar, click Format, then Style.

7. Click the button.

10. Under Font style, click Bold.

12. Click the button in the Modify Style window.

14. On the Toolbar, click the icon.

in the File name box.

The style sheet should look like this:

1. Click the page tab for index.htm.

2. On the Menu Bar, click Format, then Style Sheet Links.

4. When the Select Style Sheet window appears, click format.css.

6. Click the button in the Link Style Sheet window.

7. When the alert window appears, click the button.

1. Click the words

Dogs Home Page

to place the cursor on the same line.

2. Click the drop-down arrow beside the Style list.

The text should now look like this:

4. On the Toolbar, click the icon.

1. Click the format.css tab.

2. On the Menu Bar, click Format, then Style.

6. Click the button.

7. Click the button again in the Modify Style window.

format.css should now look like this:

9. Click the icon.

10. Click the index.htm tab.

The text should now look like this:

Then press the ENTER key on your keyboard to start a new

These are my favorite breeds of dog:

3. Save the page.

4. Click the format.css tab.