HTML I Class Projects
Project Twenty-Six

[Back to the Projects Page]

Project Twenty-Six is designed to provide experience in designing a digital photo album. With so many people taking digital photographs and displaying them on the Web, the need often arises to find a pleasing way of displaying them. The other need is to do so without using full-sized images that make your page slow to load for users (mostly your relatives) out there.
 
For this project, you will create a page with 20 thumbnails (smaller versions of the pictures) each of which will load the full-sized version in a new window. Bring your images from home (or get pictures of fake family members from the Web). Your design should be compact and well laid out, but this time we will try a different layout technique--not tables this time.

Guidelines: A well designed page will display the thumbnails in a compact yet attractive format that makes good use of stylesheets. The color scheme will reflect good design principles, and of course, all of the links will work properly.
NOTE: The I-View application in my share folder has an automatic thumbnail feature you might find helpful; otherwise, you can make them yourself by resizing the images and saving them as another file name.
 
For the layout and design of this project, we will use a technique that designers currently are using instead of tables. See, technically, tables are not supposed to be used for layout but for displaying data that is easiest to understand when it is in table form. This newer technique uses stylesheets and positioned DIVs to set up columns and sections of your page. The following references will take you to information on how to set these up:
 
DIV Instead of Tables (See the example for a 3-column page.)
Practical CSS Layout Tips, Tricks, & Techniques
CSS positioning Tips (see the next page, too)
or try this Google search

Getting a link to load the picture in a new page is not hard at all. Just add target="_blank" to your links. (The links above provide examples.) Also, to avoid the colored borders around thumbnails, remember to add border="0" to the image tags.

[Back to the Projects Page]

Valid XHTML 1.0! Valid CSS! Level Double-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0