Tutorial
HTML
Dreamweaver
|
s
Tutorial Dreamweaver - Working with Images
To
insert an image
-
-
Place the insertion point where you want the image to
appear in the Document window, and then choose Insert
> Image or click the Insert Image button on the Common
panel of the Object Palette.
-
Drag the Insert Image button from the Object palette to
the desired location in the Document window.
-
Drag an image from the desktop to the desired location
in the Document window; then skip to step 3.
-
In the dialog box that appears, click Browse to choose a file,
or type the path for the image file.
-
Set image properties in the Property inspector.
-
Select the image in the Document Window. Resize handles appear
at the bottom and right sides of the image and in the bottom
right corner. If resize handles don't appear, either click
away from the image you want to resize, and then re-select
it or click <img> in the tag selector to select the
image.
-
Resize the image, by doing one of the following:
-
To adjust the width of the image, drag the selection handle
on the right side.
-
To adjust the height of the image, drag the bottom selection
handle.
-
To adjust the width and the height of the image at the
same time, drag the corner selection handle.
-
To preserve the image's aspect ratio (its width-to-height
ratio) as you adjust its dimensions, Shift-drag the corner
selection handle.
-
In the Document window, place the insertion point where you
want the rollover to appear.
-
Insert the rollover by using one of these methods:
-
Choose Window > Objects to open the Object Palette, and
click the Rollover button.
-
Choose Insert > Rollover Image.
-
In the dialog box that appears, enter the following information:
-
Browse and select an image, or type the path and file name
of the Original Image field.
-
Browse and select a rollover image, or type the path and file
name of the rollover image in the Rollover Image field.
-
To create a link, browse and select a file, or replace the
# in the Link field with a path and file name.
-
To have Dreamweaver preloaded the images in the browser's
cache, select the Preload Images option.
-
Click OK.
Creating
Image Maps
To
create a client-side image map
-
Select the image.
-
Click the expander arrow in the lower right corner of the Property
inspector to see all properties.
-
Type the name for the map in the Map Name field.
-
To define the image map areas, do one of the following:
-
Select the circle tool and drag the pointer over the image
to create a circular hotspot.
-
Select the rectangle tool and drag the pointer over the image
to create a circular hotspot.
-
Select the polygon tool and define an irregularly shaped hotspot
by clicking once for each corner point. Click on the arrow
tool to close the shape.
-
In the Hotspot inspector, click the folder icon to browse to file
to open when the hotspot is clicked, or type the file name in
the Link field.
-
To make the linked document appear somewhere other than the current
window or frame, enter a window name in the Target box or choose
a frame name from the pop-up menu.
-
In the Alt box, type alternative text that is displayed for the
hotspot in text-only browsers.
-
Repeat steps 4 through 7 to define additional hotspots in the
image map.
up
Working
with Links | Working with Tables
Copyrights
Reserved © Web Publishing 2003
|
|
-
Assignment
1
-
Assignment
2
-
Quiz
1
-
Quiz
2
- Project
|
Announcement
To
all my students!
Please
visit this web site regularly.
|
|