Tuesday, October 5, 2010

Creating a Thumbnails Page

We’ll create a typical thumbnails page—a display of small images, each of which links to
its respective image page. Actually, since we’ve already created the look and feel of the
image page, most of the groundwork is completed. The markup for our thumbnails page
looks like this:
thumbnails.html
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
lang="en">

Photo Gallery





Photos » Album: Firenze,
Italia 2006







You’ll notice that this markup is very similar to the image page’s markup, except the h1 is
different, and the description area has been removed. We’ve created an unordered list to
contain the thumbnails; it utilizes the class of thumbnails that we used previously on the
navigation for the photo page.
The number of thumbnails displayed on this page can be varied to suit your preferences.
I’ve chosen to display 25, as the layout is wide enough to accommodate five thumbnails
per row and per column, which echoes the 1:1 proportions of the thumbnails themselves.
A little aesthetically pleasing balance is never a bad thing!
The pagination-style navigation is very similar to the navigation on our single image page,
but the class of thumbnails was removed, since these links don’t contain thumbnail images
and don’t need to be styled as such. At the moment,
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)