Teaching with Interactive Web Pages

Manual written by: Cindy Callaway

Updated by Michael Mann 2/15/2004

Introduction to WebQuests

What is a WebQuest

• Inspired by Bernie Dodge
• Interactive online lesson or unit
• Student completes with minimal teacher guidance
• Guides student to locate resources needed through the use of hyperlinks
• Read Dr. Alice Christie’s “What is a WebQuest” at http://www.west.asu.edu/achristie/675wq.html

Components of a WebQuest

• Introduction – grabs student’s attention, while introducing him to the task
• The Task – provide a general description of the task and resulting products
• The Process – provides detailed directions upon completing the task and related projects
• Resources – Print resources and hyperlinks to online resources/activities that the student will use during the Process (may be embedded within the Process)

• Conclusion – brings closure the quest, reminding the student of what was learned
• Reflection – an activity that encourages the student to reflect on what was learned

· Teacher Page

• Evaluation – provides a detailed description of project evaluation, typically includes a rubric
• Extension – suggest activities for extending learning of WebQuest topic
• Notes to Teacher – includes learning objectives, state standards met, supplementary resources, worksheet and materials needed

Finding WebQuests

•http://www.macomb.k12.mi.us/wq/webqindx.htm

•http://edweb.sdsu.edu/webquest/webquest_collections.htm

•http://education.nmsu.edu/webquest/wq/

•http://sesd.sk.ca/teacherresource/webquest/science.htm

•http://www.west.asu.edu/achristie/wqmatrix.html

•http://edweb.sdsu.edu/webquest/matrix.html

Creating Your Web Page with Front Page

Hyperlinks
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. Insert object (text, clip art, drawing...). 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 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. Left click on the "Use Your Web Browser to Select a Page or File" button. 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. 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. Left click on the “E-mail Address” button. In the window, type the email address.
	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. Left click on the “Create New Document” button. Type the name of your new page and click OK. new_page.html

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

Bookmarks

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.

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

Type the name of your bookmark into the “Bookmark Name” field and then click “OK.” The bookmark will now appear on the page.
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.
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
In the Hyperlink window click on the Bookmark button. In the small window that will open select the bookmark you want and click OK. Repeat this process for each link in the “Navigation Bar.”

Inserting Buttons
From the Insert Menu, click “Web Component.”
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.
Theme 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.

Tables

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