Analyzing Files from the Web Gallery

view movie Click icon to view demonstration

Now let's analyze all the pieces that make up the Web Gallery, focusing on the images and the Web pages created by Photoshop.

I also want to point out a few features of the page you may not have noticed. Along the left side of the screen is a scroll bar which displays because an iframe is used to display another page on the screen. You may have heard that frames are a "no no" and you heard correctly, but an iframe is OK because it works well with search engines and printers. Along the left is a web page which shows all the thumbnails and on the right side of the screen is another iframe which displays a page which holds one of the larger images. If I have 10 images there will be 10 of these pages created. There is also a brown background image which can be seen at the edges of the page.

Now let's go to the desktop and find the files that make up this page. I see a folder called "yard-originals" and another folder named "yard-web-gallery". The 10 images in the yard originals folder are 25.3 MB, which is a pretty hefty folder. By comparison, the entire Web Gallery folder is only 444 KB, which is quite a deal. For only 444 K I have 10 thumbnails, 10 larger images and all the html to make the gallery work.

When I click on the "yard-web-gallery" folder I see several folders and files. There are 3 folders, "images", "thumbnails", and "pages".

As I open the "images" folder I see the 10 images from my digital camera, with the exact same name they started with. These are the images which display along the right side of the screen. There is also a file named "bgtile01.gif" which provides the brown patterned background for the page, as well as a file named "galleryStyle.css" which controls some of the formatting for the page.

In the "thumbnails" folder I see 10 images with the same names as those files in the "images" folder. These files are much smaller in fact they are only 4K. Since the file names in this folder are exactly the same as those in the "images" folder you need to make sure you don't move files from one folder to another, or you will have a mess.

I go back into the "images" folder to see the file size of the larger photo. These files are 28K which is still a bargain. My only concern is that the images seemed a bit faded, I might want to create another version of the gallery with a lower compression rate so the files were larger, but of higher quality.

The third folder is the "pages" folder, which contains an .htm page named to correspond with each image. These pages display on the right side of the screen, they are simple pages that display a single image.

The first file in my gallery is the "index.htm" page which holds 2 iframes which display images. This file does not need to be called "index.htm", you could call it "gallery.html" or any other name that corresponded to the content of your site, index is the default value provided by Photoshop. Although you can rename the "index.htm file", you cannot change the relationship between this file and the other files and folders. In order for the code to work you must keep the sub folders of "images", "thumbnails" and "pages" at the same location as the "index.html" page. You also need to keep the name of the "ThumbnailFrame.htm" file the same, or be prepared to change code on the index page to match the new name.

There are also files that contain xml and Javascript which I do not have the expertise to review. If you know these languages, feel free to poke around and read these files.

The last file is "ThumbnailFrame.htm", which holds all the thumbnail images, and contains linking code so that when you click on a thumbnail a new page loads at the right. As I view the gallery in the browser I see the page which has a gray background, a border around the thumbnails and the Gallery title.

These are the pieces which make up our final Web Gallery. Now let's make another version of the Gallery by customizing the settings.