Web Team

Web Team

Add an image (and alternate text) to a page

This page explains how to add an image and alternate text to a web page. Alternate text helps people using screen readers.

These basic instructions work best on people pages where tables are used. (You may have other pages using tables but generally we don't use table to control layout).

Example of page where text is not wrapping around imageIf you add an image to a page and it looks odd (similar to the image on the right), see wrapping text around an image.

For images with captions see add a caption to an image

You use Dreamweaver to add an image to a page (whereas you use photo editing software eg Photoshop Elements to prepare images for the web).

Add an image by select and drag

In Dreamweaver

  1. Open the page you want to add an image to
  2. Find the image you want to add in the graphics folder (using the files panel right of screen)
  3. Click and drag the image from the files panel to the place on the page you want it to appear
  • Add an alternate text using the instructions for your version of Dreamweaver below

Open page and find image in Dreamweaver

Page to add image to is open and image to be added is selected in the files panel

Dreamweaver - CS3 and CS4

  1. 'Image Tag Accessibility Attributes' dialogue box appears. Enter a meaningful title in the alternate text field. (You don't need to add anything in the long description field)

 

Dialogue box for adding alternate text name

Top

Dreamweaver - MX2004 and 8

  1. Click on the image to select it
  2. In the properties panel below enter a meaninful title in the 'alt field'
 Adding alternate text in Dreamweaver MX2004 and 8

Trouble shooting and tips

  • If Dreamweaver won't let you select and drag an image from the files panel onto a page, trying closing and re-openning Dreamweaver

  • If adding an image affects page layout see wrapping text around an image

Alternative methods of adding images to web pages

In Dreamweaver

  • Place the cursor on the page where you want to insert an image. Use the top menu, insert - image, then navigate to your graphics folder and select the image. You will need to add an alternate text as shown above

  • Or, place the cursor on the page where you want to insert an image. Click on the image icon just below the top menu. Select image and navigate to the image you want and select it. You will need to add an alternate text as shown above

Alternative methods of adding images

Alternative methods of adding images

Top