8 Using Web Graphics Section 8.1 Identify types of graphics Identify and compare graphic formats Describe compression schemes Section 8.2 Identify image sources Use graphics ethically Insert an inline graphic Crop, resize, and resample a graphic Modify a graphic

8 Using Web Graphics Section 8.3 Create an image map with hotspots Create a Web photo album Create a thumbnail YOU WILL LEARN TO…

Section 8.1 Web Graphic Types and File Formats Focus on Reading Main Ideas The two basic types of graphics are raster and vector. The two most common graphic file formats are GIF and JPEG. Compression schemes reduce an image’s download time but also diminish its quality. Key Terms raster graphic vector graphic GIF (Graphic Interchange Format) JPEG (Joint Photographic Experts Group) Bitmap (BMP) Portable Network Graphics (PNG) lossless compression lossy compression pp

Section 8.1 Web designers must ask these questions when choosing graphic file formats: How good will the image look on screen? How quickly will the image download? pp Web Graphics Types and File Formats Types of Graphics

Section 8.1 Web Graphics Types and File Formats Types of Graphics There are two basic types of graphics: Raster graphics Vector graphics raster graphic A graphic made up of pixels; also known as a bitmap. (p. 224) vector graphic A graphic composed of simple lines defined by mathematical equations. (p. 224) pp

Section 8.1 Web Graphics Types and File Formats Graphic File Formats Once you create a graphic, you must save it in a graphic file format. GIFJPEG GIF and JPEG are the two most common graphic file formats used in Web design. The file format will affect the quality of the image and the download time. GIF (Graphic Interchange Format) A graphic file format that can save only a maximum of 256 colors. (p. 225) JPEG (Joint Photographic Experts Group) A graphic file format that can support millions of colors; preferred format for saving photographs. (p. 225) pp

Section 8.1 Web Graphics Types and File Formats Graphic File Formats Two other less common file formats are bitmap (BMP) and Portable Network Graphics (PNG). BMP files are very large so they download slowly. PNG files support more colors than GIF files yet they download quickly. bitmap (BMP) A graphic file format that supports millions of colors and tends to download slowly. (p. 225) Portable Network Graphics (PNG ) A graphic file format that can support more colors and transparency than GIF files, and is currently becoming a more popular format. (p. 225) pp

Section 8.1 The more pixels an image contains, the higher its Quality Resolution File size Download time Download time is measured in Kilobytes (Kbps) per second. pp Web Graphics Types and File Formats Compression Schemes and Download Times

Section 8.1 Web Graphics Types and File Formats Compression Schemes and Download Times Compression is a process that reduces an image’s file size by removing some color information. Compression speeds download time. Graphics are usually compressed using one of these compression schemes: lossless compression lossless compression lossy compression lossy compression lossless compression A compression scheme in which a graphic file loses no data when it is compressed. (p. 226) lossy compression A compression scheme that removes data from a graphic file so that the file is significantly smaller and downloads more quickly in a Web browser than one saved with lossless compression. (p. 226) pp

Section 8.1 A download time of 57 Kbps means the page will require 9 seconds to download with a 57 Kbps modem. pp Web Graphics Types and File Formats Compression Schemes and Download Times

Section 8.1 To reduce download times, you can also use an image editing program to create two versions of an image: one in full color one with a reduced color palette one with a reduced color palette The Web browser can display the reduced color image as a placeholder until the full-color image downloads. When you convert a file from one format to another, the converted image may not look like the original. pp Web Graphics Types and File Formats Compression Schemes and Download Times

Section 8.1 Web Graphics Types and File Formats pp Examine Which compression scheme removes data from a graphic file so that the file downloads more quickly? A. raster B. lossy C. lossless D. PNG B. lossy Section Assessment

Section 8.2 Obtaining and Modifying Graphics Focus on Reading Main Ideas You can insert premade graphics or use tools to create images for your Web pages. Always check the terms of use before downloading premade graphics. You must use image editing programs to make substantial changes to graphics. Key Terms dots per inch (dpi) image editing program draw program inline graphic cropping resizing aspect ratio resampling pp

Section pp Obtaining and Modifying Graphics Premade graphics can be found on the Web or in image collections from software packages. Unless you have specific permission to use an image, doing so can violate copyright laws. Obtaining Graphics

Section 8.2 Obtaining and Modifying Graphics Obtaining Graphics Scannersdigital cameras Scanners and digital cameras are input devices that can be used to create graphics. dots per inchdpi Scanners define resolution in dots per inch or dpi. For Web use, a 600 dpi scanner is sufficient. dots per inch (dpi) A definition of resolution that defines the number of pixels created for every linear inch of an image, such as 600 dpi. (p. 229) pp

Section 8.2 Obtaining and Modifying Graphics Creating Graphic Files Raster graphics are created with image editing programs. Vector graphics are created with draw programs. image editing programs A type of software application such as Fireworks ® used to create raster graphics. (p. 229) draw programs A type of software application such as Fireworks used to create vector graphics. (p. 229) pp

Section pp Obtaining and Modifying Graphics Downloading graphics without permission violates copyright laws. You need the owner’s consent to use images with a registered trademark. Most Web sites that provide graphics include instructions for legally using their images. Obtaining Graphics

Section 8.2 Obtaining and Modifying Graphics Inserting Graphics into Dreamweaver When you insert a graphic file into a Web page, the picture’s file name appears in the HTML code. inline graphic The browser must request the graphic file, called an inline graphic, and insert it into the page. inline graphic Created by storing a picture in an electronic format on a hard drive and inserting the graphic into a Web page. (p. 230) pp

Section 8.2 Obtaining and Modifying Graphics Modifying Graphics You can use Dreamweaver to make minor changes to graphics, such as: cropping cropping resizing aspect ratio resizing without changing the aspect ratio resampling cropping To remove portions of an image that you do not want to use. (p. 231) resizing Changing the size of the image as it appears on the screen without changing the file size of the graphic. (p. 231) aspect ratio The relationship between an image’s height and width. (p. 231) resampling Changing the number of pixels in a graphic file to match the new screen area occupied by the image; this changes the size of the graphic file. (p. 232) pp

Section pp Obtaining and Modifying Graphics Activity 8A – Insert an Inline Graphic (p. 230) Activity 8B – Crop, Resize, and Resample a Graphic (p. 233) Activity 8C – Modify a Graphic (p. 234)

Section 8.2 Obtaining and Modifying Graphics pp Identify _________ graphics are created with Draw programs. A. raster B. inline C. vector D. premade C. vector Section Assessment

Section 8.3 Image Maps and Web Albums Focus on Reading Main Ideas Image maps let users click hotspots that link to related pages or information. A Web photo album is a collection of images. Thumbnails are small images that link to full-size versions of the same image. Key Terms image map hotspot photo album thumbnail pp

Section 8.3 Image Maps and Web Albums Image Maps image map hotspot An image map is a graphic with a clickable hotspot hyperlink. To create an image map in Dreamweaver, you draw outlines to define the clickable hotspots. image map A graphic with clickable areas called hotspots that link to another page or to another area on the same page. (p. 237) hotspot A graphic link to a related page or another area on the current page. (p. 237) pp

Section 8.3 Image Maps and Web Albums Creating a Web Photo Album Using Fireworks photo album thumbnails You can use Dreamweaver and Fireworks to create a photo album with thumbnails of each image. photo album A collection of photographs with brief descriptions. (p. 240) thumbnail A small image that links to a larger version of the same image; lets users decide if they want to view the larger image, which takes longer to download. (p. 240) pp

Section 8.3 Image Maps and Web Albums Activity 8D – Create an Image Map with Hotspots (p. 238) Activity 8E – Create a Web Photo Album Using Fireworks (p. 240) pp

Section 8.3 Image Maps and Web Albums pp Name An image map is a graphic with clickable areas called ________ that link to another page or other areas on the same page. A. thumbnails B. hot links C. outlines D. hotspots Section Assessment

8 Using Web Graphics Chapter Review Examine You can edit images in Dreamweaver in all of the following ways except: A. cropping B. resizing C. text wrapping D. resampling C. text wrapping

8 Using Web Graphics Chapter Review Explain What process must you follow before you download a graphic for use on a Web site? You need to get the permission of the copyright holder. Many Web sites that offer graphics include instructions for legally using their graphics.

8 Using Web Graphics Resources For more resources on this chapter, go to the Introduction to Web Design Using Dreamweaver Web site at WebDesignDW.glencoe.com. WebDesignDW.glencoe.com