–– workshop home ––

Workshops

Design and Architecture: Exercises

Imagemaps

Use this file: imagemap.html

  1. Add a triangle shape in the upper-right region of the image and make it link to the Google home page.

Position

Use this file: position.html

  1. Uncomment div#part0
    1. Why does the div appear where it does? (you should see black background with blue text)
  2. Uncomment div#part1
    1. Why does the div appear where it does? part1 is positioned relative — relative to what?
    2. Why does the div extend off the screen?
    3. Reside the browser window. Watch for where word wrap begins, and where a horizontal scrollbar appears. Be sure you understand why.
  3. Uncomment div#part2
    1. Why does the div appear where it does?
    2. Reside the browser window. Watch for where word wrap begins, and where a horizontal scrollbar appears. Be sure you understand why.
  4. Comment out div#part2
  5. Uncomment div#part3
    1. Why does the div appear where it does?
    2. Reside the browser window. Watch for where word wrap begins, how it behaves relative to the other content on the page, and where a horizontal scrollbar appears. Be sure you understand why.
  6. Comment out div#part3
  7. Uncomment div#part4
    1. Why does the div appear where it does?
    2. Reside the browser window. Watch for where word wrap begins, how it behaves relative to the other content on the page, and where a horizontal scrollbar appears. Be sure you understand why.
  8. Comment out div#part4
  9. Uncomment div#part5
    1. Why does the div appear where it does?
    2. Reside the browser window. Watch for where word wrap begins, how it behaves relative to the other content on the page, and where a horizontal scrollbar appears. Be sure you understand why.
  10. Uncomment all parts and see what you get.
  11. Change as many parameters as you wish. In particular, try
    • change pixels to percentages
    • negative values
    • view in Internet Explorer as well as Firefox

Layers

Use this file: layers.html

  1. Resize the browser window so you can see what happens to the different layers.
  2. Change the z-index on div1 to 5, then set it back to 1
  3. Change the z-Index on div3 to 5. What's the difference?