STEP BY STEP GUIDE
PART 3 - ADDING IMAGES

Images can add colour and excitement to your web page. It is vital that any image you use on a page is in the same folder before you start using them (this makes it easier later on)

You are best to use 2 main image types to begin with (as almost all browsers can use them)

.jpeg (or .jpg) -best for photos. Can reproduce 24 bit files that can handle in excess of 15 million colours

.gif - is best for icons, drawings and simple graphics. It is based on 8 bit files that can handle only 256 colours. .

gifs can also be animated like this

Many .gif such as buttons come with transparent backgrounds (this can be set on the tag in image props) but many esp. animated ones, may not so leave usually a black or white background (explains why many sites on the net are in these shades). You can often alter this with a graphic package.

Frontpage express will convert some other file formats for you such as.bmp, pcx. but be wary.

Getting Images

D.I.Y.

You can create your own by using a scanner for photos or graphic packages. Remember to save as a .jpeg or .gif if possible and also to the folder you are using. (See our Cool tips hints section)

Commercial\free images on CDs

Several companies sell prepared images for you to use. Many computer magazines cover disc have free clipart or other images. As always check copyright instructions.

From the web

There are several sites on the net offer free .gif and .jpegs others have strings attached and some will take legal action if their images are used by others. Check the copyright notices before taking an image off the web

a list of some of these is on our link page

To get image from a web site using Internet explorer, right click image and select "save picture as". You can rename it but remember to send it to the folder your web page is on.

With all ensure or alter the image file name so it is all one case
e.g. mypic.jpeg not MyPic.jpeg

Inserting Images in Frontpage express

Simple.Once you've your image in your website folder just click cursor where you want the image (just like adding text). Either select insert image icon or click insert -> image

Use the browse button (A) to find and select your image file

Altering Images

Images can be cut, copied and pasted just as text (see above)

However you can also alter the shape of a picture. If you click on a picture a set of 9 rectangular boxes will appear on its margins. If you click and hold down on one and move it like here

Crichton Royal Hospital Church, Dumfries,UK

This can alter the size of the object
(one of corner boxes)

or its shape (one of mid size boxes)

Alternatively right-click over image and select image properties.

Click on (A) appearance tag. Click on (C) Specify size and set the size

Changing the position of images relative to text

You can alter how text appears in relation to image. If you right-click on your image and select image properties. Then select appearance.

In the layout (B) (as shown above) box, you have a list of alignment options. You should try to limit yourself to top, middle, bottom, left and right (these are the only one complying to the HTML v4.0 standard. The rest potentially could markedly alter your site on another browser)

With the first 3 (top, middle & bottom) the browser simply treats an image as part of the line of text. The tags control the alignment of text and image

e.g.

this image is set at top whereas this

on is at bottom however
note the text doesn't wrap around these images (just like text)

If you want text to wrap around an object as it does here you need the left and right alignments. The image on the left is set to left and text wraps round on its right side (vice versa on the right)

ADDING SPACE

You can create Space around you image by using the layout (B) box you have a list of cell space options.

e.g a horizontal space of 40 pixels on either side is used here

REMEMBER THE ALTERNATIVE GRAPHIC REPRESENTATIONS

Remember not all web browser display graphics (this is especially true of audio browsers for the visually impaired). Some serious srurfers switch off graphic display to speed up page loading too.

To ensure any info from a critical graphic isn't lost, use the (2) text box that is shown above on critical graphics. Not only this is helpful as a pop up message appear when the browsers cursor passes over (try our church pics above)

BACK NEXT

HOW TO