Create your own photo gallery: Part I

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

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.

What now?

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.

Join the PC World newsletter!

Error: Please check your email address.

Our Back to Business guide highlights the best products for you to boost your productivity at home, on the road, at the office, or in the classroom.

Keep up with the latest tech news, reviews and previews by subscribing to the Good Gear Guide newsletter.

Heidi Woof

PC World
Show Comments

Essentials

Microsoft L5V-00027 Sculpt Ergonomic Keyboard Desktop

Learn more >

Lexar® JumpDrive® S57 USB 3.0 flash drive

Learn more >

Mobile

Lexar® JumpDrive® S45 USB 3.0 flash drive 

Learn more >

Exec

Lexar® Professional 1800x microSDHC™/microSDXC™ UHS-II cards 

Learn more >

HD Pan/Tilt Wi-Fi Camera with Night Vision NC450

Learn more >

Lexar® JumpDrive® C20c USB Type-C flash drive 

Learn more >

Audio-Technica ATH-ANC70 Noise Cancelling Headphones

Learn more >

Budget

Back To Business Guide

Click for more ›

Most Popular Reviews

Latest News Articles

Resources

PCW Evaluation Team

Azadeh Williams

HP OfficeJet Pro 8730

A smarter way to print for busy small business owners, combining speedy printing with scanning and copying, making it easier to produce high quality documents and images at a touch of a button.

Andrew Grant

HP OfficeJet Pro 8730

I've had a multifunction printer in the office going on 10 years now. It was a neat bit of kit back in the day -- print, copy, scan, fax -- when printing over WiFi felt a bit like magic. It’s seen better days though and an upgrade’s well overdue. This HP OfficeJet Pro 8730 looks like it ticks all the same boxes: print, copy, scan, and fax. (Really? Does anyone fax anything any more? I guess it's good to know the facility’s there, just in case.) Printing over WiFi is more-or- less standard these days.

Ed Dawson

HP OfficeJet Pro 8730

As a freelance writer who is always on the go, I like my technology to be both efficient and effective so I can do my job well. The HP OfficeJet Pro 8730 Inkjet Printer ticks all the boxes in terms of form factor, performance and user interface.

Michael Hargreaves

Windows 10 for Business / Dell XPS 13

I’d happily recommend this touchscreen laptop and Windows 10 as a great way to get serious work done at a desk or on the road.

Aysha Strobbe

Windows 10 / HP Spectre x360

Ultimately, I think the Windows 10 environment is excellent for me as it caters for so many different uses. The inclusion of the Xbox app is also great for when you need some downtime too!

Mark Escubio

Windows 10 / Lenovo Yoga 910

For me, the Xbox Play Anywhere is a great new feature as it allows you to play your current Xbox games with higher resolutions and better graphics without forking out extra cash for another copy. Although available titles are still scarce, but I’m sure it will grow in time.

Featured Content

Latest Jobs

Don’t have an account? Sign up here

Don't have an account? Sign up now

Forgot password?