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
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
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
Click here to listen http://www.apple.com/quicktime/tutorials/embed.html
Click here to view http://www.apple.com/quicktime/tutorials/embed2.html Click here to view • SRC="URL" Click here to listen • 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
the clip start automatically when loaded.
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
• BALANCE="XX" Quiet: – defines how the volume will be divided
• LOOP="TRUE|FALSE" Loud: • SRC="URL"
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