Week7 Dreamweaver Behavior & Image Hotspots


Published on

Published in: Education, Technology, Design
1 Like
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Week7 Dreamweaver Behavior & Image Hotspots

  1. 1. gslis751<br />1<br />Image Hotspots&Dreamweaver Behaviors<br />
  2. 2. Dreamweaver behaviors – What?<br /><ul><li>allow visitors to interact with a Web page
  3. 3. change the page in various ways
  4. 4. a combination of an event with an action triggered by that event. In the Behaviors panel, you add a behavior to a page by specifying an action and then specifying the event that triggers that action. </li></ul>http://www.adobe.com/support/dreamweaver/interactivity/behavior/<br />2<br />2<br />gslis751<br />
  5. 5. gslis751<br />3<br />Image Hotspots – What?<br /><ul><li>creates an group of invisible link buttons (hotspots) on an image;
  6. 6. contains one or more hotspots, each leading to another Web page</li></li></ul><li>gslis751<br />4<br />Image Hotspots – how to<br /><ul><li>Insert the image
  7. 7. Properties panel > Map field > give a name
  8. 8. Select one of the image map tools (square, circle, or another shape)
  9. 9. Draw the hotspot
  10. 10. Add a link to the hotspot
  11. 11. Set Target property</li></li></ul><li>gslis751<br />5<br />Dreamweaver behaviors<br />What?<br /><ul><li>Pre-packed JavaScript programs
  12. 12. Add interactivity to the Web pages with ease
  13. 13. The JavaScript code will be added to the head and to the body sections</li></ul>What for?<br /><ul><li>Make portions of Web page appear/disappear
  14. 14. Open a new browser window as specific size
  15. 15. Change background color of any background
  16. 16. Open an alert box for messages</li></li></ul><li>gslis751<br />6<br />Dreamweaver behaviors -elements<br /><ul><li>Action – what is supposed to happen
  17. 17. Event – which triggers the action
  18. 18. HTML tag – which is redefined by the behaviors</li></li></ul><li>gslis751<br />7<br />Behaviors – consist of<br /><ul><li>Appear/Fade - makes an element appear or fade away.
  19. 19. Highlight - changes the background color of an element.
  20. 20. Blind - simulates a window blind that goes up or down to hide or reveal the element.
  21. 21. Slide - moves the element up or down.
  22. 22. Grow/Shrink - increases or reduces the size of the element.
  23. 23. Shake - simulates shaking the element from left to right.
  24. 24. Squish - makes the element disappear into the upper-left corner of the page.</li></li></ul><li>gslis751<br />8<br />Behaviors – how to(div tags and images)<br /><ul><li>Applying behaviors</li></ul>Window>Tag Inspector > behaviors > +<br />Select the div tag or image ID<br />Choose the action<br />Change the event: onclick/onload, etc.<br /><ul><li>Remove behaviors</li></ul>Behavior Panel > Click the one > -<br /><ul><li>Edit behaviors</li></ul>Behavior Panel > double-click the behavior<br /><ul><li>Link events without opening a Web page (the link is there, but it will not open a web page. For example, on our class blog menu, the link Introduction and Contents look like links, but they are not linked to any web pages.</li></ul>Property Panel > link > #<br />Property Panel > link > Javascript:;<br />
  25. 25. gslis751<br />9<br />Jump Menu and Jump Menu Go<br />Insert > Form > Jump Menu<br />This is the end result on Live View in DW.<br />
  26. 26. gslis751<br />10<br />Swap Images<br /><ul><li>Create the triggers (div tags or images)
  27. 27. Insert the first image (make sure to redefine the size of all the images, so that they appear in the same size)
  28. 28. Give the image an ID in ID field of properties panel (this is a must)
  29. 29. Select the first trigger, Tag Inspectors > Behaviors > + > Swap Image
  30. 30. Image Source > select the first image ID
  31. 31. Set source to > select the file name of the second image
  32. 32. Check the Preload option.</li></li></ul><li>gslis751<br />11<br />Popup Message<br /><ul><li>Select the trigger
  33. 33. Tag Inspector > Behaviors > +
  34. 34. Choose Popup Message
  35. 35. Type the message
  36. 36. OK</li></li></ul><li>gslis751<br />12<br />Special Attention for Upload<br /><ul><li>When you create your Web page with Dreamweaver behaviors, Dreamweaver automatically create a folderinside your site folder called SpryAssets.
  37. 37. Inside this folder, Dreamweaver automatically saves files namedSpryEffects.js. When you upload your .html file to your sever, make sure you upload this SpryAssets folder and this SpryEffects.js exactly at the same place.</li>