Copyright Michael Karbo, Denmark, Europe.
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:
5. Switch to NoteTab and give the page the heading A digital zebra …:
6. Insert the picture zebra.gif in 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
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:
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 background 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 transparencies, 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.