The Visibooks Guide to FrontPage 2003 (2006)

8/14/2019 The Visibooks Guide to FrontPage 2003 (2006)

1/256


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


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


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


5/256

FRONTPAGE BASICS2

Set up a Web site

Create a new site

1. Open Microsoft FrontPage.It should look like this:


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.


7/256

FRONTPAGE BASICS4

4. When the Web Site Templates window appears, make sure theOne page Web siteicon is selected.


8/256

FRONTPAGE BASICS 5

5. Click the button.


9/256

FRONTPAGE BASICS6

6. When the New Web Site Location window appears, navigate tothe My Documents folder.

7. Click the icon.


10/256

FRONTPAGE BASICS 7

8. When the New Folderwindow appears, type:Dogsin theNamebox.



11/256

FRONTPAGE BASICS8

10. In the New Web Site Location window, type:Dogs Web Site

in the Site name box.



12/256

FRONTPAGE BASICS 9

Tip:If an alert window appears, click the button.

Then click the button.


13/256

FRONTPAGE BASICS10

12. In the Web Site Templates window, click the button.


14/256

FRONTPAGE BASICS 1

13. Double-click index.htm to open the home page.

If the New pane is open, click the icon.


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.


16/256


17/256

FRONTPAGE BASICS14

3. When the Page Properties window appears, type:A Home Page About Dogs

in the Title box.



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.


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.


20/256

FRONTPAGE BASICS 17

3. Click the Style Sheets tab.

4. Double click the Normal Style Sheet icon.


21/256

FRONTPAGE BASICS18

A blank style sheet should appear:

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


22/256

FRONTPAGE BASICS 19

6. When the Stylewindow appears, click h1 in the Styles list.



23/256

FRONTPAGE BASICS20

8. When the Modify Style window appears, click thebutton, then Font in the menu that appears.


24/256

FRONTPAGE BASICS 2

9. When the Font window appears, click Verdana in the Font list.

10. Under Font style, click Bold.


25/256

FRONTPAGE BASICS22

11. Click the button.12. Click the button in the Modify Style window.


26/256

FRONTPAGE BASICS 23

13. Click the button in the Style window.



27/256

FRONTPAGE BASICS24

15. When the Save As window appears, type:format.css

in the File name box.


28/256

FRONTPAGE BASICS 25

16. Click the button.The style sheet should look like this:


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.


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


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.


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.


33/256

FRONTPAGE BASICS30

3. In the menu, click Heading 1.

The text should now look like this:



34/256

FRONTPAGE BASICS 3

Change text size

1. Click the format.css tab.



35/256

FRONTPAGE BASICS32

3. When the Stylewindow appears, click the button.


36/256

FRONTPAGE BASICS 33

4. Click the button, then Font.


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.


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.



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.


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.


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.


42/256

FRONTPAGE BASICS 39

11. When the Font window appears, click Arial in the Font list, then10pt in the Size list.



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:


44/256

FRONTPAGE BASICS 4

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.


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.


46/256

FRONTPAGE BASICS 43

The page should look like this:

5. Click the icon.


6. Save the page.


47/256

FRONTPAGE BASICS44

Indent text

1. Type three new paragraphs:Chesapeake Bay Retriever

German Shepherd

Yorkshire Terrier


48/256

FRONTPAGE BASICS 45

2. Highlight all three paragraphs, then click the icon.

3. Save the page.


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.


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.



51/256

FRONTPAGE BASICS48

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.


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.


53/256

FRONTPAGE BASICS50

7. When the Save As window appears, type:chesapeake.htm

in the File name box.



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


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.


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.



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.


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:


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.



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


61/256

FRONTPAGE BASICS58

Step 2: Link to the new page

1. Click the index.htm tab.2. Highlight the words Chesapeake Bay Retriever.



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:


63/256

FRONTPAGE BASICS60

7. Save the page.8. On the Toolbar, click the icon.

A browser should open with the home page inside:


64/256

FRONTPAGE BASICS 6

9. Click the Chesapeake Bay Retrieverlink.It should take you to chesapeake.htm:

10. Close the browser.


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.


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].


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.


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.


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.


70/256

FRONTPAGE BASICS 67

3. When the Insert Hyperlink window appears, click the ExistingFile or Web Page icon.



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.


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.)


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


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.


75/256

FRONTPAGE BASICS72

Insert a graphic

1. Open chesapeake.htm, then place the cursor below theheading.


3. When the Picture window appears, double-click theimagesfolder.


76/256


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.


78/256

FRONTPAGE BASICS 75

2. Right-click the graphic.When the menu appears, click Picture Properties.


79/256

FRONTPAGE BASICS76

3. In the Alignmentdrop-down list, click Left.

4. Click the button.The page should now look like this:


80/256

FRONTPAGE BASICS 77

5. Save the page, then click the icon.It should look like this in the browser:



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.


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.


83/256

FRONTPAGE BASICS80

5. Assign Horizontal spacing of 12, and Vertical spacing of 4.

6. Change Border thickness to 1.


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


85/256

FRONTPAGE BASICS82

8. Click the icon.The page should look like this:



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.


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.


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


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.


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:


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.


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.


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:


94/256

FRONTPAGE BASICS 9

4. Link the words German Shepherd to german.htm:

5. Link the wordsYorkshire Terrierto yorkshire.htm:


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.


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.


96/256


97/256

FRONTPAGE BASICS94

3. Click the Chesapeake Bay Retriever graphic to select it, thenclick the icon.


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.


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.


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


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.


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.


103/256

FRONTPAGE BASICS100

7. When the Borders and Shading window appears, click theShading tab.

8. In the Background colordrop-down list, clickYellow.


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.


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.


3. When the Style window appears, click HTML tags under List.

4. In the Styles list, click a.



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.


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.


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


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.


110/256


111/256


112/256


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


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.


5. When the table grid appears, drag across the first two cells:


115/256


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.


116/256


Format a table

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


117/256


118/256


3. Click the button.The table should look like this:

4. Right-click on the first cell.When the menu appears, click Cell Properties.


119/256


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.


120/256


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:


121/256


9. Click the button.10. Save the page and view it in the browser.


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


122/256


123/256


7. In the left-hand cell, replace the word links with the names of thissites main sections:

RichmondWilliamsburg

CharlestonThe page should look like this:


124/256


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.


125/256


10. When the Cell Properties window appears, change the Verticalalignment to Top.

11. Check the Specify width checkbox.


126/256


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.


127/256


15. Change its Width to 80 percent.

16. Click the button.The page should look like this:


128/256


129/256


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.


130/256


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


131/256


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:


132/256


14. Save richmond.htm and view it in the browser.The page should look like this:


133/256


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.


134/256


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


135/256


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.


6. Drag across the first three cells:


136/256


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:


137/256


138/256


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.



139/256


140/256


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:


141/256


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.


142/256


143/256


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.


144/256


6. Click in the last cell of the table.

Tip:Do not highlight the text.

7. Click Table, Insert, then Cell.


145/256


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:


146/256


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


147/256


13. Link the word Home to index.htm.

14. Link the page to the style sheet west.css.


148/256


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.


149/256


150/256


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.


151/256


11. Save the pages, then preview the site in the browser.It should look like the site at:

www.visibooks.com/books/fp2003/vacation


152/256


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.


153/256


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.


154/256


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



155/256


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.


156/256


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.


157/256


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.


158/256


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.


159/256


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


160/256


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


161/256


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


162/256


163/256

UTILITIES160

Find and Replace

1. Open FrontPage.2. On the Menu Bar, click File, then Open Site.


164/256

UTILITIES 16

3. When the Open Site window appears, navigate to the TravelWeb site in the My Documents folder.


4. Open the home page, index.htm.


165/256

UTILITIES162

5. On the Menu Bar, click Edit, then Replace.

Tip:IfReplace doesnt appear in the menu, click the doubledown arrows.


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


167/256

UTILITIES164

8. Under Find where, click the All pages option.



168/256

UTILITIES 165

10. When the alert window appears, click the button.The Find and Replace window should now look like this:



169/256


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.


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.


172/256

UTILITIES 169

3. Click the icon at the bottom of the window:


173/256


174/256

UTILITIES 17

4. In front of the words Traveling West, type:

FrontPage will automatically insert a closing tag as well:


175/256

UTILITIES172

5. Cut the closing tag, and paste it after the wordsTraveling West:

6. Save the page.7. Click the icon.


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%


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%:


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:


179/256

UTILITIES176

Check for broken links

Check internal links

1. On the Menu Bar, click View, then Hyperlinks.


180/256

UTILITIES 177

The window should look like this:


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


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.


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.


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.


185/256

UTILITIES182


186/256

INTERACTIVITY 183

Interactivity


Employ forms Employ templates Upload sites to a Web server


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.


188/256

INTERACTIVITY 185

7. On the Menu Bar, clickInsert, then Form, then Form.


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.


189/256

INTERACTIVITY186

8. On the Toolbar, click the icon, then drag down and across toselect four rows of two cells each:



190/256


191/256

INTERACTIVITY188

10. In the top three left-hand cells, type:Name:

Address:

Email:



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:


193/256


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.


195/256


196/256

INTERACTIVITY 193

22. Save the page and view it in the browser.It should now look like this:



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.


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.


199/256

INTERACTIVITY196

28. Click the button.The page should now look like this:



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.




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.



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.


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.


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


205/256

INTERACTIVITY202

6. When finished, save the page and preview it in the browser.It should look like this:


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.


207/256


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.


209/256

INTERACTIVITY206

Its now saved in the_sharedtemplates folder, within the

pages/main section.tem folder, under the file name main

section.htm.


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.


211/256


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.


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.


214/256

INTERACTIVITY 21

2. Open the program.The Connection Wizardwindow should appear:


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.



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



217/256


218/256

INTERACTIVITY 215

When the Connection Type screen appears, leave it set at FTP.



219/256

INTERACTIVITY216

The Connection Wizardwindow should now look something likethis:



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


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.


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.


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].


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.


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.


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.


227/256

INTERACTIVITY224


228/256

ADVANCED LAYOUT 225

Advanced Layout


Employ background images Employ custom styles Employ spacer GIFs Specify page margins Create rollover effects


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.


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


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.


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.


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.


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.


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.


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


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.


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.


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.


239/256

ADVANCED LAYOUT236

15. In the Style list, click .navbar.


16. Apply the .navbar style to the text in the other two cells.


240/256

ADVANCED LAYOUT 237



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.


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.


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.


244/256

ADVANCED LAYOUT 24

9. Set the monitor to a higher resolution, or make the browserwindow wider if you can.


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.


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.


246/256

ADVANCED LAYOUT 243

5. View index.htm.It should look like this:


247/256

ADVANCED LAYOUT244




248/256


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.


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



251/256


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}


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:


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.


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


256/256

Date post:	30-May-2018
Category:	Documents
Upload:	marian
View:	214 times
Download:	0 times