davesite.com / webstation / web site design tutorial
 | |
| Dave's Web Site Design Tutorial Chapter 4 . . . . . . Graphics, Backgrounds, and Colors 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. - - - - - 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. - - - - - 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!
| Quick Index Preface Chapter 1 Chapter 2 Chapter 3 Chapter 4 Chapter 5 Chapter 6 Chapter 7 Other
|
|
Copyright © 1997 Dave Kristula. All rights reserved. http://www.davesite.com/webstation/web-site-design/chap4.shtml Dave's Web Site Design Tutorial - Chapter 4: Graphics, Backgrounds, and Colors | |
