Demo 3 - Image Optimization Comparison, Anchor Links, Pop-ups

Part 2: Anchor Links

We are going to set up a page in Dreamweaver where we have a list of links at the top that lead the user to various destinations on the page where they can view the comparative images..
  1. Create a new file in Dreamweaver by going to File>New. Name this file index.html, and save it directly into your "demo3" folder.
  2. Give index.html the <title> of Demo 3.
  3. Make a table: 600 px wide with 1 column and 6 rows, border of 0, cellpadding of 5, cellspacing of 0.
  4. In the top row, type Demo 3: Image Optimization Comparison, Anchor Links, Pop-up Windows.
  5. In the next row down, list descriptions for each of the images you just optimized followed by the word "Comparison". For example the first one in mine it would be "Eagle Photo Comparison". Separate each description with a line break.
  6. Center all of the text in this table.
  7. Now, in the next row, you will insert a table. (When you put a table within a table it is called a "nested table"). This table will be 500 px wide, 5 rows, and 2 columns, cellpadding of 10 and cellspacing of 0.
  8. The top row of this nested table should have its cells "merged". Type in here your description (again, mine would be Eagle Photo Comparison).
  9. In the second row, first column you will insert your first small photo. In the second row, second column, you will insert your second small photo.
  10. For each cell in the third row, type what you did to the photo above. For example: "optimized as JPG"
  11. For the fourth row down, merge these columns and type "please click on a photo to see enlarged view".
  12. Finally, for the bottom row, merge the two type "(back to top)"
  13. Center all of the items in your nested table. It should look like the table on the following page (except the border will = "0"):


    NEXT PAGE------------------------------------------------------------------------------------------->
    Eagle Photo Comparison
    optimized as JPG
    optimized as GIF
    please click on an image to see an enlarged view
    (back to top)

  14. Copy and paste this table into each of the remaining outer table cells, and swap out the images and the text appropriately for each pair of images.
  15. Now we will insert anchor links. Place your cursor at the spot just before your table starts. (You'll see that the cursor will become very long). Now go to the insert toolbar and choose the icon that looks like an anchor. Or, go to Insert>Named Anchor. It will ask you for an anchor name. Type "top".
  16. Now, match up the text that says "back to top" with this anchor by selecting it, and in the Properties toolbar for the Link, type "#top".
  17. Now, in the top cell of each nested table, we will insert named anchors that the menu items at the top will go to. Click inside of that first top cell and Insert a Named Anchor (as in #13). This time name it something appropriate to that set of photos (in my example it would be "eagle").
  18. Go back to the top menu, select the text, and for the Link in the Properties pallette, type the appropriate name, preceded by a #. (You guessed it, I would type "#eagle").
  19. Repeat steps 15-17 for the other three nested tables/menu items.
  20. Save demo3/index.html