Sams Teach Yourself HTML 4 in 24 Hours

By Dick Oliver

• Table of Contents
  • Copyright
  • About the Author
  • Acknowledgments
  • Tell Us What You Think!
  • Put Your HTML Page Online Today
  • I. Your First Web Page
  • Hour 1. Understanding HTML and XML
  • Hour 2. Create a Web Page Right Now
  • Hour 3. Linking to Other Web Pages
  • Hour 4. Publishing Your HTML Pages
  • II. Web Page Text
  • Hour 5. Text Alignment and Lists
  • Hour 6. Text Formatting and Font Control
  • Hour 7. Email Links and Links Within a Page
  • Hour 8. Creating HTML Forms
  • III. Web Page Graphics
  • Hour 9. Creating Your Own Web Page Graphics
  • Hour 10. Putting Graphics on a Web Page
  • Hour 11. Custom Backgrounds and Colors
    • Background and Text Colors
    • Creating Custom Colors
    • Background Image Tiles
    • Transparent Images
    • Creating Your Own Backgrounds
    • Summary
    • Q&A
    • Workshop
  • Hour 12. Creating Animated Graphics
  • IV. Web Page Design
  • Hour 13. Page Design and Layout
  • Hour 14. Graphical Links and Imagemaps
  • Hour 15. Advanced Layout with Tables
  • Hour 16. Using Style Sheets
  • V. Dynamic Web Pages
  • Hour 17. Embedding Multimedia in Web Pages
  • Hour 18. Interactive Pages with Applets and ActiveX
  • Hour 19. Web Page Scripting for Non-Programmers
  • Hour 20. Setting Pages in Motion with Dynamic HTML
  • VI. Building a Web Site
  • Hour 21. Multipage Layout with Frames
  • Hour 22. Organizing and Managing a Web Site
  • Hour 23. Helping People Find Your Web Pages
  • Hour 24. Planning for the Future of HTML
  • VII. Appendixes
  • A. Readers' Most Frequently Asked Questions
  • B. HTML Learning Resources on the Internet
  • C. Complete HTML 4 Quick Reference
  • D. HTML Character Entities

Transparent Images

You will see how to make your own background tiles later in this hour, but first a word about how to let the background show through parts of your foreground graphics.

Web page images are always rectangular. However, the astute observer of Figure 11.4 (that's you) will notice that the background tiles show through portions of the images, and therefore the title and picture don't look rectangular at all. You'll often want to use partially transparent images to make graphics look good over any background color or background image tile.

Figure 11.5 shows the images from Figure 11.4, as they looked in Paint Shop Pro when I created them. (Figure 11.5 also shows the single tile used for the background in Figure 11.4.)

Figure 11.5 When I saved two of these images in Paint Shop Pro, I made the background color transparent. (The third image, at the top left, is the background tile.)

To make part of an image transparent, the image must have 256 or fewer colors, and you must save it in the GIF file format. (JPEG images can't be made transparent.) Most graphics programs that support the GIF format allow you to specify one color to be transparent.

Todo To Do

Follow these steps to save a transparent GIF in Paint Shop Pro:

1. Select Colors, Decrease Color Depth, 256 Colors (8-bit) or Colors, Decrease Color Depth, 16 Colors (4-bit), and check the Optimized Octree and Nearest Color boxes. (This is recommended in Hour 9, "Creating Your Own Web Page Graphics." )
2. Choose the eyedropper tool and right-click the color you want to make transparent.
3. Select Colors, View Palette Transparency. If any part of the image is already set to be transparent, you will see a gray checkered pattern in that part now.
4. Select Colors, Set Palette Transparency.
5. You should see the dialog box shown in Figure 11.6. Choose Set the Transparency Value to the Current Background Color, and then click OK.
   

   Figure 11.6 This dialog box appears when you select Colors, Set Palette Transparency. You will usually want the middle option.

6. The transparent parts of the image turn to a gray checkerboard pattern. (If you hadn't already selected View Palette Transparency in step 3, you would need to click the Proof button shown in Figure 11.6 to see the transparency effect.)
7. You can use any of the painting tools to touch up parts of the image where there is too little or too much of the transparent background color.
8. When everything looks right, select File, Save As (or File, Save Copy As) and choose CompuServe Graphics Interchange (*.gif) as the file type.

If you select Colors, View Palette Transparency (or when you click the Proof button as shown in Figure 11.6), Paint Shop Pro shows transparent regions of an image with a gray checkerboard pattern. You can change the grid size and colors used under File, Preferences, General Program Preferences, Transparency.

Share This