• Corporate Relations
• Outreach
• Education
• Links / Publications

Dreamweaver - How To Insert Images

When you insert an image into a Dreamweaver document, Dreamweaver automatically generates a reference to the image file in the HTML source code. To ensure that this reference is correct, the image file must be in the current site. If it is not in the current site, Dreamweaver asks whether you want to copy the file into the site.

To insert an image:

1. Place the insertion point where you want the image to appear in the Document window, then do one of the following:
   • In the Common category of the Insert bar, click the Image icon.
   • In the Common category of the Insert bar, drag the Image icon to the Document window (or to the Code view window).
   • Select Insert > Image.
   • Drag an image from the Site panel to the desired location in the Document window; then skip to step 3.
     
     
2. In the dialog box that appears, select File System to choose a graphic file.
   
   
3. Browse to select the image you want to insert. If you are working in an unsaved document, Dreamweaver generates a file:// reference to the image file. When you save the document anywhere in the site, Dreamweaver converts the reference to a document-relative path.
   
   
4. Click OK.
   
   NOTE: If you have the Image Tag Accessibility Attributes dialog box activated in Preferences, a dialog box will appear asking for an Alternative Text. Enter a short description in the Alternative Text so that users with vision imparment or who have images turned off know what the image pertains to, use the Long Description text box if a longer, more detailed description is needed. You can enter information in one or both text boxes depending on your needs.
   
   
   
5. Click OK. The image appears in your document.
   
   
6. In the Properties Bar (Window > Properties), adjust properties for the image (see below.)

<Image Properties Bar

To Set Image Properties:

• 
  W is the width of the image, in pixels. Dreamweaver automatically updates this text box with the image's original dimensions when you insert an image in a page.
  
  
• 
  H is the height of the image, in pixels. Dreamweaver automatically updates this text box with the image's original dimensions when you insert an image in a page.
  
  NOTE: Do NOT use the height and width functions to reduce or enlarge your image - use an image editor to size the image appropriately to its purpose. Resizing with HTML does not reduce the image file weight.
  
  
• 
  Reset Size resets the W and H values to the original size of the image. This button appears to the right of the W and H boxes when you have used HTML to adjust the dimensional values of the selected image. Use this tool if you accidentally resize an image.
  
  
• 
  Src specifies the source file for the image. Click the folder icon to browse to the source file, use the targeting tool, or type the path.
  
  
• 
  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.
  
  
• 
  Link specifies a hyperlink for the image. Drag the targeting tool to a file in the Site panel, click the folder icon to browse to a document on your site, or manually type the URL.
  
  
• 
  Map Name and the Hotspot tools enable you to create and label a client-side image map.
  
  
• 
  V Space add space, in pixels, along the top and bottom of an image.
  
  
• 
  H Space add space, in pixels, along the left and right sides of an image.
  
  
• 
  Target specifies the frame or window in which the linked page should load. (This option is not available when the image isn't linked to another file.) The names of all the frames in the current frameset appear in the Target list. You can also choose from the following reserved target names:
  • _blank loads the linked file into a new, unnamed browser window.
  • _parent loads the linked file into the parent frameset or window of the frame that contains the link. If the frame containing the link is not nested, the linked file loads into the full browser window.
  • _self loads the linked file into the same frame or window as the link. This target is the default, so you usually don't need to specify it.
  • _top loads the linked file into the full browser window, thereby removing all frames.
    
    
• 
  Border is the width, in pixels, of the image's border. The default is no border.
  
  
• 
  Align aligns an image and text on the same line.
  
  

Image Editing Tools

• Fireworks icon will launch Fireworks (an image editing application) and will open the selected image in Fireworks.
  
  
• Optimize will launch Fireworks, opening the Optimization dialog box.
  
  
• Crop lets you trim the size of an image, removing unwanted areas from the selected image.
  
  
• Resample lets you resample a resized image, improving its picture quality at its new size and shape.
  
  
• Brightness/Contrast lets you adjust the brightness and contrast settings of an image.
  
  
• Sharpen lets you adjust the sharpness of an image.