websavvy header

 

Adding Sound to Your Web pages

Image Linked Sound

 

 

comet
Click on the Comet

.

 

Steps:

    1. Select a sound and a graphic.
    2. Place the image in your local image folder
    3. Insert the image into your Web page
    4. Insert the sound into your Web page (Insert Media > plug-in )
    5. Link the sound to the graphic
    6. Test your sound in the browser

 

1) Select a Graphic and a Sound

Find a sound that you would like to link to a graphic.

For example, it you are teaching a language, you could choose a picture of an object and then record the name of the object .

= chile   (as is done in Wiki pedia)

Create the sound file using PowerPoint or any other program that you may have. Save it as an .aif or .wav. Keep the sound file short and the file size small. (under 100K)

2   Place the Image in Your Media Folder
The folder will be called "img" in the examples below.

 

3   Insert the image into your web page
In Dreamweaver - insert your cursor where you want the image to appear. From the file menu, insert image.

 

4  Insert the Sound into your web page
In Dreamweaver - insert your cursor any where in front of the image on your web page. Then select in the file menu, Insert Media > plug-in. Browse to your media folder. Dreamweaver will then insert the image into you web page. (If you do not have Dreamweaver and are hand-coding your page, then view the "source" of this page to find the coding.)

5   Link the Sound
Select the image and then link the text to the sound file in your "img" (or media) folder. In Dreamweaver - use the Properties window to insert the link.

 

6 Test the sound on both Windows and Macintosh platforms.

Example:  Betty Boop sound image

 

 

Main CTL Page | Sounds Page

 

Centers for Teaching and Learning  Updated  7/20/2007