Chapter 11. More about graphics

Transparency is a concept that you neeed to be aware of,
since Web graphics in GIF format can be transparent.

Transparency means that certain areas in the picture are transparent,
and that can be used in numerous ways in web design. Here comes a small
exercise that demonstrates the effect. At the same time we will look a little
more on the clips that are hidden in the HTML library.

A digital zebra

First do this exercise, where we insert an ordinary piece of
graphic.

1. Open the
document template2.htm.

2. Save the
document as zebra.htm in
the site1.folder It is
important that you use the right folder!

3. Open the
home page for this book in the browser and click on the link The two
zebra pictures:

4. See the
two pictures – they look alike, right? They are not!. Save them both in the site1 folder (right click on
both pictures and select Save As …)

5. Switch to
NoteTab and give the page the heading A digital zebra …:

6. Insert the
picture zebra.gifin
this way: Find the Quick Tags section in the HTML library and double click on
the img clip:

7. That is a
simpler way to insert graphics. You just need to enter the file name zebra.gif at
the cursor:

8. Save the
page and look at it in the browser. I am sure it looks quite neat.

About the HTML library

Here follows a brief explanation that you ought to read: The
HTML codes can be inserted in many ways. You could write them yourself, but
that takes too much time. The easiest is to use NoteTab’s HTML library, which
is a collection of so-called clips. Each ”clip” can insert certain HTML
code. But as you have seen there is often more than one clip that can result in
the same code.

If we look at the IMG code, which is used to insert graphics
in the HTML document, then NoteTab offers two clips, that will insert that
code. They are both found in the HTML library:

In the Image Elements section is the clip Image. When you
activate that clip a larger dialog box open (see page 22). That gives you
access to control all the HTML codes possible parameters.

If you just need to insert a very simple version of te code (like
in the previous exercise), you need to use the Quick Tags session. There is a
clip called ”img” that gives a direct insertion of the most essential code,
which you complete by entering the file name.

This ”multipage functionality” is very characteristic for
the NoteTab program. There are many ways to insert HTML codes, and that makes
the program extremely flexible and fast to work with.

A transparent picture

We continue with the zebra exercise.

1. Now try to
change the background color to ”gold”:

2. Save the
page and test it. Now you see the zebra on a white background on top of the
golden background – I do not think that is pretty!

3. So adjust
the IMG code to zebra_t.gif like here. That is the name of the transparent version of the zebra picture:

4. Save the
page and test it. Can you see that the zebra picture background is transparent,
so the golden background color covers the whole background – also that which is
seen below the animal?

5. Close all
open documents by pressing Control+Shift+F4.

6. Close
NoteTab with Alt+F4. Now take a break. Get a cup of coffee!

A little about transparent graphics

Normally you would use the JPEG file format for photos,
since it compresses much better than GIF does (the image files occupy
less space). When I in the example selected GIF for the zebra it is because the
JPEG format cannot hold transparent areas; but GIF can.

Figure 28. The photograph is partially
transparent. That means that the home page back­ground color ”shines through”
large parts o the photograph.

The picture is saved as a GIF file, since the JPG format
does not allow transparencies.

If you want to make pictures with trans­parencies, you need
a picture processing program. In Photoshop you could use the tool Magic wand to remove selected areas from the picture:

The ”empty” areas become
transparent, when you choose to save the picture in the GIF format, and select
transparency:

Figure 29. All image editing programs can save partially
transparent GIF pictures; here is at clip from Photoshop. Notice the check mark
in the transparency field.