the visibooks guide to frontpage 2003 (2006)
TRANSCRIPT
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
1/256
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
2/256
TABLE OF CONTENTS
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
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
3/256
TABLE OF CONTENTSii
Interactivity.................................................183Employ forms..................................................................................... 184Employ templates .............................................................................. 203Upload sites to a Web server............................................................ 210
Advanced Layout.........................................225Employ background graphics .......................................................... 226Employ custom styles....................................................................... 232Employ spacer GIFs .......................................................................... 238Specify page margins........................................................................ 242Create rollover effects....................................................................... 245
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
4/256
FRONTPAGE BASICS 1
FrontPage Basics
In this section, youll 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
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
5/256
FRONTPAGE BASICS2
Set up a Web site
Create a new site
1. Open Microsoft FrontPage.It should look like this:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
6/256
FRONTPAGE BASICS 3
2. On the Menu Bar, click File, then New.
3. When the New pane appears, click One page Web site.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
7/256
FRONTPAGE BASICS4
4. When the Web Site Templates window appears, make sure theOne page Web siteicon is selected.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
8/256
FRONTPAGE BASICS 5
5. Click the button.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
9/256
FRONTPAGE BASICS6
6. When the New Web Site Location window appears, navigate tothe My Documents folder.
7. Click the icon.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
10/256
FRONTPAGE BASICS 7
8. When the New Folderwindow appears, type:Dogsin theNamebox.
9. Click the button.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
11/256
FRONTPAGE BASICS8
10. In the New Web Site Location window, type:Dogs Web Site
in the Site name box.
11. Click the button.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
12/256
FRONTPAGE BASICS 9
Tip:If an alert window appears, click the button.
Then click the button.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
13/256
FRONTPAGE BASICS10
12. In the Web Site Templates window, click the button.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
14/256
FRONTPAGE BASICS 1
13. Double-click index.htm to open the home page.
If the New pane is open, click the icon.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
15/256
FRONTPAGE BASICS12
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 DogsWeb site.
Home page file names
The home page of any Web site has the file name index.html
.Or, in
FrontPage, index.htm.
Thats because index.htm and index.html come up automaticallywhen 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. Thats because its file name is index.html.
If the file name of the Visibooks home page was homepage.htm,youd have to type www.visibooks.com/homepage.htm to get it toappear.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
16/256
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
17/256
FRONTPAGE BASICS14
3. When the Page Properties window appears, type:A Home Page About Dogs
in the Title box.
4. Click the button.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
18/256
FRONTPAGE BASICS 15
5. On the Toolbar, click the icon.
You have created a home page titled A Home Page AboutDogs.
The home pages file name is index.htm.
It is located in a folder called Dogs in the My Documents folder.
Page titles
The title of a Web page describes the page. Its what appears in abrowsers History list.
The title also shows up as a link when a page comes up in a searchengine. If all your pages have different, descriptive titles, theyll beeasier for people to find.
The page title shows up in the top, or title, bar of the browser usedto view it. The title of this page is Dogs.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
19/256
FRONTPAGE BASICS16
Format text
Create a style sheet
1. On the Menu Bar, click File, then New.
2. In the Newpane, click More page templates.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
20/256
FRONTPAGE BASICS 17
3. Click the Style Sheets tab.
4. Double click the Normal Style Sheet icon.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
21/256
FRONTPAGE BASICS18
A blank style sheet should appear:
5. On the Menu Bar, click Format, then Style.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
22/256
FRONTPAGE BASICS 19
6. When the Stylewindow appears, click h1 in the Styles list.
7. Click the button.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
23/256
FRONTPAGE BASICS20
8. When the Modify Style window appears, click thebutton, then Font in the menu that appears.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
24/256
FRONTPAGE BASICS 2
9. When the Font window appears, click Verdana in the Font list.
10. Under Font style, click Bold.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
25/256
FRONTPAGE BASICS22
11. Click the button.12. Click the button in the Modify Style window.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
26/256
FRONTPAGE BASICS 23
13. Click the button in the Style window.
14. On the Toolbar, click the icon.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
27/256
FRONTPAGE BASICS24
15. When the Save As window appears, type:format.css
in the File name box.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
28/256
FRONTPAGE BASICS 25
16. Click the button.The style sheet should look like this:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
29/256
FRONTPAGE BASICS26
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 doesnt appear in the menu, click the
double-down arrows to make the whole menu appear.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
30/256
FRONTPAGE BASICS 27
3. When the Link Style Sheet window appears, click the All pagesradio button, then click the button.
4. When the Select Style Sheet window appears, click format.css
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
31/256
FRONTPAGE BASICS28
5. Click the button.6. Click the button in the Link Style Sheet window.7. When the alert window appears, click the button.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
32/256
FRONTPAGE BASICS 29
Apply formatting
1. Click the wordsDogs Home Page
to place the cursor on the same line.
2. Click the drop-down arrow beside the Style list.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
33/256
FRONTPAGE BASICS30
3. In the menu, click Heading 1.
The text should now look like this:
4. On the Toolbar, click the icon.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
34/256
FRONTPAGE BASICS 3
Change text size
1. Click the format.css tab.
2. On the Menu Bar, click Format, then Style.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
35/256
FRONTPAGE BASICS32
3. When the Stylewindow appears, click the button.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
36/256
FRONTPAGE BASICS 33
4. Click the button, then Font.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
37/256
FRONTPAGE BASICS34
5. In the Size box, type:16pt
6. Click the button.7. Click the button again in the Modify Style window.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
38/256
FRONTPAGE BASICS 35
8. Click the button in the Stylewindow.format.css should now look like this:
9. Click the icon.10. Click the index.htm tab.
The text should now look like this:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
39/256
FRONTPAGE BASICS36
Change text weight
1. Make sure the cursor is at the end of the text Dogs HomePage.
Then press the ENTERkey on your keyboard to start a newparagraph.
2. Type:These are my favorite breeds of dog:
3. Save the page.4. Click the format.css tab.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
40/256
FRONTPAGE BASICS 37
5. In format.css, click the line beneathh1 to place your cursorthere.
6. On the Menu Bar, click Format, then Style.7. When the Style window appears, click HTML tags in the List
drop-down menu.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
41/256
FRONTPAGE BASICS38
8. In the Styles list, click p.
9. Click the button.10. When the Modify Style window appears, click the
button, then Font.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
42/256
FRONTPAGE BASICS 39
11. When the Font window appears, click Arial in the Font list, then10pt in the Size list.
12. Click the button.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
43/256
FRONTPAGE BASICS40
13. Click the buttons in the windows beneath.format.css should now look like this:
14. Click the icon to save the style sheet.15. Click the index.htm tab.
It should look like this:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
44/256
FRONTPAGE BASICS 4
16. Highlight the words favorite breeds.
17. On the Toolbar, click the icon.
18. Click on the page to un-highlight the words.The page should look like this:
19. Save the page.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
45/256
FRONTPAGE BASICS42
Align text
1. Click in the sentence to place the cursor there.2. On the Toolbar, click the icon.
3. The page should look like this:
4. Click the icon.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
46/256
FRONTPAGE BASICS 43
The page should look like this:
5. Click the icon.
The page should look like this:
6. Save the page.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
47/256
FRONTPAGE BASICS44
Indent text
1. Type three new paragraphs:Chesapeake Bay Retriever
German Shepherd
Yorkshire Terrier
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
48/256
FRONTPAGE BASICS 45
2. Highlight all three paragraphs, then click the icon.
3. Save the page.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
49/256
FRONTPAGE BASICS46
Create lists
1. With the paragraphs highlighted, click the icon.
2. Click on blank space to un-highlight the paragraphs.The page should look like this:
3. Save the page.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
50/256
FRONTPAGE BASICS 47
Practice1. 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.
It should look like this:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
51/256
FRONTPAGE BASICS48
Create links to new pages
Step 1: Create a new page
1. On the Toolbar, click the icon.
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.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
52/256
FRONTPAGE BASICS 49
4. In the Title box, type:Chesapeake Bay Retrievers
5. Click the button.6. On the Toolbar, click the icon.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
53/256
FRONTPAGE BASICS50
7. When the Save As window appears, type:chesapeake.htm
in the File name box.
8. Click the button.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
54/256
FRONTPAGE BASICS 5
9. Type:
Chesapeake Bay Retrievers
File names for the Web
Most Web servers are Unix- or Linux-based, which dont deal cleanlywith spaces in file names. For instance if you name a file fidopage.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 sitepages, graphics and folderslower-case, with no spaces.
Correct file name:chesapeake.html
Incorrect:Chesapeake Bay.html
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
55/256
FRONTPAGE BASICS52
10. On the Menu Bar, click Format, then Style Sheet Links.
11. Click the button.When the Select Style Sheet window appears, click format.css.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
56/256
FRONTPAGE BASICS 53
12. Click the buttons.This links the page to the sites style sheet, format.css.
13. Save chesapeake.htm.14. Click the format.css tab.15. In format.css, click the line beneathp to place your cursor
there.
16. On the Menu Bar, click Format, then Style.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
57/256
FRONTPAGE BASICS54
17. When the Style window appears, click HTML tags, then h2.
18. Click the button.19. When the Modify Style window appears, click the
button, then Font.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
58/256
FRONTPAGE BASICS 55
20. When the Fontwindow appears, click Verdana, then 14pt.
21. Click the buttons in the three windows.format.css should now look like this:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
59/256
FRONTPAGE BASICS56
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.
The page should look like this:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
60/256
FRONTPAGE BASICS 57
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. Thats because the CBRpage is one step down in the site hierarchy.
Dogs Home Pagesize 1 headingfont-size:16pt
Chesapeake Bay Retrieverssize 2 headingfont-size:14pt
Making the heading of the Chesapeake Bay Retrievers page smallerthan the home pages heading helps show people where they are inthe site.
Dogs
ChesapeakeBay
Retrievers
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
61/256
FRONTPAGE BASICS58
Step 2: Link to the new page
1. Click the index.htm tab.2. Highlight the words Chesapeake Bay Retriever.
3. On the Toolbar, click the icon.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
62/256
FRONTPAGE BASICS 59
4. When the Insert Hyperlink window appears, click chesapeake.
5. Click the button.6. Click the page.
The words Chesapeake Bay Retrievershould now be a link:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
63/256
FRONTPAGE BASICS60
7. Save the page.8. On the Toolbar, click the icon.
A browser should open with the home page inside:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
64/256
FRONTPAGE BASICS 6
9. Click the Chesapeake Bay Retrieverlink.It should take you to chesapeake.htm:
10. Close the browser.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
65/256
FRONTPAGE BASICS62
Practice
1. Create new pages for German Shepherds and YorkshireTerriers.
Page Title File NameGerman Shepherd German Shepherds german.htm
Yorkshire Terrier Yorkshire Terriers yorkshire.htm
Tip:Openchesapeake.htm, thenSave As with the file name
german.html. Then change its title and text.
Do the same thing to createyorkshire.htm.
2. On the home page, link the words German Shepherd andYorkshire Terrierto their pages.
3. On the home page, remove the wordsHome Page
after
Dogs
4. Make sure the headings of the German Shepherd and YorkshireTerrier pages are the same size as the heading of theChesapeake Bay Retriever page.
5. Save all pages.6. Click the home pages links to make sure they work.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
66/256
FRONTPAGE BASICS 63
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 [email protected].
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
67/256
FRONTPAGE BASICS64
3. Highlight [email protected].
4. On the Toolbar, click the icon.When the Insert Hyperlink window appears, click the E-mailAddressicon.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
68/256
FRONTPAGE BASICS 65
5. In the E-mail address box, type:[email protected] should change to this:
6. Click the button, then click on the page.It should look like this:
7. Save the page.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
69/256
FRONTPAGE BASICS66
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.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
70/256
FRONTPAGE BASICS 67
3. When the Insert Hyperlink window appears, click the ExistingFile or Web Page icon.
Then click the button.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
71/256
FRONTPAGE BASICS68
4. When the Target Frame window appears, type:newin the Target setting box.
5. Click the button.6. Click the next button, then save the page.7. On the Toolbar, click the icon.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
72/256
FRONTPAGE BASICS 69
8. When the page comes up in the browser, click thewww.dogs.com link.
It should open a new window with an external Web site.(Probably PetSmart, a site linked to the dogs.com address.)
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
73/256
FRONTPAGE BASICS70
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 BayRetriever, then click with your right mouse button.
3. When the menu appears, click Save Picture As.4. When the Save Picturewindow appears, navigate to the DogsWeb Sitefolder in the Save in drop-down list.
Rightmousebutton
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
74/256
FRONTPAGE BASICS 7
5. Double-click the images folder so it appears in the Save in drop-down list.
6. Click the button.This should save the graphic inside the images folder.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
75/256
FRONTPAGE BASICS72
Insert a graphic
1. Open chesapeake.htm, then place the cursor below theheading.
2. On the Toolbar, click the icon.
3. When the Picture window appears, double-click theimagesfolder.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
76/256
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
77/256
FRONTPAGE BASICS74
Align a graphic
1. Place the cursor in a new paragraph below the graphic, thentype:
Chesapeake Bay Retrievers love water. If you throw tennisballs in the water, these dogs will chase them and bringthem back until your arm falls off.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
78/256
FRONTPAGE BASICS 75
2. Right-click the graphic.When the menu appears, click Picture Properties.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
79/256
FRONTPAGE BASICS76
3. In the Alignmentdrop-down list, click Left.
4. Click the button.The page should now look like this:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
80/256
FRONTPAGE BASICS 77
5. Save the page, then click the icon.It should look like this in the browser:
6. Close the browser.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
81/256
FRONTPAGE BASICS78
Format a graphic
1. In FrontPage, right-click the graphic again, then click PictureProperties.
2. When the Picture Properties window appears, click theGeneral tab.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
82/256
FRONTPAGE BASICS 79
3. In the Text box, type:Chesapeake Bay Retriever
This assigns alt text to the graphic.
4. Click the Appearance tab.
Alt text
Alt text allows visually-impaired people to know what a graphicrepresents. Alt text also allows search engines to index visualcontent.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
83/256
FRONTPAGE BASICS80
5. Assign Horizontal spacing of 12, and Vertical spacing of 4.
6. Change Border thickness to 1.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
84/256
FRONTPAGE BASICS 8
7. Click the button, then save the page.The text should be aligned with the top of the graphic:
Horizontal spacing of 12
creates a horizontalspace of 12 pixels aroundthe graphic that nothing
can occupy
A Border of 1 creates a 1-pixel border around the
graphic
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
85/256
FRONTPAGE BASICS82
8. Click the icon.The page should look like this:
9. Close the browser.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
86/256
FRONTPAGE BASICS 83
Practice
1. Go to:www.visibooks.com/books/fp2003/dogpics
2. Save the German Shepherds graphic in the graphics folder, withthe file name shepherds.gif.
3. Save the Yorkshire Terrier graphic in the graphics folder, withthe file name yorkie.gif.
4. Insert shepherds.gifinto the German Shepherds page belowthe heading.5. Insert yorkie.gifinto 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.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
87/256
FRONTPAGE BASICS84
8. On both pages, align the text to the side of the graphic, as on theChesapeake Bay Retrievers page.
9. In both pages, give the graphics a Borderof 1, Vertical spacingof 4, and Horizontal spacing of 12.
10. Save both pages.11. Close FrontPage.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
88/256
FRONTPAGE BASICS 85
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
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
89/256
FRONTPAGE BASICS86
4. Highlight the word Home, then click the icon.
5. When the Insert Hyperlink window appears, click index, thenclick the button.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
90/256
FRONTPAGE BASICS 87
6. Click the page to de-select the text.It should look like this:
7. Save chesapeake.htm, then view it in the browser.The word Home should now be a link:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
91/256
FRONTPAGE BASICS88
8. Click the Home link.The home page should appear in the browser:
9. Click the Chesapeake Bay Retrieverlink.
The Chesapeake Bay Retriever page should appear in the
browser.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
92/256
FRONTPAGE BASICS 89
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 thesame way.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
93/256
FRONTPAGE BASICS90
Link pages to each other
1. View chesapeake.htm.2. Following the Home link, type:
| Chesapeake Bay Retriever | German Shepherd | YorkshireTerrier
3. Make the words Chesapeake Bay Retrieverbold:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
94/256
FRONTPAGE BASICS 9
4. Link the words German Shepherd to german.htm:
5. Link the wordsYorkshire Terrierto yorkshire.htm:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
95/256
FRONTPAGE BASICS92
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.
It should look like this:
Showing you are here
A sites navigational system should show people two things: wherethey are, and where they can go.
To show people where they are, make the link corresponding to thecurrent page into plain text. This lets users know that if they cant 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.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
96/256
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
97/256
FRONTPAGE BASICS94
3. Click the Chesapeake Bay Retriever graphic to select it, thenclick the icon.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
98/256
FRONTPAGE BASICS 95
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.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
99/256
FRONTPAGE BASICS96
Practice
1. View german.htm.2. Following the Home link, type:
| Chesapeake Bay Retriever | German Shepherd | YorkshireTerrier
3. Make the words German Shepherd bold.4. Link the words Chesapeake Bay RetrieverandYorkshire
Terrierto 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 theGerman Shepherds page.
8. Link the Yorkshire Terrier graphic to the Yorkshire Terriers page.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
100/256
FRONTPAGE BASICS 97
9. View the site in the browser.It should look like the site at
www.visibooks.com/books/fp2003/dogs
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
101/256
FRONTPAGE BASICS98
Change page and link colors
Change background color of pages
1. View format.css.2. In format.css, click the blank line beneathh2 to place your
cursor there.
3. On the Menu Bar, click Format, then Style.4.
When the Style window appears, click HTML tags under List.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
102/256
FRONTPAGE BASICS 99
5. In the Styles list, click body.Then click the button.
6. When the Modify Style window appears, click thebutton, then Border.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
103/256
FRONTPAGE BASICS100
7. When the Borders and Shading window appears, click theShading tab.
8. In the Background colordrop-down list, clickYellow.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
104/256
FRONTPAGE BASICS 10
9. Click all the buttons.10. Save format.css.11. View the sites pages.
The background color of each page should now be yellow.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
105/256
FRONTPAGE BASICS102
Change link colors
1. View format.css.
In format.css, click the blank line beneath body to place your
cursor there.
2. On the Menu Bar, click Format, then Style.
3. When the Style window appears, click HTML tags under List.
4. In the Styles list, click a.
Then click the button.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
106/256
FRONTPAGE BASICS 10
5. When the Modify Style window appears, click thebutton, 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 sites 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 onone 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.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
107/256
FRONTPAGE BASICS104
Practice: FrontPage Basics
1. On the Menu Bar, click File, then New.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 thebutton.
4. When the New Web Site Location window appears, navigate tothe My Documents folder.5. Create a new folder in it called Cats.6. Name the Web site Cats also.7. Click the button.8. When the alert window appears, click the button.9. Click the button.10. Click the button.11. Double-click index.htm to open the home page.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
108/256
FRONTPAGE BASICS 10
12. Title the home page:The Wonderful World of Cats
13. Make the main heading of the home page readThe Wonderful World of Cats
14. Using a style sheet, make the main heading size 1.Tip:Reuse another style sheet: openformat.cssfrom theDogs
site, then save it in theCatsfolder.
15. Below the main heading on the home page, insert a bulleted list:House CatsAlley CatsBig Cats
16.
Using the style sheet, put these list items in the Arial font, with asize of 10 points.
Tip:Format theulstyle informat.css.17. Create three new pages:
housecats.htm
alleycats.htmbigcats.htm
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
109/256
FRONTPAGE BASICS106
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 thetop of the page.
For instance, the words House Cats at the top of the house catspage.
20. Using the style sheet, put the main headings of all four pages inthe arial font:
Tip:Just editformat.css directly, replacing the word Verdanawith the word Arial.
Format the home pages 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 newparagraph below the main heading.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
110/256
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
111/256
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
112/256
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
113/256
LAYOUT & NAVIGATION110
Lay out pages using tables
Tables and Web page layout
Almost all professional-quality Web sites are laid out using tables. Atable 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
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
114/256
LAYOUT & NAVIGATION 11
Create a table
1. Open FrontPage.
2. Create a new One page Web sitein a folder called Travelwithinthe My Documents folder.
3. Open the home page and title it Traveling Down South.
4. On the Toolbar, click the icon.
5. When the table grid appears, drag across the first two cells:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
115/256
LAYOUT & NAVIGATION112
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.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
116/256
LAYOUT & NAVIGATION 113
Format a table
1. Right-click on the table.When the menu appears, click Table Properties.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
117/256
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
118/256
LAYOUT & NAVIGATION 115
3. Click the button.The table should look like this:
4. Right-click on the first cell.When the menu appears, click Cell Properties.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
119/256
LAYOUT & NAVIGATION116
5. When the Cell Properties window appears, click Silverin theColorlist.
6. Click the button.The table should look like this:
Youll notice that the word links is right up against the edge of theleft-hand cell.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
120/256
LAYOUT & NAVIGATION 117
7. Add a 16-pixel margin between the edge of the cells and theircontents:
Right click on the table, then click Table Properties.
When the Table Properties window appears, change theCellpadding to 16:
8. Now eliminate the spacing between cells:Change the Cell spacing to 0:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
121/256
LAYOUT & NAVIGATION118
9. Click the button.10. Save the page and view it in the browser.
It should look like this:
Cell Padding creates acushion of pixels betweenthe edge of the cell and
whats inside it.Cell Spacing is
the spacebetween cells. In
this case, 0pixels
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
122/256
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
123/256
LAYOUT & NAVIGATION120
7. In the left-hand cell, replace the word links with the names of thissites main sections:
RichmondWilliamsburg
CharlestonThe page should look like this:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
124/256
LAYOUT & NAVIGATION 12
8. Save the page and view it in the browser.It should look like this:
9. Right-click the first cell, then click Cell Properties.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
125/256
LAYOUT & NAVIGATION122
10. When the Cell Properties window appears, change the Verticalalignment to Top.
11. Check the Specify width checkbox.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
126/256
LAYOUT & NAVIGATION 123
12. Click the In percent radio button, then type:20
in the width box.
13. Click the button.14. Right-click the second cell, then click Cell Properties.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
127/256
LAYOUT & NAVIGATION124
15. Change its Width to 80 percent.
16. Click the button.The page should look like this:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
128/256
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
129/256
LAYOUT & NAVIGATION126
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.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
130/256
LAYOUT & NAVIGATION 127
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.
7. Using the browser, go to:
www.visibooks.com/books/fp2003/travelpic/richpic
8. Capture the Richmond, Virginia graphic there (capitol.jpg) andsave it in the images folder.
9. Replace the Traveling South heading with one that reads:
Richmond, Virginia
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
131/256
LAYOUT & NAVIGATION128
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:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
132/256
LAYOUT & NAVIGATION 129
14. Save richmond.htm and view it in the browser.The page should look like this:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
133/256
LAYOUT & NAVIGATION130
Practice
1. Create pages for Williamsburg and Charleston just like theRichmondpage.
Get the graphic and text for the Williamsburg page at:
www.visilbooks.com/books/fp2003/travelpic/willpic
Get the Charleston pages graphic and text at:
www.visibooks.com/books/fp2003/travelpic/charlpic
2. Using the words Richmond, Williamsburg, Charleston, and Homein the left-hand cell of each page, link all the pages in this Website to each other.
Tip: Dont 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 spacingof 12 pixels.
Give each graphic appropriate Alt text.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
134/256
LAYOUT & NAVIGATION 13
5. When youre done, preview the site in the browser.It should look and work like the one at:
www.visibooks.com/books/fp2003/travel
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
135/256
LAYOUT & NAVIGATION132
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 calledVacation within the My Documents folder.
3. In FrontPage, create a new One page Web site within theVacation folder.
4. Open the home page and title it Traveling West On Vacation.
5. On the Toolbar, click the icon.
6. Drag across the first three cells:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
136/256
LAYOUT & NAVIGATION 133
A three-cell table should appear on the page:
7. Right-click the table, then click Table Properties.8. When the Table Propertieswindow appears, specify a Width of
100%, Border Size of 0, Cell padding of 4, and Cell spacing of
0:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
137/256
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
138/256
LAYOUT & NAVIGATION 135
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 Colorof Silver.
Then click the button.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
139/256
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
140/256
LAYOUT & NAVIGATION 137
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, andlink it to the west.css style sheet.
The home page should look like this:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
141/256
LAYOUT & NAVIGATION138
22. Below the table, type:Traveling West
23. Format the text as Heading 1.It should look like this:
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 theMidwest.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
142/256
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
143/256
LAYOUT & NAVIGATION140
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.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
144/256
LAYOUT & NAVIGATION 14
6. Click in the last cell of the table.
Tip:Do not highlight the text.
7. Click Table, Insert, then Cell.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
145/256
LAYOUT & NAVIGATION142
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 thethird cell.
Center it within the cell:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
146/256
LAYOUT & NAVIGATION 143
11. Right-click the first cell, then change its background color toYellow.
Tip:Changing the color of the California cell on the California
page shows You are here.
12. In the last cell, type:Home
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
147/256
LAYOUT & NAVIGATION144
13. Link the word Home to index.htm.
14. Link the page to the style sheet west.css.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
148/256
LAYOUT & NAVIGATION 145
15. Save california.htm and view it in the browser.The page should look like this:
16. View index.htm and link the word California to california.htm.17. Save index.htm.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
149/256
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
150/256
LAYOUT & NAVIGATION 147
6. When youre done, preview the page in the browser.It should look like this:
7. Repeat this process with the California and Midwest pages sotheyve got functioning navigation bars that show you are here.
8. View index.htm, and in the navigation bar, link the words TheRockies and The Midwest to their respective pages.
9.Make all you are here text that corresponds to the current pagebold. (Example: make the words The Rockies bold on TheRockies page.)
10. Link both pages to the style sheet west.css.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
151/256
LAYOUT & NAVIGATION148
11. Save the pages, then preview the site in the browser.It should look like the site at:
www.visibooks.com/books/fp2003/vacation
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
152/256
LAYOUT & NAVIGATION 149
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 = 0Cell padding = 16Cell Spacing = 0
4. Make the first cell 25% wide and the second cell 75% wide.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
153/256
LAYOUT & NAVIGATION150
5. In the left-hand cell, put the subsections for the main Californiasection:
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/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
154/256
LAYOUT & NAVIGATION 15
8. Change the Vertical alignment of both cells to Top.
9. Save the page and view it in the browser.It should look like this:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
155/256
LAYOUT & NAVIGATION152
Create subsection pages
1. Create new blank pages for subsections The Golden GateBridge, Highway 101 and Big Sur:
Page Title File NameThe Golden
Gate Bridge
Seeing the Golden
Gate Bridge
goldengate.htm
Highway 101 Driving Highway101
highway101.htm
Big Sur Staying in Big Sur bigsur.htm
Tip:If you cant see all the tabs across the top of the window,
click the icon.
2. Copy the tables from california.htm and paste them intogoldengate.htm.
3. On goldengate.htm, un-bold the word Californiain thenavigation 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.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
156/256
LAYOUT & NAVIGATION 153
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 Surto theirrespective pages.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
157/256
LAYOUT & NAVIGATION154
Leave The Golden Gate Bridge as plain text to show you arehere.
11. Save goldengate.htm, then view it in the browser.It should look like this:
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 pagein the site is being viewed, a person knows where the pages linksand content will be.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
158/256
LAYOUT & NAVIGATION 155
Practice
1. View california.htm.2. Link the words The Golden Gate Bridge, Highway 101 and Big
Surto 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 HyperlinkProperties.
When the window appears, click the button.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
159/256
LAYOUT & NAVIGATION156
9. Change the Highway 101 pages heading and descriptive textbeneath it so it looks like this:
10. Make the layout and navigation of bigsur.htm consistent withthe Golden Gate Bridge and Highway 101 pages.
Heading:
Staying in Big SurParagraph:
There are many excellent hotels right on the ocean in Big
Sur.
Tip:Dont forget to link the page towest.css.
11. Save all pages and view the site in the browser.It should look and work like:
www.visibooks.com/books/fp2003/vacation2
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
160/256
LAYOUT & NAVIGATION 157
Practice: Layout & Navigation
1. In the Vacation2 site, lay out the Rockies page using tables so itlooks like the California page.
Heading for the Rockies page:
Nature in the Rocky Mountains
2. Create pages for three subsections of The Rockies mainsection:
streams.htm
snow.htm
rocks.htm
3. Make sure that these pages are linked and laid out just like theGolden Gate Bridge, Highway 101 and Big Sur pages.
Page Headingstreams.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 Headingmidwest.htm Cities of the Midwest
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
161/256
LAYOUT & NAVIGATION158
Subsections in the Midwestsection:Page Headingstlouis.htm St. Louis
chicago.htm Chicago
desmoines.htm Des_Moines
5. On the St. Louis page, link to the external Web sitewww.stlouis.com.
Paragraph for St. Louis page:
Find out whats going on in St. Louis at www.stlouis.com.
6. When youre done, view the site in the browser.It should look and function like the one at:
www.visibooks.com/books/fp2003/vacation37. Close FrontPage.
Link towww.stlouis.com
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
162/256
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
163/256
UTILITIES160
Find and Replace
1. Open FrontPage.2. On the Menu Bar, click File, then Open Site.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
164/256
UTILITIES 16
3. When the Open Site window appears, navigate to the TravelWeb site in the My Documents folder.
Then click the button.
4. Open the home page, index.htm.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
165/256
UTILITIES162
5. On the Menu Bar, click Edit, then Replace.
Tip:IfReplace doesnt appear in the menu, click the doubledown arrows.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
166/256
UTILITIES 163
6. When the Find and Replace window appears, type:Richmond
in the Find what box.
7.In the Replace with box, type:
River City
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
167/256
UTILITIES164
8. Under Find where, click the All pages option.
9. Click the button.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
168/256
UTILITIES 165
10. When the alert window appears, click the button.The Find and Replace window should now look like this:
11. Click the button.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
169/256
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
170/256
UTILITIES 167
Check spelling
1. View the home page.2. On the Toolbar, click the icon.
3. When youre finished checking the spelling of the site, click File,then Close on the Menu Bar.
4. When the alert window appears, click the button.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
171/256
UTILITIES168
Change HTML code
1. Open the Vacation Web site.2. View the home page, index.htm.
Changing HTML
HTML stands for Hypertext Markup Language, a set of instructionsthat tells the browser how to display pages and text. For instance,surrounding a block of text in
, or paragraph, tags makes the text
a paragraph.
In the Webs early days, people used to have to write HTML to createWeb pages, but now programs like FrontPage write HTML for you.
However, sometimes you may want to bypass FrontPages point-and-click interface to work directly with the HTML code it generates.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
172/256
UTILITIES 169
3. Click the icon at the bottom of the window:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
173/256
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
174/256
UTILITIES 17
4. In front of the words Traveling West, type:
FrontPage will automatically insert a closing tag as well:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
175/256
UTILITIES172
5. Cut the closing tag, and paste it after the wordsTraveling West:
6. Save the page.7. Click the icon.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
176/256
UTILITIES 173
The page should now look like this:
8. Click the icon again.9. In the tag, change its width=100% attribute to:
width=50%
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
177/256
UTILITIES174
10. Save the page, then click the icon.The page should look like this:
11. Click the icon, then change the table width back to100%:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
178/256
UTILITIES 175
12. Remove the tags from around the words TravelingWest:
13. Save the page, then click the icon.The page should look like this:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
179/256
UTILITIES176
Check for broken links
Check internal links
1. On the Menu Bar, click View, then Hyperlinks.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
180/256
UTILITIES 177
The window should look like this:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
181/256
UTILITIES178
Any broken links within a site will show up as broken lines:
In the sample Web site above, the link from the home page tocalifornia.htm shows up as broken.
Brokenlink
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
182/256
UTILITIES 179
Check external links
1. On the Menu Bar, click View, Reports, then Site Summary.
2. In the Site Summary pane, click External Hyperlinks.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
183/256
UTILITIES180
3. When the Reports View window appears, click thebutton.
If you have Internet access, the www.stlouis.com link will beverified as OK:
4. Close the site.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
184/256
UTILITIES 181
Practice: Utilities
1. Open the DogsWeb 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 thetags in the home pages HTML code. Then
changeborder=0toborder=1and save the page.
5. Check the site for broken internal links.6. When finished, close the Dogs Web site, then close FrontPage.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
185/256
UTILITIES182
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
186/256
INTERACTIVITY 183
Interactivity
In this section, youll learn how to:
Employ forms Employ templates Upload sites to a Web server
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
187/256
INTERACTIVITY184
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 abouttraveling West:
6. Press the ENTER key on your keyboard to place the cursor in anew paragraph.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
188/256
INTERACTIVITY 185
7. On the Menu Bar, clickInsert, then Form, then Form.
The page should look like this:
Tip:The cursor should be blinking in front of the button. I
its not, use the arrow keys on your keyboard to place it there.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
189/256
INTERACTIVITY186
8. On the Toolbar, click the icon, then drag down and across toselect four rows of two cells each:
The page should look like this:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
190/256
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
191/256
INTERACTIVITY188
10. In the top three left-hand cells, type:Name:
Address:
Email:
11. Save the page and view it in the browser.It should look like this:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
192/256
INTERACTIVITY 189
12. Close the browser.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:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
193/256
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
194/256
INTERACTIVITY 19
17. When the Text Box Properties window appears, type:name
in the Namebox.
18. Click the button.19. Right-click on the second textbox, then click Form Field
Properties.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
195/256
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
196/256
INTERACTIVITY 193
22. Save the page and view it in the browser.It should now look like this:
23. Close the browser.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
197/256
INTERACTIVITY194
24. Drag-and-drop the button into the last rows right-handcell.
25. Click the button, then press the DELETE key on yourkeyboard.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
198/256
INTERACTIVITY 195
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.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
199/256
INTERACTIVITY196
28. Click the button.The page should now look like this:
29. Save the page and view it in the browser.It should look like this:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
200/256
INTERACTIVITY 197
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 inthe rows beneath will assume the same widths.
32. Change the tables Border Size to 0.33. Save the page and view it in the browser.
It should look like this:
34. Close the browser.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
201/256
INTERACTIVITY198
35. View index.htm.Add a new paragraph linked to infoform.htm:
Get more information about Western Travel mailed to you.
36. Save the page and view it in the browser.37. Click the linked sentence.
It should bring up the page with the form.
38. Close the browser.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
202/256
INTERACTIVITY 199
Make the form work
1. View infoform.htm.2. Click the icon.
In the tag, highlight all the attributes:
highlight the tags below as well:
3. Press the DELETE key on your keyboard.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
203/256
INTERACTIVITY200
4. In the tag, add a method:
Tip:There are two methods used in forms,postandget.Post is used to send information to the server,getto get
information from it.5. Add an action:
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 calledformmail.pl at yourdomain.com.
The formmail.pl program might take the form data visitors submit
and e-mail it to you.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
204/256
INTERACTIVITY 201
Practice
1. Create a new page in the Vacation site with the file namefavoritesform.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:
5. Put these values in the drop-down box:CaliforniaThe RockiesThe Midwest
Drop-down box
Optionbuttons
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
205/256
INTERACTIVITY202
6. When finished, save the page and preview it in the browser.It should look like this:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
206/256
INTERACTIVITY 203
Employ templates
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:
FrontPage templates
Creating a page from a template is like copying the layout from apage and pasting it into a new one. Unlike cutting and pasting,templates can be set so that some features cant 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 froma template can be changed just by changing the template itself.
FrontPage templates enable better control of layout and content, and
streamline site management.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
207/256
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
208/256
INTERACTIVITY 205
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, thenclick the button.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
209/256
INTERACTIVITY206
Its now saved in the_sharedtemplates folder, within the
pages/main section.tem folder, under the file name main
section.htm.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
210/256
INTERACTIVITY 207
Create a new page from a template
1. On the Menu Bar, click File, then New.2. In the New pane, click More page templates.
3. When the Page Templates window appears, click the MyTemplates tab.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
211/256
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
212/256
INTERACTIVITY 209
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.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
213/256
INTERACTIVITY210
Upload sites to a Web server
1. Download WS_FTP Home and install it.
WS_FTP
FTP stands for File Transfer Protocol, a way to transfer files betweencomputers over the Internet. If you have trouble configuringFrontPage to upload pages to a Web server, use an FTP program.
Using an FTP program is the most straightforward way to upload aWeb 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.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
214/256
INTERACTIVITY 21
2. Open the program.The Connection Wizardwindow should appear:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
215/256
INTERACTIVITY212
3. When the Site Name screen appears, type the name of yourupload process, such as:
Upload my Web sitein the Site Name box.
4. Click the button.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
216/256
INTERACTIVITY 213
5. When the Server Address screen appears, type the name or IPaddress 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
6. Click the button.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
217/256
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
218/256
INTERACTIVITY 215
When the Connection Type screen appears, leave it set at FTP.
Then click the button.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
219/256
INTERACTIVITY216
The Connection Wizardwindow should now look something likethis:
8. Click the button.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
220/256
INTERACTIVITY 217
9. When the Tip of the Day window appears, uncheck theShowtips at startupcheckbox, then click the button.
WS_FTP should connect to your Web server:
Yourcomputer
Web server
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
221/256
INTERACTIVITY218
10. In the left-hand My Computerpane, double-click the icon tomove up in the file hierarchy.
11. Double-click it until you see the folder that contains your Website.
12. Double-click the folder containing your Web site to open it.You should see all the pages in your Web site listed.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
222/256
INTERACTIVITY 219
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 thatcontains 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, thenclick the button.
Tip:If there are already pages on your Web server, the newpages you send will replace the old versions with the same file
name.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
223/256
INTERACTIVITY220
Practice: Interactivity
Create a new home page and site
1. Create a new home page titled World Dances, and save it withinthe 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 [email protected].
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
224/256
INTERACTIVITY 22
Create main section pages
1. Link the words American, Latin, and European in thenavigation bar to new main section pages on American, Latin,and European dance, respectively:
american.htmlatin.htmeuropean.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 theAmerican dance page.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
225/256
INTERACTIVITY222
Create subsection pages
1. On the American dance page, link the words Lindy Hop andFoxtrot 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 theEuropean section.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
226/256
INTERACTIVITY 223
Creating forms
1. On the home page, insert a form that looks like this:
2. When youre 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.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
227/256
INTERACTIVITY224
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
228/256
ADVANCED LAYOUT 225
Advanced Layout
In this section, youll learn how to:
Employ background images Employ custom styles Employ spacer GIFs Specify page margins Create rollover effects
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
229/256
ADVANCED LAYOUT226
Employ background graphics
1. Open FrontPage.2. Using Windows Explorer or My Computer, create a new folder inthe 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.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
230/256
ADVANCED LAYOUT 227
5. Insert a one-row, two-cell table on the page with these attributes:Width: 100%Border Size: 0Cell padding: 18Cell spacing: 0
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
231/256
ADVANCED LAYOUT228
6. Title the page Advanced Layout and save it.
7. Color both cells in the table dark blue.
Tip:In theColordrop-down menu in theCell Properties
window, clickMore Colors.
Use color #000099.
8. Make the first cell 10% wide, and the second cell 90% wide.
The table should look like this:
9. Using the browser, go to:
www.visibooks.com/books/fp2003/advancedlayout/pics
and save techtool.gifin the images folder within the AdvancedLayout site.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
232/256
ADVANCED LAYOUT 229
10. Insert techtool.gifin the left-hand cell.
11. Go to:www.visibooks.com/books/fp2003/advancedlayout/pics
and save bkgd.gifin the images folder.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
233/256
ADVANCED LAYOUT230
12. Make it the background of the right-hand cell.Tip:UseCell Properties, then click theUse 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 its in theArial font, 14 points, bold, and colored white.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
234/256
ADVANCED LAYOUT 23
17. Save layout.css.18. Link the home page to layout.css.19. Save the page and view it in the browser.
It should look like this:
Tip:Notice the line towards the bottom of the right cell where
bkgd.gifbegins repeating. It repeats because backgroundgraphics tile to fill all available space in a cell.
The cell is 136 pixels tall: 100 pixels fortechtool.gif, plus 36 forcell padding(18 pixels at the top and bottom of
techtool.gif).bkgd.gif is only 123 pixels tall; therefore, theres13 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.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
235/256
ADVANCED LAYOUT232
Employ custom styles
1. Below the first table, insert a three-cell table with a width of100% and cell padding of 4.
Make both its borderand 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
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
236/256
ADVANCED LAYOUT 233
6. Center the text within each cell.7. View layout.css, then click the blank line beneath the existing
tags to place your cursor there.
8. On the Menu Bar, click Format, thenStyle.9. When the Style window appears, click the button.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
237/256
ADVANCED LAYOUT234
10. When the New Style window appears, type:.navbar
in the Name (selector) box.
Tip:Make sure a period (.) precedes the wordnavbar.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
238/256
ADVANCED LAYOUT 235
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.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
239/256
ADVANCED LAYOUT236
15. In the Style list, click .navbar.
The text should now look like this:
16. Apply the .navbar style to the text in the other two cells.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
240/256
ADVANCED LAYOUT 237
17. Save the page and view it in the browser.It should look like this:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
241/256
ADVANCED LAYOUT238
Employ spacer GIFs
1. In the browser, go to:www.visibooks.com/books/fp2003/advancedlayout/pics
and save spacer.gifin the images folder.
2. In index.htm, below the two tables, insert a third table just likethe top table.
Why use spacer GIFs?
GIF graphics can be used as spacers to stretch table cells to an
exact width. If theyre transparent, they remain invisible regardless ofthe cells background color.
A spacer GIF is used in the exercise below. It keeps the width of theleft-hand cell constant, regardless of the size or resolution of the
screen used to view it.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
242/256
ADVANCED LAYOUT 239
3. Insert spacer.gifin the left-hand cell.4. Right-click the graphic (its 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 theKeep aspect ratio checkbox, then give it a Width of 100 pixelsand 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 seeand save.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
243/256
ADVANCED LAYOUT240
6. Change the background color of the cell containing spacer.giftoyellow.
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.
Its not as sound as using a style sheet for formatting, but as a
quick-and-dirty method, this will work.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
244/256
ADVANCED LAYOUT 24
9. Set the monitor to a higher resolution, or make the browserwindow wider if you can.
The page should look like this:
Notice how the left-hand cells in the top and bottom tables staythe same width, regardless of the width of the window used toview them.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
245/256
ADVANCED LAYOUT242
Specify page margins
1. View layout.css.2. In formatting for the tag, add the attributes
margin-top:0margin-right:0margin-bottom:0margin-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) forthe page itself:
body { background-color:#000099; margin-top:0;margin-right:0; margin-bottom:0; margin-left:0}
4. Save layout.css.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
246/256
ADVANCED LAYOUT 243
5. View index.htm.It should look like this:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
247/256
ADVANCED LAYOUT244
6. Save the page and view it in the browser.It should look like this:
7. Close the browser.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
248/256
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
249/256
ADVANCED LAYOUT246
3. Click the a:hoverstyle, then click the button.
4. In the Modify Style window, click the button, thenFont.
5. In the Fontwindow, click Boldin the Font Style list.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
250/256
ADVANCED LAYOUT 247
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 theCreate
New Document icon.
10. In the Name of new document box, type:Laptops
11. Click the button.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
251/256
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
252/256
ADVANCED LAYOUT 249
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:noneattribute to the a formatting:
a {color: #FF0000; text-decoration:none}
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
253/256
ADVANCED LAYOUT250
16. Save layout.css, then view index.htm in the browser.It should look like this:
17. Place your cursor over the Laptops link.It should look like this:
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
254/256
ADVANCED LAYOUT 251
Practice: Advanced Layout
1. In the navigation table (the one with Laptops, Cell Phones andPDAs), insert two additional cells between the existing cells.
2. Put | characters (on the same key as the backslash \ characteron 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 PDAsto new pages named
phones.htm and pdas.htm, respectively.
7. In layout.css, modify the link (a) color so its white.
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
255/256
ADVANCED LAYOUT252
8. Save the page and view it in the browser.It should look like the one at:
www.visibooks.com/books/fp2003/advlayout
-
8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)
256/256