Displaying your Masterpieces


The first step is to gather all the images you would like to display and place them in a new folder(this one is called images). I would have folders setup as follows:

  • My Documents
  • My Webpages
  • showcase1
  • images ---- thumbnails

Try to make all the files in small case letters to avoid confusion when trying to find them. The first page will be called "index.html" which you would save inside the "showcase1" folder or whatever you have called it.


If you have a program that will automatically make thumbnails - this would be the easy part - Each picture in the image file is resized to about 100x100. If you have more than 20 thumbs on one page, you may want to make them 80x80, if you like the look of larger ones, I have used 200x200 - just try to put fewer of these per page and have more pages!

Automatic Option

I have a couple of free programs that make thumbnails (and one expensive one - Photoshop 6 --LOL!)

An ideal one is the Irfanview32 Viewer. besides its also a great viewer for all your image files - you can watch all your creations go by in a slide show!!--- The Irfanview makes the thumbnails and pages(Yes it will even write the page for you!) so FAST everytime I use it, I go to open the folder to check it cause I can't believe its done already. The only drawback to this one is some images get too tiny - I suppose its better if you start with all similar sized images...and they put all the pictures and the page in one folder. You would then go into your editor to change the background to what you want and change titles or whatever. & its done! Upload and test.

Manual Option

In PSP, open each image,

Window -- duplicate (or cntrl d) to make a copy and close the original.

Go to image, resize & select your size. (Also effects, sharpen if desired). Then save copy as "samename_t.jpg" or "samename_t.gif" . Use the jpeg or gif optimizer to get a small file size.(we just add a "t" to the name of the file so you know which are the thumbnails.)

Putting It Together

Open a new file in the editor and call it "index.html". Save this in the showcase folder - should now be like this.

If you are using a WYSIWYG editor,(that is - not actually writing html code yourself) Check the menu for a "table" option. (Where it is depends on what you're using - check your help files)

I'm trying to write this using Front Page Express just to see how it does work , but I would usually just use a notepad type editor to keep the table very similar to this type of codecode

With your table creator (hey they have one of those at Yahoo-Geocities) Create a 4x5 cell table. Say 4 rows and 5 columns or vice versa. Like so,(this has a colour added)


Now I know when you look at it you think - ah my pictures will not fit in there!! - but it will grow! Place your cursor in the first "cell" & go to the insert image button or command, find your thumbnail folder& thumbnail. Now select the thumbnail (which is in its cell) and create a link to the full picture in the images folder. Some programs you may have to type in the image name yourself. I noticed this program I had to just write in the hyperlink location as images/psp7ani.jpg

Psp 7 group

Add comments if desired,

Then just continue to the next "cell" to add your next picture the same way until you're done. Don't forget to keep saving along the way.!

Test your page by viewing it in a browser - just file/open and browse to the file location. You of course would add titles, links and a neat background and then upload your page.

You may want to expand to tables that do more - selecting the width, double backgrounds and more. If anyone wants to learn more about tables or webpage building there are tons of resources out there... Some good ones are these:

HTML Goodies

Web Monkey

or the Yahoo-Group HTML Learning Corner