0

Week7 10/24 Effects

10/20/2012

Readings:

  1. W3Schools Online Web Tutorials

______________________________________________________

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

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

  

  

  

STAY IN TOUCH

Simple Calendar

April 2025

Sun Mon Tue Wed Thu Fri Sat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

LEAVE A MESSAGE

<div class="wpcf7 no-js" id="wpcf7-f33-o1" lang="" dir="ltr" data-wpcf7-id="33"> <div class="screen-reader-response"><p role="status" aria-live="polite" aria-atomic="true"></p> <ul></ul></div> <form action="/?page_id=178#wpcf7-f33-o1" method="post" class="wpcf7-form init" aria-label="Contact form" novalidate="novalidate" data-status="init"> <div style="display: none;"> <input type="hidden" name="_wpcf7" value="33" /> <input type="hidden" name="_wpcf7_version" value="6.0.5" /> <input type="hidden" name="_wpcf7_locale" value="" /> <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f33-o1" /> <input type="hidden" name="_wpcf7_container_post" value="0" /> <input type="hidden" name="_wpcf7_posted_data_hash" value="" /> </div> <p > <font size="1" face="georgia" color= #888888 >Your name: (required) <span class="wpcf7-form-control-wrap" data-name="your-name"><input size="28" maxlength="30" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" value="" type="text" name="your-name" /></span> </font> </p> <p> <font size="1" face="georgia" color= #888888>Your email: (required) <span class="wpcf7-form-control-wrap" data-name="your-email"><input size="28" maxlength="30" class="wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email" aria-required="true" aria-invalid="false" value="" type="email" name="your-email" /></span> </font> </p> <p> <font size="1" face="georgia" color= #888888 >Subject: <span class="wpcf7-form-control-wrap" data-name="your-subject"><input size="28" maxlength="30" class="wpcf7-form-control wpcf7-text" aria-invalid="false" value="" type="text" name="your-subject" /></span> </font> </p> <p> <font size="1" face="georgia" color= #888888>Your message: <span class="wpcf7-form-control-wrap" data-name="your-message"><textarea cols="40" rows="3" maxlength="2000" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" name="your-message"></textarea></span> </font> </p> <p> <font size="1" face="georgia" color= #888888>Input this verification code: </font> </p> <p><input type="hidden" name="_wpcf7_captcha_challenge_captcha-382" value="2704540344" /><img class="wpcf7-form-control wpcf7-captchac wpcf7-captcha-captcha-382" width="72" height="24" alt="captcha" src="https://files.cunyac.reclaimhosting.dev.s3.amazonaws.com/wp-content/blogs.dir/854/files/wpcf7_captcha/2704540344.png" /><span class="wpcf7-form-control-wrap" data-name="captcha-382"><input size="15" maxlength="15" class="wpcf7-form-control wpcf7-captchar" autocomplete="off" aria-invalid="false" value="" type="text" name="captcha-382" /></span> </p> <p><input class="wpcf7-form-control wpcf7-submit has-spinner" type="submit" value="Send" /> </p><p style="display: none !important;" class="akismet-fields-container" data-prefix="_wpcf7_ak_"><label>Δ<textarea name="_wpcf7_ak_hp_textarea" cols="45" rows="8" maxlength="100"></textarea></label><input type="hidden" id="ak_js_2" name="_wpcf7_ak_js" value="153"/><script>document.getElementById( "ak_js_2" ).setAttribute( "value", ( new Date() ).getTime() );</script></p><div class="wpcf7-response-output" aria-hidden="true"></div> </form> </div>