Section 7.3. Techniques with Graphics


7.3. Techniques with Graphics

Now 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 Text

In 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:

  1. Fire up your favorite image editor or drawing program .

    Figure 7-16 shows an example with Adobe Illustrator.

    Figure 7-16. Left: The final touches are being made to a single-word heading in Adobe Illustrator.
    Right: The final picture as it appears in a Web page. This process of creating graphical text can be tedious , especially if you have a lot of headings to generate. But it's the only reliable way to bring funky fonts to the Web.


  2. Fill in a background color that matches your Web page .

    In some programs, the easiest way to fill a section with color is to draw a shape (like a rectangle), and then give it the proper fill color.

  3. Choose your font, and type the text over the background color .

  4. Cut your image down to size .

    Ideally, you want to make the image as small as you possibly can without clipping off any of the text.

  5. Save your picture .

    GIF is the best format choice, but you might need PNG if you have more than 256 colors. Don't use JPEG, or your text will have blurred edges.


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 Elements

You 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 List

In 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); } 

Figure 7-17. Top: Using background images in small boxes is surprisingly slick.
Bottom: A particularly neat feature is the way the picture content grows when you resize the page, thanks to tiling.


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.

Figure 7-18. Graphical bullets range from simple arrows and check boxes to extravagant three-dimensional soccer balls, like those shown here.




Creating Web Sites. The Missing Manual
Creating Web Sites: The Missing Manual
ISBN: B0057DA53M
EAN: N/A
Year: 2003
Pages: 135

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net