Adding Images into your Webpage.

The most commonly used image types are .JPEGs and .Giffs. These formats compress the image into a reasonable size which means they will not take too long to for the web site to start. Remember the larger the file size, the longer your web page will take to load. .JPEGs are used for photographic images, .Giffs work well with cartoons and other vector based images. You will be able to save to these file types in an image editing programme like photopaint, or photoshop.

You can cut and paste images from the web - be sure the images are copyright free if you intend to use them on a commercial website. Right click on the image and save to disc - in your image folder.

Always create the image the size you want for the web page (see previous page to learn how)- it is often useful to have a small image (called a thumbnail) which links to a seperate page containing a full sized version of the same picture. Save the image in the two sizes before importing them on to your pages.

To place your picture, first insert a layer (insert/layer), then insert the picture (insert/image - browse to find the image location on your disc) into the layer. This way you will be able to move the picture around the screen to a suitable location.

Image Links/Image Maps

Whole images can be used to link to other locations - In the properties box type in the address you wish to link to in the link box, or drag the point to file button to the location in your site files. It is advisable to add Alt text to explain where the link will take you.

Image maps can be made so that different parts of an image link to different locations the image can be divided up in a number of ways - circles, rectangles, or a drawn shape. To create these shapes click on the shape icon at the bottom left of the image properties box (if this is not visible, click on the down arrow at the bottom right of the box to reveal the image map tools). Draw the 'Hotspot' and enter the alt text and link address in the hotspot box which appears when you have drawn the shape.

Rollover Images

These can be made to provide buttons, which link to other locations. A rollover image will have one image visible on the page until the mouse moves over the image. At this point the image will change to a second image. Click the mouse button and you will be sent to the new location. Rollovers work best with images that are about the same size, different sized images can distort. To make a rollover:

Insert a layer - Insert/Layer with the curser flashing in the layer -
Insert/Rollover image - browse to find image 1 and then image 2.
Add the link - browse to find the page you want, or type in the address in the box.

Now you can create a web page with text, images, rollovers and links.
Try putting all this together to make a simple website!

Index Introduction Setting up Text Preparing images Adding images Tables Design/research More stuff Getting noticed Publishing your site Links