Index

Inserting Images

Inserting an image is pretty staightforward. Click on the 'Common' tab in the insert bar, and then click on the insert image icon. Alternatively, go to the insert menu and choose Insert => Image.

After you have inserted the image, you can set a number of properties related to it. Click on the image so that the properties bar reflectes the image setings.

The properties inspector shown here is from the PC version of Dreamweaver and may differ from the Mac version. Note that there are two parts to the Properties inspector. If you cannot see both parts then you will need to click the small triangle icon on the far right (not shown in this screenshot) to make both parts visible.

Properties

(Clockwise from top-left) The first (un-named) text field allows you to add a unique ID to the image so you can access it when writing scripts. next to that are the width and height properties. Note that these are display sizes. If you make the image smaller, the full-size image will download before it is resized. If you want the image to be smaller, you should resize it in a graphics program. Next to that is the source file for the image and a link field to add an URL if you want to make your image into a hyperlink. The Alt text field is used for providing text for browsers which do not display images, or for screen readers.

Underneath the Alt text are a number of icons...from left to right:

Underneath the icons there is a border field which will set a (black) border of a user-defined thickness, and three align icons, left centre and right. The left and right icons will allow text to flow around the image like the text on this page. Underneath the Border field there is an align popup menu, which has more detailed align properties.

The options in this popup menu are;

Default generally specifies a baseline alignment. (The default may vary depending on the site visitor’s browser.)

Baseline and Bottom align the baseline of the text (or other element in the same paragraph) to the bottom of the selected object.

Top aligns the top of an image to the top of the tallest item (image or text) in the current line.

Middle aligns the middle of the image with the baseline of the current line.

Text Top aligns the top of the image with the top of the tallest character in the text line.

Absolute Middle aligns the middle of the image with the middle of the text in the current line.

Absolute Bottom aligns the bottom of the image with the bottom of the line of text (which includes descenders, as in the letter g).

Left places the selected image 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.

Right places the image 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.

 

Target; this allows you to set the load properties of a new page if you have yperlinked your image (See the hyperlinks page). 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. V Space and H Space add space, in pixels, along the sides of the image. V Space adds space along the top and bottom of an image. H Space adds space along the left and right of an image.

For the Map properties, see the Image Map page.