Picture Positioning

For information on the different formats for images and their different uses, check out the page here.

To insert an image into a page in Dreamweaver you have a number of options:

  1. From the Insert menu, select Image
  2. On the Common tab in the Insert toolbar, click on the Image button
  3. Press Control-Alt-I

All of these actions will bring up the Select Image Source dialog which will let you use a file browser to find the image that you want to include on your page.

Once you have the image in the page, there are two basic options for positioning pictures in a web page. One is to just use the basic alignment features and the other is to use the specific image alignment property. Note that it is also possible to position an image using the div tag, but that is a topic for another day...

Text Alignment

If a picture is simply placed in a page without setting any of the image alignment options it is treated as if it was just another piece of text. For example, this picture of the orchid placed here has no options set: Orchid. In this case, the image takes its alignment information from the text in which it is placed. Clearly this is not the best way of positioning an image, as it creates a page with large areas of white space. However, in a (very) small number of cases it may be exactly what you need! One scenario where you could use this technique is when building a table of images for a portfolio display page, or when you want to insert a smiley graphic into the flow of the text: Smiley Face, in which case a small graphic usually works best.

Picture Alignment

An alternative strategy, that gives more professional looking results is to use the Align property of an image. If you inster an image, make sure it is selected, and then look in the Properties window, in the bottom row, to the right, you will find a drop down to set values for this property.

Picture of a glass house interiorThe picture on left has its Align property set to Left. This positions the image on the left of the column and allows the text to flow around it, as you can see.

The image also has its H Space property set to 15 to ensure a 15 pixel space to the left and right of the image. This means that the text does not look too cramped around the image, but also that the image is inset from the left margin. It is also possible to set a V Space property which adds vertical space above and below the image. In this case, 10 pixels of vertical padding have been added.

Note that a better way of doing this would be to use style rules as this gives more control over the borders and margins around the image. An example of this is shown below, although I do not discuss the technical details until later.

Images as Links

Notice that the glasshouse image has also been configured as a link. If you move the mouse cursor over the image you will see it change, indicating the "clickable" nature of the object. This was done using the Link property of the image, by clicking on the Browse for File button and then selecting the file to which I wished to link. If you click on it, you will be taken to a page with some additional description on linking. Usually, when makeing a link from an image, it is a good idea to set the Border property to 0 to ensure that when it is displayed in the browser, it does not have an unsightly purple border around it.

Leith SunsetThe alternative to a left aligned image is, of course, a right aligned image. The image of the Leith sunset on the right is aligned in this way.

Even though, if you were to inspect the HTML code for this page, you would find that the image tag has been inserted at the beginning of the previous paragraph, before the words "The alternative to a left aligned image..." the image still appears on the right hand side of the page. However, note that the top of the image is aligned with the top of the paragraph where the image tag was inserted. This image is also a link, in this case a link to the full sized version of the image. This is a typical technique used to construct portfolio galaries.

On the Glasshouse image above, the H Space property was set to ensure a good space from the page text. However, this adds spacing on both sides of the image, even though it was only really needed on the right side. On the sunset image a left margin of 15 pixels and a bottom margin of 10 pixels have been specified using style options instead. The style rule was also used to remove the border. This gives a more flexible range of possibilities and will be covered in a later lesson.

Try resizing your browser window and watch how the positions of the different images in this page adjust to cope with the change of window size.

The Alternative Text

When you first insert an image Dreamweaver will ask you to supply some alternative text. This should describe the image in a concise phrase. Some browsers (Internet Explorer) display the Alt text when the mouse is hovered over the image. However, this is not the intended use of this property. If you wish to provide a popup description for an image that will work in all browsers, you should set a value for the title property of the image. Unfortunately, CS3 does not provide access to this property through its visual interface and you will have to edit the HTML code directly. The resulting code for one of the images above, including both text elements, would be:

<img src="../pix/EdSkyline1-Thumb.jpg" title="Leith Sunset" alt="Leith Sunset" width="350" height="263" class="imageLeftMargin" />

Note that all browsers will display the Alt text if they are unable to download the image for any reason. This text is also used by text-to-speech applications which are often used by folk with a visual impairment when viewing web pages.

It is good practice to get into the habit of always typing up some Alt text when you first insert an image. If you later decide to change the text, you can access it through the image property window.

Further Information

There are a range of other options for setting the Align property of an image. The following links to the W3 Schools site shows the various HTML codes used to create these effects. However, remember that Dreamweaver provides a visual interface to set these properties: