Creating a Multi-Paged Web Site
WebQuest
"Student Style"

You will create an in-depth web site that will be used to 'teach' a specific mathematics objective, while utilizing information on the web to provide data, or resources for a required application that relates to a specific mathematics objective.  The web site will be modeled after a WebQuest.

"A WebQuest," according to Bernie Dodge , the originator of the WebQuest concept, "is an inquiry-oriented activity in which most or all of the information used by learners is drawn from the Web. WebQuests are designed to use learners' time well, to focus on using information rather than on looking for it, and to support learners' thinking at the levels of analysis, synthesis, and evaluation."

This web site must be modeled after a WebQuest and include the six building blocks suggested by Dodge:

• The Introduction
• The Task
• The Process
• The Resources
• The Evaluation
• The Conclusion

The project is divided into four parts: 

• Research
• Development
• Production
• Perfection.

Research -- Day 1

Students will create an in-depth web site that will be used to 'teach' a specific mathematics objective, while utilizing information on the web to provide data, or resources for a required application that relates to a specific mathematics objective.   The Web Site should contain a minimum of six html pages and include appropriate graphics and or image

Planning Your Topic

Students will begin developing the topic for the math lesson.

Suggestions:

• Visit Math Web Sites
• MSTE – (http://www.mste.uiuc.edu/ )--especially the java applets under resources. We already have permission to use these in our lessons.
• The Math Forum (http://mathforum.org/) -- especially the tools section
• TeacherTECH@ Rice University (http://teachertech.rice.edu/Lessons/)
• NCTM – (http://www.nctm.org/high/ ) --especially illuminations
  
• Review Planning Document -- a copy of this file is also found in the @pickup folder on the student server.

Day 2 -- Students will complete the planning document and turn in.

Research lesson plans and web quests.  Review the following sites and develop ideas to create a lesson plan and/or a web quest for the math topic you are researching.

• Lesson Factory ( http://www.lessonfactory.com/) A source for countless original lesson plans from educators across the country. Here you'll find great ideas from teachers for teachers.
• The Math Forum ( http://mathforum.org/library/resource_types/lesson_plans) Math Forum’s Internet Library of Mathematics Lessons
• EdHelper – ( http://www.edhelper.com/) dedicated to providing teachers a single shop for educational resources
• WebQuest ( http://webquest.sdsu.edu/) -- This site is designed to serve as a resource to those who are using the WebQuest model to teach with the web. By pointing to excellent examples and collecting materials developed to communicate the idea, all of us experimenting with WebQuests will be able to learn from each other.
  • Readings and Training Material (http://webquest.sdsu.edu/materials.htm)

Assignment:   Complete Goal 1 of the planning.doc (This file is also in the @pickup folder). It should be saved to a new folder in your folder on the student server. Name this folder lesson. Refer to the MSTE web site for possible interactive elements from the web.

MSTE – (http://www.mste.uiuc.edu/ )--especially the java applets under resources. We already have permission to use these in our lessons.

Day 3 -- Planning

• Define WebQuest
• Create a lesson folder in your folder on the student server if you have not done so.
• Rough Draft of files used in your site is to be completed by Friday.
• using notepad, create the files you are going to use for your Math Lesson - Web Site.  The files should include the following information: -- include file name, title, and content for each particular page.
• Right click on each of the links below. Save the .txt file to your lesson folder. When done, open notepad and you can complete the necessary information for each file. Delete the suggestions from each file. Decide on a title for each file now.
• Introduction
• Task
• Process
• Resources
• Evaluation
• Conclusion
• Access the following website:   Building Blocks of a WebQuest (http://projects.edtech.sandi.net/staffdev/buildingblocks/p-index.htm) for additional directions of what to include in the content of your pages.

Assignment:   Research information outside of class. Printed copies of these files will be due this Friday in class.

Day 4

A WebQuest is an inquiry-oriented activity in which most or all of the information used by learners is drawn from the Web. WebQuests are designed to use learners' time well, to focus on using information rather than looking for it, and to support learners' thinking at the levels of analysis, synthesis and evaluation. The model was developed in early 1995 at San Diego State University by Bernie Dodge with Tom March, and was outlined then in Some Thoughts About WebQuests.

One of the main components of a webquest that differentiates them from paper/pencil worksheets is the use of an interactive website, or using the Internet as a tool for data collection. Today is the FINAL day to decide on the way you plan to use the Internet. You must either

1. Find sites that direct the audience to obtain data that will be used in the course of your mathematics lesson, or

2. Find a site that has a java applet or flash animation that can be used as an interactive tool for your 'students'.

If you have still not determined the goal for your site, I have one more suggestion for you interactive tools. The National Library of Virtual Manipulatives is a resource from which teachers may freely draw to enrich their mathematics classrooms. The materials are also of importance for the mathematical training of both in-service and pre-service teachers. The library is actively being extended and refined through projects including the eNLVM, a project to develop interactive online learning units for mathematics.

• Check out the site. Use the tools for Algebra, Geometry, Measurement or Data Analysis and Probability
  
  
  
• Browse the 'Online Math Applications' .  (http://library.thinkquest.org/4116/ )(this page was created by High School Students!)

This information should complete your planning.doc. When you have all parts of it completed, make sure your name is on the document and print it. It should be placed in the 'black box' before the end of the period NO EXCEPTIONS.

Assignment: Access the following website:   Building Blocks of a WebQuest (http://projects.edtech.sandi.net/staffdev/buildingblocks/p-index.htm) for additional directions of what to include in the content of your pages. Research information outside of class. Printed copies of these files will be due this Friday in class.

Days 5-6

• Rough Draft of files used in your site is to be completed by Friday.
• using notepad, create the files you are going to use for your Math Lesson - Web Site.  The files should include the following information: -- include file name, title, and content for each particular page.
• Right click on each of the links below. Save the .txt file to your lesson folder. When done, open notepad and you can complete the necessary information for each file. Delete the suggestions from each file.
  
  Decide on a title and a filename for for each file now.
  
  Complete the CONTENT for each of the pages. Your documents should be written in notepad. Make sure your paragraphs are at least five sentences; opening statement, three support sentences, and a closing statement.
  
• 'cool' first page:  index.html
• Introduction
  The purpose of this section is to both prepare and hook the reader. The student is the intended audience. From the WebQuest template: Write a short paragraph here to introduce the activity or lesson to the students. If there is a role or scenario involved (e.g., "You are a detective trying to identify the mysterious poet.") then here is where you'll set the stage. It is also in this section that you'll communicate the Big Question (Essential Question, Guiding Question) that the whole WebQuest is centered around.
• Task
  The task focuses learners on what they are going to do - specifically, the culminating performance or product that drives all of the learning activities. From the WebQuest template: Describe crisply and clearly what the end result of the learners' activities will be. Don't list the steps that students will go through to get to the end point. That belongs in the Process section.
• Process
  This section outlines how the learners will accomplish the task. Scaffolding includes clear steps, resources, and tools for organizing information. From the WebQuest template: To accomplish the task, what steps should the learners go through?...Learners will access the on-line resources that you've identified as they go through the Process....In the Process block, you might also provide some guidance on how to organize the information gathered
• Resources
  Describe what's needed to implement this lesson. Some of the possibilities: Class sets of books E-mail accounts for all students Specific software (how many copies?) Specific hardware (what kind? How many?) Specific reference material in the classroom or school library Video or audio materials If the lesson makes extensive use of specific websites, it would be appropriate to list, describe and link them here. It would also be helpful to link the names of books suggested to Amazon or other online sources. Describe also the human resources needed. how many teachers are needed to implement the lesson. Is one enough? Is there a role for aides or parents in the room? Do you need to coordinate with a teacher at another school? With a partner in industry or a museum or other entity? Is a field trip designed in as part of the lesson?
• Evaluation
  This section describes the evaluation criteria needed to meet performance and content standards. From the WebQuest template: Describe to the learners how their performance will be evaluated. The assessment rubric(s) should align with the culminating project or performance, as outlined in the task section of the WebQuest. Specify whether there will be a common grade for group work vs. individual grades.
• Conclusion
  The conclusion brings closure and encourages reflection. From the WebQuest template: Summarize what the learners will have accomplished or learned by completing this activity or lesson. You might also include some rhetorical questions or additional links to encourage them to extend their thinking into other content beyond this lesson.

Access the following website:   Building Blocks of a WebQuest (http://projects.edtech.sandi.net/staffdev/buildingblocks/p-index.htm) for additional directions of what to include in the content of your pages.

Assignment:   Complete the notepad files for each page of your WebQuest. Print, staple and turn in at the end of class Monday. Each late day will have a 10 point deduction.

Research Day & Field Testing for 10th grade students

Research your particular mathematics topic. I would suggest looking for online lessons, other mathematics WebQuest, or reviewing like topics in your textbook.

Record any resource in your planning.doc so you can reference these on your citation page.

This page can also be used to complete your six WebQuest content files (for a 10 point reduction in the grade).

Phase II of Math Web Site – (Development 3 days)

Day 1— Good Web Page Design

Read the following and discuss in class: Elements of graphic design

Review the following web sites and design a 'rough draft' of your site. You should decide on colors for backgrounds, fonts, and the type of look you want for your site now.

• Elements of Design,
• Good Design features,
• Bad Design features
• Web Page Design For Designers   ( http://www.wpdfd.com/ )
  

Search for background images, clipart, photos etc. that you can incorporate into your web site. You should have at least TWO images that you want to use on every page of your site. A banner for your site will be created in tomorrows lesson, so you need to have these images saved to your lesson folder. You can spend the rest of the class searching for these images.

Clip Art Ideas

Assignment: Read — RUBRIC for Math Lesson Web Site
(http://hs.houstonisd.org/westsidehs/Curriculum/WebMastering/Lesson/mathrubric.htm)
(the rough draft development for this project should be complete!)  

Day 2 — Creating a Banner

Making a banner in Photoshop

Since a banner comes at the top of each page in a site, it is the single most important part of your site's design. It sets the style and mood, the colors and fonts, and even the layout of the body text and graphics. If you create your banner with care, the rest of your design decisions will easy. The following directions will help you make a simple (but oh so important) personal homepage banner in Photoshop.

1. Create a folder in your lesson folder called images. Create a folder INSIDE that folder named drafts. This is where you will save all the graphics and rough drafts used for your banners.

2. You will need at least one graphic to define your banner. Since you are doing a thematic webpage banner, the picture should represent who you are trying to teach. You can scan or download personal photos or you can take pictures off the Internet. To take them off the Internet, search in Google Web or Images modes using such words as "free school clipart" or "free chemistry photos." Once you find the picture you want, do a right click and save the graphic in the drafts folder.

3. Open Photoshop,
do a File / New
In the New popup box fill in the following:

Name: mathbanner
Width: 640 pixels
Height: 150 pixels
Resolution: 72 pixels/inch
Color Mode: RGB
Background Contents: White

4. Choose File / Save As and save this banner in the drafts folder as mathbanner.psd.

5. Open the graphic that you want to insert into your banner. You can put more than one picture into your banner by repeating steps 6 through 9

6. Select the part of the graphic you want and drag it into your banner.

Notes: The two most useful tools for selecting an object in a picture are the Polygonal Lasso Tool and the Magic Wand. To use the Polygonal Lasso, select it from the row of tools to the left of the screen. Click on the edge of the object. You will see a small circle, and this is the start of your selection. As you move your cursor you will see a line stretch out from the anchor. Click again on the object and you are anchored again. Now cut the object out by doing clicks and drags in this manner. If you make a mistake during this process, press the Esc key and/or
Control D.

When you reach full circle, the object will be surrounded by a moving line of dashes (dancing ants.) Click on the Move Tool and drag the object into the banner. The selection will make its own layer and have a box for sizing around it.

The Magic Wand is useful when there is a solid background behind your object. To select the object, click the Wand on the background. This selects the background, but don't worry. Go up the Select menu and click on Inverse. Now the object is selected, not the background. Drag the object into banner with the Move Tool.

Note: If at any time you realize that you have made several mistakes, use the History Palette. This palette lists your last 20 steps, but by clicking on the last correct step, you can undo all the bad steps and start over again.

7. When you drag the object into the banner, it will make another layer. You can see these layers in the Layers Palette on the right side of the window. If you can't see the Layers Palette, select Layers from the Windows menu. Double click on the words Layer 1 and change them to something descriptive of the object. You will notice that the other layer says Background.

8. Resize your object by holding Shift down, grabbing one of the corner boxes and dragging in or out. Generally, you would only want to make the object smaller. Enlarging an object often distorts or pixelates it.

9. Click on the object's layer so that it is highlighted in the Layers palette. Clean up the object with the Eraser or the Magic Wand. When you use the Eraser Tool, select an appropriate brush size at the top of the screen and then erase by dragging your mouse.

To erase with the Magic Wand, click on an area you want to erase and then press the delete key. The selected area disappears and the background shows through. Keep doing this as long as it is practical. Erasing with the Magic Wand erases best when there are large areas of one color.

10. To color your background, choose a color by clicking on the Foreground Color square under the tools at the left of the screen. When the Color Picker dialog box opens, select the color family by dragging the markers on the color column. Then click your cursor on the exact shade in the large color box. If you want a particular color from the object on your banner, take move your cursor to your banner and click on the color. Note that when you do this, your cursor turns into an eyedropper. Once the color is selected, select OK in the dialog box.

Now click on the background layer in the Layers palette and select the Paint Bucket Tool. Click on the banner and the "paint" from the bucket will spill into the background.

11. To add text, select the Horizontal Type Tool and then click in the general area where you want the words to go. When you do this, a blinking line with a square dot will appear on the banner. Choose a color for your text in the Foreground Color box. Choose a beginning size and font at the top of the screen. Now type in your words. Highlight the words and then click on a font in the font window. Press the up and down arrow keys until you find the font you want. You may also change the size and color while your words are highlighted.

Often it is best to divide your text up into several layers. To get a new text layer, click you cursor in another area and go through the same steps. Once the text layers are made, you can move them around by clicking on their layer, selecting the Move Tool and dragging the words where you want them. To redo the text, click on the T in their layer.

12. When your banner is finished, first do a regular Save. Then to get your banner ready for your web page, do File / Save for Web. In the dialog box that appears, you will see two versions of your picture. The original homebanner.psd will be on the left and the new version you are making is on the right.

If your banner is a simple drawing, you will select GIF in the upper right area. If there is a photo or a drawing with a lot of shading, then save it as JPEG. If you save it as JPEG, you will have to select the quality. In general select the highest quality possible that does not make the file size over 40K. You can see this file size in the lower left hand corner of the JPEG picture. Leave all the other options alone and click OK. Locate the lessons/images folder and save it there as mybanner.jpg or mybanner.gif.

13. You're finished!

Day 3 — Setting up your pages for your WebQuest.....

Set up your site in Dreamweaver. Your local folder should be your your lesson folder in your folder on the student server.

Open the 'template' file and study the layout. You will need to create this page using the following directions:

• Open a new file in Dreamweaver and save this file as template.html to your lesson folder.
• Title your page.
• Create a 1x1, 640 pixel table and align it to the center.
• Open Photoshop, and open the banner.psd file. (This file is in your draft folder in your images folder in your lesson folder in YOUR folder on the student server)
• Save the banner for the web: File/Save for Web as
  mathbanner.jpg (photos) or
  mathbanner.gif (graphics)
• Minimize Photoshop
• Insert your banner (image) in Dreamweaver at the top of your 1x1 table.
  Select your image (should have the sizing handles showing) and move the cursor to the right of the image using the arrow key on the keyboard. Hit shift/enter.
• Insert a 1 x 2 table, 640 pixels wide. Align the text to the top. This command is in the properties panel.
• Click in the left column of this table. Insert a 6x1 table, 150 pixels wide. (This can be changed later). Your should find appropriate images to be used as image links or buttons. You could also create your buttons in Photoshop or some online button generator.
• Save your file as template.html to your lesson folder. (NOTE: this IS NOT saved "as a template". This is just a file that you will use to create all the other files for this website.
• You should link all of your buttons (and text for these buttons if you have used it) to each html file that you will create. Note that these files DO NOT exist yet, but you will create them very soon. The files you should link to are listed below. Use these filenames.
  • intro.html
  • task.html
  • process.html
  • resources.html
  • evaluation.html
  • conclusion.html
• Open each .txt file in Dreamweaver. Note that the file appears just as it did in Notepad. You should select the text you have written and copy/paste it to the right of your navigation in the template.html file. Save each file with the appropriate filename (ie. intro.html). Be sure to title each and remove unnecessary content. The content for these pages must be WELL developed. I am expecting detailed explanations. Three days were spent researching this material and there are MANY examples to use as models for your site.

Goal: Create an HTML file for each of the .txt files that were created during the Development phase of this project is complete. You should have created the content for each of the six pages for the WebQuest AND created the banner.

Phase III of project:  Development. -- 6 days (Mid Project grade this FRIDAY, 10 )

• Each student must have all of the content entered for each of the pages that you are developing.
• Create a navigation system to all pages in your site.  All the links must work and none should be text links. Each page must be linked to all of the other pages.  Review template.html for an example of this.
  Suggestion:  The buttons should be labeled appropriately for the content on the page.
• All content of the pages MUST be in a 1 x 1, 640 pixel table. 
• Meta tags must be complete... keywords and content
• Cite all content and images used from other sources. (save your citations to your planning.doc. We will create a citations page at the end of the project)

Searching for 'cool' things for your web site.

Search for java applets, fonts, buttons, backgrounds, legal graphics, web templates (free), color schemes and other really neat things that you could use for your web site.  Each class will create a 'cool page' of links to sites you have determined useful. Here are some examples from me.  (Do not include these in YOUR sites.... :) Susan Boone

Free Clip Art
(http://hs.houstonisd.org/westsidehs/Curriculum/WebMastering/Lesson/clipart.html)

Clip art and photographs will make any lesson more appealing.  Although every drawing and photo on the web is copyrighted, there are plenty of sites that have free material.  Some of these sites will want you to give them credit to their site. Read their copyright restrictions before downloading material.
submitted bySusan Boone

Fun Things to Add to Your Pages
http://teachertech.rice.edu/Materials/TeacherTECH/extras/menu.html

Javascript can be thought of as an extension to HTML which allows authors to incorporate some functionality in their web pages. JavaScript is a scripting language which is similar in syntax to Java. The JavaScript code is embedded within the HTML file and is interpreted by the client browser. JavaScript brings interaction to the web pages.
submitted by Susan Boone

Assignment:   email me the following at sboone@houstonisd.org by the end of class on Tuesday.

• The URL of sites you have determined useful.
• Include the Title of the site
• Include a 1-3 sentence explanation of what the site is about
• For consistency,  use this format:
• Title of Site
• URL
• Indent the description
  (see examples above)

This assignment will be graded and a class web page will be created for you to use in the 'perfection' phase of the project.

Goal: HTML file should be created for each section of the WebQuest. You should have the following files in your lesson folder.

• intro.html
• task.html
• process.html
• resource.html
• evaluation.html
• conclusion.html

Each page should have working links to the others. You should have some indication on each page as to WHICH page you are on. You could include a header for each page, or indicate which page by differentiating the button for that page.

Make sure that each page has a correct TITLE on it. The title can be inserted in the title panel at the top of the page in dreamweaver. All pages must be complete by the end of the class period.

e-mail — links to 'cool' sites sent to me by students in class.

Phase IV -- Perfection Phase of Project (5 days)

• Review Rubric (see attached--) to make sure all criteria has been met for project.
• Make sure Design and Style meet class discussions.
• Buttons must be used for a Navigation System
• Develop Content (more than 3- 4 sentences are necessary for full understanding!)
• Add "cool stuff”.  http://hs.houstonisd.org/westsidehs/Curriculum/WebMastering/Lesson/email.htm

Create an evaluation for your WebQuest. Some suggestions are listed below.

• http://rubistar.4teachers.org/index.php
• Announcement to Our QuizStar Users:
  QuizStar is rapidly becoming one of our most popular free online tools. In the last year our user numbers have tripled, causing us to seek new methods of quickening QuizStar's performance speed and strengthening its reliably.
  This site makes great quizzes, but you need to set up a class and have the 'students' login, so it isn't very practical.
  http://quizstar.4teachers.org/index.jsp
• Make your own quiz at QuizYourFriends
  http://www02.quizyourfriends.com/index.html

Perfection Days

• Review graded rubric and make necessary corrections and/or completions.  Sign up for time slot to present.
• Prepare note cards for oral presentation.  Presentation will be from teacher laptop, and must be between 3 -5 minutes.
  • Introduce project and explain general overview
• Highlight application problem.   State how you used the internet to collect data, as an interactivity tool, for research (assigned in your project
• Point out evaluation procedures Review citation page with special emphasis on images
• Summarize web site and bring closure to presentation

Completed Project

Submit files to turnitin.com. Each student has an account that has been created in turnitin. You MUST check your HISD email to get the password for turnitin. If you have forgotten your HISD password, follow the directions at turnitin.com to login as a new user. (You forfeit your bonus points :( You will be asked to change the password as soon as you login. Once you have successfully logged in to turnitin, you should access your web class. There are currently 6 assignments, intro.html, task.html, process.html, resources.html, evaluation.html, and conclusion.html. You should submit each of these six files. The colored icon indicates the amount of information on each file that is found elsewhere. You shouldn't worry about the buttons and/or images, but you SHOULD be aware that text that is directly copy/pasted from another website is unacceptable. If you need additional help, there is a video at the turnitin site that will review the steps for you. Follow the directions from the video (we will watch this in class together). These files must be submitted by Friday, Febraury 24.

citation.html page should be completed today. This page lists all of the references that you have used in the course of your website development. You were instructed to save this info to your planning.doc. You will need to retrieve the web pages if you failed to do this. Go to the citation machine. Input the data needed for the appropriate resource. Note that if you cannot find the author of a website, or there is no date for the last update, you can leave these fields blank. Create the citation, copy the APA citation. You will now create the citation.html page.

Open Dreamweaver and map your site to your folder on the student server (NOT lesson!). From the folder panel, open lesson and ope the template.html file. Paste the APA citation you just created in the text area. Make sure to put a header. Create citations for your Electronic Resources/Web Pages. Answer the questions and generate the proper citation. Copy/Paste this information to your citation.html page. Be sure to title this page.

Create copyright information and include a text link to these citations on each page. You must access the special characters in Dreamweaver to get the copyright symbol. Create your copyright comment for hte bottom of each of your web pages. example: All Content Copyright © 2006. Save the file again as citation.html. Copy and paste the copyright info into intro.html. Add a link to this citation.html after the copyright info.
example: All Content copyright©2006: See Citations. Copy/paste this copyright info into each of the other web pages: task.html, process.html, resources.html, evaluation.html, and conclusion.html.

Create a portfolio link on each page. You can use the image on this page, or search for a new image. You should put this image near the bottom of each page. Make sure what you choose works well your your design. This icon should be linked to the index.html that is in the top level of your folder on the student server. The link should look like this: ../index.html. If your site is mapped properly, you can drag the link icon to this file. We created it in class on January 3. You can copy and past ../index.html in the link box if your prefer. Be sure to include this icon on ALL six of your lesson pages: intro.html, task.html, process.html, resources.html, evaluation.html, and conclusion.html. You will also need to update all of your funphoto and web pages as well.

Closure

Peer Evaluations – I have students that sit at ‘odd’ numbered computers show their lesson to 5 – 6 other students.   I give them about 4 minutes to explain their site.   I then have students move back to their original seats and have students that sit at ‘even’ numbered computers do the same. Students should give input based on the grading rubric.

Oral Presentation of Projects

Evaluation

Students are graded on their oral presentation as well as the site design, content, and quality of the mathematics lesson.   I use the attached rubric for this assessment.   Students are encouraged to use this rubric throughout the development of the site.

Mathematics Lesson Rubric
Student Projects

Extension Activity

• Students are encouraged to work with their mathematics teacher to decide on a specific topic for this project.   If there is another ‘teacher’ mentor it may help the students develop the content more easily
• Teachers are encouraged to actually use some of the students’ web sites in their classes.   I notify teachers that students are developing a math lesson and provide links for them to view.   It helps to personal the invitation and identify each teacher’s specific student.   I have my students fill out a note card at the beginning of this assignment listing their mathematics teacher, the period they have the class, and the specific subject.   I encourage them to choose an assignment that could possibly be counted as extra credit or double as a mathematics project.
• This project can be individualized for students that are struggling in mathematics.   They can be teamed with a middle school class or even an elementary class.   I have had students make sites for their parents that teach elementary school.
• Students are encouraged to seek additional resources for this site.   I have worked with the mentors at the Math Forum ( http://mathforum.org/dr.math/) and they have been more that willing to work with students. This allows for individualization as well as creating an excellent opportunity for online collaboration.

Home | Info | Calendar | HISD | Academics | Staff | Classes

This page was last modified on August 21, 2008
Mail comments to Susan Boone
©Houston Independent School District
Back to Web Mastering Classes