Tutorial 3: Designing a Web Page

Working with Fonts, Colors, and Graphics

Additional Topics

• Graphics Packages
• Dithering and the Safety Palette
• Image Maps
• Using Transparent GIFs
• Another Use of the <alt> Attribute

Graphics Packages

When you present material on different image types and their properties, you may want to supplement this material with examples from graphic software available on the Web. You can use one of the successful graphics packages like Adobe Photoshop™ or CorelDraw™, or you can download one of the popular shareware programs. Remember though that shareware is not the same as freeware. You can evaluate shareware, but you are still expected to pay for it, if you intend to keep it.

Here are some popular shareware programs available on the Web.

Windows

• Paint Shop Pro
• LView Pro
• GIF Wizard

Macintosh

• ShareDraw
• Painting

Here are some tasks you may assign your students (using whatever graphics package you decide upon):

• Create a GIF with a transparent background.
• Create a GIF in both interlaced and noninterlaced format.
• Convert a GIF image to JPG format. Compare the size of the files.
• Save a JPG file under different compression options. How do the size and the appearance of the images compare?

Dithering and the Safety Palette

When you create images in their graphical packages, you may be surprised by the appearance of that image in your Web browser. Unfortunately, Web browsers will not always render the graphic image with the same palette that the graphic software uses. Also, if the image is created with a true-color palette, but rendered under a 256 color palette the image will be changed due to dithering.

One way around this problem is to use the “safety palette,” a palette of 216 colors which is guaranteed to be displayed accurately on all browsers. You can get more information about the safety palette, dithering and other issues at the following sites:

• DMS Guide to Color for the Web
• Victor Engel's No Dithering Netscape Color Palette
• Visibone's Web Designer Color References
• Creating Graphics for the Web
• Yahoo's Page on Color Information for Web Page Design and Layout

Image Maps

This tutorial does not assume that the user has any other software besides a text editor and a Web browser. For this reason, the student is given the coordinates of each hot spot in the image map. You may wish to supplement the material in these tutorial with image map software available on the Web.

Here are some popular shareware programs available on the Web.

Windows

• MapEdit
• LiveImage (or try Google's Neovision's site if above link is down)
• Hotspots

Macintosh

• MapEdit

Using Transparent GIFs

You can use transparent GIFs as a way of controlling the layout of text and images on your Web page. Here's how you do it.

1. Go to your graphics software package and create an image containing a single color.
2. Resize the image to 1 pixel wide by 1 pixel high.
3. Save the image as a GIF file with the single color you designated in step 1 as a transparent color.

Once you've created the GIF file, insert it in your Web page. You can use the height and width attributes to control the size of the graphic on your page. Since it's transparent, the image will not appear on your page, and since it's only 1x1 pixels in size, it will not be a large file.

For example, this paragraph contains a transparent GIF, spacer.gif, that is aligned with the left edge of the page. The width attribute of this graphic has been set to 100 pixels, and the height attribute has been set to 120 pixels. By using the spacer.gif file, we've managed to create a column of text that is 100 pixels from the left page margin.

Here is another paragraph using the spacer.gif file, only in this case we've added a border to the image so you can see it on the Web page.

Another Use of the <alt> Attribute

The alt attribute was designed to support text-based browsers that cannot display inline graphics. However, Internet Explorer 4.0 and Netscape 4.0, will also display the value of the alt attribute as popup text whenever the user hovers the mouse over the inline graphic. You can use this feature to insert additional information or comments about your graphics.

Note that the latest version 6 and 7 browsers no longer will pop up the alt attribute text as stated here except when images aren't there. The ALT attribute is critical, however, for accessibility, and is required to use for images by W3C, too.