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 FormatsFocus 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. 224-227

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. 224-227

Web Graphics Types and File FormatsTypes of Graphics

Section

8.1 Web Graphics Types and File FormatsTypes of Graphics

There are two basic types of graphics:

• Raster graphicsRaster graphics• Vector graphicsVector 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. 224-227

Section

8.1 Web Graphics Types and File FormatsGraphic File Formats

Once you create a graphic, you must save it in a graphic file format.

GIFGIF and JPEGJPEG 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. 224-227

Section

8.1 Web Graphics Types and File FormatsGraphic 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. 224-227

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. 224-227

Web Graphics Types and File FormatsCompression Schemes and Download Times

Section

8.1 Web Graphics Types and File FormatsCompression 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 compressionlossy 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. 224-227

Section

8.1

A download time of 0:09 @ 57 Kbps means the page will require 9 seconds to download with a 57 Kbps modem.

pp. 224-227

Web Graphics Types and File FormatsCompression 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 colorone in full color• oneone with a reduced color palettewith a reduced color palette

The Web browser can display the reduced color image as The Web browser can display the reduced color image as a placeholder until the full-color image downloads.a placeholder until the full-color image downloads.

When you convert a file from one format to another, the When you convert a file from one format to another, the converted image may not look like the original.converted image may not look like the original.

pp. 224-227

Web Graphics Types and File FormatsCompression Schemes and Download Times

Section

8.1 Web Graphics Types and File Formatspp. 224-227

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 GraphicsFocus 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. 228-235

Section

pp. 228-2358.2 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

ScannersScanners and digital digital camerascameras are input devices that can be used to create graphics.

Scanners define resolution in dots per dots per inchinch or dpidpi. 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. 228-235

Section

8.2 Obtaining and Modifying GraphicsCreating 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. 228-235

Section

pp. 223-2268.2 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 GraphicsInserting 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 graphicinline 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. 228-235

Section

8.2 Obtaining and Modifying GraphicsModifying Graphics

You can use Dreamweaver to make minor changes to graphics, such as:• croppingcropping• resizingresizing without changing the aspect ratioaspect ratio• resamplingresampling

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. 228-235

Section

pp. 223-2268.2 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 Graphicspp. 223-236

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 AlbumsFocus 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. 237-242

Section

8.3 Image Maps and Web AlbumsImage Maps

An image mapimage map is a graphic with a clickable hotspothotspot 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. 237-242

Section

8.3 Image Maps and Web AlbumsCreating a Web Photo Album Using Fireworks

You can use Dreamweaver and Fireworks to create a photo albumphoto album with thumbnailsthumbnails 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. 237-242

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. 237-242

Section

8.3 Image Maps and Web Albumspp. 237-242

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

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.