| Moment Home Page | Current Article Index | Search | Back Issues |





Top Ten Ways to Spice Up Your Home Page - Part One

by Christopher Tse

Admit it. It is unlikely that amateur Web page designers (like us) will ever be able to produce Web pages comparable to those elaborate corporate sites. Big corporations are not stupid. They know that their "Web-appeal" is important enough to deserve big budgets in the millions.

Do people like us have millions in cash to hire the top editors, graphic designers and CGI (Common Gateway Interface) scripters to author our personal home page? Nope.

We can try, however, to learn something from the home pages made by the experts by examining some common elements in their attractive and effective Web pages.

Here is a list of cool tricks you can use and abuse in order to spice up your Web documents:
1. Soft Shadows
Shadows have always been devices that designers use to add sense of depth to their graphics and text. Soft shadows are used for the same reasons. I do not think you will disagree with me that these shadows look really pretty. No wonder there are used practically everywhere.

Just how do you make soft shadows? First, you will need a photo-paint type program to create soft shadows. The current industry standard is Adobe System's Photoshop. If you cannot afford to pay $150 for Photoshop (academic price), you can justifiably opt for shareware programs that do more or less the same thing.

My favorite shareware graphics program is Paint Shop Pro for Windows. (You can download this program from the Moment Home Page.) But since different people prefer different programs that implement specific features differently, I will try generalize my explanations to basic concepts rather than giving step-by-step procedures.

Once you have your graphics program running, then what follows is trivial. To create a soft shadow, first type in the desired text in light gray. This is your shadow. To make it soft, use a "soften" or "blur" filter from somewhere hidden in the menu structure. You will immediately see the blurring effect on the gray text.

Repeat the "soften" or "blur" commands a few times until you get the right amount of fuzziness. Finally, type in the text again, this time with the solid color of your choice, and overlay it on top of the software shadow. Make sure you offset the solid text a little bit to the upper-left to simulate the casting of the shadow.

2. Anti-Aliasing
You may have already realized that the graphical texts in corporate pages always look smoother and those in your page. This is because designers always use anti-aliasing to smooth out jagged edges of fonts under the display relatively low resolution of computer monitors.

Anti-aliasing algorithms generally uses intermediate colors to create the illusion of smoothness along the edges of text and graphics. The actual mechanism is not really important. Just make sure that as you are typing in text in a graphics program, that the option for anti-aliasing is checked. Your text will be smoothed out automatically.

For those of you who have colored backgrounds on your home page, make sure that you first match the background color of the graphic you are working to that of your homepage. Anti-aliasing algorithms works by blending the background color with the text color. Failure to match background colors might cause an ill-colored outline to emerge when you place the graphic on top of your home page.

You should wholly avoid anti-aliasing if you have a complex, multi-colored background images. There are in fact work arounds, but those details will not be discussed in this article.

3. Transparent GIFS
Not every picture or graphic should be or needs to be enclosed in a standard rectangular box. Some great example of the use transparent GIFs can be found on MTV Online http://www.mtv.com.

Photo-paint programs will allow you to save a graphic in GIF 89a format. This particular type of GIF will allow to assign the background color to a transparent.

When you layer this transparent GIF on top of your texture background, the texture will show through in places that are transparent.

You should also remember to use <IMG SRC BORDER=0> to make sure that no boxes are drawn around your GIF even if you make the graphic an active link.

4. Counter
You have seen it. You want it. But you cannot get it on your home page because Columbia/AcIS does not provide the CGI script required for a graphical counter? Don't worry.

You can request a free counter from the popular Web Counter Service at http://www.digits.com Detailed instructions can be found online, therefore I will stop here.

5. Image maps
The basic construct behind image map is there is a hyperlinks "map" on top of a large "image." By clicking on different regions of the image, different links will be accessed depending on how the image map file is set up.

A lot of cool sites use imagemap to replace line after line of text; rather, the users can choose he or she own destiny by clicking on different regions within the large graphic.

I made my logo "T..o..p..h..e..r" a imagemap on my personal home page http://www.columbia.edu/~topher. Each letter of my name leads you (or me) to one of my favorite sites.

The actual coding of imagemaps on the Columbia server is relatively cumbersome. However, the online documentations are very complete and easy to follow http://www.columbia.edu/httpd/cgi/imagemap.html. Shareware programs that allow you to graphically draw out the actual mapped regions are invaluable time- savers. My favorite is MapThis! which is also available from the Moment Home Page.

Microsoft's Internet Explorer supports something called a client side imagemaps which does not require access to any sort of CGI scripts. Everything necessary for the implementation of a imagemap is nicely contained within the HTML document.

Image mapping is a relatively complex subject for beginners. Lots of documentation reading and experimenting are recommended. But once you know how to do one image map, you know how to do them all.

6. The "Don't Leave" Links
Are you paranoid that people who accesses the links from your home page do not come "back" to your page after spawning out into the Net with your links? Worry no more. If you replace your usual <A HREF> tag with <A target=window HREF>, that every time you or someone else clicks on that link, a new Netscape window will pop up and display the linked page, while your own page remains open and unharmed in the background window.

With this implementation, visitors to your page might just stay a little longer and access every link you provide. Do you feel better now?

7. Courier
Times Roman is the standard font in used in Web browser. As you may already know, there are several font tricks such as small caps, big first letter and font size changing that a Web designer can employ to give that professional look.

Sometimes amateur designers sometimes forgot the power of the good old Courier font. Courier is very effective as headline fonts. There are often clearer and more elegant than the notoriously bold Times Roman.

You can designate a text phrase to be Courier (or in rare cases, some other fixed pitch fonts) by tagging the words with <tt>.</tt>.

8. Nested Tables
Tables seem to be the main topic of discussion when Net surfers discuss the cool Netscape extensions. Most people have no problem mastering how to make a simple 3 columns by 10 rows table after glimpsing through the online documentation on the Netscape server.

However, the REAL power of tables can only be realized when you start nesting them-which means, place a table within a cell of another table.

The concept of programming nested tables is not fundamentally difficult. However, one needs to be very careful in keeping track of the complex tag structure.

You will have to experiment in order to get a feel the "natural tendencies" of nested table in such context as width adjustment and text alignment. From my experience, this learning process is indeed not a trivial one.

Once you have mastered the most complex nested tables, then you will have complete freedom over placement of objects on your home page.

The Moment Home Page http://www.columbia.edu/cu/moment (especially our front page) is a good example of how semi-complex nested table can help maximize screen real estate and enhance the look of the overall structure.

Please note that the tag border=0 is added to the <table> tag to eliminate the table grid. You will often get a much cleaner, more professional layout if you do not have excessive grids or lines.

9. Space.gif
This space.gif is nothing more than a small, completely transparent GIF. Since Netscape allows us to scale graphics with the WIDTH= and HEIGHT= tags, we can use space.gif as unobtrusive fillers to indent objects from the left margin for a specified number of pixels.

This allows the designer much more flexibly than tags such as unnumbered lists and <BLOCKQUOTES> which indents the objects or paragraphs for a preset distance every time they are used.

With space.gif, you can type in <IMG SRC WIDTH=333 HEIGHT=400>space.gif</A> can know quite well that the first element to the right of the "space will be 333 pixels from the left most edge of the displayable screen."

10. Split Screen (Netscape 2.0 Extension)
Aside from the addition of Java, Sun Microsystems's object oriented scripting language, the new version of Netscape, (2.0 to be specific), also allows you to split your screen into two or more sections and display different HTML files in each display pane.

This type of screen splitting is the most useful when a button bar is place in a small pane that remains visible all through a browsing process. Netscape provides some good examples of split panes and has extensive online documentation for your reading pleasure.

I recommend you to check out the home page of Tom Thai, our Layout Editor http://www.columbia.edu/~tt70. Tom has a very simple but effective implementation of this new Netscape feature. (Of course, the rest of his page is really nice, too)

* * * *
If you are still with me at this point, congratulations. I hope you will enjoy using these tips and tracks to create home pages that are impressive enough to may be launch you a Web designing job. If you are confident about your Web making ability, you should contact the Columbia University Web League (CUWL) and ask if they are hiring any Web designers right now. You can also visit their home page at http://www.columbia.edu/cu/ccs/cuwl.
One final word of advice: HTML is a very cumbersome way to create large, graphically intensive documents. I found it very difficult to remain creative and artistic (to a limited extent) while having to wrestle with all the technical details of the coding process.

What I do is that I first design the whole Web page on paper or an intuitive WYSIWYG (what you see is what you get) desktop publishing program. Only after you created this "blueprint" should you try to write the codes. When you are actually typing the tags in, your goal should be to replicate "blueprint" as accurately as possible.

Go ahead! Try out all of these nifty devices. I guarantee you that you will like the end product, even though it still might not compare to those million dollar pages. If only I had the cash.


Christopher Tse, the Editorial Editor of the Moment, is considering running his own Web server on his PC. He is nuts.

If you have any tips and tricks you wish to contribute and share with our readers, please email your ideas to moment@columbia.edu. Part two of this article will be published sometimes during the spring semester. All suggestions and corrections are welcomed.



| Moment Home Page | Current Article Index | Search | Back Issues |