Use HTML and CSS to create a set of pages to display a collection
of images similar to what was demonstrated in class. You should provide:
- An index page which displays a collection of thumbnail images which
- A set of pages, one for each image, which displays the full-size
image, and is reached by clicking on the thumbnail in the index.
- You should have at least ten images; more is fine.
- Thumbnails should be laid out attractively on the index page,
each decorated using a border, colored background area, or
other attractive feature(s), and should be accompanied by a description.
- The index page should tolerate re-sizing well, without leaving lots
of unused space. (Mine uses divs with display:inline-block. They fill
horizontally as much as they can without breaking a block, then scroll
vertically if needed.)
- When the large image is displayed, it should fit on the screen
without scrolling, but not leave excessive amounts of empty space.
It should adjust to changes in the screen size.
(This is nearly impossible without using the vh dimension for the
height of the image or something that contains it.)
All images should maintain their correct aspect ratio for all screen sizes.
- All of the full-size image pages should share an external style sheet
which controls the appearance of the page. The index may reference this
page as well, but this is not required.
- Design your pages so they are attractive and have a consistent
- Use at least one free
Google font in your design.
- You may use any set of images for which you have permission.
Pictures you took yourself might be the simplest option. (You could make
a photo essay of old-town Clinton with your phone on the way to class.)
You can also find large collections
of photos at Image*After.
You may also be able to find a picture book at
Project Gutenberg, and use
the images from it.
- CSS allows you to display images at whatever size is needed, but it
is more efficient (and not a great deal of trouble) to make smaller versions
of your images to serve as thumbnails for the index.
This will reduce the amount of
download data needed to display it.
Note: When setting the size of images, the max-height and max-width
directives might be more helpful than the simpler width and height.
Setting both the width and height may change the image aspect ratio.
When you're ready, post your page on Sandbox, then go
enter the URL of the index page.
Here are some reduced-size screen-shots of mine: