The Right Bells and Whistles - Technology Tutorial - Tutorial

Home Office Computing, April, 2000 by Dave Johnson

Make your Web site stand out: Six ways to welcome visitors without bogging down access times

YOUR WEB SITE HITS ALL THE MARKS FOR organization, content, and clarity; it s easy to find information about your company and products; and your customers seem perfectly happy with your service. But something's amiss. What you're missing is a little eye candy: graphics that make your site fun and enticing in addition to just plain functional.

We've rounded up half a dozen cool tricks you can add to your Web site to give it a little extra visual appeal without tripling its download times. Try one or two, and your site will become a livelier, more interesting place to visit. Just don't add them all--in the HTML equivalent of desktop publishing's "too many fonts" syndrome--or your online storefront will have all the taste of a glittering disco ball.

STEP 1: Make a Slide Show Practical Web graphics aren't always pretty, but slide shows are both attractive and functional. For instance, you can display a series of products one after the other, in leisurely rotation. To merge stills into animated GIF files, you'll need a program like Jasc Software's Animation Shop 2 ($39; 800-662-2793, www.jasc.com), a complement to Jasc's Paint Shop Pro image editor ($99).

The actual animation is easy, as long as you crop the images to be the same size. Keep each fairly small, because an animated GIF takes some time to load. You'll want the animation to start running pretty quickly, or visitors might mistake the first image of the sequence for a still and leave before the animation finishes loading.

STEP 2: Make a Splash Your word processor probably displays a splash screen at startup, and you can create a similar screen that appears for a few seconds when visitors arrive at your site. It can display a welcome message, a company logo, a list of new products, or anything else you want to announce before surfers are automatically taken to your main site.

This is a cool feature, but you should provide a link on the splash screen that impatient visitors can click to jump to the main site immediately, in case they don't want to wait for the automatic update.

It takes just one line of HTML to create a splash screen, which you should configure as the index page of your site (the home page to which visitors go when they type in your URL). You simply add to the page's source code, in the little-used section, a command like:

<META HTTP-EQUIV="REFRESH"
CONTENT=" 10; URL=http://www.
newsite.com">

In this example, the splash screen stays visible for 10 seconds, then proceeds to load newsite.com.

STEP 3: Let Images Float If you work with irregularly shaped images, you can make them look sharp by rendering their backgrounds transparent--instead of being embedded in a white rectangle, for instance, your oval- or diamond-shaped image can seem to float on the page. To do this, you need to save your image in the GIF file format with transparency on. In a program like Paint Shop Pro, do this by choosing Colors/Set Palette Transparency and set the background to transparent.

STEP 4: Wave a Banner Banners--graphic images in either GIF or JPEG format that serve as links to other pages--are everywhere on the Internet. Many are ads, but you can add one meant to drive traffic to other parts of your own site.

You can use a professional banner manager like Ban Man Pro ($449; Brookfield Consultants, 919-349-4212, www.banmanpro.com) designed for revenue-generating ads, or you can just whip up a banner yourself. Create a graphic that measures 468 pixels wide by 60 pixels high and save it in the GIF format. Then, just place it at the top or bottom of each page of your site, linking it to the page you wish to promote.

Some Web design programs also include banner software, such as Microsoft FrontPage's ($149; 800-426-9400, www. microsoft.com) component tool for creating and managing ad banners.

STEP 5: Make a Background Statement Most Web sites include plain, single-color pages. That's fine, but if you want to add a distinctive flair to your site, you can put a background pattern behind your text and images. Most page design programs have an option to do this, or you can add the following HTML to your page manually:

The background image file can be quite small--the image will simply repeat (or be tiled, in Windows wallpaper lingo) across and down the browser window.

When the user scrolls your Web page, the background will scroll with it. But if you add BGPROPERTIES=FIXED after the filename, then the background acts like a watermark and stays in place, allowing text and images to scroll over it.

Backgrounds can add a flash of color and style to your site, but be careful--the GIF file should be small enough that it loads quickly, and it shouldn't interfere with the text and images on the page.

STEP 6: Explore an Interactive 30 Scene Real estate professionals were the first to jump at this technology, because it lets Web visitors look at a picture from any direction--behind, to the side, even above and below. To make one of these images, you need a set of overlapping photos of the location that collectively provides a panoramic view, a "stitching" program that assembles them all into one big image, and a way to save the final product into a QuickTime VR file, which you then insert into your Web page.