Demo 3 - Image Optimization Comparison, Anchor Links, Pop-up Windows

Part 3a: Creating HTML pages for Pop-ups

Here we are creating 8 HTML documents that will ultimately be the pop-up windows when people click on your smaller images.
  1. Go back to your Demo 3 folder on the desktop. Create another folder now within that, called "popups".
  2. Create a new HTML file in Dreamweaver. Save it with an appropriate name, depending on the image that will be inserted (for example my first one would be "eagle.html"), within the popups folder. Go to Modify>Page Properties. Towards the middle of this dialogue box you will see Left Margin, Top Margin, Margin Width, and Margin Height. Set all of these to 0 value.
  3. Press on the Insert Image icon or go to Insert>Image. Select your image (I would select eagle_good.jpg). Take note of the pixel dimensions that Dreamweaver specifies to the right in the dialog box. (You will need this later).
  4. When the image is inserted, save the file again, making sure it is going into the "popups" folder.
  5. Repeat steps 2-4 for each of the seven remaining images.

Part 3b: Adding "Open Browser Window" Behavior

  1. Go back to your demo3/index.html file.
  2. Select the first small photo. Go to Window>Behaviors.
  3. Click on the + sign to add a behavior.
  4. Go to "Open Browser Window". If it is greyed out, make sure at the very bottom of this list where it says "Show Events for..." that IE 6 is selected.
  5. In the dialogue box, browse for the correct file name within the popups folder, then insert the correct width and height. You can disregard the other options.
  6. Now, where it says Events, on the left side of the Behaviors pallette, make sure the event is set to (onMouseDown). Make sure the () is around the onMouseDown, in order to get the little hand when you mouse over in the browser.
  7. Repeat steps 1-6 to have all of your small images open up larger versions as pop-up HTML files.