Readings:

1. W3Schools Online Web Tutorials
   • CSS Grouping/Nesting
   • CSS Dimension
   • CSS Display
   • CSS Positioning
   • CSS Floating
   • CSS Align

______________________________________________________

Introduction:

[kml_flashembed movie=” http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=week7-110322234753-phpapp01&stripped_title=week7-dreamweaver-behavior-image-hotspots&userName=rowenali” width=”525″ height=”405″ allowfullscreen=”true” /]

______________________________________________________

Section 1. Creating Image Hotspots:

http://www.youtube.com/watch?v=FTlbgpz1VNw

______________________________________________________

Section 2. Adding Dreamweaver behavior effects:

Action includes: appear/fade, blind, grow/shrink, highlight, shake, slide, squish

Event includes: onlick, onload, mouseover, mousedown, mouseup, etc.

______________________________________________________

Section 3. Jump Menu and Jump Menu Go:

______________________________________________________

Section 4. Swap Images:

This is another set of instructions:

______________________________________________________

Section 5. Show-hide elements (onload, Onmouseover, show/hide):

______________________________________________________

Section 6. Pop-up message:

______________________________________________________

Assignment (5 points):

Please create a Web page. Here is the example. These elements should be included on your page:

1. Same heading, banner, setup and footer of your week6 page, just change the content section
2. Image hotspots (at least 2 hotspots on one image – 1 point)
3. Dreamweaver behavior effects (include at least two effects) (1 point)
4. Jump menu go (1 point)
5. Popup message (1 point)
6. Show/hide elements (1 point)

***Make sure to create and upload the necessary extra folder and files on your server.

When you are done, please add a link of this page on the Spry menu bar of your week6 page (which is the front page linked to our class blog).