Using an External Editor Edit an Image in an External Editor Open the Web page with the image you want to edit.. Setting File Types/ Editors Preferences Set File Type and Editor Pref
Trang 1Dreamweaver 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
6
5
4
3
2
1
Trang 2Setting 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
Trang 3Set 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
4 5
8
Trang 4Dreamweaver 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
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
Trang 5◆ 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
Trang 6If 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
4
Trang 7Set 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
Click to create an image in Fireworks.
3
Trang 8This page intentionally left blank