Download presentation
Presentation is loading. Please wait.
2
Copyright © 2003 Pearson Education, Inc. Slide 4-1 Created by Cheryl M. Hughes The Web Wizards Guide to XML by Cheryl M. Hughes
3
Copyright © 2003 Pearson Education, Inc. Slide 4-2 CHAPTER 4 Bringing Web Pages to Life with Images and Multimedia
4
Copyright © 2003 Pearson Education, Inc. Slide 4-3 Images and Multimedia on the Web The ability to include images and other forms of multimedia has helped the Web grow in popularity Images and multimedia files are much larger in size than XHTML files and take longer to download to a users browser Higher speed Internet connections, like Cable and DSL, are becoming more accessible and affordable for home users. These faster connections allow for faster downloads of large files Before adding numerous image and/or multimedia files to a website, you must know who the audience of the site will be and how they access the Internet. For example, a site that is geared towards wireless device users, like cell phones and pagers, should not contain a lot of large graphic files because of the slow connection speed and the small size of the viewing space on the screens
5
Copyright © 2003 Pearson Education, Inc. Slide 4-4 Image File Formats Three primary formats for Web images: GIF – Graphics Interchange Format The GIF format supports 256 colors and is a good format for small non-photographic images like icons and buttons JPEG - Joint Photographic Experts Group JPEG is a compression technique that is used to reduce large file sizes for high quality images, like photographs PNG - Portable Network Graphics PNG was originally developed to replace the GIF format. The biggest difference between PNG and GIF is that PNG supports more than 256 colors The next slide will demonstrate the differences in image quality and file sizes for these 3 formats. Notice that the GIF file is much more grainy than the JPEG and PNG files. This is due to the restriction to only 256 colors.
6
Copyright © 2003 Pearson Education, Inc. Slide 4-5 Image File Formats Example JPEG Format Stage.jpg File size – 28k GIF Format Stage.gif File size – 13k PNG Format Stage.png File size –164k Original file – Windows Bitmap file – Stage.bmp File Size – 351k
7
Copyright © 2003 Pearson Education, Inc. Slide 4-6 The element The element in XHTML is used to include links to images in XHTML documents The element is an empty element The two required attributes are: src – Defines the path to the image file - can be an absolute or relative path alt – Defines alternate text for the image file that will display in place of the image if the client can not display images
8
Copyright © 2003 Pearson Education, Inc. Slide 4-7 Linking With the Element To use the element as a link: Embed the element within an element By default, web browsers place a blue border around the image to identify it as a clickable object To remove the blue border around the image, use a style definition: img { border: none; }
9
Copyright © 2003 Pearson Education, Inc. Slide 4-8 Image Example – XHTML code 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 6 Sample Image as a Link 7 8 9 10 This Web page contains a linked image file: 11 12 13 14 15 16 Isn't this fun? 17 18 19
10
Copyright © 2003 Pearson Education, Inc. Slide 4-9 Image Example – Web Browser
11
Copyright © 2003 Pearson Education, Inc. Slide 4-10 Image Maps Two types of Image maps: Server-side – The image map files are stored on the Web server and the Web server was responsible for interpreting clicks Client-side – The image map files are stored inside the XHTML file and are executed on the client, usually a Web browser Client-side image maps are more commonly used today Four shapes that can be defined as image areas: circle, circ rectangle, rect polygon, poly default
12
Copyright © 2003 Pearson Education, Inc. Slide 4-11 Image Map Example - Image Map File for myimage map: 1 2 3 <area shape="circle" alt="Red Balloon" coords="155,123,34" href="red.html" title="Red Balloon" /> 4 5 <area shape="rect" alt="Blue Balloon" coords="68,185,130,242" href="blue.html" title="Blue Balloon" /> 6 7 <area shape="poly" alt="Yellow Balloon" coords="227,114,227,114,227,113,171,224,208,267,264, 209,264,209,267,141" href="yellow.html" title="Yellow Balloon" /> 8 9 <area shape="rect" alt="Default Area" href="default.html" coords="0,0,307,411" /> 10 Image Element with Map Reference:
13
Copyright © 2003 Pearson Education, Inc. Slide 4-12 Audio and Video Files Audio and Video files are usually large files and require a fast connection to the Internet in order to view the files without having to wait long periods of time Popular Multimedia file formats: pdf – Portable Document Format avi – Audio Video Inerleave mpg, mpeg, mp3 – Moving Picture Expert Group rm, ram – Real Video swf – Shockwave or Flash qt, mov – Quicktime wav – Waveform Most modern browsers have support for many of the popular formats
14
Copyright © 2003 Pearson Education, Inc. Slide 4-13 Linking Audio and Video Files Multimedia files can be linked using either the element or the element Using the element to link a multimedia file will allow you to create a link to a multimedia file, but will not add the file to the page: Movie in QuickTime format In this example, the movie file is displayed as a link on the page. When the link is activated, the Quicktime Movie player is launched to play the file Using the element will embed the multimedia file into the page. To use this method, the MIME type of the file must be known (the MIME type in this example is video/quicktime):
Similar presentations
