► Note

If you use dynamic HTML (DHTML) to code your web pages, you can also have multiple layers within the foreground of a page. However, HTML can only have a single file in the background of a web page, so it's still important to distinguish between the foreground and background for that reason.

Background Elements

A background can be quite helpful in setting the mood or theme for the whole web page. Background can be as simple as solid colors or as detailed as a mosaic style pattern and everything in between.

HTML enables you to add a single image to be used as the "scenery" in the background of your web page. Several benefits exist to using an image in the background as opposed to the foreground:

• You can achieve a quick and easy layered look in your designs this way because an image in the foreground can actually be placed over the top of an image in the background.

• Background images begin at the top of the page and run all the way to each of the four sides by default. By contrast, elements in the foreground are subject to borders on the top and left, similar to those that occur when you print something.

When you use a background image, you need to remember a few other things:

• All background images tile. Tiling means background images repeat in the browser window as many times as needed to cover the entire width and height of the browser window.

• You can only include one image in the background if you use regular HTML. (You can further layer pages by using DHTML, but it is not supported by all browsers.) So, if you want to use two different patterns in your background, they need to be included in a single image file.

• Background images should be small in file size to avoid a long download. Take advantage of the fact that the browser repeats a background image, and cut your image down as much as possible.

Foreground Elements

Aside from the background image, all other aspects of a web page typically fall into the foreground category. This means each individual graphic and text element will be coded into the page using HTML or some other web coding technology.

When creating mockups in Photoshop

► QUICK TIP 'hat will be presented to a client for approval, every element of the final web page, whether When you design in Photoshop, it's best to keep it's an image or text element rendered by these different aspects of your page on their own the browser, is shown in the mockup page. layers (as discussed more in depth in Chapter 5). Take a look at Figure 4-1 to see what I mean.

For example, text links are underlined, as they will be in the browser, and are given an appropriate link color; any text itself is shown in a font face and size capable of being rendered by a web browser.

In addition, form elements are rendered as they might appear within a typical web browser. Note, form elements like the text boxes and button shown in Figure 4-1 are rendered differently in various browsers and platforms. For example, Netscape Navigator 4 on Windows renders a text box as 24 pixels in height, while the same text box shown in Netscape Navigator 4 on the Mac is only 16 pixels high.

0 0

Post a comment