|
|
This How To gives you some general information
on how to insert images into your webpages using Dreamweaver
v4 and CS3. Other versions of Dreamweaver may be able to use this How
To also..
Dreamweaver, like most browsers, can display
both JPEG and GIF images. Dreamweaver, Microsoft Internet Explorer
4.0 and later, and Netscape Navigator 4.04 and later also support
PNG images.
In general, JPEG is the superior format for photographic or
continuous-tone images, and GIF is preferred for noncontiguous
tone images or those with large areas of flat colors.
The PNG format is a patent-free replacement for GIF that includes
support for indexed-color, grayscale, and true-color images.
It also provides alpha channel support for transparency. PNG
is the native file format of Macromedia Fireworks.
For more information on using Dreamweaver, refer
to Dreamweaver's Help Pages and IT's other How To's. |
|
Insert
an Image
NOTE: For images to appear in a Dreamweaver document, the image
file must be saved within a defined local site.
- Place the cursor where you want the image to appear on the
page
- Choose Insert -> Image...OR...
(v4)
Click the Insert Image button on the Common panel of the
Object palette.
(vCS3) Click in Image button on the Insert toolbar.
- In the Select Image Source dialog box, type the path for
the source file or click Browse to choose a file.
- Once you find your image, click Select.
- (vCS3) Enter your Alternate tag, click OK.
- The image should appear in your document.
- Select the image and continue with next section to change
image properties.
|
Top
of Page
|
Change
image properties
NOTE: Image (name) is the most critical property that should
be entered each time you insert an image. It helps identify
the image for people that use card readers.
When an image is selected, choose from the following properties
in the Property inspector: |
|
Image (name)
|
Lets you name the image so you
can refer to it with a scripting language, such as JavaScript
or VBScript. |
| W and H |
Reserve space for the image on the page as the page is
loading. Dreamweaver enters the image's original size
automatically.
- Default and unlabeled values are pixels. You can
also enter a number and "in" for inches, "pc" for picas,
"pt" for points, "mm" for millimeters, "cm" for centimeters,
and combinations thereof, such as 2in+5mm.
|
| Src |
Specifies the source file for the image.
- Type the path or click the folder icon to browse to
and select the source file. See About relative and absolute
paths for information on entering path names
|
| Link |
Specifies a hyperlink for the image.
- Type the URL, drag the point-to-file icon to a file
in the Site window, or click the folder icon to browse
to and select a document on your site.
|
| Align |
Aligns an image and text on the
same line. See Aligning elements. |
| Alt |
Specifies alternative text that appears in place of the
image for text-only browsers or for browsers that have
been set to download images manually.
- For visually impaired users who use speech synthesizers
with text-only browsers, the text is spoken out loud.
In some browsers, this text also appears when the pointer
is over the image.
|
| V Space and H Space |
Add space, in pixels, around
the top and bottom, and left and right of the image, respectively. |
| Low Src |
Specifies the image that should
load before the main image. Many designers use a 2-bit (black
and white) version of the main image because it loads quickly
and gives visitors an idea of what they're waiting for,
but you can use any image with the same dimensions as the
main image. |
| Border |
Sets the width of the link border
around the image in pixels. Enter 0 for no border. |
| Map |
Enables you to create client-side
image maps. See Creating image maps |
| Refresh |
Resets the W and H values to
the original size of the image. |
|
Edit
|
Launches the image editor you
specified in External Editors preferences and opens the
selected image. When you save your image file and return
to Dreamweaver, Dreamweaver updates the Document window
with the edited image. |
|
Top
of Page
|
Align
Images
When an image is selected, choose from the following properties
in the Property inspector:
Browser default Depends on the browser, but generally
specifies a baseline alignment.
Baseline and Bottom Align the text baseline to
the bottom of the object.
Absolute bottom Aligns the absolute bottom of the text,
including descenders (as in the letter "g") with the bottom
of the object.
Top Aligns the top of the tallest character in the text
line with the top of the object.
Text top Aligns the tallest character in the text line
with the top of the object.
Middle Aligns the text baseline with the middle of the
object.
Absolute middle Aligns the middle of the object with
the middle of the text.
Left Places the object on the left margin, wrapping
text around it to the right. If left-aligned text precedes the
object on the line, it generally forces left-aligned objects
to wrap to a new line. Any text following the object on the
line then wraps to the former line, appearing above the object.
Right Places the object on the right margin, wrapping
text around the object to the left. If right-aligned text precedes
the object on the line, it generally forces right-aligned objects
to wrap to a new line. Any text following the object on the
line then wraps to the former line, appearing above the object.
|
Top
of Page
Resize
an Image
- Select the image you want to resize.
- Resize handles appear at the bottom and right sides
of the element and in the bottom right corner.
- If no resize handles appear, other elements are selected
in addition to the element you want to resize.
- Click away from the element and select it again, or
use the tag selector at the bottom of the Document window
to select the element.
- Resize the element:
Drag the right side selection handle to adjust the width
of the element.
Drag the bottom selection handle to adjust the height
of the element.
Drag the corner selection handle to adjust both the width
and the height of the element at the same time.
Shift-drag the corner selection handle to preserve the
element's aspect ratio (its width:height ratio) as you
adjust its dimensions.
To return a resized element to its original dimensions,
click the W and H labels in the Property inspector. |
Top of Page
|
