• Hour 14
  • Web Page Design
  • Image Spacing and Borders
    • Figure 14.1.
    • Figure 14.2.
    • Figure 14.3.
  • The Old Background Banner Trick
    • Figure 14.4.
    • Figure 14.5.
    • Figure 14.6.
    • Figure 14.7.
  • Customizing Horizontal Rules
  • Summary
  • Q&A
  • Quiz
    • Questions
    • Answers
  • Activities

Hour 14

Page Design and Layout

You've learned in earlier chapters how to create Web pages with text and images on them. This chapter goes a step further by showing you some HTML tricks to control the spaces between your text and images. These tricks are essential for making your pages attractive and easy to read. This chapter also provides practical advice to help you design attractive and highly readable pages, even if you're not a professional graphics designer.

To Do: The techniques covered in this chapter are intended to help you make pages you've already created better and faster. So select some of the most important or impressive pages that you've made to date, and try to see whether you can make them look even better.

• Choose pages with some graphics on them, because almost all the tricks in this chapter involve images.

• If you have a page that you think might especially benefit from a creative layout or unique background, start with that one.

• You may have some text and images that you haven't gotten around to putting on a Web page yet. If so, this chapter can help those new pages become your best yet.

• Copy the pages you select into their own directory folder, and play with new design possibilities for them as you read through this chapter.

Web Page Design

So far, this book has focused mostly on the exact mechanics of Web page creation. But before getting into the nitty-gritty of spacing and layout tricks, you should take a moment now to step back and think about the overall visual design of your Web pages. Now that you know basic HTML, you need to learn how to apply it wisely.

Every aspect of a Web page should reflect the goals that led you to create the page in the first place. Not only should the text and graphics themselves communicate your message, but the way you fit those elements together can itself make an enormous impact on readers' perceptions of you or your company.

Table 14.1 is a checklist to help you think about the key design elements of a Web page. You should aim for most of your pages to meet the recommendations in this table, though some individual pages will undoubtedly need to "break the rules."

Table 14.1. Key elements of Web page design.

Things to consider	Suggested guidelines
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 640x480 resolution)
File Size	No more than 50KB per page, including images (animated GIFs can be up to 100KB per page)
Speed	First screen of text and key images appear in under 5 seconds over a 14.4Kbps modem
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 75 percent of page
Contrast	No color in background should be close to text color
Tone and Style	All text and graphics should be consistent in mood and theme
Overall Impact	Page as a whole should appear balanced and attractive

Most of the tips in Table 14.1 are common to any page design, on paper or electronic. But some of them are particularly tricky to control on Web pages.

The next section of this chapter presents some HTML commands for handling the blank space and overall visual impact of your pages. Then this chapter wraps up with some techniques for meeting the speed requirements of today's Web, even when you use relatively large images.

Figures 14.1 through 14.3 show the HTML text, images, and final appearance of a well-designed Web page. It meets all the criteria outlined in Table 14.1 (with the exception of some tongue-in-cheek inconsistency in the tone of the text).

Notice the generous amount of space between images and paragraphs in Figure 14.3. Web browsers tend to crowd everything together, but you can easily add space three different ways:

• Use small, totally transparent images to leave room between other things. The spacer.gif file (shown in Figure 14.2 and referred to in Figure 14.1) creates 20 pixels of blank space between each of the main parts of this page.

• When you wrap text around an image using <IMG ALIGN="right"> or <IMG ALIGN="left">, you can skip down past the bottom of that image at any time with <BR CLEAR="right"> or <BR CLEAR="left">. If you have images on both the right and left, you can type <BR CLEAR="all"> to go past both of them.

• You can add extra space on the left and right sides of any image with <IMG HSPACE>. To add space on the top and bottom sides, use <IMG VSPACE>. For example, each image in Figure 14.3 has 20 pixels of blank space to the left and right of it, and 5 pixels above and below it. This is because each <IMG> tag in Figure 14.1 includes the attributes HSPACE=20 VSPACE=5.

The <IMG> tags in Figure 14.1 also include a BORDER=10 attribute, which enlarges the rectangular border around the images. The border is normally 1 pixel thick for any image inside an <A> link, but BORDER=10 makes it 10 pixels thick.

The most popular use of the BORDER attribute is to make the image border disappear completely by typing BORDER=0. This is especially handy with transparent images, which often look funny with a rectangle around them.

The color of the border will be the same as the color of any text links. In this page, images that link to pages someone hasn't visited yet will have maroon borders. Images that link to a recently visited page will have green borders.

---

Just A Minute: If you include a BORDER attribute in an <IMG> that isn't between <A> and </A> link tags, Netscape Navigator will draw the border using the regular body text color. However, Microsoft Internet Explorer will never draw a border around an image that isn't a link, even if you include a <BORDER> tag. Because of this difference between the two major Web browsers, you should only use <BORDER> with link images.

---

Figure 14.1. This page uses several techniques for adding blank space between images and text.

Figure 14.2. The six image files referred to in Figure 14.1.

(Note that Paint Shop Pro uses cross-hatching to indicate that a window is bigger than the image it contains. For example, spacer.gif is actually a very small solid white square.)

Figure 14.3. Thanks to generous spacing and a carefully premeditated layout, the HTML in Figure 14.1 looks great as a Web page.

One of the most prominent tricks employed in Figure 14.3 is the use of a 1,000-pixel high background image (named wainscot.gif). Because the entire page is unlikely to turn out more than 1,000 pixels high, the background only appears to repeat in the horizontal direction. And since the bottom part of the image is all the same color, it looks like the background is only a banner at the top of the page.

Unlike a foreground image used as a banner, however, this wainscotting will automatically size itself to go from "wall to wall" of any sized window. It is also a smaller image file, because only one repetition of the pattern needs to be stored.

---

Just A Minute: "Hang on," you say. "143x1000 is 143,000 pixels! Won't that make an enormous image file and take forever to download?" The answer is no; large areas of uniform color take up virtually no space at all when compressed in the GIF file format. (Wainscot.gif is only a 3KB file.)

---

If you use this trick to make background banners on your own Web pages, you should prob-ably make them at least 2,000 pixels high. As Figure 14.4 demonstrates, the page can actually become longer than 1,000 pixels when someone uses Microsoft Internet Explorer's largest font size setting. Note that the wainscotting shows up again at the very bottom of the page.

By using a very wide background that repeats vertically, you can easily make a repeating banner that runs down the left side of a page, too. If you don't want text to obscure the banner, put a very large, totally transparent image at the beginning of the HTML page with <IMG ALIGN="left">.

Figures 14.5 through 14.7 show the HTML, graphics, and resulting Web pages to implement a left-side banner.

Note that I made the other graphics all right-justified, both for aesthetic reasons and so that I could avoid using <BR CLEAR="left">, which would skip all the way to the bottom of the left-justified banner graphic.

---

Time Saver: If you use a left-aligned transparent banner, be sure to add enough blank space around the actual foreground image to fill the area on the page you want to cover. The "Museé des Decorations" graphic in Figures 14.6 and 14.7, for example, is 150x1000 pixels. Because almost nobody views Web pages in a window larger than 1600x1200 pixels, vertically tiled background banners can safely be 2,000 pixels wide.

---

Figure 14.4. The 1,000-pixel high background begins to repeat when extremely large fonts are used in a small window.

Figure 14.5. With a few strategic changes, you could put the top banner in Figure 14.1 to the left side.

Figure 14.6. The rotated graphics for a left-side banner.

(Notice how I changed the direction of the light source and shadowing, too.)

Figure 14.7. The HTML from Figure 14.5 and the banner from Figure 14.6, as they appear in Netscape Navigator.

There's one more page layout trick used in the "Museé des Decorations" page: a customized horizontal rule. If you look carefully, you'll see that Netscape Navigator renders it differently in Figure 14.3 than Microsoft Internet Explorer does in Figure 14.4.

The following <HR> tag uses some special attributes to control exactly how the horizontal rule looks:

<HR SIZE=10 WIDTH=70% COLOR="green">

The vertical size of the rule is set with the SIZE attribute. The number value in this attribute should be equal to the height in pixels that you want the line to be. <HR SIZE=1> will be a single-pixel "hairline" rule, while <HR SIZE=300> will be a big, fat rectangle across the page.

Normally, horizontal rules span the width of the window. You can override this, however, with the WIDTH attribute, which allows you to specify the size of the line either as a relative percentage or as a precise pixel value. <HR WIDTH=250> draws a 250-pixel-wide line, whereas <HR WIDTH=50%> draws a line halfway across the window, no matter what size the window happens to be.

The SIZE and WIDTH attributes together turn the <HR> attribute into a useful tool for drawing any size rectangle you choose.

It's the COLOR attribute that causes some disagreement between Netscape Navigator and Microsoft Internet Explorer. Navigator ignores it completely, and renders the rule as a transparent three-dimensional indentation. Internet Explorer, however, obediently colors the rule solid green. Feel free to specify a COLOR for any rule you draw, but keep in mind that only Internet Explorer users will see it.

---

Time Saver: Horizontal rules are normally centered, but you can use the ALIGN="left" or ALIGN="right" in the <HR> tag, too. Horizontal rules are also affected by <DIV ALIGN="right"> and <DIV ALIGN="left">.

---

---

Coffee Break: The spacing and layout tricks in this chapter provide that certain extra something to the ever-expanding 24-Hour HTML Café:

http://www.mcp.com/sams/books/235-8/cafe14.htm

I've also added some links from that page to especially well-designed sites to inspire your own efforts.

---

This chapter provided some guidelines for designing attractive, highly readable Web pages. It also explained how to create and control blank space on your pages, put borders around images, and draw customized rectangles and rules. You saw how to use backgrounds to create banners across the top or left edge of a page.

Table 14.2 summarizes the tags and attributes discussed in this chapter.

Table 14.2. HTML tags and attributes covered in Chapter 14.

Tag	Attribute	Function
<IMG>		Inserts an inline image into the document.
	SRC="..."	The address of the image.
	ALIGN="..."	Determines the alignment of the given image (see Chapter 9, "Putting Images on a Web Page").
	VSPACE="..."	The space between the image and the text above or below it.
	HSPACE="..."	The space between the image and the text to its left or right.
	WIDTH="..."	The width, in pixels, of the image. If WIDTH is not the actual width, the image is scaled to fit.
	HEIGHT="..."	The height, in pixels, of the image. If HEIGHT is not the actual height, the image is scaled to fit.
	BORDER="..."0	Draws a border of the specified value in pixels to be drawn around the image. In case the images are also links, BORDER changes the size of the default link border.
<BR>		A line break.
	CLEAR="..."	Causes the text to stop flowing around any images. Possible values are RIGHT, LEFT, ALL.
<HR>		A horizontal rule line.
	SIZE="..."	The thickness of the rule, in pixels.
	WIDTH="..."	The width of the rule, in pixels or as a percentage of the document width.
	ALIGN="..."	How the rule line will be aligned on the page. Possible values are LEFT, RIGHT, and CENTER.
	COLOR="..."	Color of the horizontal rule (Microsoft Internet Explorer only).

Q I'd like to know exactly how wide the margins of a page are so I can line up my background and foreground images the way I want.

A Unfortunately, different browsers (and even the same browser on different types of computers) leave different amounts of space along the top and left side of a page, so you can't precisely line up foreground graphics with background images. Generally, you can expect the top and left margins to be 8 to 12 pixels.

Microsoft Internet Explorer actually allows you to specify the exact margin size with MARGINHEIGHT and MARGINWIDTH in the <BODY> tag. Netscape has promised to provide the ability to control margins and image placement more precisely in Navigator version 4.0.

Q I've seen pages on the Web with multiple columns of text, wide margins, and other types of nice layouts you didn't discuss. How were those pages made?

A Probably with the HTML table tags, which are discussed in Chapter 16, "Advanced Layout with Tables."

1. How would you wrap text around the right side of an image, leaving 40 pixels of space between the image and the text?

2. How could you insert exactly 80 pixels of blank space between two paragraphs of text?

3. Write the HTML to draw a 20- by 20-pixel square in the center of a page, shaded as if it were slightly indented into the background but hollow in the middle.

4. If you have a circular button that links to another page, how do you prevent a rectangle from appearing around it?

1. <IMG SRC="myimage.gif" HSPACE=40 VSPACE=40 ALIGN="left">Text goes here.

2. Create a small image that is all one color, and save it as nothing.gif with that color transparent. Then put the following tag between the two paragraphs of text:
<IMG SRC="nothing.gif" WIDTH=1 HEIGHT=80>

3. <HR SIZE=20 WIDTH=20>

4. Use the BORDER=0 attribute, like this:
<A HREF="another_page.htm"><IMG SRC="circle.gif" BORDER=0></A>

• Try creating a page with the wildest layout you can manage with the HTML tags you've learned so far. If you're resourceful, you should be able to create a staggered diagonal line of images, or place short sentences of text almost anywhere on the page.

• Make a very large background--so big that people will see only one "tile" and you don't have to worry about it being seamless. Most Web browsers will display all foreground content (in front of the BGCOLOR you specify in the <BODY> tag) while the background image loads. So go ahead and play around with the creative possibilities that large backdrops open up.