Sophisticated Uses in Creating a WebQuest

Image map (hotspots) Click on an image. In the Properties palette, notice the light blue square, circle and polygon in the bottom left. [If these are not there, click on the tiny arrow in the bottom right corner of the Properties palette to extend the palette.] To make a round hot spot on the image, click on the light blue circle, then click and drag the cursor on the image to size the circle. If you don't like the size or placement of the circle, Edit > Undo and try again. In the Link window of the Properties palette, type in http:// and the web address for the hotspot.
 
Backgrounds
  1. Go to Modify > Page Properties.
  2. Select the Browse button next to Background Image. Navigate to an image in your images folder and double click on it. Select Apply and then OK. This will tile any image selected.
  3. FYI: Image maps (hotspots) can't be used on background images.
  4. FYI: Create a one pixel high, and 1200 pixel wide white gif in photoshop. Then color the first 100 or 150 pixels on the left side of the gif. Use this as a background to create a colored strip down the left margin. Organize your links in this column.
 

 
Alt Labels Select an image and then describe the image in the Alt window in the Properties palette. This needs to be done on all images!
   
Flash buttons See the first burpquest tutorial (first.html#flash)
   
Sound clip See the second burpquest tutorial (second.html#sound)
   
Video clip  
  1. Make sure you have a mov file in your images folder.
  2. Go to Insert > Media > Plugin and double click on the .mov file in the images folder to insert it.
  3. By default the image is inserted at 32 pixels by 32 pixels which is very small. Select the Play button on the Properties palette. If this doesn't play, you will will need to preview the page (press F12 or the globe icon and a preview option). Notice that the movie will play in this little icon but you can only see a small portion of the screen. Change the Width and Height from 32 to 132 for both. Try playing it again.
  4. Experiment with the Width and Height options until satisfied.
  5. If you don't want the movie to automatically play when arriving at the page, add a short command (AUTOSTART=FALSE) in the code. To do this, click on the movie icon. Then select View < Code and Design to see the html code view. Type AUTOSTART=FALSE before the width tag. The code for my movie clip on the right is as follows:   <embed src="images/trevor.mov" AUTOSTART=FALSE width="132" height="132" align="right">
  6. For more code specifics on embedding objects try the following site: http://www.htmlcodetutorial.com/embeddedobjects/_EMBED.html
   
Use of tables See the first burpquest tutorial (first.html#table)
  Color table cells and table borders by clicking inside a cell then clicking on the Bg (Background color) or Brdr (Border Color of cell) icons in the Properties palette and picking a color.
   
PDF printable worksheet
  1. Create a worksheet in MS Word.
  2. Go to a computer that has Adobe Acrobat installed (the teaching station).
  3. Open the Chooser.
  4. Select Acrobat PDFWriter and then close the Chooser window.
  5. Open the worksheet created in MS Word.
  6. Select File > Print and OK and OK. Give it a lowercase, one word name (i.e., detective.pdf) and then Save the document.
  7. Place the pdf document in your images folder and then create a link to it.
   
Book covers linked to Amazon/BN reviews  

Grossology Book

Grossology: The Science of Really Gross Things!
by Sylvia Branzei, Jack Keely (1995)
Amazon.com
Barnes & Noble

(click image for review)
 
   
Rubric created at http://rubistar.4teachers.org/  
   
Created Quiz, Crossword Puzzle, or Puzzlemaker  

 

  
Titles/graphics created or modified in Photoshop Create a new transparent graphic 350 pixels by 75 for use at the top or your index page.
   
Creation of a transparent animated gif  
Create an Animated Gif: Use Photoshop Elements to create several layers, then animate them in the 'Save For Web' option. Note: If the image used is a photograph, the resulting gif doesn't have to be transparent.

Photoshop Elements Tutorial for Creating Animated Gifs
Photoshop Elements Tutorials
   
Graphical links/anchors Pick an icon or symbol that represents your quest. Place that icon at the top of all your pages. Link the icon to your index page by selecting it and typing index.html in the Link area.

WebQuest Rubric

Home