Unit 6. Inserting Images (I)


In this theme we're going to see how to insert images into 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.

 

Introduction

 

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 .

 

Inserting an image

To insert an image you need to go to the Insert menu, and then the Image option. After this it's possible select an image in the new window.

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

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 being looked for in the previous location.

The same thing occurs when you select a document to create a link.

The path in which the image is will be in the URL field of the window, and in the Src field of properties inspector, depending on whether it has been inserted as relative to the root folder of the site, or of the document.

For example, imagine that the images folder and the document in which we want to insert the image is inside the site root folder (The folder site). This 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 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 isn't correctly shown in Dreamweaver, although it is 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 can happen if you have modified the name of the image, or if you have moved it to other directory outside of Dreamweaver. 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 of properties inspector.

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

Changing the image size

 

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 that the quality of the resulting image is lower than if we modify it at 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 with the mouse.

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.

You need to remember that when you change the aligment you need to do this through the field Align option of the properties inspector. The images alignment offer more possibilities than the text: top, middle, absolute middle, baseline, etc...

You can create links and behaviors in parts of an image, instead of in the complete image. This is known as Image map. This information can be seen here .

 



  Go to the previous page page Content  Go to the nex page  

Page 6.1

Legal warning: Authorised on-line use only. It is not allowed the use of these courses in companies or private teaching centres.
aulaClic. All rights reserved. Reproduction in any form whatsoever is prohibited.
November-2005.