Pre-Planning Colors
When pre-planning your website, make sure the color scheme is consistent throughout the website. This way when a visitor goes from one webpage to another, they know they are on the same website and haven't strayed off someplace else.
Look at the bottom of the Pre-Planning Template. Notice a smaller box labeled "Colors". Here is where to define the colors for the background, the font, the left side menu background, the font in the left side menu, and the borders and lines used throughout the website. Not to worry, these always be changed around later on if needed.
When writing down the colors to use, don't write down the name of a color. A computer sees a color as one of sixteen million alpha numeric values. For instance, say the background of your website needs to be blue. Did you want a light sky blue? Or did you mean a deep navy blue? A computer needs to be told exactly which color blue in a way the computer can understand. And, in order for the computer to understand which color blue to use in the website, it needs to know the alpha numerical value.
So how do you get this value? This is where a good paint program comes in handy.
 |
In Paint Shop Pro, look at the color palette at the right side of the screen and single left click on the upper color (or foreground) box. |
 |
A dialog box will open up. Move the little circles around the bigger circle and within the gradient box until the color is exactly what you want. |
 |
The current color is shown in the box labeled "Current" in the right side of this dialog box. |
 |
Once the color is exactly right, write down the HTML Code. This code can be found on the bottom of the dialog box and will always start with a [#] number sign. (Don't forget to include the number sign whenever this code is used.) |
Now you know an easy way to get a color code for your website. Other good paint programs will also have this feature. Keep in mind that there is usually a slight variation in coloring between different computers due to different monitors and/or graphics cards. Continuing to use the same color code in the right location will allow for seamless consistency in the way your website is displayed to the world.
Do this for each of the colors listed in the template worksheet. Keep the template handy. You will be referring to these codes quite often and while going through each section of this course.
