adobe dreamweaver cs5 on demand part 21 ppsx

ptg
Working with Web Page
Images
Introduction
Is it true that a picture is worth a thousand words? Is it also
true that every time a writer begins talking about images
they use that same timeworn phrase? Am I ever going to get
to the point? To be honest, a picture can be worth much more
than a thousand words; in fact, a well-placed image can artic-
ulate more than words can ever convey. For example, ever
try to verbally describe a sunset? Go ahead, I'll wait; give it
a try.
Communication comes in three forms: Visual, Vocal, and
Verbal, and on a Web page the right visual image can be very
powerful. On the other hand, placing images on a Web page
can produce the opposite effect. I call it the why-did-they-use-
that-image syndrome.
Good designers don't use images just because they can,
but because they are needed to convey a specific message.
Images should be used to drive your message home; they
should blend seamlessly with the Web page, and the text on
the pages. Don't use images because you can, use them
because you need them to convey your message.
Dreamweaver makes the insertion of images a snap; in
fact, it's as simple as a drag and a drop. In turn,
Dreamweaver creates the compliant HTML tags within the
document to make the image display correctly on a variety of
browsers. Once the images have been inserted,
Dreamweaver's graphical user interface allows you to modify
the images in terms of size and position. You can even set up
external editing applications, such as Adobe Photoshop and

Fireworks, to revise the images on the fly.
In addition to adding simple images to a Web page, you
can use graphics for navigational aids, rollover buttons, and
even image maps.
6
6
What You’ll Do
Use Web Friendly Graphics
Define an Image Folder
Insert Images
Insert Images from Photoshop
Update Images from Photoshop
Insert Images from Fireworks
Optimize Images Using Fireworks
Use Low Source Images
Modify Images
Align Images
Edit Images
Change Image Brightness and Contrast
Change Image Sharpness
Crop an Image
Use an External Editor
Set File Types/Editors Preferences
Create Rollover Images
Insert an Image Placeholder
129
From the Library of Wow! eBook
ptg
130 Chapter 6
The Internet did not always support the use of

graphics. As a matter of fact, its original use
was for sharing of textual data among scien-
tists and the U.S. Military. That was yester-
day… Today, the Internet supports static
graphics, animations, video, and audio, along
with all that textual data.
Preparing images for the Internet involves
knowing what file formats are best to use for
the Internet. Web friendly formats are
designed to help the image appear good, load
as quickly as possible, be compatible with all
the major browsers on the market, and work
seamlessly on any operating system
(Macintosh, Windows, etc).
The formats that meet those requirements
are then submitted to the World Wide Web
Consortium, the international organization
that controls and organizes the Internet. If
they put their blessing on the format, it
becomes a Web standard, and then all the
browser manufacturers scramble to make
their browsers compatible with that format.
Eventually, the new browsers find their way
into the marketplace, and designers begin
using the formats in their Web pages.
The three major file formats that are con-
sidered the standard for static images are: GIF,
JPEG, and PNG.
Depending on the type of image, and how
you're using it, each one of these formats has

their advantages and disadvantages.
The GIF Format
Short for Graphics Interchange Format, the
GIF format (pronounced, jiff) is a unique Web
compression technique that supports 8-bit
images with a maximum of 256 colors. GIF is
for images with distinct colors, such as line
drawings, black and white images and small
text groups that are only a few pixels high.
With an animation editor, such as Adobe
Fireworks, GIF images can be put together for
animated images. GIF also supports trans-
parency, where a color or colors can be set to
transparent in order to let the color on the
underlying Web page to show through. The
compression algorithm used in the GIF format
is called RLE (Run Length Encoding). This
compression algorithm works best with solid
colors, like you would encounter in clipart, or
text; and since most clipart does not include
many colors, the 256 maximum color restric-
tion works just fine.
The GIF format is also considered lossless.
In other words, images saved in the GIF for-
mat will be compressed without the removal
of any color information. Therefore, when
they're displayed on the visitor's browser, the
image will be exactly what you saved, in
terms of quality.
The JPEG Format

Short for Joint Photographic Experts Group,
the JPEG (pronounced j-peg) is a Web format
designed primarily for the compression and
display of photographs. JPEGs allow for 24-
bit images using millions of colors. To make
JPEGs usable, the large amount of color infor-
mation must be compressed, which is accom-
plished by removing what the compression
algorithm considers unneeded information.
JPEG compression is "lossy," meaning that
the compression scheme sacrifices some
image quality, in exchange for a reduction in
the file's size. JPEG files can range from small
amounts of lossless compression to large
amounts of lossy compression. This is a com-
mon standard on the Web, but the data loss
generated in its compression makes it unde-
sirable for printing purposes. JPEG images do
Using Web Friendly Graphics
From the Library of Wow! eBook
ptg
Chapter 6 Working with Web Page Images 131
not support any level of transparency, and will
fill transparent areas of the image with a user-
defined matte color.
Once an image has been compressed
using the JPEG format and saved, the color
information that was removed can never be
recovered. Therefore, it's best when editing an
image to save a copy as the JPEG, so as to

retain the original image information.
The PNG Format
Short for Portable Network Graphic, (pro-
nounced ping) the PNG format was designed
to be a patent-free successor to the GIF for-
mat. Though not designed specifically for the
Web, PNG offers particular benefits in this
environment such as improved image com-
pression (10 to 30 percent smaller than the
GIF format), two dimensional interlacing, stor-
age of text with the image making it possible
for search engines to gather information and
offer subject searching for images in a stan-
dard way. In addition, the PNG format is used
for lossless compression and displaying
images on the web.
The PNG format comes in two sizes, the
PNG-8 (used in place of the GIF format), and
the PNG-24 (used in place of the JPEG for-
mat).
The advantages of PNG are that it sup-
ports images with millions of colors and pro-
duces background transparency without
jagged edges. The disadvantages are that
PNG images will not show up on older
browsers (pre 4.0), and when using the full
PNG-24 format with transparency, they can be
comparatively larger in file size than JPEG
images.
One other interesting feature of the PNG

format is its ability to adjust the gamma of an
image across operating systems. Typically, an
image will display differently on a Mac or
Windows monitor. The PNG format adjusts
the image so that it appears the same…
regardless of operating system.
Adobe Fireworks and Adobe Flash use the
PNG as their native format, so that means all
the power of the format, including trans-
parency, and opacity settings are fully sup-
ported.
From the Library of Wow! eBook
ptg
132 Chapter 6
It's important to set up a folder within your site folder that holds all of
the images for a specific Web project. Creating this folder can be
accomplished when you set up the site, or it can be made later. There
are several advantages to setting up an image folder: it helps
Dreamweaver in the organization of your site, and helps you locate
images when you need to work on them. Since we're about to start
adding images to our site, it's a good idea to stop and define this folder.
Once the folder is created, you should copy all of your Web images into
this folder. In addition, when you attempt to add an image to a Web
page that is outside the site folder, Dreamweaver prompts you to copy
the file to your site, and when you do, it adds the new images into the
defined folder. All things considered, creating an image folder is a
smart, efficient thing to do.
Defining an Image
Folder
Define an Image Folder

Open your site folder, and create a
new folder.
In this example, we'll use the
obvious and call the new folder,
Images.
Click the Site menu, and then click
Manage Sites.
Select your site from the available
options.
Click Edit.
Click the Advanced Settings
category.
Click the Local Info category.
Click the Browse For Folder icon
located to the right of the Default
Images Folder Input box.
7
6
5
4
3
2
1
3
4
11
6
7
5
From the Library of Wow! eBook

ptg
Chapter 6 Working with Web Page Images 133
Navigate to the Local root folder,
and then select the Images folder
you want to use.
Click Select (Win) or Choose
(Mac) to record the folder's
location, and exit the Search
dialog box.
Click Save to close the Site Setup
dialog box, and then click OK, if
necessary to recreate the cache.
Click Done to save your changes.
11
10
9
8
8
9
10
From the Library of Wow! eBook
ptg
134 Chapter 6
The three basic elements of any static Web page are text, images, and
links. Adding a static image to a Web page can be as simple as a drag
and a drop. By the way, the term "static" simply refers to any non-mov-
ing Web image. A static image is not video; it does not dance, move, or
sing… it just sits there. You can also add dynamic images, which are
images that change. For example, an advertising banner cycles through
different images. Images can be added directly to a Web page or they

can be added within a section of text: called an inline image.
Dreamweaver gives you several ways to add images to your Web
pages. The method you choose to add images depends on how you like
to work with Dreamweaver. Any time you add an image to a Web page,
Dreamweaver (by default) asks you to type in a description, and alter-
nate text. This information is used by screen reader applications (i.e.
JAWS) for visually impaired users; therefore it's important that this
information is added to the image.
Inserting Images
Insert an Image
Open the Web page you want to
insert an image.
Click to place the insertion point
where you want to place the
image.
Using one of the following
methods to insert an image:
◆ Assets Panel. Open the Assets
panel, select the image you
want to add to the page, and
then drag the thumbnail, or
filename of the image into the
Web page.
◆ Folder. Open a folder on your
desktop that contains Web
friendly images, and then click
and drag from the folder
directly into the Web page.
◆ Insert Panel. Click the Common
tab on the Insert panel, click the

Image button arrow, click
Image, select the image from
the available options, and then
click OK.
◆ Insert Menu. Click the Insert
menu, click Image, select the
image from the available
options, and then click OK.
3
2
1
Insert
Menu
option
Select Image Source dialog box
Select the image you
want to insert.
From the Library of Wow! eBook
ptg
Chapter 6 Working with Web Page Images 135
If the image you selected is not
contained within the site folder,
click Yes to the alert asking for
permission to make a copy of the
image, and place it within the site
folder, and then click Save in the
Copy File As dialog box.
The Image Tag Accessibility
Attributes dialog box opens.
Click in the Alternate Text Input

field and type a very short
description for the image.
For example, if the image is of a
cell phone, you might enter the
words, Image of a cell phone, or
just, cell phone.
NOTE
If you prefer to leave this
field blank, click the arrow to the
right of the input box, and select
the empty option.
Click the file folder icon, located to
the right of the Long Description
input box, and then select the file
that contains a longer description
of the image.
NOTE
The Long Description
option is a plain text document,
which contains a longer
description of the image. For
example, if the image is of a
sunset, you could describe the
place and time the image was
captured. Remember, the alternate
text and long description are
primarily used by the visually
impaired. This file should be
created in a text processor, saved
as plain text, and placed inside the

site folder.
Click OK to add the image to the
Web page.
7
6
5
4
5
7
6
Inserted image
From the Library of Wow! eBook