A Digital Demo--Page Fifteen, Layers with Dreamweaver, Dis-jointed Rollover Kalamazoo College Richard Koenig Office Location: Light Fine Arts 203, Phone: 337.7003 To digital page To my homepage

Layers with Dreamweaver But first, let's jump into the drink to see this work. Please notice that you can move one of the sharks. Open and Save grab the above two images and save to that folder open dreamweaver save new document in same folder menu bar, file, save as "layer.html" Background Tile menu bar, modify, page properties choose "mjtile.jpg" Insert Layers menu bar, insert, layer click inside this layer and add a shark menu bar, insert, image, "shark2.gif" click on the handle (upper left) of the layer and position on the page keep this shark the size it came in as repeat the process insert two more layers, inserting the same shark each time but make the shark incrementally smaller each time use the shift key to constrain proportions when you re-size Link and Save click on the foremost layer look at the properties palette if you don't see a place to add a link, click on the shark itself the shark should appear as a thumbnail in the properties palette now you can add a link use your homepage save the file Add a Behavior to a Layer if you first click on the background then go to the behaviors palette you can add "drag layer" to a certain layer, such as one of the sharks you have to know what the particular layer is called however try adding this behavior to one of the sharks i did the next-to-the-largest shark Test in Firefox firefox, menu bar, file, open file see if you can move the one shark Dis-Jointed Rollovers with Dreamweaver But first, let's look at the page to see this work. Now, grab the above picture to use in the following demo Open and Import open "italy.jpg" in fireworks Tool box, text tool (it is the letter "A" in FW) Type something on the picture position where you want it to show up place upper left-center perhaps Slice Object: The Rollover highlight the text and go to the frame palette choose "duplicate frame" from pull down menu on side (after the current frame) while frame one is highlighted, delete the text from the main image now click back and forth on frame one and two to make sure you have the rollover effect click on frame two, highlight the text, and go to the behaviors palette (menu bar, window, behaviors) add swap image, it will ask if you want to slice it up... choose slice, then it will show you how it will do so, hit ok Hotspot Object: The Trigger tool box, hotspot tool, draw a hotspot over the butterfly at the center of image tool box, arrow cursor, highlight the hotspot go to the behaviors palette and add swap image again look at same dialogue box again..."when rolling over the current slice, swap an image in the slice chosen below" this is what we want, hit "ok" remember to add a url while the hotspot rectangle is highlighted Optimize & Check Formats tool box, arrow tool, click on the text and make sure it is optimized as a "gif" that supports transparency you can have all the other slices be jpg's to retain photo quality save as a fireworks png Export and Test menu bar, file, export wizard click "java rollover" when that dialogue box appears optimize image as a jpg at 90% quality (the text gif will export as that, don't worry) now go to firefox, open the htm file that has "italy" in the title

Next Page
Back to Index Page