Inserting Images

This tutorial illustrates inserting images in Dreamweaver CS5.

Let's now add an image to a page.

There are several ways of doing this, so we'll start with the one that seems to be most popular and flexible.

The page I'm going to use is the one about Sydney. I open the page and place the cursor where I want the image to appear.

We'll start by using the Image option on the Insert menu.

Selecting that brings up the Select Image Source dialog.

This dialog enables us to look for an image in our File System or in what are referred to as our Data Sources - more on that later.

Select File System. Browse to the folder that contains the image, and select the image. Note the preview panel on the right that lets us check we have the right image. Note also that when browsing if I need to return to the Site Root at any time there is a button at the top of the dialog to do that.

Click OK.

Now we see the message from Dreamweaver where it tells us that the image is not in our site folder structure and asks us if we ant to copy it there.

The answer to this will usually be Yes, or you may have problems when you publish the site!

Now Dreamweaver asks us which folder to place the image in.

We'll use the folder we've set aside for that purpose. Double click the images folder then press Save.

Now we see the Image Tag Accessibility Attributes dialog. This enables us to enter information associated with the image that can be useful to visitors and that can help in indexing and locating images. I enter a short term in the alternate text box. (This will be used by some accessibility tools to identify the nature of an image for visually impaired users). The long description specifes the location and name of a plain text document that can contain additional information about the inage, such as where and when it was taken.

I've decided to leave the long description empty at the moment, but have entered some alternate text.

Now my image is on the page, and the Properties Panel contains details of the image as it is selected on the page.

Note that here we've only been looking at static images, i.e. ones that don't more. Later on we'll look at moving images.

More Dreamweaver Tutorials

All Dreamweaver CS5 Tutorials - Will be complete by Januay 2011.
Buy Dreamweaver CS5

Find this website useful?

To link to this page from your website, simply cut and paste the following code to your web page.

It will appear on your page as: Inserting Images in Dreamweaver CS5

Share this Webpage

This site proudly build with Site Build It!