Transcript Unit D

Microsoft FrontPage 2003
Illustrated Complete
Working
with Pictures
Objectives




Insert a picture
Change a picture’s properties
Add text over a picture
Create an image map
Working with Pictures
Unit D
2
Objectives




Create WordArt
Create a thumbnail picture
Create a photo gallery
Change a photo gallery’s properties
Working with Pictures
Unit D
3
Working with Pictures




Pictures can enhance a site’s
appearance and add functionality
Pictures used in a Web page can be
taken with a standard or digital
camera
You can also add clip-art images,
WordArt, drawings, and shapes
You can create a photo gallery in
which to store a collection of pictures
Working with Pictures
Unit D
4
Inserting a Picture


In FrontPage, a picture might be a
photograph, a clip-art image, or a
shape or image you create using the
Drawing toolbar
You can also format text as a picture
Working with Pictures
Unit D
5
Inserting a Picture (cont.)

Pictures in Web pages are usually one of
three formats:
– GIF, which displays pictures with up to 256
colors in a compressed format that supports
animation
– PNG, which displays pictures with up to 16
million colors in a compressed format
– JPEG (JPG),which is used for photographs
and other high-quality digital images
Working with Pictures
Unit D
6
Inserting a Picture (cont.)

You can use pictures as hyperlinks
 When you insert a picture in a Web page, the
picture file is separate from the Web page itself
and must be saved
 To save a picture as part of a Web site, you
embed it in the site
 You usually save all picture files in the Images
folder, which FrontPage automatically creates
when you create a new Web site
Working with Pictures
Unit D
7
Inserting a Picture (cont.)

You can also add a background
picture, which is a picture that
appears behind text and other
objects in a page
Working with Pictures
Unit D
8
Changing a Picture’s Properties


Use the Pictures toolbar to change a
picture’s characteristics
You can change:
– Contrast
– Brightness
– Position
– The way text flows around the picture
– Orientation
– Size
Working with Pictures
Unit D
9
Changing a Picture’s Properties
(cont.)

Position dialog
box
Working with Pictures
Unit D
10
Changing a Picture’s Properties
(cont.)


You should consider the amount of
time that pictures will take to
download
You can decrease a picture’s size
and download time by using the
sizing handles and using the Picture
Actions or Resample button
Working with Pictures
Unit D
11
Adding Text over a Picture


You can wash out a picture so that
the colors in the picture appear with
less intensity and brightness
You can change a picture to blackand-white or to grayscale, which
changes the picture to use shades of
gray
Working with Pictures
Unit D
12
Adding Text over a Picture
(cont.)

Text added over a picture
Working with Pictures
Unit D
13
Creating an Image Map



An entire picture, or part of a picture,
can serve as a hyperlink to a location
in the same Web site or a different
site
An image map is a picture that
contains one or more hotspots
A hotspot is an area of a picture that,
when clicked, opens the hyperlink
target
Working with Pictures
Unit D
14
Creating an Image Map (cont.)



A hotspot can be rectangular,
circular, or polygonal
To use a hotspot, you use the pointer
to draw a shape on the picture, then
you use the Insert Hyperlink dialog
box to specify the hyperlink target
To identify hotspots in Design view,
click a picture to select it, then click
the Highlight Hotspots button
Working with Pictures
Unit D
15
Creating WordArt




WordArt is an object that uses text and
special effects to create a picture
You can create WordArt objects using existing
or new text
Shorter phrases and single words work best
for WordArt
After creating WordArt, you can change its
colors, direction, style, and content using the
WordArt toolbar
Working with Pictures
Unit D
16
Creating WordArt (cont.)

WordArt Gallery dialog box
Working with Pictures
Unit D
17
Creating WordArt (cont.)

Resized WordArt object
Working with Pictures
Unit D
18
Creating a Thumbnail Picture

Because large picture can take a long
time to download, they should be used
sparingly
 When you must include large, complex
pictures, but want to keep the
download time to a minimum, you can
create a thumbnail picture
 A thumbnail picture is a small version of
a larger picture that, when clicked,
activates a hyperlink and opens the
original, larger picture
Working with Pictures
Unit D
19
Creating a Thumbnail Picture
(cont.)

When a thumbnail picture appears in a
Web page, it reduces the download
time for the page
 Users who need to view the original,
larger picture can click the thumbnail
picture to open a new page containing
the full-sized picture
 FrontPage creates the thumbnail
picture and the hyperlink to the original
image automatically
Working with Pictures
Unit D
20
Creating a Thumbnail Picture
(cont.)

Thumbnail picture
Working with Pictures
Unit D
21
Creating a Photo Gallery

A photo gallery is a FrontPage
component that displays pictures,
thumbnail pictures, photo captions, and
photo descriptions
 You can use a photo gallery to display
multiple pictures related to a specific
category
 A photo gallery organizes picture and
provides predefined layout options for
their placement, arrangement, and
appearance in the page
Working with Pictures
Unit D
22
Creating a Photo Gallery (cont.)

Photo Gallery
Properties
dialog box
Working with Pictures
Unit D
23
Changing a Photo Gallery’s
Properties


After creating a gallery, you can
add, delete, and rearrange
pictures
You can also add captions and
descriptions, change the font and
style of captions and descriptions,
or use a different photo gallery
layout to arrange the pictures
Working with Pictures
Unit D
24
Changing a Photo Gallery’s
Properties (cont.)

Adding a caption to a picture
Working with Pictures
Unit D
25
Summary


You can insert picture in Web pages
Picture in Web pages can be one of
three formats:
– GIF
– PNG
– JPEG (JPG)

You must embed pictures to save
them as part of a Web site
Working with Pictures
Unit D
26
Summary




FrontPage automatically creates the
images folder, where you save all
picture files
After you insert a picture, you use the
Pictures toolbar to change the
picture’s characteristics
You can wash out pictures
You can change pictures to grayscale
Working with Pictures
Unit D
27
Summary




You can add text over a picture
You can use pictures to create image
maps
You create hotspots in pictures
You can create WordArt, an object
that uses text and special effects to
create pictures
Working with Pictures
Unit D
28
Summary



You can use thumbnail pictures in
place of large pictures to reduce
download time
A photo gallery is a FrontPage
component that displays pictures,
thumbnail pictures, photo captions,
and photo descriptions
After inserting a photo gallery, you
can change its properties
Working with Pictures
Unit D
29