GS-05: Placing Images on the Page - Dreamweaver CS5

Explore different techniques in Dreamweaver CS5 for adding images and artwork to your website. Use the Insert menu or the Common category of the Insert panel to select and insert an image, or drag and drop images from the Files or Assets panels.

Method 1: Using the Insert Menu

The following method offers more options than the others, allowing you to browse and filter images in a file system or database. It also shows how the browser will resolve to the image URL.

  1. Click on the page to indicate where the image is to be inserted.
  2. Click the Insert menu.
  3. Select Image.

The Select Image Source dialogue box will then appear.

These steps can be simplified using the following hotkeys:

For Windows users: CTRL + ALT + i
For Mac users: CMD + OPT + i

Method 2: Using the Insert Panel

This method is similar using the Insert menu but easier to access as this panel can be accessed directly from within the workflow.

  1. Click on the page to indicate where the image is to go on the page.
  2. Go to the Insert Panel.
  3. Select the Common tab.
  4. Locate the Image icon.
  5. Click on the drop-down arrow directly beside the image icon.
  6. Select Image. The Image Source menu will then open.
  7. Select if the image file will be from the File System or Datasource (datasources pull from databases).
  8. Locate the file image, and click on the image to select it.
  9. Click OK.

After this, the Image Tag Accessibility Attributes menu will open.


Method 3: Using the Files Panel

This method allows images to be directly applied to the page with minimal customization options. 

  1. Click on the page to indicate where the image is to be placed.
  2. Go to the Files Panel.
  3. Locate the file Image
  4. Click on the image to select it
  5. Drag and drop the image from the panel to the desired location on the page.

After this, the Image Tag Accessibility Attributes menu will then appear.


Method 4: Using the Assets Panel

This method also allows for the image to be directly applied to the page with minimal customization options.

  1. Click on the page to indicate where the image is to be placed.
  2. Go to the Assets Panel.
  3. Locate and click on the image file.
  4. Click on the Insert button in the lower left corner of the panel. After this, the Image Tag Accessibility Attributes menu will open.
  5. In the pop-up menu, you can apply the following to a newly inserted image:
    • Designated Alternative Text
    • Long Description
  6. Click OK to have the text or description applied to the image.

Getting Started Videos


Dreamweaver is a popular Adobe program for creating websites and applications. It supports HTML5, CSS3, PHP, FTP, jQuery and more; and it works with HostGator web hosting.

You can learn more about Dreamweaver by visiting Adobe's website or the video learning portal, Adobe TV.  The video in this article is courtesy of Adobe TV.