Teaching with Interactive Web Pages

Manual written by: Cindy Callaway

Updated by Michael Mann 2/15/2004

Introduction to WebQuests

What is a WebQuest


Components of a WebQuest


·        Teacher Page







Finding WebQuests










Creating Your Web Page with Front Page



Use hyperlinks to direct the user to another page in your website or another website on the Internet.

Any object inserted into your web page can be made into a hyperlink.

  1. Insert object (text, clip art, drawing...).
  2. Select item.

a. Select a String of Words: left clicking in front of text, while holding, drag the mouse across the text to select.

b. Select One Word: double click on word

c. Select a Graphic Object or Text Box:  left click once on object

  1. Choose Hyperlink from the Insert Menu or by left clicking on the icon located on the Standard Toolbar  .




The Hyperlink Window will now be visible.

Be sure “Existing File or Web Page” is selected.

Use to locate a website to link to.

  1. Left click on the "Use Your Web Browser to Select a Page or File" button.
  2. You will now be taken directly to your web browser (note you must be online for this feature to work).  Use your web browser to go to the web page you want to link to.
  3. With the page now opened in your web browser, return to Front Page.  Notice that the address to the opened web page is now in the URL field.

4.      Click "OK."

Use to create a hyperlink directed to send email.

  1. Left click on the “E-mail Address” button.
  2. In the window, type the email address.




  1. Click “OK” on the Insert Hyperlink Window.

Use to open a new page and at the same time hyperlink the selected object or text to it.

  1. Left click on the “Create New Document” button.

Type the name of your new page and click OK.




Navigation Bar

A navigation bar is a set of hyperlinks that is inserted onto each page of the site, guiding the user through the web site.

It will look like this when you are finished.

Insert the text for each heading in your navigation bar.  If you want your navigation bar to appear on each page and in the same area, make it in a Shared Border (see Page 10 for directions on using a Shared Border).

Home | Introduction | Task | Process | Resources | Evaluation | Conclusion | Reflection | Extension | Teacher Notes

Note: To make a horizontal bar, hold the Shift key down and then press the forward slash key ( \ ) .



A bookmark is reference marker that can be inserted on a page.  After inserting a bookmark, you can create a hyperlink that is directed to the bookmark.


  1. First create your bookmarks.
    1. Place the flashing insertion point at the spot where you want your bookmark to appear – do this by left clicking on spot.
    2. From the Insert Menu, select Bookmark. Or press Ctrl G.





  1. Type the name of your bookmark into the “Bookmark Name” field and then click “OK.”

The bookmark will now appear on the page.

  1. Select the text or object that you want to be the hyperlink to the bookmark.



Note: Text that has been bookmarked will have a dotted underline.

You can bookmark text, an object or a spot on the page.

  1. Open the Hyperlink window.

Highlight the word “Introduction” and left click the Hyperlink button.

Home | Introduction | Task | Process | Resources | Evaluation | Conclusion | Reflection | Extension | Teacher Notes

  1.  In the Hyperlink window click on the Bookmark button. In the small window that will open select the bookmark you want and click OK.
  2. Repeat this process for each link in the “Navigation Bar.”



  1. From the Insert Menu, click “Web Component.”




  1. Next, select Hover Button and click finish. Add text to your button and select the size, color, and effects.



Note: A button may be used as a hyperlink, by selecting the button and then following the hyperlink insertion procedures.






Formatting Your Web Page

On the Format Menu you will find many features that will enable you to change the look of your web page.

Dynamic HTML Effects

Use Dynamic HTML Effect to add an action to an object.

1.      Select the object you want to apply the action to.

2.      Open the Dynamic HTML Effects window (Format->Dynamic HTML Effects).

3.      Left click on the down arrow next to the “On” field.  From the drop-down menu, select the action that will initiate the event.

4.      Left click on the down arrow next to the “Apply” field.  From the drop-down menu, select the action.



5.      Left click on the down arrow next to the “Choose Settings” field.  From the drop-down menu, select a setting.



Open the Theme window (Format->Theme)

Use the Theme window to select a background and button style theme for one or all pages in your web folder.






Page Properties

The Page Properties window can be opened by either selecting Format->Background or File->Properties.


1.      Left click on the General tab to bring the panel forward.

a.      In the Title field of the General Panel, type the name of the page (this name will appear in the Browser’s Status Bar).

b.      In t he Background Sound section, use the Browse button to locate a music file (wav) on your computer and add it as background music for the page.


2.      Left click on the Background tab to bring the panel forward. If you have not selected a Theme background, you may design your own using the features on the Background panel.

a.      Insert a picture as a background by clicking in the box next to Background pictures and then click on the Browse button.  Locate the picture in your computer files.

b.      In the Colors section, use the drop-down menus to select desired colors.


3.      After making the desired changes to the Page Setup, click “OK.”


Page Transitions

Use the Page Transitions window to select a transition style, which will occur as you transition from one page to another.

1.      Open the Page Transition window (Format->Page Transition).

2.      Use the “Event” drop-down menu to select when the transition will occur.

3.      In the “Duration (seconds)” field, enter the number of seconds that the transition will last.

4.      In the “Transition effect” field, select the transition style.

5.      Click “OK.”


Shared Borders

Use the Shared Borders window to add text, hyperlinks, or objects that will reoccur on each page in your web folder.

1.      Open the Shared Borders window (Format->Shared Borders).

2.      Click in the radio button next to “All pages.”


3.      Select the location of the shared border (you may select more than one location).

4.      Select “include navigation buttons,” to have Front Page designate a section of the border for Title and Navigation buttons.

5.      Insert the text, objects and hyperlinks that you want to appear on all pages into the shared boarder.


When viewing your web page in a browser, your graphics and text may not be displayed in the location you put them in.  To you’re your graphics and text static on the page, insert them into a table. 



1.      Open the Insert Table window (Table->Insert->Table).

2.      On the Insert Table window, select the number of rows and columns, and the layout features.

a.      Enter in “0” for Border size if you don’t want a border.

b.      Click “OK” after setting Table properties.



3.      Use the Table Properties window to change the table view and add a background to the table.

a.      Right click on the table.  From the options menu, select “Table Properties.”




If the server that you will be publishing your web page to has Front Page Extensions, you may create a form with a submit button.

After completing the form, the user clicks the submit button to email the form to you.

Note: The form may be a test a student takes.  Answers are then submitted to you.




1.      Insert a new form (Insert->Form->Form).


Note: if “Form” is not visible in the fly-out menu, use the chevron to expand the menu.




2.      Type the text and insert fields into your form.  Select fields to insert into your form from the Form fly-out menu (Insert->Form).

IMPORTANT:  All fields must be inserted inside the form box (the dotted line around the form).

3.      After inserting form fields, double-left-click on the field to open the properties window.  In the properties window, name the field.

a.      Do Not leave any blank spaces in the name.

b.      For radio buttons and check boxes, select the initial state of the field.

c.      Click “OK.”


4.      Set the submit button to email the form to a specified email address.

5.      Open the Forms Properties window by right clicking on the form and then selecting “From Properties” form the options menu.



a.      In the Email field, type in the email address that the form will be submitted to.

b.      In the Form Name field, type a name for the form.

c.      Click “OK.”




Publishing Your Web Page

You need to "publish" your Web site before other people can see it on the Internet.

While you were creating your site, you saved your Web documents on your own computer. To "publish" your site means to transfer these same documents onto a Web server. A Web server is a high-powered computer that places Web site files onto the Internet. Once your files are on the Web server, other computers can "connect" to the Web server and retrieve your files for viewing.

Your school may have its own Web server. If not, you'll have to find an Internet Service Provider (ISP) that will publish your Web site on its server. An ISP is a company that provides Internet access and rents space for people's Web site files.

Ask your ISP or your school's network administrator if your Web server has FrontPage 2000 Server Extensions. Server extensions are like special mini-programs. You can publish your Web site even if your server does not have these extensions - but you just need to do it a little differently.

To publish your Web site to a server with FrontPage 2000 Server Extensions:

1.      Click File and choose Publish Web. The Publish Web dialog box appears.

2.      Type in the location you want to publish your Web site to. The location will look something like this:

a.      http://ISPname.com/~yourfolder/. Your ISP or your school's network administrator will give you this location information.

3.      Click Publish. FrontPage prepares to publish your Web site to the server.


To publish your Web site to a server without FrontPage Server Extensions:

1.      Click File and choose Publish Web. The Publish Web dialog box appears.

2.      Type the FTP server location. The location will look something like this: ftp.ISPname.com/~yourfolder/. Your ISP or your school's network administrator will give you this location information.

3.      Click Publish. FrontPage 2000 prepares to transfer your files to the Web server.

Creating and Managing Web Folders


Web Folder icons make it possible to view the contents of a Web server from any Explorer window, just as if they were local or network hard drives.

1.      Saving an Office document to a Web server using a Web Folder shortcut is almost exactly the same as saving a file to a local or network hard drive. 

2.      Choose File, Save As or Save As Web Page; then, in the Save As dialog box, enter the document name in the File Name box. 

3.      To choose a location, click the Web Folders icon on the Places Bar in the Save As dialog box.  Web servers you’ve previously configured appear as icons in this folder. 

4.      You can browse through existing folders, create new folders, and manage files within a Web Folder, using the same techniques you would use with a local or network folder.


NOTE:  The Web server must have FrontPage Server Extension or Office Server Extensions installed.  If your Internet service provider doesn’t currently support FrontPage extensions, you might ask whether they would be willing to install them.


To create a new web folder

1.      Open My Computer and then open the Web Folders icon.

2.      Double-click on the Add Web Folder icon to start the Add Web Folder Wizard


3.      Enter the full URL for the Web server to which you want to connect or click the Browse button if you prefer to use Internet Explorer to connect to the correct address, and then return to this dialog box.

4.      After you enter the server name, the wizard checks the name of the server and verifies that it supports web folders.

5.      In the second step of this process, enter a “friendly name” to identify the Web Folder to yourself– the default friendly name is the name of the server itself.

6.      You do not need to save files directly to a Web Folder.  You can cut, copy, and paste to it as well as use drag and drop from your machines hard drive, a network drive (like your H:\ drive) to a Web Folder, or vice versa.  This works very well to save content to a local folder, test it to make sure it works properly, and then publish an entire site (or update a site) in one simple drag-and-drop operation.

NOTE:  If you save a file directly to a Web server by entering a fully qualified URL in the Save As dialog box, windows creates a Web Folder shortcut automatically.

Internet Resources


Educational Search Engines and Directories

Ask Jeeves for Teachers      http://www.ajkids.com/teachers

Education Planet  http://www.lessonplanet.com/epttpopup.html

Kids Click http://sunsite.berkeley.edu/KidsClick!/

Eduhound  http://www.eduhound.com/

Internet Public Library  http://ipl.sils.umich.edu/ref/


Search Engines and Directories

All The Web All The Time   http://www.alltheweb.com/

Yahoo    http://yahoo.com

Alta Vista   http://www.altavista.com/


Graphics Search Engines and Directories

Free Sound Effects  http://www.stonewashed.net/sfx.html

Go Graph  http://www.gograph.com


Interactive Learning Sites for Students

Interactive Mathematics Miscellany and Puzzles

3-12th Grade - The following site contains links to many interactive game site which requires Java capable browser.




Brain Pop

3-12th Grade - BrainPOP's unique, award-winning Health, Science and Technology (HS&T) content is based on original, animated movies created to explain the human body and the world around us in an engaging, interactive journey for kids.



Fun Brain.com

Educational Games for all ages.



History of Invention

Interactive timelines.



Online Basic Math Facts Practice




A Plus Math Flash Cards



Math Tables for Kids



Pre-K Smarties

Pre – K interactive educational games.



Alphabet Soup

Pre-k interactive alphabet game.






Ask Jeeves for Kids

Student centered search engine, which blocks out undesirable sites.



Learning Planet

Pre – 6th Interactive educational games.




Easy Type

Free and fun typing tutor for kids.



Fact Monster

Online dictionary and Encyclopedia




Webster’s Online Dictionary and Thesaurus




Cool Science for Curious Kids

k-4 grades



Cool Math for Kids

Pre-2nd Grades




Billy Bear for Toddlers

Shape, color, letter, number recognition



Human Anatomy Online

Study the anatomy of the human body. It’s fun, interactive and an ideal reference site for students or who just want to know more about the medical descriptions used by doctors and nurses.  http://www.innerbody.com/htm/body.html




A Guided Tour of the Visible Human

3 Grade through Adult




Nutrition Cafe

Grades 5th-8th Contains interactive games that teach students about proper nutrition



Words and Picture Gallery

Games and activities will make learning phonics fun.



On-line Math Worksheets

Excellent sites for students with poor writing skills. Select the type of math problem, student then types answers into worksheet via the computer.  When finished, student selects “submit” and a graded version of the worksheet will appear.  Worksheet can then be printed.



Students On The Net

K-4th Grades -  Interactive math problems.  Students submit answers and get immediate feedback.






Boolean Operators

       place around a word or phrase to search for the exact word or phrase

+        words with plus sign before them will appear in search results

-          words with minus sign before them will not appear in search results







Creating Interactive Games


Creating Games with Excel’s “IF” Function


Use Excel’s “IF” function to create “if then” statements.



When using an “if” condition, you are setting the following conditions:


                            If this…. is true then do this……or if false then do this….

                                                                       Example formula :   =if(A1=4, “Correct,” “Try Again”)



  1. Click on the cell in which you want the results of the conditional function to appear.
  2. Click on the Paste Function button. 
  3. Click on the “If” function to select it.
  4. Click “OK.”


A dialog box will now be visible.


Use the “Logical_test field to specify the condition the formula should look for.

Use the “Value_if_true” field to specify what will happen if the condition is true.

Use the “Value_if_false” field to specify what will happen if the condition is false.


                    Logical_test   Value_if_true   Value_if_false

                                                                       Example formula :   =if(A1= 4, “Correct”, “Try Again”)



  1. After entering the formula into the fields, click “OK.”


IMPORTANT: Any words used in a formula must have quotation marks around them.











Creating Games with PowerPoint


Using multiple PowerPoint slides, ask the question on one slide and then have student click on hyperlink to learn the correct answer or try again.



Example PowerPoint Spelling Activity


Slide One

Slide Two

Slide Three

Slide Four

Slide Five

Slide Six

Slide Seven

Slide Eight

Slide Nine


Example:  Dag is hyperlinked to Slide Two.  The “See the Answer” button on Slide Two is hyperlinked to Slide Seven.


To visualize the hyperlink organization, draw a webbing map of your PowerPoint Game before you actually begin creating it.  Then, refer to the map as you create your slides and insert hyperlinks.



Rounded Rectangle: Click on the word that is spelled correctly.

Dog     Dag
Horse   Hors
Rabbit  Rabit
Rounded Rectangle: Sorry
Try again    See Answer
Rounded Rectangle: Correct!Rounded Rectangle: Sorry
Try again    See Answer
Rounded Rectangle: Sorry
Try again    See Answer