davesite.com / webstation / web site design tutorial

Dave's Web Site Design Tutorial

Chapter 4 . . .
. . . Graphics, Backgrounds, and Colors

to Chapter 3

Graphics, along with all other elements of a page, should be well proportioned.A few animated graphics can help add to a page's general appearance, but too many will become distracting.

If you use graphics as link anchors, adding a border=0 attribute definition to the IMG tag will make the graphic's border invisible instead of colored as a normal link would be.

- - - - -


border=0 IMG TAG w/LINK:
<a href="http://www.neonlollipops.com/design/"><img src="tinyd.jpg" width=50 height=50 border=0></a>

IMG TAG w/LINK (no border=0):
<a href="http://www.neonlollipops.com/design/"><img src="tinyd.jpg" width=50 height=50></a>

- - - - -

Graphics that are too large (pretty much anything over 100k) will cause a significant delay in the load time of a page. Personally, I believe under normal circumstances any graphics over 50k should be reduced or otherwise not loaded directly into a page. If you have a large graphic, you may opt to link to it instead of loading it onto the page.

When designing your graphics, try saving it in both gif and jpg formats. Then look to see which has the best quality for the file size. GIF files can be compressed either as interlaced or non-interlaced. Both will take the same time to load, but the interlaced version looks as though it loads faster because it will "res in", that is, it will progressively fill in lines as it downloads, making it less boring to watch than a top to bottom load.

In addition to the SRC attribute in the IMG tag, three others will play an important role in giving your page a professional touch. The first two are WIDTH and HEIGHT attributes, which you should use to declare the graphic's dimensions. This will allow the browser to allocate the proper space on the page for the graphic to load in to, allowing text below the graphics to be rendered while the graphic is still downloading. The third important attribute is the ALT attribute. You should use it to define a text description of the graphic, so those who choose not to load graphics have some idea of what would be there. If you think a certain graphic shouldn't have a description, just place ALT="" in the IMG tag, so you know that you have already taken it into consideration.

You probably already know that you can use the color=#XXXXXX attribute (where #XXXXXX is the hexadecimal code for the color of your choice) in the FONT tag to change a text's color. You may also wish to use the hexadecimal codes to change the color of your page background, your page's general text, and your links.

- - - - -


BACKGROUND is the background image, BGCOLOR is the background color, LINK is the link color, TEXT is the text color, VLINK is the color of links already visited, and ALINK is the color a link turns the exact second it is clicked.

<body background="whitecow.gif" bgcolor="#FFFFFF" link="#FF0000" text="#000000" vlink="#00FF00" alink="0000FF">

The above BODY tag would set the background graphic to the file whitecow.gif, the background color (for those not loading background graphics) would be white, the links would be red, the text would be black, those links already visited would be green, and the links would turn blue as they are clicked.

- - - - -

It is wise to set the BGCOLOR attribute of your BODY tag to the same color as your background graphic if you have one, otherwise your page's text may be hard to read on the default background color if the background is still loading or the viewer isn't loading graphics while they surf. White text on a white background would cause a lot of confusion!

[ TOP ]

to Chapter 5

Quick Index

Main Page

Glossary of Terms used in this Guide

Chapter 1
Getting Started

Chapter 2
General Design Considerations

Chapter 3
Layout Considerations

Chapter 4
Graphics, Backgrounds, and Colors

Chapter 5
Page Division, Legal Considerations, and Moving Your Site

Chapter 6
Using Tables for Layout

Chapter 7
Major Turnoffs in Web Design

Related Site Links

Copyright © 1997 Dave Kristula. All rights reserved.
Dave's Web Site Design Tutorial - Chapter 4: Graphics, Backgrounds, and Colors