Download Chapter 8 Using Web Graphics

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.