Learnit Training

5. Placing of images

In order to first place the simple elements on the screen, now is a good time to place the logo and possibly other images. Images used on websites will usually be prepared in Adobe Photoshop. Photoshop allows images to be resized, cropped, made transparent and, not unimportantly, Photoshop can make images suitable for the web in terms of file size. The image you can place in the exercise below has already been prepared in Photoshop. If you would like more information about using Photoshop, please contact Learnit to discuss the possibilities; we also offer a free Photoshop course.

5.1 Inserting a logo

You can download the prepared logo (correct size, colour and number of kilobytes) here. After downloading the image, place the logo in the pic folder, which is located in the www folder on the desktop. Once the image is in the correct folder, inserting it into the website is fairly simple. You click on the frame in Dreamweaver where you want the logo to be and select the frame. (A yellow line will appear around the object indicating that it is selected). Now you can make a reference to the image in the source field at the bottom of the properties palette. There are several ways to create the reference. One way is to type the following text pic/logo.png in the source field, another way is to click on the map icon to the right of the input field. Another way is to click on the folder icon to the right of the input field. A third way is to press and hold down the mouse button and draw a line from the visor icon (immediately to the right of the source input field) to the relevant image in the file palette. The image below shows an example of the third method.

If you choose the second method, an 'alt' text will have to be entered after selecting the image. This 'alt'-text stands for alternative text. This text is used, among other things, by programmes that read the website to handicapped people. If you choose method three, you can also fill in this 'alt'-text in the properties palette.

Learnit screenshot for Online Free Dreamweaver Course