Unit 6. Inserting Images (I)

In this unit we’re going to see how to insert images in a document. We’ll also see how to create some special images, such as the case of Rollovers and flash buttons, which help to improve the appearance of our web page.

All web sites have a certain number of pages that allow you to improve their look, or just to add more visual information.

There are a set of formats more recommendable than others to be introduced in a web site. You can consult this information here .

To insert an image go to the Insert menu, and then select the Image option. After this it’s possible to select an image in the next window:

If for any reason you need to insert a BMP, it will not appear unless you select All the files in the Type field.

In the Relative to option you can specify whether the image will be relative to the document or to the site root folder. It’s better if it’s relative to the Document because if you move the site to a different location you may not see the image.

The path where the image is will be in the URL field of the window, and later in the SRC field of the properties inspector.

The way this path will be inserted will depend on whether it has been inserted as relative to the root folder, or to the document.

For example, imagine that the images folder and the document in which we want to insert the image is inside the root folder. An image, called teacherclick.jpg is inside the images folder.

In case of inserting the image as relative to the Document, the path would be:

images/teacherclick.jpg

So, in case of it being inserted relative to the Site Root the path would be:

/images/teacherclick.jpg

It’s just like when you create a hyperlink to a file related to the document or to the site root folder.

If you insert a BMP into a document, this will not be correctly shown in Dreamweaver, although it does in the browser. In Dreamweaver it will be shown like this :

This is the same image that appears in Dreamweaver when an inserted image isn’t found. This will happen if you have modified the name of the image, or if you have moved it to another directory. In this case, the image you will see in the browser will be like this:

It’s a blank square with a red X, next to the image name or the contents of the Alt field in the properties inspector.

To practice you can perform the Step by step exercise on Inserting an image.

Inside Dreamweaver the size of the images can be modified. This size change isn’t directly applied to the image file, but the view changes inside the page.

It’s very probable for the quality of the resulting image to be lower than if we modify it in an external editor, such as Fireworks.

For example, we’ll see what happens if we insert an image that represents the Dreamweaver icon and we modify its size in many ways:

original Image

modified size image

You can see the quality of the result. But occassionally it can be useful modifying the size of some images although this implicates losing quality.

There are two ways to modify the size.

The first of these is to select the image and drag one of the black squares that sorrounds the image.

The other way is through the properties inspector, by changing the fields W (wide) or H (height). These fields will be shown in the inspector when an image is selected.

Remember that when you change the aligment of an image you need to do this through the field Align option of the properties inspector. The image alignment offers more possibilities than the text: top, middle, absolute middle, baseline, etc…