Dreamweaver can display JPEG, GIF, and PNG images. For images to appear in a Dreamweaver document, the image files must be within a defined local site (or directory). If you choose a file outside a local site, Dreamweaver will ask if you want the file copied to a folder within the local site.

Insert an image:
1. Place the cursor where you want the image to appear on the page and then choose Insert > Image or click the Insert Image button on the Common panel of the Object palette.

2. In the dialog box that appears, type the path for the source file or click Browse to choose a file.

3. Set Image properties (such as the alignment, alt tags, and border for the image) in the Property inspector.

The following Align options in the Property inspector are associated with certain selected elements, such as images and plugins.

Browser default 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 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 the object to the right. If left-aligned text precedes the object on the line, it generally makes left-aligned objects 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 makes right-aligned objects wrap to a new line. Any text following the object on the line then wraps to the former line, appearing above the object.

If your website is more graphically oriented, then you may consider using imagemaps.

The technical meaning of imagemaps: imagemaps tell the browser the coordinates of the clickable region of the picture so that it can turn it into a link. In English: Imagesmaps turn regions of pictures into links. They are used for sites that have images with clickable regions.

For instance, the main page of the Boalt website uses an imagemap so that you can click on the various departments listed on the picture. Dreamweaver makes imagemaps very easy to implement.

In order to have an imagemap, you must have an image/graphic first that contains pictures and/or text that you want to have made into a clickable link. For instance, let's say we have this opening graphic on our sample homepage:

We want to make three clickable areas on this graphic, one for each of the three links.

To make the imagemap, first click on the graphic so that it's active. (When an image is active, it will have a black border around it with black squares at some corners.) Then, make sure your toolbar is expanded. (If it's not expanded, then just click on the little white down-arrow on the bottom right corner.) The Map toolbar is located on the bottom left-hand corner of the expanded toolbar.

To create an imagemap, first, type a name for your imagemap in the textbox by the word "Map". Then choose the shape you want your link on the graphic to be by clicking on either the square, circle, or polygon button. Use the cursor to draw the link you want on the graphic. If you make a mistake, click on the arrow button (located underneath the word "Map"), select the link you just drew, and press delete. After drawing the link, fill in the appropriate link information in the toolbar (in the textbox named "Src"). If you want to make another link, then just continue drawing them. Click off of the image anywhere on the screen to deselect the image and stop working its imagemap.