Tables
I use tables to constrain my home pages. I started using this trick after I viewed one of my home pages on a 17" monitor. It was really ugly! What happens when the monitor gets bigger is the text fills the entire screen. On a 17" monitor, I was faced with a huge screen full of text and found it hard to read and very overwhelming. So, I started placing my pages in a table 640 pixels wide. This fills a 14" monitor or a 15" monitor running Windows 95 with the office toolbar on the right. I center the table (except in the case of a gradient background, which I leave at the left margin) so if someone looks at the page in a higher resolution than 600 x 480 (typical for a 14 or 15" monitor) or a larger monitor, the home page is nicely centered on the monitor and is easy to read and attractive.I also use tables to format pages with a color bar on the left. If you use a color bar (i.e. my gradients) you want the text to start out of the colored area. The most effective and safest way to do this is to create a transparent gif 5 pixels by 5 pixels, then stretch the transparent gif to the size as the color bar plus 10 pixels (i.e. if your color bar is 100 pixels, stretch the gif to 110 pixels). I then place that transparent gif in the first table cell in the first row as follows:
<tr> <td> <IMG SRC "space.gif" width=110 border=0> </td> <td> text goes here </td> </tr >
This will force the first cell to retain that width for the entire table. To download a copy of my transparent gif, right click here and choose "save link as" to save to your hard drive. Don't click on the "here". This will bring the gif up in view mode, but since it is so tiny and transparent, you won't see it!
You can also use tables to create a frame around a graphic as I did on the Free Graphics page. This frame is actually two tables creating the double frame. The outer border is set to "Border=5" the inner border is "Border=3". This is really very simple. Just create a table with one row and one cell with the border you want. Then create another table inside the first table with the graphic in the cell. Then center the whole thing.
If you use tables to constrain your text, keep in mind that most browsers load the whole table at once. So, if you are working with a lot of text on one page, break it down into several tables.
Note: I always format tables with the border on until I get it right. It makes debugging the table format much easier.
Gifs vs. JPEGs
GIF is the most widely used graphics format on the Web today. There are two formats for a GIF, GIF87 and GIF89a, which has enhancements for transparency, interlacing and for multi-framed GIF images that can be used for animations. GIF files are generally used for logos, icons, line art, and other simple images. A GIF is limited to 256 colors, and is therefore not appropriate for detailed images such as photographs.JPEG is actually more of a compression type. Unlike GIF's, JPEG's can have any number of colors and are generally used for detailed images.
Since saving a graphic as a gif file reduces color, you will often find that a colorful graphic, such as the gradient backgrounds I demonstrate here, lose their color quality and become "banded". Since I don't create huge file size graphics, my policy is to save a graphic as a gif if it needs a transparent background or if the graphic is one solid color. Otherwise, I save the graphic as a JPEG.
Transparent Gifs
When you create a text graphic, a round button, etc, you will undoubtedly want to make the background transparent to blend in seamlessly with your background. In order to create a graphic with a transparent background you will have to save it as a gif. Following is the procedure:
A word of caution, remember to remove this transparency setting if you are saving a graphic as a gif without a transparent background!
Fonts
Your choice of a font for the graphics on your home page can set the tone for the page. An elegant font will set a different mood than a casual or a fun font. You can even use a script font effectively if you use it judiciously. The only real rule of thumb on using a font in graphics is to pick one font (or a family of fonts) and stick to it. Using a different font on each page (unless it is intentional as with this site) can be confusing and disruptive. There are lots of fonts available on the Web (see the links page for several sites). So, pick a font for your graphics and have fun with it! Font Samples
Note: I don't particularly like black backgrounds with white text. I formatted this page white on black as an example of the technique. One problem with white text on a black background is that it makes it impossible to print the page. If you want to print this page, just change your default font color in your browser temporarily to black, print, then change back. Otherwise, just press Ctrl A (select all), Ctrl C (copy), open a text editor and press Ctrl V (paste). You can then print the text from the text editor.
Font: ZapChancer
