Introduction

You can improve the look of your webpage by adding images in it. The addition of visual information means you are making your webpage attractive.

Inserting an image

In order to add an image, just go the Insert menu and select the Image option. You will then be able to select the image in next window. If you want to add a BMP image, then it won't appear unless you select all the files in the Type field. By using the Relative to option, you can define whether the image is relative to the document or to the root folder of the website. If the image is relative to the Document then it is a better thing. That is because when you move the website to the different location you might not view the image.

The path of the image will be stored in the URL of the image of the window, and then in the SRC field of the properties inspector. The path will be added depending on whether it has added as relative to its root folder or to the document. For instance, consider that the folder of image and the relevant document is located in the root folder. Then an image named as world313.jp is inside the image folder. If you are inserting the image as relative the Document, then the path would be like that:

Image/world313.jpg

If you insert the image relative to the Root site then the path would be like that:

/image/world313.jpg

If you want to add a BMP image in your document, then it will not correctly appear in Dreamweaver, although it will appear correctly in browser. The image will be appeared as broken image in Dreamweaver.

Changing the Image Size

You can modify the size of image within the Dreamweaver. The change in size is not direct done in the file of image and the view can be changed inside the page. If you use an external editor to modify the size of image then its quality will be affected.

You can modify the size of the image by two ways, these are:

First – you can select the image and drag one of the black squares that are surrounding the image.
Second – you can insert an image through the properties inspector, by altering the fields W or H. When you select an image, these properties will be appeared in the image.
In order to change the alignment of an image you need to use the Align option of the properties inspector.

You can add links in parts of image instead of inserting links into the whole image. This practice is known as the Image map.

Inserting Rollover Image

A rollover image is the one that appears after replacing other when the cursor is over it. Rollover image is used on menus and buttons. In order to insert the rollover image, go to Insert menu, Image objects, and then Rollover Image. Define the original image in he new window and the second image that you will use as a rolling over image. It is recommended to activate the Preload rollover image option. If you activate this option, the rollover image loads when the page is loaded, so the downloading delay is avoided when you are working over the image.

The Alternate Text appears when you place the cursor on the image, or it is the text that displays when image is not shown in the browser. You can assign alternate texts to all images. Use the Alt field in the Properties inspector of the selected image to change the text.

Flash Buttons

Dreamweaver offers you another set of unique images which are similar to rollovers used to create the menus, these buttons are called the Flash buttons. In order to insert a flash button, go to the Insert menu, Media, and Flash button option, there you will see a dialogue box.

You can select any of the offered buttons from the Style option. You can set the text of the image by using the Button text. In rder to save it use Save as and if you want to add a link then you can add a link by using Link and Target.

Saving the Flash buttons in the same HTML directory is a good idea. If you don't save it in HTML files then there is a possibility that the button will not work properly because its url is not an absolute one. The button will be saved with a SWF extension. By using the properties inspector of the flash button, you can edit its features as per your requirements.

When you click the Edit button the dialogue window will be opened, and by using the Play button, the status of the button can be checked from the Dreamweaver without opening the browser's page.

Flash Text

It is similar to the rollover, but it does not interchange images, it only changes the color of the image. In order to insert a flash text, go to the Insert menu, Media and Flash Text. A new window will open in which you can set the text, link and the name for the text, plus you can also define the original color of the text along with the rollover color.
The properties inspector for the flash text will remain the same as it was for the flash button.

The Navigation bar

A navigation bar is a group of images which are used as menu options for browsing within the Website. Only one navigation bar can be used for single webpage. In order to insert a browser bar, go to insert menu, Image Objects, and the Navigation Bar option. You can specify four different images in the new window. These images are for the each button. You can also specify their links.

---

Add More Info About Inserting Images