Watercolor Paintings by Demo Artist (demo)

This is a demo site called "art demo." Trying an all CSS layout is tricky here. Worse than differences in image sizes, is variations in their "aspect ratios." The best solution would be to resize original images so browser is not overloaded with this task at runtime.

In this example, prospective client had multiple file categories but wanted 3 images displayed. We suggested 3 broad categories under which sub-categories could be grouped (e.g., paintings, illustrations, prints or log). We would then link each image/caption to given sub-category page and, perhaps, a drop-down menu showing sub-categories. In either case, the viewer would be forced to do extra clicking to get to content. In some ways, site navigation or information architecture is a more critical consideration than the graphics.

For this layout, we centered the images and resized them using a CSS “picbox” class. We also added a script from http://javascript.internet.com/image-effects/image-captions.html, which uses <img> TITLE attribute to create caption for images.

This sample demo page is index.html. Our favorite approach for an artist who does not have one signature image or logo is index.htm which has a timed JavaScript slideshow displaying multiple images. See indexRandom.html for one set of random loaded images, but cannot get 3 sets (different positions) to work at indexRandom3.html. See also indexCol.html (which has columns), indexRow.html (which has columns and rows), indexTable.html (experimenting with image sizing and positioning), and indexCSS.html (another CSS layout).

Credits: Web design and animation by Denise deGoumois http://www.auntnini.com.

See also JacquiMorgan.Tripod.com demo site.

Your computer shows TODAY is: . ENJOY!

Paintings

Prints

Illustrations