This chapter hour provides some guidelines for designing attractive, highly readable Web pages. It also explains how to create and control blank space on your pages, as well as how to put borders around images. You see how to use backgrounds to create banners across the top or left edge of a page, and how to make sure people always have text to look at while waiting for the images on your page.
(View HTML tags covered in Hour 12.)
The Varieties of Proboscis(Figures 12.1 - 12.3)
This page uses three techniques for adding blank space between images and text: an invisible (totally transparent) spacer.gif image, the <BR CLEAR="left"> tag, which skips down past the edge of an ALIGN="left" image, and the HSPACE and VSPACE attributes of the <IMG> tag, which add horizontal and vertical space around the edges of an image. The BORDER attribute of the <IMG> tag is also used to draw borders of a specified thickness around the images.
The Varieties of Proboscis II(Figures 12.4 - 12.6)
By using a very tall or wide background tile, you can make a repeating banner that runs across the top or down the left side of a page. To avoid obscuring a banner that runs down the left, put a very long, totally transparent image at the beginning of the HTML page with <IMG ALIGN="left"> (or use a table; see Hour 14).
Not sure you get how this banner trick works? Take a look at the background tile for this example, and the background of the example above.
Almost every example page in this site uses the techniques discussed in this hour to control the spacing and layout of graphics and text on a page. Many of the pages (including the one you're reading now) also use the "old banner trick" to provide a creative background at the top or side of the page while leaving the rest blank for text and foreground graphics. Keep your designer's eye open to the layout of every Web page you see. Whenever you see an arrangement that looks good, use View | Source to see how it was done. Here's a reminder of some things to pay attention to:
| Things to consider | Suggested guidelines for most pages |
|---|---|
| Text Content | Between 100 and 500 words per page |
| Text Breaks | A headline, rule, or image every 40 to 100 words (except in long articles or stories) |
| Page Length | Two to four screens at 640[ts]480 resolution) |
| File Size | No more than 50KB per page, including images (animated GIFs can be up to 100KB per page) |
| Speed | Some text and key images appear in under 3 seconds |
| Colors | Two to four thematic colors dominant |
| Fonts | No more than three fonts (in graphics and text) |
| Blank Space | Background should show on at least 50% of page |
| Contrast | No color in background should be close to text color |
| Tone and Style | All text and graphics consistent in mood and theme |
| Overall Impact | Page as a whole appears balanced and attractive |
"You can make sure that everything on your page appears as quickly as possible and in the right places by explicitly stating the width and height of each image. That way, a Web browser can leave the right amount of space for that image as it lays out the page and come back to get the actual image file later. For each image on your page, use Paint Shop Pro or another graphics program to find out the exact width and height in pixels. (In Paint Shop Pro, this information appears at the bottom right-hand corner of the main window when you move the mouse over any part of an image.) Then include those dimensions in the <IMG> tag like this:<IMG SRC="myimage.gif" WIDTH=200 HEIGHT=100>"
