welcome

Cottonwood Designs Graphics Help

How do I download and use your graphics?
How do I use a border background on my page?
How do I use a TOP border background on my page?
Why do all of my images show up as broken?
How do I make subdirectories for my images?

How do I download and use your graphics?

Back to Top

Just right-click with your mouse on the graphic you want and select "save image as" from the little menu which pops up. You can either keep the name I've given it, or rename it anything you want. Make sure you put it somewhere on your hard-drive that you can find it!

When you want to use a graphic in your own HTML file, simply insert the "img src" tag which should look like this:

The "www" is the width of the graphic in pixels and the "hhh" is its height. The "alt" should be something descriptive of the graphic and will be useful for the visually impaired with browsers which "read" the page and for folks who are surfing with their images turned off. These folks will see what they are missing and may be motivated to turn their images on!! :o)

Using the height, width and alt in ALL your image tags will make your page load much faster since your visitor's browser will know how much space to leave for each image and can go on to load the rest of the page instead of waiting at each image until it is completely loaded.

If you have a graphics program, it will tell you the height and width of the graphics when it opens them. Or you can right-click on the graphic and choose "view image" from the little popup menu. This will display the image on its own on a separate page and, if you use Netscape, it will tell you the height and width of the image at the top left of your screen. OR you could choose "View/Source Document" or "View/Page Source" and see the height and width listed in my code. Or try this little image viewing program which is a free download.

Back to Top

How do I use a border background on my page?

Back to Top

I suggest that you use a transparent .gif with a table. Just copy/paste the following html coding. To open the table, place the following code immediately after your opening Body tag:

You can then finish the rest of your page as if there was no table... centered text will be centered within open space and not the whole page. Left aligned text will align on the open space and not the graphic border, just like this text is doing now.

To close the table at the end of your page, place the following code immediately above the closing body tag:

</td></tr></table>

DON'T forget to close the table off, it's very important! The width of the trans.gif can be changed to fit the size of your border - you may have to adjust the width a bit, the height should always stay at 1.

You may download a transparent spacer gif here . (Just right click in the outline and 'save image as.'

Back to Top

How do I use a TOP border background?

Back to Top

Another good question!! I love top-border backgrounds on my pages and use them on all of the main section pages to give you a feeling of how they look. All you need to do is to add a few <BR> (line break tags) just below your BODY tag. Start with about six of them and adjust the number up or down according to your taste.

Or you can use your transparent .gif again, like this:

<img src="trans.gif" height="hhh" width="www">

Where the "www" is approximately 600 or more (to span the whole page in most browsers) and "hhh" is set to your taste for the top border background you have chosen.

One important thing to remember when you are using top-border backgrounds is that you MUST allow for the top-border repeat if your page is longer than small to medium length. I make my top-border backgrounds 1600 pixels long and try to plan for any repeats if the page gets too long. This can be especially difficult to get looking right in every size monitor, so plan ahead!! :o)

Back to Top

Why do all of my images show up as broken?

Back to Top

Make sure that you are using the img src tag correctly. Your tag would look like this:

<img src="mygraphic.gif" alt="My Pic" width="www" height="hhh">

or

<img src="mygraphic.jpg" alt="My Pic" width="www" height="hhh">

One VERY common problem is getting the letters transposed in the tag or finding that you have mistyped the image name. Also, be careful that your uploading software does not change the name of the graphic.

Finally make sure that you have remembered to upload your images. Please do not link to anyone else's images. This may save you bandwidth but is considered very poor netiquette.

Back to Top

How do I make subdirectories for my graphics ?

Back to Top

If you have subdirectories in your account, you also have to change the reference to them. If before using subdirectories your reference looked like this:

Once you have a graphics subdirectory you need to instruct your computer where to find your graphics; you should change your code to this:

Of course the "graphics" is just an example; put whatever the name of YOUR subdirectory is in this spot.

Back to Top

Many thanks to Stacey for letting me "borrow" her code and ideas!! :o)