Unit 6. Inserting Images (I)

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.

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 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.

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 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...

Unit 6. Inserting Images (II)

Inserting Rollover Image.

A rollover is an image replace by another when the mouse is over it. This kind of image is used on menus and buttons. Here, there is an example of a rollover. Point at it to see what happens. If you want to insert a rollover, you need to go to Insert menu, Image objects, and then Rollover Image. In the new window specify the original image and the one that will substitute the former.

It's preferable to activate the Preload rollover image option. If it's active, the rollover image loads when the page loads, so we avoid a download delay when we're over the image. The Alternate Text is the text you will see when you place the mouse over the image, or the text that will show up when of the image cannot be shown in the browser. Alternate text can be assigned to all images, not only to rollovers. You can do this through the Alt field in the Properties inspector of the selected image.

Flash Buttons

There is another set of special images similar to rollovers that are used to create menus, these are the Flash buttons.

Below we see an example of a flash button. Place the mouse over it to see what happens.

To insert a flash button you need to go to the Insert menu, Media, and Flash Button option, and you will see this dialogue box:

Through Style you can select one of the button formats offered.

In this window you have to set the text that will be shown in the button (Button text:), the name of the object in order to be saved (Save as:) and the associated link (Link: and Target:).

It's better to save Flash buttons in the same directory of the HTML files, instead of the assigned folder for images. If you don't do this it is possible that the button doesn't work propperly if the url is not an absolute one (because if it is relative and the button is saved in the images folder the URL must be relative to that path).

Remember that buttons will be saved with a SWF extension.

Through the Properties inspector of the flash button, you can edit its attributes again:

The dialog window can be opened by clicking on the Edit button, and through the Play button you can check the button status from Dreamweaver whithout it being necessary to open a browser's page.

After testing the flash button status, you need to click again on the Play button (which will have changed to a Stop button) .

Unit 6. Inserting Images (III)

Flash text

Flash text is like the rollover, but instead of interchanging images, it interchanges the color of the text. To insert a flash text you need to go to the Insert menu, Media, and Flash Text. In the new window, set to the text, the link, and the name for the text and specify the original color as well as the rollover color. Here, there is an example of the flash text. Place the mouse over it to see what happens.

The properties inspector for the flash text is the same that the one for the flash button.

The Navigation bar

A navigation bar is a set of images that are used like menu options to browse within the WebSite. A single web page can contain only one navigation bar.

To insert a browser bar go to the Insert menu, Image Objects, and the Navigation Bar option.

In the next window you can specify four different images for each state of each button as well as its link.

Through the buttons in the top of the window you can create or clear buttons on the navigation bar. With you can create a new button, with you clear the selected button, and with you can modify the position of the selected button.

Next, there is an example of a navigation bar. To create it, the same images have been used for all the buttons, but, as you can see, the middle button has a different image than the other two. This is because the option Show "Down image" initially was activated for this button. Place the pointer over the buttons and click to see what happens.

There are four different states, something that you can't do with a rollover.

Through the Insert option it's possible to set if the buttons will be organized horizontally or vertically in the Page.