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.

[youtube]http://www.youtube.com/watch?v=dKo7oHntZXA[/youtube]

______________________________________________________

Section 3. Jump Menu and Jump Menu Go:

[youtube]http://www.youtube.com/watch?v=nyA-HAl3JRE[/youtube]

______________________________________________________

Section 4. Swap Images:

[youtube]http://www.youtube.com/watch?v=_Z3_66GOpkM[/youtube]

[youtube]http://www.youtube.com/watch?v=ud8KtYUYnzs&NR=1[/youtube]

This is another set of instructions:

[youtube]http://www.youtube.com/watch?v=q7i8vDTlAFs&feature=player_embedded[/youtube]

[youtube]http://www.youtube.com/watch?v=0gjGdAFZ2Ys&feature=related[/youtube]

______________________________________________________

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

[youtube]http://www.youtube.com/watch?v=Qw6JtbLofQY&feature=mfu_in_order&list=UL[/youtube]

[youtube]http://www.youtube.com/watch?v=XPvhtrcg0_k&feature=related[/youtube]

______________________________________________________

Section 6. Pop-up message:

[youtube]http://www.youtube.com/watch?v=xsYQkt4QkjI&feature=related[/youtube]

______________________________________________________

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).