Making Web Photo Gallery Pages
By Paul Brickett, San José, CA

This note describes how I have constructed the web pages showing annotated photos of recent Desert Survivor trips.  This includes the basic software and tips on acquiring and using it.  I am only familiar with doing this on Windows computers.  At the bottom is a list of Frequently Asked Questions, by me, to myself, which I would appreciate answers to.
Although most web pages are created using Macromedia's Dreamweaver or Microsoft's Frontpage programs, which are also used for editing pages, and can be used for publishing,  I have used Adobe's Photoshop Elements for the basic design, Netscape's Composer for editing, and Ipswitch's Ws_ftp le for publishing.  The latter two programs are free.  Photoshop Elements (PSE) is a somewhat downsized version of Photoshop, which is the most popular digital image manipulation program.  Typical discount price for PSE is $50.  I got a copy bundled with an Epson scanner which Fry's recently advertised (refurbished) for $40.  Adobe has recently released Photoshop Elements II, which I haven't used, and which might have different details.

The basic design of the pages is one home page with a title, some text, and captioned thumbnails.  Each thumbnail links to individual pages containing a single enlarged version of the same image, and also navigation links to operate in "slide show" fashion (next image, previous image, and also back to home page).  Major steps to accomplish this are:
  1. Copy all photos to an empty directory (at least no other images files).  Images on the page will be in the same order as the directory listing, so files might have to be renamed.  
  2. Add captions to all .jpg files.  Jpeg format supports a caption in the file header, but Gif files do not..  Open in PSE, use File/File Info.  These captions will appear under both the large images and the thumbnails, so they probably should be short. 
  3. From PSE, chose File/Automate/Web Photo Gallery.  In order to have the date of the trip appear, rather than today's date, it must be typed in under Banner option" each time the process is run.  Other parameters are saved by  PSE.
  4. Using the thumbnail and gallery options, set the sizes you wish the thumbnail and full-size images to be remade to.  I use custom 180 and 800 pixel sizes, respectively, because I like big images.  but I think there are some people with displays of only 800 x 600 resolution (also called SVGA).  I limit the maximum size to 800, and also change the dimension of the table on the home page to 800 pixels wide, with 4 thumbnails per row.
  5. Make a destination folder for the output folders and files, select the input and output folders  in PSE, and click OK to run the process.  
  6. If you know how to edit html, you can put template files in the correct folder and PSE will use it to generate a new gallery.  For normal installation, the directory is C:/ProgramFiles/Adobe/PhotoshopElements/Presets/WebContactSheet/.  Copy the Simple folder to WhatEver, and replace IndexPage.htm with the html file you want to use, such as from one of the pages I have posted.

FAQs

How do I 1) get images to load to the non-displayed screen buffer, and 2) switch screen buffers from html?
Why does some software make web-page files with an extension -.htm and others -.html?  
How do I prevent those pesky underbar characters ( _ ) from appearing after images, before text?


/bighornLeft.jpg (go back to desert-survivors.org)