* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Chapter 8 Using Web Graphics
Survey
Document related concepts
Stereoscopy wikipedia , lookup
Free and open-source graphics device driver wikipedia , lookup
General-purpose computing on graphics processing units wikipedia , lookup
InfiniteReality wikipedia , lookup
Hold-And-Modify wikipedia , lookup
Stereo display wikipedia , lookup
Waveform graphics wikipedia , lookup
Indexed color wikipedia , lookup
Spatial anti-aliasing wikipedia , lookup
Apple II graphics wikipedia , lookup
Framebuffer wikipedia , lookup
Portable Network Graphics wikipedia , lookup
Graphics processing unit wikipedia , lookup
Image editing wikipedia , lookup
Molecular graphics wikipedia , lookup
Transcript
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 YOU WILL LEARN TO… Section 8.3 • Create an image map with hotspots • Create a Web photo album • Create a thumbnail pp. Section 8.1 224-227 Web Graphic Types and File Formats Focus on Reading Main Ideas Key Terms 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. 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 224-227 Web Graphics Types and File Formats Types of Graphics 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. Section 8.1 224-227 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 224-227 Web Graphics Types and File Formats Graphic File Formats Once you create a graphic, you must save it in a graphic file format. 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 224-227 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 224-227 Web Graphics Types and File Formats Compression Schemes and Download Times 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. Section 8.1 224-227 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 • 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 224-227 Web Graphics Types and File Formats Compression Schemes and Download Times A download time of 0:09 @ 57 Kbps means the page will require 9 seconds to download with a 57 Kbps modem. pp. Section 8.1 224-227 Web Graphics Types and File Formats Compression Schemes and Download Times 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 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. Section 8.1 224-227 Web Graphics Types and File Formats Section Assessment 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 pp. Section 8.2 228-235 Obtaining and Modifying Graphics Focus on Reading Main Ideas Key Terms 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. dots per inch (dpi) image editing program draw program inline graphic cropping resizing aspect ratio resampling pp. Section 8.2 Obtaining and Modifying Graphics Obtaining 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. 228-235 pp. Section 8.2 228-235 Obtaining and Modifying Graphics Obtaining Graphics Scanners and digital cameras are input devices that can be used to create graphics. 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 228-235 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 8.2 223-226 Obtaining and Modifying Graphics Obtaining 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. pp. Section 8.2 228-235 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. 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 228-235 Obtaining and Modifying Graphics Modifying Graphics You can use Dreamweaver to make minor changes to graphics, such as: • cropping • 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 8.2 223-226 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) pp. Section 8.2 Obtaining and Modifying Graphics Section Assessment Identify _________ graphics are created with Draw programs. A. raster B. inline C. vector D. premade C. vector 223-236 pp. Section 8.3 Image Maps and Web Albums Focus on Reading Main Ideas Key Terms 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. image map hotspot photo album thumbnail 237-242 pp. Section 8.3 237-242 Image Maps and Web Albums Image Maps 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 237-242 Image Maps and Web Albums Creating a Web Photo Album Using Fireworks 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 237-242 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 Section Assessment 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 D. hotspots 237-242 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.