Site hosted by Angelfire.com: Build your free website today!

 

 

Making a Simple Jigsaw Puzzle with Dreamweaver Layers

Polar Bear Party

 

 

 

Here's one way to proceed with this project:

  • Find an image you want to use, and in PhotoShop ImageReady make it an appropriate size (image>size), pull out guides every 100 pixels (or other standard dimension) from the rulers, slice according to these guides, and save the images (and html, if you want) optimized in a folder that's part of a defined Dreamweaver site.
  • Also resize and save a "thumbnail" version of the whole picture in the same folder for a puzzle hint/
  • Open the page in Dreamweaver. You'll need to put each piece in a separate layer and assemble the picture. Try using a grid to do this (view>grid>show grid and >snap to grid. Try laying out the page with a simple table to contain a title, the thumbnail, a rectangle where the assembled picture will go, and extra space for the puzzle pieces.
  • Once you've got it set-- and it'll take some fiddling to get everything in position- add "drag layer" behavior to the IMAGE. Check to see the name of each layer before you add the behavior. Be sure your event in "on mouse over." Get the current position of each piece and move it into the beginning pig pile you want your audience to find. Take your time and keep it simple.
  • I nclude directions and anything else you can manage.