8 using web graphics section 8.1 identify types of graphics identify and compare graphic formats...
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
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.