Composer Set By Step Basic
Tutorial - part 3

THIS AREA

MAIN
BASICS

BASIC Tutorial
Starting Up
Save & Load
Viewing
Text
Images
Background
Inserting Lines
links
Checking
Other Pages
Uploading
Checking Site

Advanced Editing
Beyond Tips
Composer Hints
Reviews

BWRS
SEARCH

IMAGES

Images can add colour and excitement to your web page.

Sunset Dominican Republic

and also be used as site navigation tools

When starting out you either want to get or create images in 2 compressed file types (as almost all graphic browsers can use them irrespective of operating system)

.jpeg (or .jpg)

Like our sunset picture above .jpeg files are the best for photos as they can handle in excess of 15 million colours as they use 24 bit "true colour".

The compression routine ("lossy") used is great for preserving colour but not so good at edges. Noise is create around the edges as the compression is increased. Hence .jpegs are not good for line diagrams or simple block colour icons

.gif

If you're wanting a simple image with homogenous colour or line diagram then .gif is hard to beat. Images produced by .gif compression do not create the "noise" that you get with .jpeg.

However as it can only at maximum handle 8 bit colour (256 different colours top - most of the time just 216 is recommended)
it is not so good for pics or complex textures.

However .gifs can also be animated like this

 

 

Composer will convert some other file formats for you such as .bmp, pcx. But be wary.

Getting Images

You can either create your own images by using a scanner for photos or use graphic packages.

Or you can get discs of prepared images. You can often get free images from many computer magazines cover disc or you can buy one of the several web art images discs commercially available. As always check copyright instructions.

Alternatively, there are several sites on the net offer free or by condition .gif and .jpegs (a list of some of these is on our link page).

To get image from a web site using most browsers, 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. Always check the copyright notices before taking an image off the web and never pinch an image as some will take legal action if their images are used.

IF you're using composer from Netscape 6.0 or higher we'd recommend you save whatever image you use into your web site directory

Inserting Images in Composer

Simple. Click cursor where you want image. Either click image icon or click insert -> image

With Netscape 6 you get the following

If you click the (A) tag you get a range of options we'll explain later

With earlier version (before 6), you get something like this which has all these other options

In the (A) image location box either type in your image name (e.g. myimage.gif) or use the "choose file" button to find it.

With newer versions (6.0 onwards) it is vital that you save the image file in your webfolder first. Click the URL is relative to page location tag otherwise the HTML code will point to an absolute URL address relative on your hard drive (others won't see it)

With older versions (4.8 or less), you don't need to be so picky. If you want to import the image file into your web folder just leave the leave your image at the original position unticked and the image file will be moved to the same directory. If you set aside a second folder on your site for a graphics bin, you can tick to leave your image at the original position as the older version of composer points via a relative URL method

Altering Images

Basics

Images can be cut, copied and pasted just as text

Shape

You can also alter the shape of a picture.

With earlier versions of composer (before 6.0) If you click on the corner of picture and hold down you can alter the size as we've done here

Or by clicking on a side you can stretch a picture

e.g.

You can also do this via the (C) the dimensions box on the image properties menu (just right click on your image and select image properties)

Changing the position of images relative to text

You can alter how images appears in relation to text.

This can be done when you first insert the image or later if you want by right clicking on your image and select image properties.

You have a list of alignment options (B) . 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)

e.g.

this image is set at top whereas this

on is at bottom however
note the text doesn't wrap around these images (it becomes just like a line in the 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 for right alignment)

BORDER SIZE

You can also set an border size for an image via the the spacing/space around image (D) area. All values are set in pixels

This can be visible using the border option

e.g.
0 pixels

2 pixels

15 pixels

or an invisible border both horizontally like here (set 20 pixels) or vertically like the image below

Which has 30 pixels top and bottom

ADDING AN ALTERNATIVE MESSAGE

Not all browsers support images and people with impaired vision who surf using talking browsers can't see images so it is a good idea to put in alternative message (This also coolly pops up when most people pass their cursor over them - try the any of the pics above)

On Image properties click (E) Alt text/low res or Alternative text options

We'll discuss other options in later tutorials

BACK NEXT
HOW TO
MENU

terms & conditions copyright © 1999-2003 legal notices
home credits contact us link to us