Create your own photo gallery: Part I
- — 01 September, 2002 08:32
One of the greatest things about Web pages is the ability to display data on the Internet and have other people view it straight away. Take photographs, for example. In the not-so-distant past, sharing pictures with others would mean either posting them, or organising a time to meet in person.
In this and the next column (Create your own photo gallery: Part II) we look at the Net alternative: your own online image gallery, which will ensure your photos are only a click away.
Go to www.woofbyte.com.au/gallery and you will see the template on which this project is based. This is what we will be creating in the next two months. First, we will look at the consequences of a graphic-intensive site and ways you can minimise the load time of your pages. We'll then consider the structure of the site. Next month's instalment will place increased emphasis on the code itself.
Friend or foe?
There is no doubt that photos will slow down your Web site. The more photos you display and the larger the file sizes, the longer your pages take to load and the greater the potential for dissatisfaction in visitors to your site.
To minimise this problem, ensure your graphics are optimised for the Internet. Resolution should be 72dpi (dots per inch), and as small in file size as possible without losing picture quality.
You can also consider using thumbnails to further reduce load time. These versions of your pictures are smaller in size, quality and file size. The intention is for the viewer to click on the thumbnail they want to see in more detail. The larger version of the photo (possibly with a description as well) will usually then display either in a new, pop-up window or in the framed format that we will be using.
Frames are Web sites in which multiple HTML pages display on one screen simultaneously, leaving the user with the impression that they are a single page. People often condemn frames, claiming they force the viewer to look at a Web page in a certain way. For our project, however, they are a godsend! Even with all we have done to minimise load time, the site is still going to be slower than desired due to our photos. Using frames helps us further minimise this problem.
With reference to www.woofbyte.com.au/gallery, you will see that the format of our framed site includes four HTML display pages. There is also an index page behind the scenes that defines how these pages sit on the screen in relation to each other.
Click around this site and you will see that the ONLY page that changes is middle.html. The aim, therefore, is to insert the majority of your images into the static frames so they only have to load once. If you follow this course of action, all images will load when the site is first entered and then only the photo in the middle HTML page will need to load.
What do the different frames do?
hnav.html: this is simply an HTML page with a linkable title image allowing users to click back to the homepage. In this instance, instruction to the viewer is also included.
lnav.html, rnav.html: these files are very similar. They each contain four thumbnail images which, when clicked, will open the resulting pages in the target middle frame.
middle.html: when the Web site is first loaded, the file name is middle.html. However, each time a thumbnail is clicked, a different HTML file loads in its place. For example, if you click on the first picture on the left frame, then picture1.html will appear in the centre.
Take the time between now and the next instalment to prepare your images. Create two versions of each. In the site illustrated, small images measure 96x80 pixels and the large are 300x250 (width by height). You will need another large image for your homepage.