What we have here is a happy coincidence. The rectangle that we drew in DRAW is wide enough to cover the entire width of the browser window at its current size. But the browser window is not very wide—less than 400 pixels. Figure 21.3 shows what happens if we widen the browser window. The original graphic was not created with enough width, so the image repeats on the right side.

A mistake like this is quite insidious. Not only is your Web page representing you in a potentially embarrassing fashion, but you might never be aware of it because your own display looks fine. It is critically important that you understand how backgrounds are created and how they behave when placed on a Web site.

The simple definition of a tiled graphic is an image that repeats. It isn’t stretched or distorted to fill the space; it simply repeats itself as often as is needed in order to fill the space. Therefore, the ending of the graphic needs to flow smoothly into the beginning, otherwise there will be a visible seam.

FIGURE 21.3  If your browser window is wider than the background graphic, the graphic repeats itself.

The tiling effect requires that you scrutinize the pattern you create for a background. Figure 21.4 illustrates the risk again: this texture pattern might look pretty cool in DRAW, but it looks horrible as the background to a Web page.

If you have set up your laboratory, you can explore this quite easily. As you create different graphic effects in DRAW, continue to export them as bg.jpg. Then switch to your browser and refresh the display (F5 in Internet Explorer, Ctrl+R in Navigator).

You might be tempted to circumvent the whole tiling issue by simply creating your graphics large enough so that they won’t need to tile. Resist this temptation with all of your might, for two reasons: (1) You would have to create very large graphics, thereby saddling your visitors with intolerable wait times, just to see your background; and (2) How large is large? To accommodate all viewers, you would have to create the graphic at 1600 × 1280 pixels, which further exacerbates reason No. 1.

FIGURE 21.4  It’s not enough that a graphic look good in DRAW to work as a Web page background. It must be a good candidate for tiling, which this texture pattern is not.

No, better to focus intently on graphics that tile properly, and fortunately there are many sources for creating and acquiring them, including your own creative vision and your new Web laboratory within DRAW.

Figure 21.5 shows a very simple and effective tiled background for a musically oriented Web page. The graphic in DRAW uses a symbol from the Musical typeface and the offset between the two symbols makes for nice visual variety. The symbols are also just barely darker than the background, ensuring a soft, even background that maintains a high readability quotient. At the very least, this background contributes to the theme of the page, does not inhibit readability, and achieves absence of ugliness, the latter being the minimum, yet oh-so-important, requirement for an effective Web page.

Note the size of the graphic in DRAW—a scant 150 × 165 pixels. The resultant GIF file was less than 2KB.

FIGURE 21.5  This graphic has a pattern that will tile nicely in a Web browser. If the screen were deeper or wider, the musical symbols would simply repeat in either direction.

And just so you don’t get soured on the prospect of using DRAW’s popular Texture Fill engine to produce Web backgrounds, Figure 21.6 shows one that works nicely. The difference between this one and the one in Figure 21.4 is all in the seams: the pattern in Figure 21.4 does not repeat effectively because the image is too defined; it has a distinct seam. But the one in Figure 21.6, the Fiber Embossed texture, has no visible seams. Study it in DRAW and in the browser and you can see that the pattern repeats over and over again, but without a visible seam. That is the litmus test for any background graphic. Again, create a few textures and save them one after the other as bg.jpg, each time switching to your browser to have a look. Experimenting with Web designs is so immediate and interactive, it is almost intoxicating.

Creating Borders

One of the more popular forms of backgrounds is the vertical border, a stripe or pattern that runs down the left side of the page. The rest of the page is left white or set to some other background color and the bulk of the text and graphics is placed there. The border serves as a simple graphic element, or can be used to place navigation links or other special elements.

FIGURE 21.6  From Corel’s Texture library, Fiber Embossed is one of several textures that tile seamlessly, making it a good candidate for a Web page background.

Quick, how come you see lots of left-hand borders on Web pages but very few right-hand ones? Give up? Because it’s impossible to know where the right-hand border will be. All left borders will begin at pixel No. 1, but the right border could be at 400 pixels, 640, 800, 1000, 1280, or really any number at all. There is no telling where the right edge of the screen will be, unless you make clever use of a table with relative sizes assigned to the columns.

The second question is this: how can you prevent the left border from repeating itself at some point across the screen? Remember, all backgrounds tile, so what’s to stop the border from showing up again and again? The answer is you. You stop the border from reappearing by creating a background that actually is much wider than it appears. Follow these steps:

1.  Create a small square approximately 100 pixels wide and about 50 pixels high. (You can approximate both, or enter precise values from the property bar.)

2.  Fill the rectangle with any color, let’s say red, and remove the outline.

You have now defined the border stripe that will run down the left side of the screen. To prevent it from tiling, you need to fill all of the space to its right. This is a job for flop-and-dupe:

3.  With the rectangle still selected, take the left-middle handle and drag it across the rectangle to the right side.

4.  Before you release mouse Button 1, click Button 2 to leave behind the original.

5.  Color it yellow or cyan or some other uniform color other than red.