ROVIN' AND RAVIN' WITH MIKE
Copyright © 2004 by Michael Segers, All rights reserved
Brought to you by Peanut.org
Special Effects for a Special Website
Recently, a friend of mine asked me to develop a website for her son, who died in the Vietnam War. Of course, you know the basics of setting up a website, or, if you do not, check my page of articles and resources. To start, you need to register a domain name, and you can click on the name I registered if you would like to visit the site: www.BruceCarter.US. (The capitals are optional, by the way.) As you scrolled down the page, did you notice the scrollbars (to the left). By the way, have you noticed the color of the scrollbars on this page?
I had a variety of photos and audio to incorporate into the site. As I worked on it, I knew that I had to keep the site very simple, dignified. And yet, I wanted to give the site a few stylistic touches, which would, I hoped, not detract from its seriousness. I would like to share with you how I added a little bit of unexpected color on the side of the pages.
This effect is incredibly simple to attain. No fancy programs, only a little old-fashioned stealing, because I had seen these effects on other web pages, and I just looked at how they were done.
How did I do that? Simple. Look up at your browser's bar, and click on "View." Then, click on "Source." This is the code for the page, giving the computer instructions not only for the text but also for the way it looks. Usually, if you see something you like on a web page, you can check the source and see how it is done.
The first part of the source code is the head. Every element of the code has a beginning and an end, and you can see the beginning and end of the head with the two signals, <HEAD> and </HEAD>. The slash (/) indicates the end of any element.
In the head of this page, you can see this text:
<STYLE>BODY {SCROLLBAR-FACE-COLOR: #0000FF; SCROLLBAR-HIGHLIGHT-COLOR: #000080; SCROLLBAR-SHADOW-COLOR: #FFFFFF; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #FF6600; SCROLLBAR-TRACK-COLOR: #800000; SCROLLBAR-DARKSHADOW-COLOR: #000080
}</STYLE>
Now, you can recognize the names of parts of the scrollbars. But how about those combinations of numbers and letters? The # is a signal that these are base-16 numbers. We are familiar with base-10 numbers, which have ten numerals, 0, 1, 2... and so on to 9. The next number is 10, which means (1 x 10) + (0 x 1).
Base-16 similarly begins with 0, 1, 2... and so on to 9. But, this is base-16, so we need some more numbers; the count continues on with A, B, C, D, E, F (which equals 15). The next number is 10, but here it means (1 x 16) + (0 x 1). So, for the number #0000FF, remembering that F = 15, we have (15 x 16) + (15 x 1) or 240 + 15 or 255.
These base-16 or hexadecimal (hexa = 6; decimal = 10) numbers are used to identify colors, and you can see here what each number represents. (I added a black background so the white would show up.)
#0000FF #000080 #FFFFFF #FF6600 #800000
You can copy and paste the text above in the head of a web page and play with the numbers to change the appearance of your scroll bars. Here are some more numbers and colors (with a black background added, again):
#000000 #800080 #FFFF00 #008000 #808080
On the website I designed for my friend, the colors I chose were red, white, and blue, colors that I used throughout for text and backgrounds. To my computer, those colors were just strings of hexadecimal numbers:
#FF0000 #FFFFFF #000080
Let me make a confession. I do not write every line of the source for the page. I use Microsoft's FrontPage program. If you do not have it, you can download a basic version of it, free and legal, here. And from that same link (with the lovely #FF6600 color), you can also download AOLPress, a great program that AOL strangely discontinued. Best of all, you do not have to be an AOL subscriber to use it. I let the program do most of the heavy work, and I just add little details like these.
For a whole gallery of similar effects (including this one), visit Stupid Web Tricks. (No, they aren't!) If you find anything you like, just copy the code, without worrying about how or why it works. Perhaps you've noticed another special effect on this page: as you scroll up and down, the background does not move, and the text seems to float over it. Look at the source. Go to the word "background," and see if you can figure out how to "fix" (that's a hint) your background in place.
If you take it step by step, you can add these effects to your web page without any problems. Keep your feet dry, so as not to short circuit your computer, and your heart full of noble thoughts about a friend of mine who has turned her grief for her son into decades of service to veterans, sharing countless tears and hugs, while cajoling elected officials all over the political spectrum. Now, those are very special effects indeed.