Insert & Modify Images in Dreamweaver
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, Internet Explorer and Firefox 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.
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.
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.
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.
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.