Chapter14
Chapter 14Page Design and LayoutYou'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.
Web Page DesignSo far, this guide 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."
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. Image Spacing and BordersFigures 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:
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.
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. Figure 14.3. Thanks to generous spacing and a carefully premeditated layout, the HTML in Figure 14.1 looks great as a Web page. The Old Background Banner TrickOne 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.
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.
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.7. The HTML from Figure 14.5 and the banner from Figure 14.6, as they appear in Netscape Navigator. Customizing Horizontal RulesThere'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.
SummaryThis 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.
Q&A
Quiz Questions
Answers
Activities
|