How Long Is Too Long?

We are not nearly as concerned with the length of a Web page. In fact, designers who chop up a long article by turning it into multiple pages with hyperlinks go through a lot of extra work and anger those readers who don’t want to do all of that clicking, or more importantly, who wish to print the article.

That’s why we didn’t specify a depth of the page in DRAW. If you set the page too shallow, the page border gets in the way, and if you set it too deep, pressing Shift+F4 to see the entire page becomes kind of useless. A square page in the vicinity of 600 pixels has been a comfortable workspace for us.

FIGURE 21.1  Keeping the width of your Web pages down makes your site friendlier and more accommodating.

The guideline at 330 pixels represents the viewable depth of a full-screen browser running at standard resolution. The menus, toolbars, command line, and scroll bars consume a hearty 110 pixels. So if you are designing a page on which it is crucial that certain elements always appear (the cyber-equivalent of “front page, above the fold”), this guideline shows you where the boundary is.

But Remember...

It’s important to keep track of your objective. In this laboratory, you will probably not create complete pages with flowing text. It is unlikely that you will place elements all over the page and send the whole thing out as a Web page. If you do, you’ll want to read the next chapter carefully, but most of you will be creating individual graphics or groups of graphics.

This is your drafting board, your electronic sketch pad. The height and width parameters are there for visual aids. And we won’t complain if you set your page to a different size. However, if you change the resolution to a setting other than the one at which you export your graphics, we will send you SPAM mail about bogus viruses, pyramid schemes, and long distance scams every single day until you switch it back.

Building a Better Background

Do you watch the evening news? How about the Tonight Show? The Sunday morning political talk shows? Why do you prefer to watch the news on Channel 4 instead of Channel 7? Of course, you’d like to answer that you think the programming, commentary, reporting, and overall coverage is superior. However, many viewers respond to talk television on a different level, a level of which they may not even be consciously aware.

Many choose a news program or a talk show because of the studio design, and if you doubt this for a second, consider the untold millions of dollars that networks and local television stations pay to determine the most effective backdrop, color scheme, furniture arrangement...right down to the pattern of the ties worn by the sports reporter.

Receiving written and graphical information across the Internet is still a new experience, and as such, the entire look and feel of a Web site contributes greatly to the experience. On most Web sites, the background paints first on screen—the ubiquitous first impression in cyberspace.

Using Graphics As Backgrounds

Just about any JPEG or GIF file can be used as a background for a Web page. The only mechanical difference between using a graphic as a background instead of in the foreground is a bit of simple HTML coding. The important thing to remember is that when you assign a graphic to the background, it automatically tiles to fill the entire screen. Whatever pattern you create as a background will be repeated from the top-left corner of the browser screen down to the bottom-right.

You can use this to great advantage in your continuing quest to keep your graphics compact. If a pattern is going to repeat all the way down and across the page, you can keep your original image small. You can also use this to your peril if you do not consider the range of monitor types that might be used to view your page. Here are some examples of both. To follow along, you’ll want to do four things:

1.  Open DRAW.

2.  Open your Web browser of choice.

3.  Create a simple HTML file with Notepad or any text editor, containing the following lines of code:

<html>
<body background=“bg.jpg”>
<h1>Hello World

4.  Save it as Background.htm, or some such descriptive name, in any directory you want. Remember its location though, because you will be creating graphics in DRAW and saving them in the same place.

All about Tiling

Your screen at work might be a 17-inch monitor with an 800 × 600 resolution. At home, you might visit the Internet on a 640 × 480 notebook. Your colleagues might surf at 1024 × 768, and the untold thousands who visit your page might do so at any one of these resolutions. How do you create backgrounds to accommodate all of them? Let’s have a look.

Figure 21.2 is a composite image of DRAW and Internet Explorer running side by side. On the top-left, DRAW shows a simple rectangle with a fountain fill, ranging from yellow on the left to blue on the right. It has been exported as bg.jpg and is displaying as the background in Internet Explorer.

FIGURE 21.2  The rectangle in DRAW (left) has been exported and is producing the background for this Web page (right).