CS 22: Enhanced Web Site Design - Week 5Slide 1 (of 22) Enhanced Web Site Design Stanford University Continuing Studies CS 22 Mark Branom Course Web Site:

Slide 2 of 15 CS 22: Enhanced Web Site Design - Week 5 Week 5 Using Photoshop ImageMaps Using Sound and Video

Slide 3 of 15 CS 22: Enhanced Web Site Design - Week 5 Graphic Manipulation See “Using Photoshop ”

Slide 4 of 15 CS 22: Enhanced Web Site Design - Week 5 Enhancing with sound/video Adding sound and/or video to your web site can make viewing your site an exciting and vibrant experience. However, depending on how you utilize this technology, it can also bog down the servers, and make visitor experience of your web site a real drag.

Slide 5 of 15 CS 22: Enhanced Web Site Design - Week 5 Creating Sound Files Software (Free): Audacity: FreeCorder: GarageBand (Mac): Software ($$$): Cakewalk: Audition: Soundbooth: SoundEdit Pro: Some Common Sound File Formats –AIFF: Audio Interchange File Format | Mac/CD –AU: µlaw (mu-law) Format | Unix –MIDI: Musical Digital Interface | Synthesizers –MPEG: Moving Picture Experts Group (mp3) –Real Audio (.ram/.ra) –WAV: Windows Audio format

Slide 6 of 15 CS 22: Enhanced Web Site Design - Week 5 Sound Archives

Slide 7 of 15 CS 22: Enhanced Web Site Design - Week 5 Creating Videos Imovie (Macintosh) – Windows Movie Maker (Windows) – Quicktime (Mac/Windows) – Director (Mac/Windows) – RealProducer (Mac/Windows) – – Windows Media Audio & Video (Mac/Windows) – Flash (Mac/Windows) – Captivate (Windows) – Camtasia (Windows) –

Slide 8 of 15 CS 22: Enhanced Web Site Design - Week 5 Things to know about video... Television - 30 frames/sec ASF: Advanced Streaming Format ASX: Advanced Streaming Format metafile (contains metadata - URL, title, author, copyright, etc.) AVI: Audio Video Interleave MPEG: Motion Picture Experts Group QuickTime (Apple) RealVideo (Real Networks)

Slide 9 of 15 CS 22: Enhanced Web Site Design - Week 5 Using the Anchor Tag Click here to listen Click here to view Click here to listen Advantages: –Page loads instantly. No waiting for large files to download in the background. –Works with all browsers, even version 1.1N Disadvantages: –Requires plug-ins or players –Can't adjust the height/width or location of the video/sound.

Slide 10 of 15 CS 22: Enhanced Web Site Design - Week 5 tag SRC="URL" AUTOSTART="TRUE|FALSE" ALIGN="BOTTOM|TOP|LEFT|RIGHT" ALT="ALTERNATIVE TEXT" BORDER="XX" -- in pixels LOOP="TRUE|FALSE" HEIGHT="XX" -- in pixels WIDTH="XX" -- in pixels HIDDEN="TRUE|FALSE" VSPACE="XX" -- space above/below embedded object (in pixels)

Slide 11 of 15 CS 22: Enhanced Web Site Design - Week 5 examples

Slide 12 of 15 CS 22: Enhanced Web Site Design - Week 5 BGSOUND is not supported by Netscape. You can create a similar effect by using the EMBED tag, setting the height & width to 0 and have the clip start automatically when loaded. That said, it can create some nifty sound effects on IE browsers

Slide 13 of 15 CS 22: Enhanced Web Site Design - Week 5 BALANCE="XX" –defines how the volume will be divided between the 2 speakers ( to ) LOOP="TRUE|FALSE" SRC="URL" VOLUME="XX" –Defines the volume of the background sound ( to 0)

Slide 14 of 15 CS 22: Enhanced Web Site Design - Week 5 example Quiet: Loud:

Slide 15 of 15 CS 22: Enhanced Web Site Design - Week 5 Sound/video examples –Link example –Embed example –Link example –Embed example –BGSOUND example