Site hosted by Angelfire.com: Build your free website today!


Instructions for using the files.


The main files are in the Picture Pages folder. They consist of zipped bundles of preassembled HTML pages ready for use. I recommend that you keep the zipped files as spare copies and even upload them to a floppy disc for safekeeping. The files must be unzipped to individual folders because they have the same filenames in each set. If you already know HTML you will have no trouble using them. They may be edited to your own specification. You may add a title and text, change page and font color, add a background image in place of solid color. Notepad is all you need but a page editor will allow you to batch edit the image files to your requirements.

Now that you've unzipped the files to folders let's see how they can be used. Suppose you want to put up three pages of 24 images each. Open a folder in Documents, say MyWebPage. In it open three subfolders, say album1, 2 & 3. Into each folder put 24 each of your unedited images. Edit your image files, cropping, resizing, etc.. Choose the format you want to use and copy 24 image.html pages to each folder, from image001 to image024. I'm assuming that you want to add a descriptive title or text to the image pages, and that the image filename contains information that you need for that purpose. You'll want to line the images and image pages up, side by side, so that you can edit them. Got to the top of the folder window and choose View>List, then View>Arrange Objects>By Type. If you want the objects to be in a particular and different order you can "force" the list by putting an "a" in from of the first one," b" the second, and so on. Triple click the file slowly at the front of the filename to do that. Right click on the folder body and choose refresh and the images will line up in that order. Now adjust the browser window so that image pages and images are side by side, like the example on the left;

Now open the first image HTML page for editing with Notepad. Because most of your editing will be faster with Notepad you may want to set it as your default editor for HTMLs. Copy this language into your clipboard.

<center><font color=#FFFF00><H3></H3><font></center>

Paste it either before or after the image source tag. <img src ......"> Enter your text between the "H" tags. You can choose a different font size, larger number equals smaller size. You can of course put a title at the top and description at the bottom. you can also use the "title" tag in the head section of the page for information. Then just follow this procedure down the line until all pages are edited. If the filenames contain no useful data, then choose the Thumbnail view to get the information, but you may still need to "force" the list to get the right order.

You can also use the Alt=""function to add notation. then when someone mouses-over the image a description will appear.

The next step is renaming the files. I use Irfanview for that purpose, but any file rename utility compatible with your computer will serve the purpose. Open the first image with Irfanview. Choose File>Batch Conversion/Rename then set the Rename Option to image###. Select "Add All"then "Start". The images will be renamed to match the pages. Close Irfanview.

The next step is making thumbnails. Now make a new subfolder named "thumbs". Open the first image with Irfanview. The reason for closing and reopening is so that it will recognize the new filenames. Go to File>'Thumbnails. When the thumbnail window opens select Options>Set Thumbnail Options. Now set the size and surround color. In the index pages the thumbnail size is set at 100 X 100 but this can be easily changed. But we will discuss that somewhere else. If you use Irfanview to make thumbnails they will be square with a surround, which you will generally want to match the page background. I've set the index page color to #333333 in hexidecimal for HTML. But Irfanview, and many image programs work with Paint which used a decimal code instead of hexadecimal. Hexadecimal is base 16, so 3 X 16 +3=51, so set Irfanview's surround color as 51, 51, 51 to match the page background. Now choose Options>Select All. Then go File>Make Thumbnails as Individual Images. You will be allowed to browse for the folder to place them in. Make sure that they go to the proper subfolder, or you may overwrite other files.When Irfanview makes thumbnails it appends   _t   to the filename. This is actually good, in case you happen to accidentaly put them in the main folder they will not overwrite the main files. If that happens just move them to the thumbs subfolder. But you will need to take a few seconds to rename them the same as the main image files.

Editing the index page. Go to the folder where you got the image pages and copy the proper index page to the album page, in this case index6x6.html. Rename it to index.html. When you've completed all the steps the folder browser window will look like the one above on the right. Either right click on the index and choose Edit, or open it, go View>Source, and delete the bottom two columns of thumbnail entrys, so that there are 24 entries. Close the editor and open the page. All the thumbnails will come up and when you click on them the images will open. Some of the slide show formats don't have thumbnails, but you will need to temporarily put an index page in the folder just to open the first page properly.

Follow the same procedure with the other two folders, but you can copy the index page to them from the first album folder because it has already been edited.

Options   You can change the background color or background for both the image and index pages. You can consult the Color Chart to find your color. If you want a background texture or pattern, just change bgcolor="######" to background="texture.gif or jpg".

You can add a border to the table, the default color is white, just by adding border="#" to the table tag. # is the numerical width of the border. This border will appear around the table and table data cells as well. You can space the data cells out, just add cellspacing="#". You can space the images out from the cell borders, just add cellpadding="#". You can add a border to the image, just put border ="#" in the image source tag. The default color is blue.

You can remove the size language from the thumbnail image source tags. This can be done with the Replace function of Notepad. Just replace width="100" height="100" with nothing. If you add the table border also the page will "unfurl" as the images fill out, giving a dynamic effect to your page.

You can also change the thumbnail size to whatever you like. If you want your pages to preload just use the Replace function to remove the "thumbs/" (Be sure to include the slash) from the index pages and use the main images as the thumbnail source. This is most effective in round robin or timed slideshows where the show runs much better with the images loaded. However you must have the size language in the thumbnail pages and the proportions must be correct. If your images are 650x500 you may want your thumbnails to be 130x100, for instance. You should use the caption language and add a note to the thumbnail page saying to wait till the images are all loaded to before running the show.