Create your own photogallery: Part II

0

In Create Your Own Photo Gallery: Part I, I started creating an online photo gallery. Using www.woofbyte.com.au/gallery as a template, I reviewed techniques needed to reduce the size of a graphically intensive website. Also, I have discussed that frames are preferable for this type of website to further reduce website loading times.

Now let’s look at the required code. To accompany this step-by-step guide, I’ve included some tips to ensure your site stays centered despite different screen resolutions.

Note: Position your mouse over the frame that interests you, right-click and select View Source to view 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, making it the most important page. Inside the standard HTML framework (HTML, HEAD and TITLE tags), paste the following code:








This creates two framesets. The first puts hnav.html in the top 40 pixels of the screen that spans the page, with the second frameset taking up the remaining space.

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

hnav.html

This page (the horizontal navigation bar) displays explanatory text next to a linkable graphic. Using the online template, show the source of the top frame that this page is in.

Note that the table has a width of 100 percent. This means that regardless of size, it takes up the entire width of the page. The two outer cells ensure that the inner TDs (which contain our graphics and text) always have a 10 percent buffer from the right and left edges of the screen.

There is also the cell containing an IMG SRC command encapsulated by an A HREF. This converts the graphic into a link. Finally, there is the cell that contains our formatted statement text.

lnav.html and rnav.html

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

Look at the source of either or both of these pages – you’ll notice that there is a table within a table to center the thumbnails. See FIGURE 1 to see what this would look like if both tables had a border.

The inner table contains the linkable thumbnails. For example:

picture1

The A HREF commands all refer to an average target value. Look at index.html and you will see that the frame containing middle.html has an additional property of name=”middle” . If links target it, the relevant HTML page will open in that frame, replacing middle.html.

photogalleryp11 - Create your own photogallery: Part II

The outside table has a width and height of 100 percent, and its only content is the other table. Note that the inner table has valign=”middle” and align=”center” properties – this means that it will be centered both horizontally and vertically within the larger table, which due to its 100% size properties represents the entire page . Therefore, the inner table is always centered within the frame, regardless of the screen resolution.

middle.html

When the website first loads, it is the middle.html file. However, each time a thumbnail is clicked, it is replaced with a different page. This follows from the target link in lnav.html and rnav.html mentioned above.

If you click on the first thumbnail on the left, picture1.html replaces middle.html. There are nine HTML pages that are suitable for the middle position: picture1.html to picture8.html and middle.html, which is used for the home page position. These files all have a similar format and consist of a large graphic, a text description and a footer.

By using tables within tables, as discussed above, you can ensure that the data is positioned exactly how you want it, regardless of screen size.

Leave a comment