Skip Navigation.

Tutorial: Adding Images in Dreamweaver

Now that you've added text to your document and changed the background and link colors, it's time to add an image. This page will direct you as you learn to prepare an image for the web, add the image to your page, and adjust settings for the image.

Prepare your image for the web
The first thing you need to do is find an image. You can download an image from one of the popular image-search engines or you can scan an image into the computer. After you've found an image, you need to make sure you do the following:

  • Save the image to your web (I:) directory.

  • Resize the image so it's web-friendly. You can do this using fireworks.

Once you've done these two things, your image will be ready to include on a web page.
See also: Fireworks: Resizing an image

Add the image to your page
Adding an image to your Dreamweaver document is a pretty easy thing to do. Follow these three steps:

  1. Put your cursor in the spot on your document where you want the image to appear.

    2. Dreamweaver Image Icon

  2. Click the "Insert Image" button (right) to open the "Insert Image" dialog box.

  3. Find the image you want to add and select it. Click "Ok." Your image should now be on your page.

See also: Dreamweaver: adding images

Adjust the settings for your image
You can significantly alter the way your image appears within the Dreamweaver window. Most of these alterations are made by way of the "Image Properties" window. To change the settings on your image:

    Selected image and properties window
    Selected image
    (Click for full size)
  1. Select the image by clicking on it (as at right). A black border with resize handles will appear and the properties window will shift to become the Image Properties window.

  2. Adjust settings -- Once you've selected the image, you can adjust it using the properties window. In our example, we've centered the image and filled in the "Alt" field to say A Marmot!.

See also: Dreamweaver: image properties

Once you've added and adjusted your image, you're ready to move on to formatting your document. In the next section, you will learn how to use Dreamweaver to more closely tailor your document to fit your formatting needs.

Previous
Next
Tutorial