Transcript Lecture 9 - Roletech

Section 8.1
• Create a custom theme
• Design a color scheme
• Use shared borders
Section 8.2
• Identify types of graphics
• Identify and compare graphic formats
• Describe compression schemes
Section 8.3
• Identify image sources
• Use graphics ethically
• Use clip art
• Describe graphic input tools
• Create WordArt
Section 8.4
• Crop, resize, and resample a graphic
• Create a photo gallery
• Create a thumbnail
8.1
Using Custom Themes and
Shared Borders
pp.
212-217
Guide to Reading
Main Ideas
Key Terms
You can create custom
themes that reflect your
site’s purpose. Using
shared borders allows
page components such as
banners and link bars to
appear on all pages of
your site.
external style sheet
embedded style sheet
cascading style sheet
shared border
8.1
Using Custom Themes and
Shared Borders
pp.
212-217
Creating a Graphic Foundation
Custom themes and shared borders create a good graphic
foundation.
Both of these are features are available in FrontPage to
simplify the task.
8.1
Using Custom Themes and
Shared Borders
pp.
212-217
Custom Themes
If FrontPage does not
include a theme that
exactly matches your
needs, you can modify an
existing theme. You can:
• Customize graphics and
colors
• Specify fonts using one of
the following style sheets:
 external
 embedded
 cascading
external style sheet A style
sheet containing format and
layout settings stored in a
separate file. (p. 214)
embedded style sheet A
style sheet that contains
format and layout settings
that only apply to the current
Web page. (p. 214)
cascading style sheet A
style sheet that consists of
code that defines formatting
and layout settings for
HTML tags. (p. 214)
8.1
Using Custom Themes and
Shared Borders
pp.
212-217
Custom Themes
You can modify a theme’s font in the Customize Theme
dialog box.
8.1
Using Custom Themes and
Shared Borders
pp.
212-217
Shared Borders
Shared borders are a
great way to show
relationships between
pages.
You can also specify that
certain shared borders
only appear on certain
pages.
shared border An area that
remains the same on all (or
some) of the pages in a
Web site. (p. 215)
8.1
Using Custom Themes and
Shared Borders
pp.
Shared Borders
Check the boxes in the Shared Borders dialog box as
shown here.
212-217
8.1
Using Custom Themes and
Shared Borders
pp.
212-217
• Activity 8A – Creating a Custom Theme (p. 213)
• Activity 8B – Modifying the Styles Used in a Theme (p. 214)
• Activity 8C – Creating Shared Borders (p. 216)
• Activity 8D – Inserting a Banner and Link Bar (p. 216)
pp.
8.2
219-222
Web Graphics Types and File Formats
Guide to 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.
raster graphic
paint program
vector graphic
draw program
GIF (Graphic Interchange
Format)
JPEG (Joint
Photographic Experts
Group)
lossless compression
lossy compression
pp.
8.2
219-222
Web Graphics Types and File Formats
Types of Graphics
There are two basic types
of graphics:
raster graphic A graphic made
up of pixels; also known as a
bitmapped graphic. (p. 219)
• Raster graphics, usually
made with paint programs.
paint program A type of
software application that is used
to create raster graphics.
(p. 219)
• Vector graphics, usually
created with draw
programs.
vector graphic A graphic
composed of simple lines
defined by mathematical
equations. (p. 219)
draw program A type of
software application that is used
to create vector graphics.
(p. 219)
pp.
8.2
219-222
Web Graphics Types and File Formats
Graphic File Formats
There are two basic
graphic file formats used
in Web design: GIF and
JPEG.
GIF (Graphic Interchange
Format) A graphic file
format that can save only a
maximum of 256 colors.
(p. 220)
Both file formats work well
in Web design.
JPEG (Joint Photographic
Experts Group) A graphic
file format that can support
millions of colors; preferred
format for saving
photographs. (p. 220)
pp.
8.2
219-222
Web Graphics Types and File Formats
Compression Schemes and Download Times
Web designers often must
have to compress files to
speed download times.
There are various
strategies to speed
downloads:
• Lossless compression
• Lossy compression
• Reduced color palette
images
• Converting image file
formats
lossless compression A
compression scheme in
which a graphic file loses no
data when it is compressed.
(p. 221)
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. 221)
pp.
8.2
219-222
Web Graphics Types and File Formats
Compression Schemes and Download Times
A download time of 0:11 @ 56 Kbps means the page will
require 11 seconds to download with a 56 Kbps modem.
pp.
8.3
Obtaining and Creating Graphics
Guide to Reading
Main Ideas
Key Terms
You can use pre-made
graphics, such as clip art,
on your Web pages. You
can also create original
graphics using either input
devices or FrontPage
toolbars. Always check
the terms of use before
downloading pre-made
graphics.
scanner
dots per inch (dpi)
digital camera
inline graphic
WordArt
223-229
pp.
8.3
Obtaining and Creating Graphics
Obtaining Pre-Made Graphics
Pre-made 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.
You can use clip art
collections found on your
computer as well.
223-229
pp.
8.3
223-229
Obtaining and Creating Graphics
Creating Graphics Using Input Devices
Scanners and digital
cameras are both input
devices to create
graphics.
Scanners define
resolution in dots per
square inch. For Web
use, a 600 dpi scanner is
sufficient.
scanner A hardware device that
converts a printed image into a
digital format that can be used
on a Web page. (p. 225)
digital camera A photographic
device that saves images in a
digital format so they can be
easily used on the Web. (p. 225)
dots per inch (dpi) A definition
of resolution that states the
number of pixels created for
every linear inch of an image,
such as 600 dpi. (p. 225)
pp.
8.3
223-229
Obtaining and Creating Graphics
Creating Graphics Using Input Devices
When you insert a picture
file into a Web page, the
picture is referred to 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 graphic in an
electronic format on a hard
drive and inserting the
graphic into a Web page.
(p. 225)
pp.
8.3
223-229
Obtaining and Creating Graphics
Creating Graphics Using FrontPage
FrontPage provides tools
to create simple graphics:
• WordArt
• Drawing Tool
WordArt Text objects with
special formatting applied.
(p. 226)
pp.
8.3
Obtaining and Creating Graphics
• Activity 8E – Adding Clip Art to a Web Page (p. 224)
• Activity 8F – Adding WordArt to a Web Page (p. 227)
• Activity 8G – Adding a Drawing to a Web Page (p. 228)
223-226
pp.
8.4
Editing and Formatting Graphics
Guide to Reading
Main Ideas
Key Terms
You can use the Pictures
toolbar to modify images
in FrontPage. A photo
gallery is a collection of
images. Thumbnails are
small images that link to
full-size versions of the
same image.
resizing
aspect ratio
resampling
cropping
photo gallery
thumbnail
231-236
pp.
8.4
231-236
Editing and Formatting Graphics
Modifying Graphics
To make major changes to
a graphic, use a graphic
or drawing application.
FrontPage can be used to
make minor modifications,
such as resizing images,
without changing the
aspect ratio,
resampling, or cropping.
resizing Changing the size of
the image as it appears on the
screen without changing the file
size of the graphic. (p. 233)
aspect ratio The relationship
between an image’s height and
width. (p. 233)
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. 233)
cropping To remove portions of
an image that you do not want
to use. (p. 233)
pp.
8.4
231-236
Editing and Formatting Graphics
Modifying Graphics
The tools on the Pictures toolbar allow you to manipulate pictures.
Contrast and
Brightness Buttons
Rotate and Flip
Buttons
Resample
Select
Restore
Crop
pp.
8.4
231-236
Editing and Formatting Graphics
Creating a Photo Gallery with Thumbnails
FrontPage makes it easy
to create a photo gallery
with thumbnails of each
image.
photo gallery A collection
of photographs with brief
descriptions. (p. 235)
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. 235)
pp.
8.4
231-236
Editing and Formatting Graphics
• Activity 8H – Manipulating an Image with the Pictures Toolbar
(p. 232)
• Activity 8I – Cropping, Resizing, and Resampling a Picture
(p. 234)
• Activity 8J – Creating a Photo Gallery in FrontPage (p. 235)
Chapter 8
Resources
For more resources on this chapter, go to the Introduction
to Web Design Web site at webdesign.glencoe.com.