GeoCities.us GeoCities.us » CapeCanaveral » Galaxy Get your FREE home page!

FLIGHT MANUAL
PUTTING SET 01 ON YOUR PAGE  //  AND HOW IT WAS MADE

>> STAGE 1: THE BACKGROUND

Save the starfield and upload it. Then your BODY tag looks like this (I renamed mine starfield.gif; use whatever you named yours):

<body background="starfield.gif" bgcolor="#07041D"
text="#D8D8FF" link="#66FFFF" vlink="#9999FF">

Two things people forget. First, the bgcolor. Set it to almost-black like that, so if the background is slow to load, or somebody has pictures turned off, your light text still shows up. Without it you get pale lavender words on a white page, and nobody can read a thing. Second, don't use the plain blue default link color on a black page. It's nearly invisible. Cyan or yellow links.


>> STAGE 2: DIVIDER AND BUTTONS

The chrome tube goes between sections:

<center><img src="spacebar.gif" width="400" height="12" alt=""></center>

Always put the width and height in. The browser can lay out the page before the picture arrives, instead of jumping everything around when it does.

A button is just a picture inside a link:

<a href="index.html"><img src="home.gif" width="100" height="30"
border="0" alt="Home"></a>

border="0" stops the browser from drawing a blue link box around the chrome. alt gives people with pictures off something to click.


>> STAGE 3: STAR BULLETS

You can't swap the dot on a regular <ul> list for a picture in most browsers, so the trick is to line the star up with each item using align="absmiddle":

<img src="star.gif" width="16" height="16" alt="*" align="absmiddle"> Saturn<br>
<img src="star.gif" width="16" height="16" alt="*" align="absmiddle"> Jupiter<br>

Which looks like:
* Saturn
* Jupiter

For long items that wrap to two lines, put the star and the words in two cells of a table instead, so the second line doesn't slide under the star.


>> HOW I MAKE CHROME

Everybody asks. Chrome isn't a color, it's a reflection. A shiny tube outdoors reflects the sky on top and the ground on the bottom, with a hard dark line where the horizon falls. So in Paint Shop Pro 5 I fill the button shape with a linear gradient that goes white at the top, pale blue down to just past the middle, then a sudden band of dark navy (that's the horizon), then back up to a light blue at the bottom. That sudden dark band is the whole trick. Without it you just get a gray pill.

After that: a one-pixel white highlight along the top edge, a darker outline all the way around, and the lettering in navy so it looks stamped into the metal.

The star glint is six frames in Animation Shop. Five of them are the same star with a small highlight moving across, and the sixth is the flash. I set the flash frame short and the plain frames long so it winks instead of strobes. A blinking thing on a page should be calm or it gives people a headache.

Last step, color reduction. Space scenes look terrible when you dither them down to a handful of colors, so the starfield keeps enough colors to get the nebula smooth, and the buttons get reduced harder with no dithering so the edges stay clean. The transparent color on the bar and bullet is set to the black they were drawn on.


>> TROUBLESHOOTING

Q: My GIFs show up as broken pictures after I upload them.
A: Your FTP program sent them as text. Set it to binary for pictures (ASCII is only for .html and .txt). The GeoCities.us File Manager handles this for you, so if FTP keeps mangling them, try uploading through that.

Q: My star has a black square around it on my white page.
A: You edited it in a program that threw away the transparency. Save it again from my page and don't open it in anything before you upload.

Q: Nothing shows up at all.
A: Check upper and lower case. On the server, Star.gif and star.gif are two different files. Windows doesn't care, which is why it worked on your own computer.


Back to Starport E-mail Dustin

Questions: [email protected]
Last updated: September 22, 1999
© 1999 Dustin Mayfield