So what are we going to use these files for,
and how do we get them onto our page, and what is the
maximum size that is acceptable?
We can use images in several ways on our page. We can
import a picture to emphasize our text, or as a company
logo, or as a button. We can use a picture as a background
image, and we can create an inimation.
Let us look at a simple graphic within the context of
some text.
The most obvious is a company logo, or a heading. In
company logos you generally find unusual display fonts being
used. Within the next twelve months enough people will
probably be using version 4.x browsers or better to allow us
to use the FONT tags to set our pages in fancy type faces.
On the other hand there will probably be trouble reading
them if people don't have the fonts on their disk, so their
system will substitute another font instead.
If you want to guarantee the reader will see the font you
specify, the best way of doing that is to create the text in
a graphics program, and then import it as an image into your
page. I have examples of that on my site. A particular
example is the following
You can even be frustrated here because many people turn
off the images when they browse to speed up download. That
means you could be worse off with no text showing at all.
There is a way round this.
The HTML code for getting your
image onto the page is simple:
<IMG
SRC="imagename.gif"> where "imagename.gif" is the
actual name of your graphics file.
You can add size parameters to this tag. You can also add
an ALT tag. This allows you to specify text to
display if some blighter has turned off his graphics in the
browser window.
<IMG
SRC="education.gif" ALT="Education">
This bit of code tells the browser to go and get my
picture called "education.gif". If the browser is set not to
display graphics the word "Education" will display instead.
Not an ideal situation, but an acceptable compromise, given
the nature of the net, and the people who use it.
Links
You can use an image as a linking item. You merely need
to put together two pieces of code, the code to define the
path to the image and the code to define the link path.
Below is an example of some code to display an image and set
it up as a link to another page. I have also set the border
of the image to zero:
<A
HREF="../index.html">
<IMG SRC="../pics/HawkerFury.gif"
WIDTH=167 HEIGHT=73 BORDER=0></A>
The image source is straddled by
the link reference.
Backgrounds
You can specify a background color for your page. You do
this in the HTML coding. It is the first thing you do in the
body of your page:
<BODY
BGCOLOR="#FFFFFF">
The colour is specified in hexadecimal format as above.
Don't try to learn all the permutations. There are over 200
of them. So this is not an image, although it can be.
If you want to get a background showing one colour
sliding into another you can create it in a graphics
package, and then save it as a JPEG which will maintain the
smooth gradation of colours. It need not be large either.
If you create such a picture, make sure it is wide enough
to run from the first colour right through to the next. Then
adjust the image size so that it is only 1 pixel deep, and
save it. As it is only 1 pixel deep it will be a very small
file.
When someone calls up your page and it appears in the
browser window, the background image file will be called. It
will display, find it needs to display again to fill up the
space available, and will keep on being called until all the
background is filled with repeats of the original image.
If you want to put in a personalised watermark as a
background, think it through carefully, and produce an image
that will repeat across the page and still look organised,
like the tiles on your bathroom wall. This process is
called, unsurprisingly, tiling. You create one image, that
image keeps repeating across the background of the whole of
your page.
Do not create what you think is a page-sized background
graphic. Remember that your potential viewers are all using
different sized screens, and you can't cater for them all.
You have to produce your backgrounds as I have described.
You can
download
readymade backgrounds. In fact, below is a list of
further sites:
Transparencies
You can make a transparency in PaintShopPro very easily.
You can do the same in Photoshop, but go to
the Photoshop chapter to see how it
is done.
Create your image in the normal way, and make sure your
background (that is to be transparent) is a single colour.
Reduce the colours to 216 colours or less using the
Decrease Color Depth dialog box. Select an
Optimized Palette, and Error Diffusion as the
reduction method. Also select Include Windows colours
and Reduce colour bleeding, and click on OK.
Select the Dropper Tool and pass it over the
colour you want to make transparent. Note the index number
which is indicated by the "I" in the Colour palette
box under the RGB values.
Select File - Save As. Set the image type to
Gif - Compuserve and set the subtype to Version
89a - Noninterlaced. Click on the Options button
in the Save As dialog box to set the transparency.
Select "Set the transparency value to palette entry"
and type the index number of the colour you want to make
transparent. Click OK, and then OK again.
I mentioned the term "noninterlaced" in the previous
paragraph. An interlaced picture is one that is built up on
the page gradually by rendering alternate lines, and then
rendering the rest of the lines. If your picture is huge you
should interlace it. If it is small (as it should be) you
don't need to interlace it.
You should create a transparent single pixel gif to use
in your page design. Because it is difficult to get browsers
to place items exactly where you want them, unless you use
the new coordinate tags, and early browsers don't support
their use, so many users would not see your pages as you
coded them even if you did use these tags. All browsers see
transparent images tho, even if they are turned off.
The theory is simple. Create a picture with one color in
it. Index the color, then save the file as a GIF. Make the
color transparent, then cut the image right down so that it
only contains one pixel. Call this image something obvious.
I have called mine "trans.gif". I use it a lot. If I want to
have my text start a couple of inches across the page I
place trans.gif in front, and set it to be 140 pixels long.
It pushes my text neatly out across the page, and you can't
see the image because it is transparent.
You can do the same to set text both on the left and on
the right of the page. Drop the transparent gif between,
make it the correct width, and it will act as a column
separator.
You can do exactly the same in tables, to pad out cells.
Animations
You can also set images together to form an animation. If
you are using a Mac you need Gif Builder, if you have
a PC you will need Gif Construction Set. The files
created this way are not large. Do make sure that each of
the images you are going to sequence is the same size, so
they fit within the same border.
You can also create animations using dedicated programs
with more sophisticated properties, such as Flash and
ShockWave.
