Comm 380 | In-Class Assignment | Week 9 | Romain | 3 POINTS

1 Create a new directory in your site folder called week9. Create a directory called images inside the week9 folder. Drag the supplied images into the images folder.

2 Within Dreamweaver create a new html file called rollovers.html and save it into the week9 folder.

3 Set up file and create divs as per demo.

4 Insert supplied images as shown, then create the rollovers as described below:

A Create a regular rollover using the Insert Rollover Image function (give an ID of buttonA).

Insert all remaining images where shown in example. Give each image a unique ID in the Properties window.

B Mark buttonB image. Create remote rollover (Swap Image Behavior) and swap F image (www) with www_over image.

C Mark buttonC image. Swap E image (web) with web_over image.

D Mark buttonD image. Swap G image (world) with world_over image.

E Mark web image. Swap G image (world) with surprise1 image.

F Mark www image. Swap C image (buttonC) with surprise2 image.

5 Create a link on your index page to week09.html – have the page open in a new window (Target: _blank). Then .zip compress your site folder and upload it to the week09 folder in the class online file server OR use Dreamweaver to synchronize your local files to your web server (with this option, I will grade from your live webpage).

A

B

C

D

E

F

.boxart .boxart .boxart .boxart #web

#www#images

#world

#wrapper

#ban

ner

A

G

B C D E F

380Commbodymargin: 25 0 0 35#wrapperwidth: 965pxheight: 575px#imageswidth: 880pxheight: 575pxfloat: Left#wwwwidth: 85pxheight: 575pxfloat: Rightbackground-color: #8DC63F#bannerwidth: 880pxheight: 110px

.boxartwidth: 135pxheight: 110pxfloat: Leftbackground-color: #DA523A#webwidth: 340pxheight: 110pxfloat: Leftbackground-color: #F7941E#worldwidth: 880pxheight: 465pxbackground-color: #27AAE1