Inserting an Image

Images are separate files that you must select from a dialog box. Dreamwweaver is an HTML editor. A program such as Fireworks or Photoshop is needed to edit images and make them web ready (i.e. saving them as .gif. or .jpg files).

1. Place the cursor the spot on your page (in the design window) where you want to insert the image.
   
   
2. Click on the Insert Image icon in the Common tool panel.
   
   
   
   
3. This brings up a dialog box that asks you to browse for the image file. Then hit Select.
   
   
   
   
4. NOTE: You need to have a site established in Dreamweaver and you will need to save/copy the image to that site (typically Dreamweaver prompts you to do so). If you do not, the link created in the web page will be to the desktop or other folder on your harddrive (as in this example) rather than being copied to and linked within your own site.

Resizing an Image

1. Move your mouse pointer over the image in your design window and click on the image. The image property inspector panel appears (in place of the text panel):
   
   
   
   
2. You can change the size by changing the numbers of pixels in the width (W) and height (H) dialog boxes.
   
   
3. Or, you can adjust the image manually in the design page. Once selected, black boxes appear around the image that allow you to resize it.
   
   
4. NOTE: This only resizes how the image is displayed on the page, not the image itself. Generally it is better to resize an image in Photoshop or Fireworks. Changing the size by designating pixels in the code often distorts the image and does not reduce download time for large images.

Position Text around an Image

1. In the image properties panel select align.
   
   
   
2. Select the desired alignment. The alignments effect text on either side of the image. Additional text generally wraps around beneath the image.

Setting a background image

1. You can also set a background image for your page. Remember: a) An image tiles (repeats) across and down a page in order to create the background. Not all images will work with this procedure. b) Not all images work well as backgrounds for text. Make sure the text is readable.
   
   
2. Go to Modify across the top line of main options and select page properties. This dialog box appears:
   
   
   
   
3. Select browse and find the desired image. Remember to copy it into your site.