After School Exchange
Home Activities & Tips Students' Take Events About Resources
Search Afterschool Programs Public TV Resources

Student's Take
Technical Guidelines
If you are coding by hand instead of using pre-made html templates, please use following guidelines:

1. Images MUST be in gif or jpg format (NOT png)

2. When naming files and folders, put the names in all lower case.

3. Name the index page index.html rather than index.htm

4. Save compressed video as Quicktime or Real Player.

5. Try not to use divs (layers) if possible because they are a problem in some browsers on the Mac. If you want your material to flow in a curve you can use spacer gifs to push content over (see below).

6. Deliver your content on: 1) CD, 2) zipped, or 3) stuffed by e-mail.

7. Check all links to make sure that they are good in both browsers (Explorer is less tolerant of incorrect path hierarchy problems)

8. Use the pop-up code supplied here

9. Double check to verify that images that are gifs are referred to as name.gif in the code and that images that are jpgs are referred to as name.jpg in the code.

Popup Windows:

To create popup windows, please refer to the following html page:
Popup window guide

Using Spacer .gifs:

1. Take a look at the "demo.html" file in a browser. When two images are placed in <TD> tags one after another they appear next to each other. To move them apart, a spacer image is needed. A spacer image is just a transparent pixel, but you can stretch the pixel high or wide.

2. For example, look at the spacer code in "with_spacer.html":

<TD WIDTH="252"><IMG SRC="images/pixel.gif" WIDTH="252" HEIGHT="1" BORDER="0" HSPACE="0" VSPACE="0"></TD>

3. The image "pixel.gif" is only a pixel wide and a pixel high. But the width has been stretched to 252 pixels to push the green monster over to the right.

4. The reason to stretch a one-pixel-wide image, rather than make an image 252 pixels wide, is because it's much less time to download the smaller image.

5. To move images around, you need to set up tables. See "staggered.html." The table border has been turned on, so you can see how it's built. Look at the code to see how it is done.

6. The less grid-like you want your images, the more complex your tables will be.

7. To make a transparent pixel to use as a spacer: Open Photoshop. Make a new image 1 pixel wide and 1 pixel high with contents: transparent and 72 dpi. Export as a gif89export or choose "Save for Web".
Students' Take Home
Submit a Project
Editorial Guidelines
Technical Guidelines
Release Forms
About Students' Take

Photo from "Cyberchase Review"