Home

Graphics

Week 1

Week 2

Week 3

Week 4

Week 5

Week 6

Week 7

Week 8
8-Week Shape Up Course
Week 4: Time for a Facelift, Part 1

bandaged monitor

Now that you know the importance of saving bandwidth and how to shrink your graphics, it’s time to consider using some new ones. Remember we never use graphics just to use them, but a nice background and a few well chosen graphics can really give your web page a facelift.
*Background Check
The number one rule for choosing a background is find one on which text is still legible. There are some really neat backgrounds available, but if you use them and your reader can’t see the text, you have rendered your web page useless. I’ve compiled a list of some good public use background graphic sites at http://www.cameron.edu/~julie/shapeup/graphics.html.

Spend some time browsing and find a background that reflects your personality or subject. Once you’ve found one, right click on the graphic, choose Save Graphic As... and save it to disk. Remember you’ll need to upload the graphic to cuok.

In the code for your web page look for the <BODY> code near the top. You may already have a BACKGROUND addition to this code. If you do, just replace the filename with your new graphic’s filename. Otherwise, type <BODY BACKGROUND="filename.gif"> If your graphic is dark, change your text color to a lighter color by adding a text addition to the BODY command. A dark background with white text would have the following code:

<BODY BACKGROUND="graphic.gif" TEXT="ffffff">

For more color codes, try Non-dithering colors by hue. This page contains a 228K graphic though so expect it to take a while to download. For a quicker site and one that allows you to try different background and link colors out, try Dougie's Color Picker.

*Scoot it Over
On my list of backgrounds, you’ll find a section called side bar graphics. These are graphics that look like there is one graphic on the left side of the screen and the text has been scooted over. I personally love backgrounds like this and
This page is an example of a side bar background. Take a look at the sourcecode for help.
they’re easy to use. Insert the filename for the graphic into <BODY BACKGROUND..> just like a regular background graphic. Then immediately following <BODY> insert the following code:

<TABLE><TR>
<TD><img src="/images/dot_clear.gif" height=100 width=100 alt=" "></TD><TD>

Then, immediately before </BODY> at the bottom of your page, put the following code:

</TD></TR></TABLE>

You are creating a table and putting a blank image (dot_clear.gif) in the first column. To keep text from printing on the side bar of your background, you may have to play with the width=# by increasing or decreasing the number. You can look at the sourcecode of any of the Shape Up web pages for an example of this technique.

Remember, if you need help, contact me at X-2285 or julied@cameron.edu.


Page maintained by Julie A. Duncan, Information Designer.