Dreamweaver Activities

*****DREAMWEAVER ACTIVITIES

1. Learn how to create a jump menu in Dreamweaver

If you have a lot of links on a page and don't have enough of space to fit them all a simple way to add the links is to create a jump menu.

1. First you have to create a List/Menu in a form. Click on Insert/Form and then click on Select/List Menu. 2. You can just hit OK…..You can also type in “Click here for additional links” and copy/paste into Label section too. OK 3. Open the behaviors panel by clicking on Windows/Behaviors. 4. Select the list menu and Click on the '+' symbol in the behaviors panel. 5. Click on 'Jump Menu' 6. In the 'jump Menu' pop-up-window enter the Text and the whole URL for your links. http://www.google.com 7. ADD a new link > click on the '+' > to delete a link click on the '-' 8. 15 pts_____ADD 3 LINKS that WORK. (not blocked either) 9. Click on OK. 10. Save Page as Sample. Test your drop menu and links.

2. Use the Dreamweaver behaviors panel to create small pop-up windows for ads or news!

This behavior helps to create pop-up ads, small browser windows etc.

1. On same Sample Page, Insert an image 2. Select Image>Click on the “+” in the Behaviors window>Click on Popup Message 3. Type a message to appear when the image is clicked on 4. 10 pts______You will now see Popup Message in the Behaviors window>See image, click in your window where it circled to choose onClick from a drop down list 5. Now save the page again>Test your Popup Message

3. Use the Dreamweaver behaviors panel to create an image swap

1. On same Sample Page, Insert an image 2. Select Image > Click on the “+” in the Behaviors window>Click on Swap Image 3. In the dialog box, choose a 2nd image…When you roll over the above image, this 2nd image will then appear 4. 10 pts______Test your page to make sure it works

4. Use the Dreamweaver behaviors panel to create an effect on images

1. On same Sample Page, look over to top right side of your screen to find the INSERT Window 2. Click on the down triangle > Choose Layout > Draw AP Div 3. Your cursor is now a “+” sign 4. Next, to the swap image your created above > Click and Drag/Draw a Box (it will be blue) 5. Click with your cursor inside this box > Insert an image like you normally would do > Top left of this box, you will get a hand to move around this layer you just drew and you can resize it from bottom right corner 6. Select Image > Click on the “+” in the Behaviors window > Click on Effects > Select any Effect 7. 15 pts______Test your page to make sure the EFFECT works 5. Learn how to use Dreamweaver Behaviors to Play Sound

**Using your new song in GarageBand, export to iTunes.

Share > Send to iTunes > Choose MP3 Encoder > Name it

1. On same Sample Page, choose Insert > Media > Plugin 2. Browse for the audio file-----Be sure to choose one that will play on Internet 3. Back in Dreamweaver > Select Plugin image > In the Properties Palette (bottom of screen) > Press Play 4. If it does not play, you may have to choose a different sound file that will play: mp3, wav 5. 10 pts______Save page > Test in Browser > Go back to Dreamweaver and resize the Plugin Box larger so you can see all play buttons

6. Use Dreamweaver to create Rollovers

original.gif rollover.gif

1. In a Fireworks or Photoshop, draw a shape > Add a fill Color > Add Text 2. Save this image as “original.gif” 3. On same image, Change the Text and/or Background color > Save As this image as “rollover.gif” 4. In Dreamweaver, look over to top right side of your screen to find the INSERT Window 5. Click on the down triangle > Choose Common > Table > 1 row…1 column 6. Click inside table > In Properties palette, choose Center 7. Now in your web page, click Insert > Image Objects > Rollover Image. 8. In the display window that appears give your rollover a name, alt tag, link and browse to locate the Original Image and Rollover Image. (this would be the small text that appears when you roll over your image and used for blind users) 9. 20 pts______Click OK > Save in same folder(desktop) as your images are saved > Test in browser and rollover image to see change. i. You could then make this link to next page, ect…