HTML 4_01 Weekend Crash Course - G. Perry
.pdf
Session 14—Adding Form Elements |
195 |
QUIZ YOURSELF
1.How does a user deselect a check box? (See “Creating Check Boxes.”)
2.How do you know which check box options the user selected? (See “Creating Check Boxes.”)
3.Is it possible for a user to view a Web page and not select a radio button? (See “Creating Radio Buttons.”)
4.What is the difference between a one-line selection list and a one-line pick list? (See “Creating Selection Lists.”)
5. What resets fields when the user clicks a reset button? (See “Creating the Reset Button.”)
Afternoon Saturday—III Part
14 Session
S E S S I O N
15
Transparent Imaging
Session Checklist
Understand the basics of transparent images
Use a graphics program that produces transparency
Learn about the problems associated with anti-aliased graphics
Create a one-pixel transparent image
Specify low-resolution images
This short session returns to the graphical aspects of your Web pages. Although much of this session deals indirectly with HTML, most of the focus is on graphic design and creation. Your Web page creation involves much graphic
creation for images, buttons, and other Web page elements, and no HTML coder gets very far without a mastery of graphics and how graphics work best on Web pages.
One of the most important imaging concepts that you can learn is transparent imaging — that is, creating images with backgrounds that are invisible so that the Web page shows through. When you place a transparent image over another image, or over text, or over a Web page that contains a background image, the transparent portion of your image allows the items underneath to show through. Only the nontransparent portion of your image remains on top of the rest of the page.
198 |
Saturday Afternoon |
About Transparent Images
Although you can make transparent JPEG images, many of today’s browsers do not yet support them. Transparent GIFs, on the other hand, are popular and have been for years. Most popular graphics programs enable you to create transparent images. In addition to graphics programs, some Web page-creation programs such as Dreamweaver and FrontPage 2000 also enable you to convert a transparent image to a nontransparent one. Nothing you do in HTML, however, can make a nontransparent image appear transparent in a browser.
You may wonder why transparent images are so important. Without transparency, your images take on a rectangular shape. Figure 15-1 shows the difference. The image on the right side is an example of a transparent image. The image on the left side is an example of a nontransparent image. Notice the white rectangular outline around the nontransparent image. Such images are somewhat unwieldy and add too much bulk to your Web page. With most users still using low resolutions and 17-inch screens and smaller, you want all the screen real estate that you can get, and nontransparent images take far too much away from your page.
Figure 15-1
A transparent image does not carry with it a rectangular background that the nontransparent image has.
Session 15—Transparent Imaging |
199 |
From the very beginning of the GIF image’s initial design, you could specify one color as a transparent color. In other words, that color takes on the color of whatever is under it when you place the image on the screen.
As with chromo key, a process in television where actors stand in front of blue backgrounds that are later removed by the camera and replaced by a different background, a transparent color will fade to nothing when presented against another image.
The only real trick in making a GIF image transparent is to decide which color should be the transparent color. Generally, this color will be the color in the image’s rectangular background area.
Transparency can only be applied to one color, which means that an image with a multi-colored background works poorly as a transparent image.
Note
Making Images Transparent
Unfortunately, you cannot make a GIF image transparent with HTML code. You must use a graphic image-editing program or a Web page-creation program that supports the creation or conversion of transparent images. The steps for turning a GIF image into a transparent image are similar for almost all graphic image-editing programs.
|
Many freeware and shareware programs exist that can perform |
|
GIF transparency. To find out about the available programs, check |
Tip |
out Transparency (http://www.macshare.com/graphic-to. |
html/), the GIF Construction Set (http://www.mindworkshop. |
|
|
com/), and LViewPro (http://oak.Oakland.edu/simtel.net/ |
|
win95/graphics.html). |
Most of the editing programs follow the same procedure for converting an image to a transparency, although they do use different menu options and screen controls.
To give you an idea of the steps required, the following procedure details how you would make a GIF image transparent in PhotoDraw 2000:
1.Load the GIF image into PhotoDraw. The image should come into the program as a rectangle, possibly with a white background, as shown in Figure 15-2.
Afternoon Saturday—III Part
15 Session
200 |
Saturday Afternoon |
Non-transparent background
Figure 15-2
The GIF image to be made transparent
2.Select the transparent color. To do this, make sure that you know the exact color of the image’s rectangular background area. (White will be the background color of Figure 15-2.) You can select the background color from the graphics program’s color palette and draw a line over the background to make sure you’ve got the correct color. For white backgrounds, the selection of the background color is simple. For other colors, the color palette typically displays all colors in the image so that you can choose the color you desire.
3.Once you know the exact background color, select the Set Transparent Color tool (all graphics programs that support transparent GIF images will have such a tool or one similarly named). The cursor should change to a crosshair.
4.Click an area of the background color that you want to be transparent. The program should change the background color to show that the transparency is made. You won’t be able to see the transparent effect just yet.
Session 15—Transparent Imaging |
201 |
5.Save the image under a new name, perhaps with the filename suffix trans, such as logo-trans.gif, so you have both the transparent and the nontransparent image intact.
Tip
Cross-Ref
In addition to the transparent GIF image file, save the transparent image file using your graphics program default extension. This ensures that you have the highest resolution possible in case you want to edit the image later.
The <img> tags are explained in Session 7.
When you place the transparent GIF onto your Web page using the <img> tag, any images already at that location, including the background if you’ve supplied a background image, will show through your transparent region. Figure 15-3 shows the logo in Figure 15-2 as it appears after its background is made transparent.
Afternoon Saturday—III Part
15 Session
Figure 15-3
The GIF image’s background now shows through the transparent region.
202 |
Saturday Afternoon |
Never use the same image’s background color inside your image. If you do, the color becomes transparent everywhere it appears. Your image might show through the middle as well as around
Never the edges if the middle section’s color matches that of the background.
Transparency Problems Caused by Anti-Aliasing
If your image is an anti-aliased image, making the image transparent might be more difficult. Anti-aliasing is sometimes used to smooth the edges of certain images. The anti-aliasing process occurs during the image’s design and creation, or perhaps later in an editing session with a graphics program that can perform anti-aliasing.
Figure 15-4 shows how anti-aliasing can help make an image look rounder than it really is. The figure presents the letter D both in a regular and anti-aliased close-up pattern. Although the difference is minor when the image is viewed at normal screen size, distance, and resolution, anti-aliasing’s smoother edges can make small text or lines within a drawing appear more natural.
Figure 15-4
The right letter is anti-aliased for a smoother line set.
Session 15—Transparent Imaging |
203 |
Notice that shading using a color like that of the actual image (in this case, the “image” is the letter D) is used to fill in the gaps to produce the rounder anti-aliased image. Once the image is reduced to its regular size and resolution, the shaded color fools the eye into thinking that the image is smoother than it really is.
Anti-aliasing can confuse your transparent GIF images if you use anti-aliasing anywhere within the image’s background, because of the multiple shades it uses. When you pick a background color, several more shades may help comprise the background, and you’ll miss those. Your transparency will look incomplete. You’ll have to edit the image as best you can and apply a uniform color throughout the entire background. The image may look somewhat jagged around the edges, but it’s the best you can do.
Another problem associated with anti-aliasing is that a halo effect often appears around transparent images that are anti-aliased. You must edit these images pixel-by-pixel inside your graphics editing program if you want to ensure a total elimination of the halo, but that might compromise the smoothness of the image. Anti-aliasing represents one of many trade-offs that you make when
creating Web pages. Although most graphics programs enable you to save an image with either aliasing or anti-aliasing, the default is probably anti-aliased images.
The One-Pixel Transparent Image Trick
This session’s title makes the subject sound much more fascinating than it is. As a matter of fact, many HTML programmers state, publicly, that they do not approve of this trick. Then, with doors closed, they use it in their own pages!
A one-pixel image is a picture you create in a graphics program that consumes only a single pixel of space. By stretching such a small image, you can blank out a large area of a Web page without adding download and space overhead to your page other than the single pixel.
Here’s what you do to create a one-pixel transparent image:
1.Start your graphics program.
2.Draw a large white box with the edge white as well.
3.Make the image’s transparent color white. This converts the entire image to a transparent image.
4.Adjust the size of the image to one pixel-by-one pixel.
5.Save the file as a GIF file to your images directory.
Afternoon Saturday—III Part
15 Session
204 |
Saturday Afternoon |
You now have an empty space that is a single pixel square. Keeping in mind that the <img> tag supports attributes that stretch and lengthen GIF images, you can place this one pixel throughout your Web pages wherever you need spacing. Although tables are great tools for aligning text and pictures, a transparent onepixel image, stretched so a uniform size is left between all your Web page elements, makes laying out your pages much simpler.
Figure 15-5 shows a Web page with its second group of numbered items indented to the right. The background contains a pattern so that a transparent pixel, stretched to the width of the indented text, provides a simple way to indent the text. By inserting the pixel and enlarging it as the code in Listing 15-1 demonstrates, you shift the second group of text lines to the right by the width of the image.
enlarged transparent pixel image is here
Figure 15-5
A one-pixel transparent image is useful for spacing.