How to Insert Images in Dreamweaver - dummies

By David Karlins, Doug Sahlin

Dreamweaver’s minimalist image editing tools allow you to perform rudimentary image editing, such as resizing and cropping. You find those tools in the Properties Inspector.

You don’t create images in Dreamweaver. For that, Adobe provides Illustrator (for artwork, graphical text, page background images, navigation icons, and so on) and Photoshop (for preparing photos for the web), as well as other tools. As a general rule, stick with preparing images for the web in those programs.

To insert images, make sure you’re working in Design view (or, in Split view with your cursor in the Design side of the window). You have two basic paths: Insert from your machine or use a copy-and-paste technique. In either case, you need to be in Design view (choose View→Design; or, for Split view, choose View→Code and Design) to see images as you paste or embed them.

Chances are the HTML page into which you’re embedding an image will have some text on it. So, the first step is to figure out where you want the image to appear.

Unlike print design, images in web pages aren’t placed in specific locations. That drives designers nuts.

So, to insert an image file from your computer into an open HTML web page in Dreamweaver, follow these steps:

  1. Click in the Document window at the point where the image is to be inserted.

    In this step, you locate where in your HTML code the image will be inserted. Again, where and how the image is displayed will be defined with CSS.

  2. Choose Insert→Image.

  3. In the Select Image Source dialog box that opens, navigate to and select any file on your computer.

    If the image you select is outside your site folder, a helpful dialog box appears, prompting you to save a copy of the image to your Dreamweaver site’s root folder.


    1. Click Yes.

    2. Click Save in the Copy File As dialog box.

  4. Define accessibility attributes.

    By default, the Dreamweaver Image Tag Accessibility Attributes dialog box appears before an image is finally inserted into a page.

    The Alternate Text field is the most important of the two options in this dialog box. It displays text that’s read aloud in reader software for vision-impaired visitors, and also that displays in browsing environments where image display is disabled. Alternate text can and often should include uppercase and lowercase letters, spaces, and special characters.


    If vision-impaired visitors or people in browsing environments that do not support images are part of your target audience, you might consider creating HTML files with more substantial image descriptions. Such files are linked to the image by defining a link in the Long Description box in the Image Tag Accessibility Attributes dialog box.

  5. Click OK to insert the image.

At this point, you’ve only inserted the image. Page design, including placing images and flowing text around them, is managed with CSS