Microsoft FrontPage 2000
Developed by Steven Janover
, Capital Region BOCES, NERIC

Back                       

Index

Starting FrontPage and a New FrontPage Web
Saving Your Page
Creating a Bulleted List
Creating Hyperlinks
Adding an E-mail Link
Adding Graphics
Changing the Background Color
Linking to Another File
Tables
Bookmarks
Creating an Image Map
Creating a Guest Book
Frames
Importing Word Documents
Creating Buttons with the Image Composer
Organizing Files
Using Navigation View
Internet Resources and FrontPage Publications
Correlation to the NY State Learning Standards

Exercise A

Starting FrontPage and a New FrontPage Web

 1) Choose Programs from the Start menu and then Microsoft FrontPage.
 2) Select New from the File menu and then choose Web…
 3) From the New window choose Empty Web.
 4) Enter c:\My Webs\empire under Specify the location of the new web:
 
5) Click OK.

    You will now see the FrontPage screen.

 6) Click the Navigation button under Views.
 7) Select the New Page button on the Toolbar to create a new page.
 8) Double-click the Home Page icon in the Navigation window.

You will now have a blank page in the FrontPage.

Creating Your Start Home Page

 1) With your cursor in the home position type Empire Central School and press ENTER.
 2) Move your cursor back to the beginning of the Empire Central School line and press the Center icon on the Toolbar.
 3) Highlight Empire Central School and choose Font… from the Format menu.
 4) From the Font window choose 6 (24 pt) under the Size:
 
5) Now drop-down the Color: window and select Red.
 6) Click OK.
 7) Click after the word School and press the ENTER key.
 8) Choose the Align Left icon from the Toolbar.

     We now wish to change the font color and size back to their defaults

 9) Select Font… under the Format menu and then choose Normal under the Size: window and select Automatic under the Color: drop-down menu.
10) Click OK.

      Insert a horizontal line beneath the title line.

11) Choose Horizontal Line under the Insert menu.
12) Delete any extra carriage returns between Empire Central School and the horizontal line.
13) Right-click on the horizontal line and select Horizontal Line Properties…
14) Choose 4 under Height: from the Horizontal Line Properties window and then choose Black from the Color: drop-down and then click in the Solid line (no shading) box.
15) Click OK.
16) Click your mouse below the line to deselect the line.
17) Type the following text:

Welcome to the Empire Central School Home Page on the World Wide Web. This page will serve as a guide to our school and community. This site is still under construction. We will soon be including:

18) Press the ENTER key.                                                                                                                    TOP

Saving Your Page

 1) Choose Save As… from the File menu.
 2) Make sure index appears in the Filename: field.
 3) Click on the Change… button and type Empire Central School in the Page title: field.
 4) Click Save and then Yes to replace the existing file.                                                                  TOP

Creating a Bulleted List

 1) Make sure your cursor is one line below the introduction paragraph.
 2) Select the Bullets icon from the Toolbar.
 3) Type the following: (press ENTER after each line)

Student and faculty directory
Our School
Our community
Articles from our school newspaper

 4) Select the Bullets icon to turn off the Bulleted List.
 5) Insert another horizontal line by selecting Horizontal Line from the Insert menu.
 6) Delete any extra carriage returns (blank lines) between the line and the bulleted text above it.
 7) Save your work again by choosing Save from the File menu.                                                    TOP

Viewing Your Page in the Web Browser

 1) Choose the Preview in Browser icon from the Toolbar or Preview in Browser… from the File menu.
 2) Return to Front Page by selecting its button on the Taskbar.

Exercise B

Creating Hyperlinks

 1) Move your cursor one line below the second horizontal rule.
 2) Type Links to other K-12 sites… and press ENTER.
 3) Select the text you just typed.
 4) Choose the Bold icon from the Toolbar.
 5) Click below the text to deselect it.

     Make sure your cursor is one line below the Links… line.

 6) Choose the Numbering icon from the Toolbar.

     Type the following: (Press ENTER after each line)

1. Classroom Connect
2. Yahoo
3. WWW Curriculum for K-12 Students
4. The White House
5. CNN

 7) Select the Numbering icon from the Toolbar to turn it off.
 8) Highlight Classroom Connect and choose Hyperlink from the Insert menu.
 9) Type http://www.classroom.net in the URL: field.
10) Click OK.
11) Highlight Yahoo and choose Hyperlink from the Insert menu.
12) Type http://www.yahoo.com/ in the URL: field.
13) Click OK.
14) Repeat steps 8 thru 10 for the remaining three links. Make sure you use the correct URL's. (Note: Turn off the Numbering when finished.)

     The relevant URL's are:

WWW Curriculum…    http://www.neric.org/awareness/
The White House           http://www.whitehouse.gov/
CNN                                 http://www.cnn.com/ 

Adding an E-mail Link                                                                                                                    TOP

 1) Move your cursor one line below the last hyperlink, CNN.
 2) Type in the following: (Note: If you have your own E-mail address you may substitute it here.)

Send comments to sjanover@mum.neric.org

 3) Press ENTER and select the line you just entered.
 4) Select the Italic icon from the Toolbar.
 5) Click off the line to deselect it.

     The E-mail address you just entered will automatically be made into a mailto: link.

Adding Graphics

Two major graphics formats are supported by most graphical browsers, GIF (Graphic Interchange Format) and JPEG (Joint Photographic Expert Group).

 1) Move your cursor to the top of the page.
 2) Press the ENTER key.
 3) Move the cursor back to the top of the page.
 4) Select Picture from the Insert menu and then From File…
 5) Choose the Select a file on your computer icon in the lower-right corner.
 6) Choose the 3 ½ Floppy [A:] icon from the Look in: drop-down menu.
 7) Make sure All Pictures is chosen from the Files of type: drop-down menu.
 8) Choose the file named Sclhous and click on OK.

     Your graphic should now be inserted, center-aligned, at the top of the page.                               TOP

Changing the Background Color

 1) Select Background… from the Format menu.
 2) Make sure the Background tab is selected.
 3) Click on the Background: drop-down menu and select Custom Colors…
 4) Choose the yellowish shade on the first line and click OK.
 5) Click OK.
 6) Save your page and embedded files, preview it in the web browser and check your links.        TOP

Linking to Another File

 1) Highlight Our School (one of the four bulleted list items).
 2) Choose Hyperlink… from the Insert menu.
 3) Select the Create a page and link to the new page icon in the lower-right corner.
 4) Select Normal Page and click OK.
 5) Save the page by selecting Save As… from the File menu.
 6) Type table.htm in the File name: field and click on the Change… button and type Our School in the Title: field and click OK.
 7) Click Save.                                                                                                                                            TOP

Exercise C - Creating a Table

 1) Make sure the Our School page is on your screen.
 2) Press the ENTER key twice.
 3) Choose Insert from the Table menu and then select Table…
 4) Enter 2 Rows: and 4 Columns: and Center under Alignment: and 1 under Border Size:
 5) Check Specify Width: and enter 75 and select in Percent.
 6) Click OK.
 7) Move your cursor one line above the table and type Our School.
 8) Select the text Our School and click on the Bold icon from the Toolbar.
 9) Now choose the Center icon from the Toolbar.
10) With the text still selected choose Heading 3 from the Style drop-down box on the Toolbar.
11) Enter the data below in the appropriate cells:      

Note: Press the Tab key to go from cell-to-cell or click in the new cell. Do Not press ENTER.

Our School

A message from our principal

Take a tour of our school

Academic Programs

This space under development

Where is Empire Central School?

NERIC Web Server

Links to other K12 sites…

Return to Empire Home Page

12) Select the text NERIC Web Server in the second column.
13) Choose Hyperlink… from the Insert menu.
14) Type http://www.neric.org/ in the URL: field.
15) Click OK.
16) Highlight the text Return to Empire Home Page in the fourth column.
17) Choose Hyperlink… from the Insert menu.
18) Select index.htm from the filename scroll box.
19) Click OK.

      We now wish to create a bookmark for our next link.

20) Open the page Empire Central School by selecting it from the Window menu.
21) Move your cursor before the word Links to other K12 sites…
22) Select Bookmark… from the Insert menu.
23) Type links in the Bookmark Name: field and click OK.
24) Return to the Our School page by choosing it under the Window menu.
25) Highlight the text Links to other K12 sites… in the third column.
26) Select Hyperlink… from the Insert menu.
27) Choose index.htm and select links under the Bookmark: drop-down menu.
28) Click OK.
29) Select the entire table and choose Align Left from the Toolbar to left justify all the text in the cells.
30) Save your work, preview the table in your web browser, and check your links.                        TOP

Exercise D - Creating an Image Map

 1) Make sure the Our School page is on your screen.
 2) Select the text Where is Empire Central School? in the first column.
 3) Choose Hyperlink from the Insert menu.
 4) Select the Create a page and link to the new page icon in the lower-right corner.
 5) Choose Normal Page from the New window.
 6) Click OK.

     A blank new page should now appear on your screen.

 7) Type Where is Empire CSD Located? at the top of the page.
 8) Highlight the text and center it.
 9) With the text still selected choose Heading 2 from the Style drop-down box.
10) Also change the font color by right-clicking on the selected text and choosing Font…
11) Then choose Red from the Color: drop-down box.
12) Click OK.
13) Click after the selected text and type (Goatville).
14) Highlight Goatville and change its font color to blue.
15) Move your cursor before the parentheses in (Goatville).
16) Select Break… from the Insert menu, and Normal line break.
17) Click OK.
18) Click after (Goatville) and press ENTER twice.
19) Choose Picture from the Insert menu and then From File…
20) Click on the Select a file on your computer icon in the lower-right corner.
21) Choose the 3 ½ Floppy [A:] icon from the Look in: drop-down menu.
22) Make sure All Pictures is chosen from the Files of type: drop-down menu.
23) Select the file named distmap and click OK.

      A map of NY State with several locations will now be displayed.

Save Your Page

24) Choose Save As… from the File menu.
25) Also enter ny.htm in the File name: field.
26) Click the Change… button and enter Where is Empire CSD located? under Page title:
27) Click OK and then choose Save to save the graphic to the current FrontPage web.

      We now will create clickable spots on the map.

Creating Clickable Spots

 1) Click on the graphic to expose its handles.
 2) Select the Rectangular Hotspot tool from the Pictures Toolbar.
 3) Draw a small rectangle around the word NERIC and its blue dot on the map.
 4) Type in http://www.neric.org/ in the URL: field.
 5) Click OK.
 6) Draw a small rectangle around Goatville and its blue dot on the map.
 7) Select index.htm from the filename scroll box.
 8) Click OK.
 9) Draw a small rectangle around Plattsburgh and its blue dot on the map.
10) Type http://plattsburgh.neric.org/ in the URL: field.
11) Click OK.
12) Repeat the procedure above in steps 9-11 for Edwards-Knox and use http://ekcs.neric.org/ as the URL.
13) Save your page again, preview in the web browser, and test your hotspots.

Note: If the graphic distmap displays with a border around it, click on the graphic to expose its handles, right-click on it, and choose Picture Properties… Select the Appearance tab and make sure the Border thickness: is 0.

14) Return to the Where is Empire CSD located? page.
15) Click to the right of the graphic and press ENTER. Make sure your cursor is left-aligned.
16) Choose Picture from the Insert menu and then select From File…
17) Choose the Select a file on your computer icon.
18) Choose the 3 ½ Floppy [A:] icon from the Look in: drop-down menu.
19) Make sure All Pictures is chosen from the Files of type: drop-down menu.
20) Choose the gif file named Return and click OK.
21) Press the Spacebar and type Return to Empire Home Page next to the Return graphic.

      We now wish to make the text a hyperlink.

22) Select Return to Empire Home Page and then choose Hyperlink from the Insert menu.
23) Choose index.htm from the filename scrollbox.
24) Click OK.
25) Save the page, preview it in your browser, and check your links.                                            TOP

Exercise E - Creating a Guest Book

 1) Make sure the Empire Central School Page (index.htm) is open.
 2) Position your cursor before Send comments to… and press ENTER.
 3) Move the cursor one line above the mailto link so its equally positioned between the last of the numbered list items (5. CNN) and Send comments to…
 4) Type Please sign our Guest Book.
 5) Select the text you just typed, boldface it, and change the font color to red.
 6) Highlight the text again, and choose Hyperlink from the Insert menu. Enter guest.htm in the URL: field and click OK.
 7) Select New from the File menu and then choose Page….
 8) Choose Form Page Wizard from the next screen and click OK.
 9) Click Next.
10) Click Add.
11) Choose contact information under Select the type of input…
12) Click Next.
13) Make sure the following checkboxes are selected:

      Name, full, Title, Organization, Work phone, and E-mail address.

14) Leave Contact as the base name for this group.
15) Click Next.
16) Click Add.
17) Choose paragraph from Select the type of input… drop-down box.
18) Enter What do you think of our Web site? under Edit the prompt for this question:
19) Click Next.
20) Type comment for the name of a variable…
21) Click Next.
22) Click Next again.
23) On the following screen choose as normal paragraphs and use tables to align form fields.
24) Click Next.
25) From the Output Options screen make sure save results to a web page and formrslt is the base name of the results file.
26) Click Next.
27) Click Finish.

Saving your Guest Book

 1) Choose Save As… from the File menu.
 2) Type guest.htm under URL: field.
 3) Click the Change… button and type Guest Book under Page title:
 4) Click Save.

      View your Guest Book in your browser.

 5) Return to the FrontPage Editor and the Guest Book page.

Editing your Guest Book

 1) Highlight the title at the top of the page and type Empire CSD Guest Book.
 2) Center the text and change the font color to red.
 3) Change the text This is an explanation of the purpose… to read Fill-in the information below: and press ENTER and type View Our Guest Book.
 4) Highlight the text View Our Guest Book
 5) Then choose Hyperlink… from the Insert menu.
 6) Type formrslt.htm in the URL: field.
 7) Click OK.
 8) Type Copyright 1999 Empire CSD where the copyright information is listed at the bottom of the page.
 9) Click before the scrolling comment box and press the Increase Indent icon on the Toolbar twice.
10) Move your cursor before the Submit Form button and click the Increase Indent icon button 3 times.
11) Change the background color of the page to white by choosing Background… from the Format menu and then selecting White under Background: and click OK.
12) Save your changes.

Adding a View Our Guest Book Link

 1) Return to the Empire CSD home page.
 2) Type View Our Guest Book below the Please sign our Guest Book link.
 3) Change the font color to red, boldface it, and make this text a Hyperlink.
 4) Type formrslt.htm in the URL: field.
 5) Click OK.
 6) Save your changes, preview in browser, and check the link.

Editing the Guest Book file (formrslt.htm) in the FrontPage Editor

 1) Make sure Folder View is visible. Select Folders under the View menu.
 2) Choose Refresh under the View menu.
 3) Select Open… from the File menu.
 4) Choose formrslt from the filename scrollbox.
 5) Click on Open.
 6) Press ENTER twice to move the line Form Results Inserted Here down.
 7) Move your cursor to the top of the page again and type Empire CSD Guest Book.
 8) Highlight the text above, center it and choose Heading 2 from the Change Style drop-down menu.
 9) Also change the font color to red.
10) Save your changes.

Viewing and Editing your Guest Book in HTML

We now wish to edit some extraneous information that was inserted by the Form Page wizard.

 1) Return to the Guest Book page.
 2) Select the HTML tab in the lower-left corner of the screen.
 3) Delete all occurrences of Contact_ (this should appear 5 times and is in blue text).
 4) Return to Normal mode by clicking the Normal tab.
 5) Save your file, preview in the browser and type in some sample data. Also check the View Our Guest Book link.                                                                                                                                                TOP

Exercise H - Creating Frames

Creating a Frameview Page

 1) Make sure the Empire Central School home page is on your screen.
 2) Create another item in the bulleted list towards the top of the page.
 3) Click your cursor after the line Articles from our school newspaper and press ENTER.
 4) Type Frameview and press ENTER.
 5) Turn off the Bulleted List by selecting its icon on the Toolbar.
 6) Delete the extra carriage returns below the bulleted list and above the horizontal rule.

     We know wish to use a frames template.

 1) Select New… from the File menu and select Page….
 2) Choose the Frames Pages tab.
 3) Select Banner and Contents.
 4) Click OK.

A three frame template consisting of a Banner frame, Table of contents frame, and a Main frame should appear on your screen. All three frames will also be saved together as a page named frameset.htm.

Creating a Banner Frame

 1) Click on the New Page button in the banner frame.
 2) Type EMPIRE CENTRAL SCHOOL and highlight this text.
 3) Center the text and make it a Heading 2 Style.
 4) Also change the Font color to Blue.
 5) Now change the Background color of the frame to white.
 6) Save your frame by choosing Save from the File menu.

     a) Type frbanner.htm in the File name: field.
     b) Click on the Change… button and enter Banner Frame under Page title: and click OK.
     c) Click OK.

        You will now see a window prompting you to save all the frames on one page.

 7) Type frameset.htm in the File name: field.
 8) Click on the Change… button and enter Frameset under Page title: and click OK.
 9) Click Save.

Creating a Table of Contents Frame

Make sure the frame template (frameset.htm) is still on your screen.

 1) Select the left-hand frame (Table of contents frame).
 2) Click the New Page button.
 3) Move your cursor to the top of the frame and type Table of Contents. Select the text.
 4) Make this text a Heading 4 Style and change the Font color to Blue.
 5) Change the Background color of the frame to White.
 6) Move your cursor one line below Table of Contents.

     We now wish to insert a bullet icon before a hyperlink.

 7) Choose Picture from the Insert menu and then select From File…
 8) Choose the Select a file on your computer icon.
 9) Choose the 3 ½ Floppy [A:] icon from the Look in: drop-down menu.
10) Make sure All Pictures is chosen from the Files of type: drop-down menu.
11) Select the graphic named Red_Ball.
12) Click OK.
13) Now type Empire Home Page and press ENTER.
14) Select the text you just entered and make it a Hyperlink.
15) Choose index.htm as the link from the filename scrollbox and click OK.
16) Repeat the process outlined in Steps 7-15 to create hyperlinks for:

Our School                            (table.htm)
Where is Empire CSD?        (ny.htm)
View Our Guest Book        (formsrlt.htm)
WWW Curriculum…          (http://www.neric.org/awareness/)

(See Frameview diagram below)

Note: The page is listed with its associated filename or URL is in parentheses. For the WWW Curriculum… you need to enter the given URL in the File name: field.

We now wish to create a link back to the No-Frames Empire Central School Page.

 1) Move your cursor one line below the SJ Training Page link.

     We also wish to insert a graphic here:

 2) Choose Picture from the Insert menu and then choose From File….
 3) Choose the Select a file on your computer icon.
 4) Choose the 3 ½ Floppy [A:] icon from the Look in: drop-down menu.
 5) Make sure All Pictures is chosen from the Files of type: drop-down menu.
 6) Select the file named Return and click on OK.
 7) Press the Spacebar and type Return to No-Frames View.
 8) Make this text Italicized and 10pt.
 9) Also make it a Hyperlink. Choose Hyperlink… from the Insert menu.
10) Choose index.htm from the filename scrollbox.
11) Also select the Change Target Frame button and choose Whole Page under Common Targets and Click OK.
12) Click OK.

      The last step in this procedure is to change the background color.

 1) Choose Background… under the Format menu.
 2) Select Custom Colors… under Background:
 3) Choose the pinkish color - the first icon in the first row.
 4) Decrease the color's intensity by dragging the slide bar up until the Lum: (Luminosity) is about 215.
 5) Click OK.
 6) Click OK.

Save your changes

 7) Choose Save from the File menu (make sure the left-frame is selected in the preview window)
 8) Type frcontents.htm in the File name: field.
 9) Click the Change… button and type Table of Contents under Page title: and click OK.
10) Click Save.
11) Click OK at the Save Embedded Files screen.
12) Preview the page in your browser.

Creating the Main Frame

Make sure the frame template (frameset.htm) is still on your screen.

 1) Select the right-hand frame (Main Frame in Frameset).
 2) Click on the New Page button.
 3) Move your cursor to the top of the page.
 4) Choose Picture… from the Insert menu and then select From File…
 5) Choose the Select a file on your computer icon.
 6) Choose the 3 ½ Floppy [A:] icon from the Look in: drop-down menu.
 7) Make sure All Pictures is chosen from the Files of type: drop-down menu.
 8) Double-click on the School graphic and it will be inserted into your page.
 9) Click on the graphic to select and expose its handles.
10) Right-click on the graphic and choose Picture Properties… and then choose the General tab.
11) Choose Interlaced.
12) Select the Appearance tab and choose Left under Alignment:
13) Click OK.
14) Click to the right of the graphic and press ENTER.

Enter the following text:

Located on the peaceful banks of the Gowanus River, our 80 year-old building contains grades K-12. Total enrollment for the 1999-00 school year is 567. We are looking forward to relocating to a new "State of the Art" facility at the beginning of the 2000 school year.

15) Now change the background color of the page to white.

Save your changes.

16) Type frmain.htm in the File name: field.
17) Click the Change… button and enter Main Frame under Page title: and click OK.
18) Click Save.
19) Select OK at the Save Embedded files screen.

Creating a Link to the Frameset

 1) Open the Empire Central School home page by choosing it under the Window menu.
 2) Select the text Frameview and then choose Hyperlink… from the Insert menu.
 3) Choose the file named frameset.htm.
 4) Click OK.
 5) Save your changes, preview in browser, try your links, start from the Empire Central School home page and choose the Frameview link.

Completed Frameview

                                                                                                                                                          TOP

Exercise I - Importing Word Documents

 1) Make sure you are in the Front Page Editor.
 2) Open the page table.htm (Our School).
 3) Select the text in the first cell: A message from our principal.
 4) Make this text a hyperlink.
 5) Select the Create a page and link to the new page button.
 6) Choose Normal Page and click OK.
 7) Choose File… from the Insert Menu.
 8) Select the [C:] Drive and double-click on the temp folder.
 9) Make sure All Files (*.*) is selected under Files of type: and double-click on the Word file named principal.

    Your file should now be read into the window.

Save your file

10) Type principal.htm in the URL: field.
11) Click the Change… button and enter A Message From Our Principal under Page title: and click OK.
12) Select Save.
13) Return to table.htm (Our School).
14) Save the page, preview in browser and test the link you just created.                                    TOP

Exercise J - Finishing Touches

 1) Open the Empire Central School page (index.htm).
 2) Click to the left of the line Links to other K-12 sites…
 3) Choose Picture from the Insert menu and then select From File…
 4) Choose the Select a file on your computer icon.
 5) Choose the 3 ½ Floppy [A:] icon from the Look in: drop-down menu.
 6) Make sure All Pictures is chosen from the Files of type: drop-down menu.
 7) Select Globe and click OK.
 8) Using the same procedures as in steps 2-7 above, insert the Pencil and Paper graphic before the Please Sign Our Guest Book link.
 9) Insert the graphic People before the View Our Guest Book link.
10) Save the page and embedded files, and preview in browser.

Exercise K - Creating Buttons with the Image Composer

 1) From the Start menu select Microsoft Image Composer under Programs and then choose Image Composer 1.5.
 2) Choose Button… from the Insert menu.

      The Button Wizard will appear on your screen.

 3) Scroll down to the bottom of the Button style list and choose Standard.
 4) Click Next to move to the next page.
 5) Type 1 in the text field and click Next.
 6) Click Next to confirm the suggested label, Home.

     We now need to scale the buttons.

 7) Choose the Same size for all buttons.
 8) Type 83 in the Width: field and 66 in the Height: field.
 9) Click on the Size Preview button to use the exact size of the button.
10) Click Next.
11) Click Finish.
12) Now drag the button into the composition space, the white area in the center of the workspace and line them up.
13) Now choose Actual Size from the View menu to look at the buttons.

Using the Button Editor

We now wish to modify the Home button so it's shaped like a waxseal.

 1) Double-click on the Home button to edit it.

     The Button Editor dialog box will appear.

 2) Select the Label and Image tab.
 3) Click the Font… button and select Playbill from the Font: drop-down list and then choose 24 from the Size drop-down list.
 4) Click OK.
 5) Select the Shape tab.
 6) Choose Funky from the Category: drop-down list.
 7) In the Shape: window scroll all the way to the right and choose Waxseal.
 8) Change the Light direction: by selecting the bottom right light icon.
 9) Select the Fill tab.
10) Choose Texture from the Fill drop-down list.
11) Select Oakgrain from the Fill attributes: window.
12) Click OK.

Duplicating Buttons

 1) Select the Home button and choose Duplicate from the Edit menu.
 2) Double-click on the copy to open it in the Button Editor.
 3) Now switch to the Label and Image page and change the Label: to read Map.

Adding your buttons to FrontPage

 1) Select the Home button, and choose Save Selection As… from the File menu.
 2) Type home.gif for the name.
 3) Save the button in the Temp folder and click Save.
 4) Click on the Map button and repeat Steps 1-3 above, but name your map.gif.

Now switch to the FrontPage window.

 5) Make sure the Our School page (table.htm) is on your screen. Click below the table and position the cursor by the left margin.
 6) Choose Image… from the Insert menu.
 7) Choose the Select a file on your computer icon.
 8) Select [C:] from the Look in: drop-down menu and choose the Temp folder.
 9) Make sure GIF and JPEG are selected under Files of type:
10) Select home.gif and click OK.

      The Home button will now appear on your page.

Note: If the graphic displays with a border around it, click on the graphic to expose its handles, right-click on it, and choose Image Properties… Select the Appearance tab and make sure the Border thickness is 0.

11) Click once on the button to select it, and then choose Hyperlink from the Edit menu.
12) Choose index.html as the URL: and click OK.
13) Click to the right of the Home button and press Tab twice.
14) Repeat Steps 6-10 above with the Map button.
15) Use ny.htm as the URL:
16) Save your page and embedded files.
17) Test your buttons by previewing the page in your browser.

Your buttons should look similar to the following:

                
                                                                                                                                            TOP

Exercise L - Organizing Files

Make sure the Views Bar and Folder List are displayed by choosing them from the View menu.

The final step is to locate all the graphic files to the images folder.

 1) Choose Folders under Views.
 2) Drag each graphic file (.gif) to the folder labeled images.

    FrontPage will automatically relabel the links for you.

Using Navigation View

 1) Select Navigation under Views.

     Your screen should be now display the Home Page icon in a blue background.

 2) Right-click on the Home Page icon in the Navigation view.
 3) Select Rename from the shortcut menu and rename the page Empire Home Page.

We now wish to create a "flow-chart" of web pages in the Navigation view of our web by dragging icons from the Folders List view to the Navigation View area.

 4) Click on the file named formrslt.htm and drag it underneath the Empire Home Page icon in the right-side of the window.
 5) Choose the file named frameset.htm and drag it under the Empire Home Page icon.
 6) Follow the procedure in Step 6 and drag the following files below the Empire Home Page: guest.htm, table.htm.
 7) Drag the following files and locate them below the Our School icon: ny.htm, principal.htm.
 8) Drag the following files and locate them below the frameset icon: frbanner.htm, frcontents.htm, and frmain.htm.

     Your completed Navigation view should look something like the diagram below: You can move around icons and change the order.

    
                                                                                                                           
TOP
           

Internet Resources

FrontPage Home Page
  
http://www.microsoft.com/frontpage/

FrontPage World
  
http://www.frontpageworld.com/

http://fpuser.com
   
http://fpuser.com

Prime Choice FrontPage Users Community
  
http://frontpage.to/

PMP Microsoft FrontPage How To and Tips
  
http://www.pmpcs.com/support/fp/howto.htm

The incredible MS-FrontPage linksite
  
http://www.cosy.sbg.ac.at/~ohaus/docs/frontpage.html

FrontPage 2000 Books

Microsoft FrontPage 2000 Step by Step, Microsoft Press, ISBN 1-57231-980-1

Microsoft FrontPage 2000 Bible, IDG Books, Elderbrock and Carlins, ISBN 0764533134

Microsoft FrontPage 2000 Unleashed, Sam, Stanek and Stanek, ISBN 0672316757


                                                                                                                               
TOP


Correlation to the NY State Learning Standards

Note to Teachers: With some modification, the materials and objectives of this course can be utilized with students. The course as presented is recommended for grade 9 or higher. Prerequisite skills needed by students to utilize the materials are:

 1) mouse skills
 2) knowledge and prior use of Windows 95
 3) prior use of a windows-based word processor4) Basic overview of HTML and Web Page components

The Learning Standards and performance indicators referenced below also encompass other skill and curricular areas that are not part of the FrontPage 2000 course. It should be fairly simple for the classroom teacher to incorporate and cover these additional areas if so desired.

Math, Science, and Technology

Standard 2: Information Systems (Commencement)

Students will access, generate, process and transfer information using appropriate technologies.

 1) Information technology is used to retrieve, process, and communicate information and a tool to enhance learning.

* prepare multimedia presentations demonstrating a clear sense of audience and purpose.
* utilize electronic networks to share information.

Standard 5: Technology (Commencement)

Students will apply technological knowledge and skills to design, construct, use, and evaluate products and systems to satisfy human and environmental needs.

Computer Technology

 3) Computers, as tools for design, modeling, information processing, communication, and system control, have greatly increased productivity and knowledge.

* attach a modem to a computer system and telephone line, set up and use communications software, connect to various on-line networks, including the Internet, and access needed information using e-mail, telnet, gopher, ftp, and web searches.

* develop an understanding of computer programming and attain some facility in writing computer programs.

The Arts

Standard 2 - Knowing and Using Arts Materials and Resources (Commencement - Major Sequence)

Students will be knowledgeable about and make use of the materials and resources available for participation in the arts in various roles.

Visual Arts

 2) Students will know and use a variety of visual arts materials, techniques, and processes. Students will know about resources and opportunities for participation in visual arts in the community (exhibitions, libraries, museums, galleries) and use appropriate materials (art reproductions, slides, print materials, electronic media). Students will be aware of the vocational options available in the visual arts.

* develop Commencement Portfolios that show proficiency in one or more mediums and skill in using and manipulating the computer and other electronic media.

                                                                                                                                                                    TOP