CSc 302 Assignment 5
50 pts |
Image Layout |
Due: Mar. 6 |
For this project you are to create a collection of pages which provide a
display of images with a thumbnail index. I've demonstrated a sample in
class. Here are a couple of screen shots of that:
My collection contains seven images, which are displayed on
seven pages with similar layout. Each contains the
same top text and the same index at the left. When you click on one of
the thumbnails, it links to a different page, but since the layout is similar,
only the large image and the text at the lower left change, since the new page
is the same in other respects.
You are to create something like this, using whatever images you like,
under the following requirements:
- Display at least five images. More is fine. You may use any images
you are legally allowed to use, and which you would not be embarrassed to
show to your mother. Feel free to show pictures from your digital
camera, or from on-line sources. As mentioned earlier,
The Open Clip-Art Library is
a good source, and my example uses pictures from
the Gutenberg Project. The
Wikipedia also has
some unencumbered images; check the conditions for the specific image
you wish to use.
- Display them in a collection of similar pages that creates a thumbnail
index and a main display area. The index should be at the left, and each
thumbnail should be accompanied by a short title or description. Otherwise,
lay out the index as you prefer.
- Use an external style sheet shared by all your image pages.
- The main image should be accompanied by a longer description or
comment. Mine is in the lower left of the page, but you may place it
wherever you like.
- Clicking on the thumbnail should load the page showing the corresponding
large image. Thumbnails should be recognizable, but
no larger than 100x100. The main image should be no larger than 600x600, and
should have at least one dimension over 400. If you need to resize an
image, you can use a nice, very capable free program
such as the Gimp, but even the
lowly Windows paint program
can resize a JPEG. Load the image into paint, then try Image/Stretch and Skew.
Stretch it the same amount in each direction to get a resize.
- Choose an attractive page layout.
Try to avoid
to scrolling when the window is of a reasonable size. If you have many
images and your index is large,
you might want to put it in its own <div> and have a look at
the overflow
property to attach a scroll bar to just your index.
- Choose an attractive color scheme and apply it consistently.
- Give a thought for borders around the various parts. I didn't use any
because they seemed to clutter the rather spare images I was displaying. You
might find a border looks nice. Note that a border applied one one side
of a box or image can
form a nice divider.
- Notice that my pictures were generally vertical. If you have
images from a camera, yours may be more horizontal. This may indicate
a different sort of arrangement.
- I used a table to lay out my page, but it can be done entirely with
style sheets if you like.
- Create a directory (folder) on the server to hold all your pages and
images. Name your folder asst5, and name the first page to
visit index.html so that I can evaluate your project starting from the
URL http://sandbox.mc.edu/youraccout/asst5/index.html.
You can use WinSCP to create your folder, or the Unix mkdir command
from a login window.
Creating an alias
This section is completely optional, but contains some interesting
and useful tricks.
It is quite possible to set up your pages to name the first one
index.html, and the others whatever you like, but it may be
more convenient to name all your pages in a regular way, such as
img1.html, img2.html, etc., and create an alias so
that the index.html URL will load the img1.html to
get you started. If you would like to do that, here are three ways,
any one of which will work.
- You can create a symbolic link, which is an alias in the Unix file system
something like a Windows short-cut. You'll have to do this from the command
line using putty. Move to the directory where your files are and say:
ln -s yourfilename.html index.html
This will create a special file called index.html that is simply
an alias for the yourfilename.html. Loading one will
load the other, as changing one will
immediately change the other.
This trick is Unix-specific.
- You can redirect the browser by creating the following index.html
file:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD/XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Refresh"
content="0;http://sandbox.mc.edu/~yourid/asst5/yourfilename.html">
</head>
</html>
The browser will load this file, and the <meta> tells it to immediately
load the other page in its place. Unfortunately, the standard requires
you to use an absolute URL for the new page address, though a browser
may work with a relative one anyway. The number in front of the URL is
a delay in seconds; if you use a non-zero value, you should generally provide
a body which will be displayed during the delay before the new page loads.
This trick is independent of the web server software or server os.
- You can create an .htaccess file in the asst5 directory where
your assignment files are. Notice the dot as
the first character of the file name. These files control the Apache
web server, and are specific to that variety of server.
Create the file with the following single line (or add this line if you already
happen to have an .htaccess):
RedirectMatch ^(.*)/index.html$ $1/yourfilename.html
This incantation
tells the web server that when it gets a request for index.html
it should inform the browser that it should have loaded yourfilename.html
instead, which it then will. This is a more efficient version of the
previous method, but is specific to the Apache server. It also requires
less typing, and keeps working if you rename or relocate the containing
directory.
CSc 302 Assignment 4
![[^]](http://sandbox.mc.edu/icons/local//up3.gif){kind=icon}