the visibooks guide to frontpage 2003 (2006)

When the Page Properties window appears, type: A Home Page About Dogs in the Title box.. When the Modify Style window appears, click the button, then Font in the menu that appears... Wh

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

Interactivity 183

Employ forms 184

Employ templates 203

Upload sites to a Web server 210

Advanced Layout 225

Employ background graphics 226

Employ custom styles 232

Employ spacer GIFs 238

Specify page margins 242

Create rollover effects 245

FrontPage Basics

In this section, you’ll learn how to:

• Set up a Web site

• Format text

• Create links to new pages

• Create e-mail and external links

• Insert graphics

• Create a navigation system

• Change page and link colors

Set up a Web site

Create a new site

1 Open Microsoft FrontPage

It should look like this:

2 On the Menu Bar, click File, then New

3 When the New pane appears, click One page Web site

4 When the Web Site Templates window appears, make sure the

One page Web site icon is selected

5 Click the button

6 When the New Web Site Location window appears, navigate to

the My Documents folder

7 Click the icon

8 When the New Folder window appears, type:

Dogs

in the Name box

9 Click the button

10 In the New Web Site Location window, type:

Dogs Web Site

in the Site name box

11 Click the button

Tip: If an alert window appears, click the button

Then click the button

12 In the Web Site Templates window, click the button

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

If the New pane is open, click the icon

Create a home page

1 In the blank page, type:

Dogs Home Page

Notice the file name of the page on the page tab: index.htm This is the home page of the Dogs Web site

Home page file names

The home page of any Web site has the file name index.html Or, in FrontPage, index.htm

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

when the address of a Web site or directory is typed into a browser

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

appears automatically That’s because its file name is index.html

If the file name of the Visibooks home page was homepage.htm, you’d have to type www.visibooks.com/homepage.htm to get it to

appear

2 Right-click in blank space on the page

When the menu appears, click Page Properties

3 When the Page Properties window appears, type:

A Home Page About Dogs

in the Title box

4 Click the button

5 On the Toolbar, click the icon

You have created a home page titled A Home Page About Dogs

The home page’s file name is index.htm

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

Page titles

The title of a Web page describes the page It’s what appears in a

browser’s History list

The title also shows up as a link when a page comes up in a search engine If all your pages have different, descriptive titles, they’ll be

easier for people to find

The page title shows up in the top, or “title,” bar of the browser used

to view it The title of this page is Dogs

Format text

Create a style sheet

1 On the Menu Bar, click File, then New

2 In the New pane, click More page templates

3 Click the Style Sheets tab

4 Double click the Normal Style Sheet icon

A blank style sheet should appear:

5 On the Menu Bar, click Format, then Style

6 When the Style window appears, click h1 in the Styles list

7 Click the button

8 When the Modify Style window appears, click the

button, then Font in the menu that appears

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

10 Under Font style, click Bold

11 Click the button

12 Click the button in the Modify Style window

13 Click the button in the Style window

14 On the Toolbar, click the icon

15 When the Save As window appears, type:

format.css

in the File name box

16 Click the button

The style sheet should look like this:

Integrate a style sheet

1 Click the page tab for index.htm

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

Tip: If Style Sheet Links doesn’t appear in the menu, click the

double-down arrows to make the whole menu appear

3 When the Link Style Sheet window appears, click the All pages

radio button, then click the button

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

5 Click the button

6 Click the button in the Link Style Sheet window

7 When the alert window appears, click the button

Apply formatting

1 Click the words

Dogs Home Page

to place the cursor on the same line

2 Click the drop-down arrow beside the Style list

3 In the menu, click Heading 1

The text should now look like this:

4 On the Toolbar, click the icon

Change text size

1 Click the format.css tab

2 On the Menu Bar, click Format, then Style

3 When the Style window appears, click the button

4 Click the button, then Font

5 In the Size box, type:

16pt

6 Click the button

7 Click the button again in the Modify Style window

8 Click the button in the Style window

format.css should now look like this:

9 Click the icon

10 Click the index.htm tab

The text should now look like this:

Change text weight

1 Make sure the cursor is at the end of the text Dogs Home

Page

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

paragraph

2 Type:

These are my favorite breeds of dog:

3 Save the page

4 Click the format.css tab

5 In format.css, click the line beneath h1 to place your cursor

there

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 In the Styles list, click p

9 Click the button

10 When the Modify Style window appears, click the

button, then Font

11 When the Font window appears, click Arial in the Font list, then

10pt in the Size list

12 Click the button

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:

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

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

The page should look like this:

5 Click the icon

The page should look like this:

6 Save the page

Indent text

1 Type three new paragraphs:

Chesapeake Bay Retriever German Shepherd

Yorkshire Terrier

2 Highlight all three paragraphs, then click the icon

3 Save the page

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

1 Change the title of the home page, index.htm, to My Favorite

Dogs

2 Change the bulleted list to a numbered list

3 Change the numbered list back to a bulleted list

4 Make the list items bold

5 Save the page

It should look like this:

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

4 In the Title box, type:

Chesapeake Bay Retrievers

5 Click the button

6 On the Toolbar, click the icon

7 When the Save As window appears, type:

chesapeake.htm

in the File name box

8 Click the button

9 Type:

Chesapeake Bay Retrievers

File names for the Web

Most Web servers are Unix- or Linux-based, which don’t deal cleanly with spaces in file names For instance if you name a file fido

page.html, it may show up in the URL box of the browser as

fido%20page.html

Also, Web servers are case-sensitive, so keeping file names case eliminates a potential source of mistakes

lower-Make all file names in a Web site—pages, graphics and folders—

lower-case, with no spaces

Correct file name: chesapeake.html

Incorrect: Chesapeake Bay.html

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

12 Click the buttons

This links the page to the site’s style sheet, format.css

13 Save chesapeake.htm

14 Click the format.css tab

15 In format.css, click the line beneath p to place your cursor

there

16 On the Menu Bar, click Format, then Style

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

20 When the Font window appears, click Verdana, then 14pt

21 Click the buttons in the three windows

format.css should now look like this:

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:

25 Save the page

Providing navigation clues with text size

The heading of the Chesapeake Bay Retriever page is one size

smaller than the heading of the home page That’s because the CBR page is one step down in the site hierarchy

Dogs Home Page

Dogs

Chesapeake Bay Retrievers

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

4 When the Insert Hyperlink window appears, click chesapeake

5 Click the button

6 Click the page

The words Chesapeake Bay Retriever should now be a link:

7 Save the page

8 On the Toolbar, click the icon

A browser should open with the home page inside:

9 Click the Chesapeake Bay Retriever link

It should take you to chesapeake.htm:

10 Close the browser

1 Create new pages for German Shepherds and Yorkshire

Terriers

German Shepherd German Shepherds german.htm Yorkshire Terrier Yorkshire Terriers yorkshire.htm

Tip: Open chesapeake.htm, then Save As with the file name

german.html Then change its title and text

Do the same thing to create yorkshire.htm

2 On the home page, link the words German Shepherd and

Yorkshire Terrier to their pages

3 On the home page, remove the words

Home Page

after

Dogs

4 Make sure the headings of the German Shepherd and Yorkshire

Terrier pages are the same size as the heading of the Chesapeake Bay Retriever page

5 Save all pages

6 Click the home page’s links to make sure they work

Create e-mail and external links

Create an e-mail link

1 In the Folder List pane, double-click all the files to open them

2 In index.htm, beneath the bulleted list, type:

For more information, contact dogs@dogs.com

3 Highlight dogs@dogs.com

4 On the Toolbar, click the icon

When the Insert Hyperlink window appears, click the E-mail Address icon

5 In the E-mail address box, type:

dogs@dogs.com

It should change to this:

6 Click the button, then click on the page

It should look like this:

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

3 When the Insert Hyperlink window appears, click the Existing

File or Web Page icon

Then click the button

4 When the Target Frame window appears, type:

new

in 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 When the page comes up in the browser, click the

www.dogs.com link

It should open a new window with an external Web site

(Probably PetSmart, a site linked to the dogs.com address.)

Insert graphics

Capture a graphic from the Web

1 Using the browser, go to:

www.visibooks.com/books/fp2003/dogpics

2 Place your cursor on top of the picture of the Chesapeake Bay

Retriever, then click with your right mouse button

3 When the menu appears, click Save Picture As

4 When the Save Picture window appears, navigate to the Dogs

Web Site folder in the Save in drop-down list

Right mouse button

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

Insert a graphic

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

heading

2 On the Toolbar, click the icon

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

folder

4 Click the chessie graphic, then click the button

The page should look like this:

2 Right-click the graphic

When the menu appears, click Picture Properties

3 In the Alignment drop-down list, click Left

4 Click the button

The page should now look like this:

5 Save the page, then click the icon

It should look like this in the browser:

6 Close the browser

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 graphic

represents Alt text also allows search engines to index visual

content

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

6 Change Border thickness to 1

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 horizontal space of 12 pixels around the graphic that nothing can occupy

A Border of 1 creates a pixel border around the

1-graphic

8 Click the icon

The page should look like this:

9 Close the browser

Practice

1 Go to:

www.visibooks.com/books/fp2003/dogpics

2 Save the German Shepherds graphic in the graphics folder, with

the file name shepherds.gif

3 Save the Yorkshire Terrier graphic in the graphics folder, with

the file name yorkie.gif

4 Insert shepherds.gif into the German Shepherds page below

the heading

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

heading

6 On the German Shepherds page, insert the text:

German Shepherds are smart dogs

as a paragraph below the graphic

7 On the Yorkshire Terriers page, insert the text:

Yorkshire Terriers are cute

as a paragraph below the graphic

8 On both pages, align the text to the side of the graphic, as on the

Chesapeake Bay Retrievers page

9 In both pages, give the graphics a Border of 1, Vertical spacing

of 4, and Horizontal spacing of 12

10 Save both pages

11 Close FrontPage

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