Enhanced Web Site Design Week 2 Stanford University Continuing Studies CS 22 •Using Photoshop and Fireworks • ImageMaps • Using Sound and Video Mark Branom [email protected] http://www.stanford.edu/people/markb/ Course Web Site: http://www.stanford.edu/group/csp/cs22 CS 22: Enhanced Web Site Design - Week 2 Slide 1 (of 22) CS 22: Enhanced Web Site Design - Week 2 Slide 2 (of 22) Page 1 of 11 Graphic Manipulation What is an image map? • See “Using Photoshop and Fireworks” • Image maps allow a webmaster to take an image and define more than one hyperlink for the image. Each hyperlinked section is called a "hotspot". • To define a hotspot, webmasters open the image in a graphics program and record the coordinates of the points corresponding to the hotspot boundaries. CS 22: Enhanced Web Site Design - Week 2 Slide 3 (of 22) CS 22: Enhanced Web Site Design - Week 2 Slide 4 (of 22) Page 2 of 11 Map tags rect <img src="map.gif" usemap="#name-of-map" /> <map name="name-of-map"> <area shape="rect" coords="x,y,a,b" <area shape="rect" coords="x,y,a,b" href="link1.html" /> href="link1.html" /> <area shape="circle" coords="x,y,r" href="link2.html" /> • Coordinates refer to the x/y coordinates for the upper left <area shape="polygon" and the lower right coordinates for the rectangle. coords="x1,y1,a1,b1,x2,y2,a2,b2,…" href="link3.html" /> </map> CS 22: Enhanced Web Site Design - Week 2 Slide 5 (of 22) CS 22: Enhanced Web Site Design - Week 2 Slide 6 (of 22) Page 3 of 11 circle polygon <area shape="polygon" coords="x1,y1,a1,b1,x2,y2,a2,b2,…" <area shape="circle" coords="x,y,r" href="link3.html" /> href="link2.html" /> • Coordinates refer to the x/y coordinates for as many are needed to define the polygon. • The x/y coordinates refer to the center of the circle. The r refers to the size of the radius (in pixels). CS 22: Enhanced Web Site Design - Week 2 Slide 7 (of 22) CS 22: Enhanced Web Site Design - Week 2 Slide 8 (of 22) Page 4 of 11 Enhancing with Imagemap software sound/video • Dreamweaver • Adding sound and/or video to your web site can make viewing your site an exciting and vibrant – http://www.adobe.com/products/dreamweaver experience. • Fireworks – http://www.adobe.com/products/fireworks • However, depending on how you utilize this technology, it can also bog down the servers, • Photoshop and make visitor experience of your web site a real drag. – http://www.adobe.com/products/photoshop •MapEdit – http://www.boutell.com/mapedit/ CS 22: Enhanced Web Site Design - Week 2 Slide 9 (of 22) CS 22: Enhanced Web Site Design - Week 2 Slide 10 (of 22) Page 5 of 11 Creating Sound Files Sound Archives Software (Free): • Audacity: http://audacity.sourceforge.net/ • FreeCorder: http://www.freecorder.com/ • GarageBand (Mac): http://www.apple.com/ilife/garageband/ • http://www.audible.com/ Software ($$$): • http://www.windowsmedia.com/ • Cakewalk: http://cakewalk.com/ • Audition: http://www.adobe.com/products/audition/ • http://www.apple.com/itunes/store/ • Soundbooth: http://www.adobe.com/products/soundbooth/ • SoundEdit Pro: http://rmbsoft.com/sep.asp • http://music.yahoo.com/ • http://www.mp3.com/ Some Common Sound File Formats – AIFF: Audio Interchange File Format | Mac/CD • http://www.archive.org/ – AU: µlaw (mu-law) Format | Unix – MIDI: Musical Digital Interface | Synthesizers • http://www.ourmedia.org/ – MPEG: Moving Picture Experts Group (mp3) – Real Audio (.ram/.ra) – WAV: Windows Audio format CS 22: Enhanced Web Site Design - Week 2 Slide 11 (of 22) CS 22: Enhanced Web Site Design - Week 2 Slide 12 (of 22) Page 6 of 11 Things to know about Creating Videos video... • Imovie (Macintosh) – http://www.apple.com/imovie • Television - 30 frames/sec • Windows Movie Maker (Windows) – http://www.microsoft.com/windowsxp/using/moviemaker/ • ASF: Advanced Streaming Format • Quicktime (Mac/Windows) – http://www.quicktime.com • ASX: Advanced Streaming Format • Avid FreeDV (Windows and Macintosh) metafile (contains metadata - URL, title, – http://www.avid.com/freedv/ • Director (Mac/Windows) author, copyright, etc.) – http://www.adobe.com/products/director/ • AVI: Audio Video Interleave • RealProducer (Mac/Windows) – http://www.real.com • MPEG: Motion Picture Experts Group – http://www.realnetworks.com/products/producer • Windows Media Audio & Video (Mac/Windows) • QuickTime (Apple) – http://www.microsoft.com/windowsmedia/ • Flash (Mac/Windows) • RealVideo (Real Networks) – http://www.macromedia.com/software/flash/ • Captivate (Windows) – http://www.macromedia.com/software/captivate/ • Camtasia (Windows) – http://www.camtasia.com CS 22: Enhanced Web Site Design - Week 2 Slide 13 (of 22) CS 22: Enhanced Web Site Design - Week 2 Slide 14 (of 22) Page 7 of 11 Using the Anchor Tag <embed> tag <a href="music.mp3">Click here to listen</a> http://www.apple.com/quicktime/tutorials/embed.html <a href="movie.mov">Click here to view</a> http://www.apple.com/quicktime/tutorials/embed2.html <a href="movie.asf">Click here to view</a> • SRC="URL" <a href="music.ram">Click here to listen</a> • AUTOSTART="TRUE|FALSE" • ALIGN="BOTTOM|TOP|LEFT|RIGHT" • Advantages: • ALT="ALTERNATIVE TEXT" – Page loads instantly. No waiting for large files to download • BORDER="XX" -- in pixels in the background. • LOOP="TRUE|FALSE" – Works with all browsers, even version 1.1N • HEIGHT="XX" -- in pixels • WIDTH="XX" -- in pixels • HIDDEN="TRUE|FALSE" • Disadvantages: • VSPACE="XX" -- space above/below embedded object (in – Requires plug-ins or players pixels) – Can't adjust the height/width or location of the video/sound. CS 22: Enhanced Web Site Design - Week 2 Slide 15 (of 22) CS 22: Enhanced Web Site Design - Week 2 Slide 16 (of 22) Page 8 of 11 <embed> examples <bgsound> <embed src="bach.mp3" • BGSOUND is not supported by Netscape. You hidden="true" height="0" can create a similar effect by using the EMBED width="0" border="0" alt="Bach's tag, setting the height & width to 0 and have Fugue in D Major"></embed> the clip start automatically when loaded. <embed src="movie.mov" • That said, it can create some nifty sound autostart="true" loop="false" effects on IE browsers height="640" width="480"> </embed> CS 22: Enhanced Web Site Design - Week 2 Slide 17 (of 22) CS 22: Enhanced Web Site Design - Week 2 Slide 18 (of 22) Page 9 of 11 <bgsound> <bgsound> example • BALANCE="XX" Quiet: – defines how the volume will be divided <bgsound src="mozart3.wav" volume="-1000"> between the 2 speakers (-10000 to +10000) • LOOP="TRUE|FALSE" Loud: • SRC="URL" <bgsound src="mozart3.wav" volume="0"> • VOLUME="XX" – Defines the volume of the background sound (-10000 to 0) CS 22: Enhanced Web Site Design - Week 2 Slide 19 (of 22) CS 22: Enhanced Web Site Design - Week 2 Slide 20 (of 22) Page 10 of 11 Sound/video examples Next week... • Meta Tags • Forms and CGI programming • http://www.stanford.edu/group/csp/cs22/video – Link example • eCommerce using PayPal – Embed example and/or Google Checkout • http://www.stanford.edu/group/csp/cs22/sound – Link example – Embed example – BGSOUND example CS 22: Enhanced Web Site Design - Week 2 Slide 21 (of 22) CS 22: Enhanced Web Site Design - Week 2 Slide 22 (of 22) Page 11 of 11.