Create your own photogallery: Part II

In 'Create your own photogallery: Part I', I began creating an online photo gallery. Using www.woofbyte.com.au/gallery as a template, I reviewed techniques required to reduce the size of a graphically intensive Web site. Additionally, I discussed how frames were preferable for this type of site so as to speed site loading times further.

Now let's look at the code required. To accompany this step-by-step guide, I have included some tips to ensure your site remains centred despite varying screen resolutions.

Note: position your mouse on the frame you are interested in, right-click and select View Source to see the code for that page. To view the source code of the Controller Page (index.html), choose Source from the View menu.

index.html

As your controller page, index.html determines the layout of your frames and is therefore the most important page. Within the standard HTML framework (HTML, HEAD and TITLE tags), insert the code below:

<FRAMESET rows="40,*" border="0">
<FRAME src="hnav.html" scrolling="no" noresize border="no">
<FRAMESET cols="20%,*,20%" border="0">
<FRAME src="lnav.html" scrolling="no" noresize border="no">
<FRAME src="middle.html" scrolling="no" noresize border="no" name="middle">
<FRAME src="rnav.html" scrolling="no" noresize border="no">
</FRAMESET>
</FRAMESET>

This creates two framesets. The first inserts hnav.html into the top 40 pixels of the screen going across the page, with the second frameset consuming the remaining space.

The second frameset contains three columns: two take up 20 per cent of the given space (lnav.html and rnav.html), and one - middle.html - sits between them and takes up 60 per cent (the remainder).

hnav.html

This page (the horizontal navigation bar) displays explanatory text in addition to a linkable graphic. Using the online template, view the source of the top frame in which this page lays.

Notice that the table has a width of 100 per cent. This means it will take the entire width of the page, regardless of size. The two outer cells ensure that the inside TDs (containing our graphic and text) will always have a buffer of 10 per cent from the right and left screen edges.

There is also the cell containing an IMG SRC command encap­sulated by an A HREF. This transforms the graphic into a link. Finally, there is the cell containing our formatted instructional text.

lnav.html and rnav.html

These two pages (the left and right navigation bars) are identical except that they reference different photos and links.

View the source of one or both of these pages - you will notice there is a table within a table, in order to centre the thumbnails. Refer to FIGURE 1 to see what this would look like if both tables had a border.

The inside table contains the linkable thumbnails. For example:

<a href="picture1.html" target="middle"><img src="images/pic1_small.jpg" height="80" width="96" border="0" alt="picture1" vspace="2">

The A HREF commands all refer to a target value of middle. Look at index.html and you will see that the frame containing middle.html has an extra property of name="middle". When links target this, the relevant HTML page will open in that frame, replacing middle.html.

The outside table has a width and height of 100 per cent, and its only content is the other table. Note that the inner table has properties of valign="middle" and align="center" - this means it will be centred both horizontally and vertically within the larger table, which represents the whole page because of its 100 per cent size properties. Therefore, regardless of screen resolution, the inner table will always be centred within the frame.

middle.html

When the Web site initially loads, the file that acts is middle.html. Each time a thumbnail is clicked, however, a different page replaces it. This is a result of the target link mentioned above in lnav.html and rnav.html.

If you click on the first thumbnail on the left, picture1.html will replace middle.html. There are nine HTML pages suitable for the middle position: picture1.html through picture8.html, and middle.html which is used for the homepage position. These files are all similar in format and comprise a large graphic, a text description, and a footer.

Using tables within tables as explained above, you can ensure that the data is positioned exactly the way you want regardless of screen size.

Join the PC World newsletter!

Error: Please check your email address.
Rocket to Success - Your 10 Tips for Smarter ERP System Selection
Keep up with the latest tech news, reviews and previews by subscribing to the Good Gear Guide newsletter.

Heidi Woof

PC World
Show Comments

Most Popular Reviews

Latest Articles

Resources

PCW Evaluation Team

Matthew Stivala

HP OfficeJet 250 Mobile Printer

The HP OfficeJet 250 Mobile Printer is a great device that fits perfectly into my fast paced and mobile lifestyle. My first impression of the printer itself was how incredibly compact and sleek the device was.

Armand Abogado

HP OfficeJet 250 Mobile Printer

Wireless printing from my iPhone was also a handy feature, the whole experience was quick and seamless with no setup requirements - accessed through the default iOS printing menu options.

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.

Featured Content

Latest Jobs

Don’t have an account? Sign up here

Don't have an account? Sign up now

Forgot password?