Web Page Guide

"Color is my day-long obsession, joy and torment."

- Claude Monet

The first thing you'll want to do with any new web page is set up the general color scheme.  This includes the background color, the text color, and link colors (the colors of the text your readers will click on to go to another page).  The default color scheme is a gray or white background with bright blue text for links and purple text for visited links.  Bleah.

So, how do you change that color scheme?  Glad you asked.

To change the color scheme, you will want to go the "Format" menu.  On that menu, select "Background."  This will call up a box called "Page Properties" that has a lot of little tabs.  Make sure you're on "Background."  Ignore the stuff on the top - we'll get to that in a sec. The lower half is where you will choose your colors.

(Why do they have you choose your link colors in a box marked "Background?"  Beats the heck out of me).

(Go look for sec, then come back).

Let's start with Background Color. Whatever color is currently in the little box next to background color is currently the page's background color.  If it says "automatic," it will use whatever colors are set on Internet Explorer, which unless you're a hopeless geek like me who changes her browser's colors, takes you right back to default.

To select the color, click on the down arrow next to the Background Color.  This will bring up a set of standard colors, and some (probably blank) boxes for "Custom Colors" and "Document's Colors."  

To use colors other than the Standard Colors, click on "More Colors."  This will take you to grid of colors.   If none of them pleases you, click on "Custom Colors."  This is where the fun starts.  Custom Colors can be created by choosing an existing color and messing with it - my favorite trick is to pick a gray and add red, blue, or green.  You can add this color to your Custom Colors (which will make it available every time you use Front Page) by clicking on "Add to Custom Colors."

Note the first: Using Custom Colors does carry a risk that your colors will look different on different monitors.  You lovely teal may be blue or green depending on who's looking at it, and in the case of a really bad monitor, your page may just end up a vague gray.  If you want to avoid this, you can stick to standard colors.

Note the second: Front Page will also keep track of all the colors you use in an individual document ("Document's Colors").  This is a really handy feature.

Note the third: Remember that the point of a web page is for the text to be read (or the pictures to be looked at).  If you make your page painful on the eyes, this is less likely to happen.  When choosing your colors, it is important to ask yourself: how long can a human being look at neon green before squinting from the glare?

Moving along.

Click on "Okay" until you get back to the "Page Properties/Background."  STOP THERE.

Now that we have a background color, we need to choose the document's text colors.  There are four colors that need to be set: regular text (under background colors) and three link colors (off to the side).  "Hyperlink" is the default color for text that contains a link.  "Visited Hyperlink" is the color the text will turn if the browser has recently clicked on that link.  "Active Hyperlink" is the color the text will turn in the brief second between when a reader clicks on the link and the linked page appears.  You choose these the same way you did your background colors.

A few design notes here:

1. Make sure your regular text can be read against your background without prompting migraines.  For some reason known only to Bill Gates, every time I teach web page construction in my classes, I have students who use hot pink text against electric blue background.  If you have a light background, stick with black.  If you have a dark background, use white.

2. It's a good idea to make your link text at least a bit different than your standard text.  Links will generally show up underlined anyway (unless you're in this classroom), but visual cues are always a good thing.

3. How different you make your "Visited Hyperlink" color from your "Hyperlink" color depends on how important it is that readers know which links they've already visited.

4. "Active Hyperlink" is mostly useless, but it never hurts to pick a readable color.

Click on "Okay" and voila!  Your color scheme is set!

Addendum: Background Images

What's that, you say?  You want to use a picture or image for your background?  Well, if we must.

It is possible to have a picture or image be your background rather than a solid color.  I will be honest and say that for pages with a great deal of text, this is not a good idea unless the image is a border with a solid color for the text (which raises a whole host of other issues).  No matter how subtle the pattern is, normal sized text is just not very readable against any kind of texture.

However, for pages with only a small amount of text, particularly text that will be large in size, it's fine.  Just keep that readability thing in mine.

In order to learn how to use an image as a background, we first have to learn how to find and save an image.

So, let's say you're at, oh, this page, and you decide that the paper background is just perfect for your page.  The first thing you have to do is make sure there aren't any notations on the page about copyright, conditions of use, etc.  Images get passed around a lot, and you can't reasonably be expected to track it down if there's nothing on the page, but at least look at the page.

The second step is to save the image.  Before we get to that, a special note: it is absolutely vital that you save the image in the same folder/directory as your web page.  This is one of Front Page's little quirks: if things are not in same directory on your computer, they won't work on the web, even when they're in the same directory there.

To save the image, move the mouse arrow over any part of the page that doesn't have another image, and click the right button.  A menu will pop up.  Choose "Save Background As."  Again, be sure you are saving it in the same folder as your web page.

Now, back in your document, go back to "Format; Background."  This time we'll be looking at the top half.  Under "Formatting," three options are available: "Background picture," "Watermark," and "Enable hyperlink rollover effects."  Ignore the second two: the one we want is "Background  Picture."  Click in the box to select it.

To select your image, click on "Browse."  You will then need to find your image.  If you did what you were supposed to do and saved it in the same folder as your web page, this should be easy.  Once the image name appears in the box, click on "Okay."

See?  That wasn't so hard. 

Class Web Page Notes:

• When making separate pages for more than one class, I like to use different color schemes, often variations on the same theme.  This makes for an easy visual reference to let me know if I've linked to the wrong place or put the wrong page in the directory, thus preventing any confusion resulting from my ENG099 students finding themselves at my ENG102 assignments page, or a MWF class ending up at a TTH schedule.  I always point out the color scheme to my classes, telling them to be sure and let me know if a link takes them to a page of a  different color.  They really get a charge out of catching my mistakes.

Moving along: The Easy Part: Text