7.3. Techniques with GraphicsNow that you've mastered the <img> tag, it's time to learn a few tricks of the trade. In the following sections, you'll tour three common techniques used by Web gurus everywhere to create more polished pages. 7.3.1. Graphical TextIn Chapter 6, you learned that using exotic fonts on Web pages can be risky, since you don't know for sure which typefaces are installed on your Web surfer's computer. Although there's no way to get around this problem when you've got large blocks of text, enterprising Web artistes commonly put the text for headings, buttons , and logos into picture files. That way, you get complete control of what your text looks like. Here's a high-level look at what you need to do:
Tip: Often, graphical pieces of text are turned into clickable buttons that can take you from page to another. You'll learn more about links in Chapter 8, and you'll find out how to make fancy graphical buttons in Chapter 15. 7.3.2. Backgrounds on Other ElementsYou don't need to apply a background to a whole page. Instead, you can bind a background to a single paragraph or, more usefully, a <div> tag. Usually, you'll want to add a border around this tag to separate it from the rest of your Web page. You might also need to change the color of the foreground text so it's legible (for example, white shows up better than black on dark backgrounds). Here's an example of a background image that can be used with any container element: .pie { background-image: url(/books/2/735/1/html/2/pie.jpg); margin-top: 20px; margin-bottom: 10px; margin-left: 70px; margin-right: 70px; padding: 10px; border-style: double; border-width: 3px; color: white; background-color: black; font-size: large; font-weight: bold; font-family: Verdana,sans-serif; } This style specifies a background image, sets the margins and borders, and chooses background and foreground colors to match. Here's a <div> tag that uses this style: <div class="pie"> <p>Hungry for some pie?</p> </div> Figure 7-17 shows the result. 7.3.3. Graphical Bullets in a ListIn Chapter 5, you looked at how you can use the <ul> tag to create a bulleted list. However, you were limited to a small set of predefined bullet styles. If you look around on the Web, you'll see more interesting examples that use tiny pictures to create custom bullets. You could add custom bullets by hand using the <img> tag. However, there's an easier option. You can use the list-style-image style property to set a bullet image. Here's an example that uses a picture named 3Dball.gif : ul { list-style-image: url(/books/2/735/1/html/2/3Dball.gif); }
Once you've created this style rule and placed it in your style sheet, it applies automatically to an ordinary bulleted list like this one: <ul> <li>Are hard to miss</li> <li>Help compensate for feelings of inadequacy</li> <li>Look so darned cool</li> <li>Remind people of boring PowerPoint presentations</li> </ul> Figure 7-18 shows the result.
|