adobe dreamweaver cs5 on demand part 25 pdf

ptg
Chapter 6 Working with Web Page Images 155
Dreamweaver may give you some new and improved ways to edit an
image; however, there's no substitute for the real thing. The two most
powerful image-editing applications for raster-based (resolution
dependent) images are Adobe Photoshop and Fireworks. You might
recall an application that came bundled with Photoshop called
ImageReady… well, that application is no longer part of the Adobe
family, being replaced by Fireworks. While Adobe would prefer that you
use one of these two applications to edit your images, they know full
well that there are other fish in the sea, so they not only give you the
ability to edit images in Photoshop or Fireworks, they give you the abil-
ity to choose any application you want.
Using an External
Editor
Edit an Image in an External
Editor
Open the Web page with the
image you want to edit.
Select the image you want to edit.
Click the Modify menu, point to
Image, point to Edit With, and then
select one of the following options:
◆ Photoshop. Opens the selected
image in Adobe Photoshop.
◆ Fireworks. Opens the selected
image in Adobe Fireworks.
◆ Browse. Opens an Explorer
(Win) or Finder (Mac) window
and allows you to select the
application to use.

TIMESAVER
Double-click the
image you want to edit using the
default external image editor.
Make the changes to the image,
based on the selected application.
Click the File menu, and then click
Save.
Click the Close button in the
editing program and return to
Dreamweaver.
The changes are permanently
applied to the image in
Dreamweaver, which cannot be
undone.
6
5
4
3
2
1
1 3
2
From the Library of Wow! eBook
ptg
156 Chapter 6
Setting File Types/
Editors Preferences
Set File Type and Editor
Preferences

Click the Dreamweaver (Mac) or
Edit (Win) menu, and then click
Preferences.
Click the File Types / Editors
category.
Select the file extension you want
to set an external editor, or add
new extensions.
◆ Add Extension. Click the Add
(+) button above the Extensions
list, type an extension, and then
press Enter (Win) or Return
(Mac).
Select from the following options:
◆ Remove Editor. Select an editor,
and then click the Delete (-)
button above the Editors list.
◆ Add Editor. Click the Add (+)
button above the Editors list,
select the editor you want, and
then click Open.
To make the editor the primary
editor for the selected files, click
Make Primary.
Click OK.
6
5
4
3
2

1
You can use the File Types/Editors section of the Preferences dialog
box to choose the external image editor you want to use for specific file
types. Setting specific external image editors for specific file types
makes it quick and easy to edit images. All you need to do is double-
click the image and the external image editor automatically opens. Any
changes you make and save in an external image editor are displayed
when you return to Dreamweaver. You can set different file types to
open in different external editors, including Dreamweaver for script
files. In addition, you can set Fireworks as your primary external editor
for those extensions not specified.
5
4
6
3
2
From the Library of Wow! eBook
ptg
Chapter 6 Working with Web Page Images 157
Set Other File Type and Editor
Preferences
Click the Dreamweaver (Mac) or
Edit (Win) menu, and then click
Preferences.
Click the File Types / Editors
category.
Click the Reload Modified Files list
arrow, and then select the option
you want: Always, Never, or
Prompt.

Click the Save On Launch list
arrow, and then select the option
you want: Always, Never, or
Prompt.
To set the primary external editor
for file types not specified, click
Browse next to the Fireworks box,
select the Fireworks program, and
then click Open.
To open script related files in Code
view in Dreamweaver, enter the
file types (separated by a space) in
the Open In Code View box.
To open script related files in an
external editor, click Browse next
to the External Code Editor box,
select the program you want, and
then click Open.
Click OK.
8
7
6
5
4
3
2
1
2 6 7
3
4

5
8
From the Library of Wow! eBook
ptg
158 Chapter 6
Dreamweaver makes the insertion and creation of rollover images a
snap. A rollover is an image that—when viewed in a browser—
changes when the pointer moves across or hovers over it. You need
two separate images to create the rollover: a primary (the image that
displays when the page first loads) and a secondary (the image that
appears when the pointer moves over the primary). Both images in a
rollover should be the same size; if the images are not the same size,
Dreamweaver resizes the secondary image to match the width and
height properties of the primary image. In reality, rollover images are
set to respond to a onMouseOver event; although you can change what
event triggers the action (for example, a mouse click). Rollover images
are used extensively in the creation of user-friendly navigation buttons.
For example, you have a button that returns the user to the site's home
page; when they roll over the image, it changes from a gray button with
the word, HOME, in white, to a gray button with the word, HOME, in
yellow.
Creating Rollover
Images
Create a Rollover Image
Open the Web page you want to
insert a rollover image.
Click to place the insertion point
where you want to create a
rollover image.
Click the Insert menu, point to

Image Objects, and then click
Rollover Image.
TIMESAVER
Click the Image
button arrow on the Common tab
on the Insert bar, and then click
Rollover Image.
Select from the following options:
◆ Image Name. The name of the
rollover image. This is the
image's JavaScript call name.
◆ Original Image. The image you
want to display when the page
loads. Enter the path in the text
box, or click Browse to select
the image.
4
3
2
1
5
4
Customizing a Rollover Image
The Image Name is used when creating specific JavaScript routines;
for example, you could create a JavaScript routine to change the look
of the button based on the time of day. If you are not planning on creat-
ing a JavaScript routine, it's best to leave the name at its default value.
For Your Information
From the Library of Wow! eBook
ptg

Chapter 6 Working with Web Page Images 159
◆ Rollover Image. The image you
want to display when the
pointer rolls over the original
image. Enter the path or click
Browse to select the image.
◆ Preload Rollover Image.
Select to preload the images in
the browser's cache so no
delay occurs when the user
rolls the pointer over the image
(recommended).
◆ Alternate Text. Text to describe
the image for viewers using a
text-only browser, or for the
visually impaired (optional).
◆ When Clicked Go to URL. The
file that you want to open when
a user clicks the rollover image.
Enter the path or click Browse
and select the file.
Click OK to add the button to the
active document.
NOTE
If you don't set a link for
the image, Dreamweaver inserts a
null link (#) in the HTML source
code to which the rollover
behavior is attached. If you
remove the null link, the rollover

image will not work.
NOTE
You cannot see the effect
of a rollover image in Design view.
To see the effect in a browser,
click the File menu, point to
Preview In Browser, and then
select the browser you to use.
6
5
Rollover button
Preview in browser
Did You Know?
You can create buttons on the Web.
Check out
www.cooltext.com
to create
buttons with your own text. The but-
tons are free and you can download
them in the .JPG format.
From the Library of Wow! eBook
ptg
160 Chapter 6
If you know you want to insert an image in a specific location, but the
image is not created or ready yet, you can insert an image placeholder
in its place. You can set the placeholder’s size and color, and even add
a text label to it. When you insert an image placeholder, the place-
holder box appears, displaying the color, size, and label you selected.
After you insert an image placeholder, you can use the Properties panel
to change specific image related properties, such as name, width,

height, alternative text description, alignment, and color. When you’re
ready to replace the image placeholder with an actual image, you can
double-click the placeholder or use the Src box in the Properties panel
to select the image.
Inserting an Image
Placeholder
Insert an Image Placeholder
Open the Web page you want to
insert an image placeholder.
Click to place the insertion point
where you want to place the
image.
Click the Insert menu, point to
Image Objects, and then click
Image Placeholder.
The Image Placeholder dialog box
opens.
Specify the image placeholder
options you want:
◆ Name. Enter the text you want
to appear as a label (optional).
Leave blank if you don’t want a
label.
◆ Width and Height. Enter the
width and height (in pixels) to
set the image size.
◆ Color. Click the Color box to
select a color, or enter the
hexadecimal value for the color.
◆ Alternate Text. Enter text to

describe the image for viewers
using a text-only browser or for
the visually impaired who use
speech synthesizers (optional).
Click OK.
5
4
3
2
1
5
4
From the Library of Wow! eBook
ptg
Chapter 6 Working with Web Page Images 161
Set Image Placeholder
Properties
Open a Web page, and then select
the image you want to modify.
Click the Window menu, and then
click Properties to display the
Properties panel.
Specify the image placeholder
related options you want:
◆ Name. Enter the text you want
to appear as a label (optional).
Leave blank if you don’t want a
label.
◆ W and H. Enter the width and
height (in pixels) to set the

image size.
◆ Src. Specify the source file for
the image. Drag the Point To
File button to a file in the Files
panel or click the Browse For
Files button to select a file.
◆ Link. Specify a hyperlink for the
image placeholder. Drag the
Point To File button to a file in
the Files panel or click the
Browse For Files button to
select a file.
◆ Color. Click the Color box to
select a color, or enter the
hexadecimal value for the color.
◆ Alt. Enter text to describe the
image for viewers using a text-
only browser or for the visually
impaired who use speech
synthesizers (optional).
◆ Create. Click the Create button
to start Fireworks to create a
replacement image. The button
is disabled if Fireworks is not
installed on your computer.
3
2
1
1 2
Image placeholder

Click to create an image in Fireworks.
3
From the Library of Wow! eBook
ptg
This page intentionally left blank
From the Library of Wow! eBook