Skip Navigation

2.3. Images

Insert an image

When you have looked at layout tables you will see that they can be used to place images quite precisely on your page. For now we shall just place our image in the middle of the text. We shall use an absolute address for our image, as we did for the text hyperlink. Later on you will see how to link to an image on your own site.

You will not see your image displayed on the page in Dreamweaver, but if you look in your browser it should appear (provided you are connected to the network).

You should see this image: part of a building

Note:

When you are using absolute image links and you are linking to an image that does not form part of your own website as in this example, you must obtain permission from the owner of the website where the image is stored. If you do not obtain this permission, you may be breaching copyright.

Format your image

If you click on your image to select it (so that little black squares called handles appear on the edges) the Text Properties box will change to become the Image Properties box. The intial Image Properties box may look like this:

Image Properties

If you click the downwards pointing arrow Click arrow the expand Image properties in the right-hand bottom corner of the Image Properties box, it will expand and look like this:

Image Properties (expanded)

In the Alt box type a short piece of text. It is important that the information provided in the alt box is as descriptive as possible. These are the details that will be displayed by the browser if, for any reason, it cannot display the image, or if your reader has decided not to display the images. More importantly this is the information the software used by visually impaired people visiting your page will read out to them.

You can also use the W and H boxes to force the image to be displayed by the browser with the measurements you choose, but this is something you should only do in special circumstances. As a rule you should use your graphics program to create an image of the size that you want rather than using the browser to re-size the image.

To change the horizontal alignment of your image you can use these fields Change alignment.

You can also use the dropdown menu next to Align to alter the alignment of your image. You will find some of the additional options in this dorpdown menu useful once you have learnt how to use tables and to place an image into a cell of a table.