Homework due Saturday, July 8

Since we will not be meeting for two weeks, this homework assignment does double duty and has two parts. Everyone must complete Part I as described below. For Part II, you have a choice between options A and B.

Part I: Redesign For Tables

Rebuild all the pages in your current Web site using a layout table to fix page width at 600 pixels. At minimum you may simply create a one-row, one-cell table with all page content poured into the lone TD container. You may also add rows, columns, or subsidiary tables for more sophisticated layout concepts. Feel free to experiment with BGCOLOR and BACKGROUND for visual effects.

If your imagemapped navigation graphic (last week's homework) is wider than 600 px, you'll need to scale it down, ideally in a graphics program, not simply by changing the WIDTH and HEIGHT attributes. Note that if you do this you will have to adjust the references in your MAP container; the hot spots will have moved. If your navigation graphic is less than 600 pixels, there's no problem.

Part II: Working with Frames

Do either A or B:

Option A: Redesign Your Web Site for Frames

  1. Create a new folder within your personal folder and name it frameVersion. Copy into this folder (i.e., don't simply move) each of your existing pages plus your entire images folder with all its contents.


  2. Find the copy of your index.html page that you moved into frameVersion. Rename it start.htm.


  3. Within frameVersion create a frameset page named index.html. Your frameset should specify two columns called "toc" and "content," with width of 100 and 500 px respectively. The SRC for the left frame ("toc") should be toc.htm (which we'll create in the next step). The SRC for the right frame ("content") should be start.htm.


  4. Create a new page called toc.htm. This is a conventional HTML page, not a frameset page. On this page set up five text links, one for each of the pages in your Web site. Remember to set TARGET to "content" for each link.


  5. Adjust the page width (i.e., the WIDTH attribute in the main layout table) from 600 to 500 for each of the site pages within frameVersion. (Leave the original versions of your page, outside this folder, at 600.)


  6. Test your frames version. Remember that the starting point for this set of pages is one level below the start point for your initial Web site, i.e., within frameVersion. Clicking on a link in the lefthand frame ("toc") should bring up the desired page in the right frame.

Option B: Create a Frames-Based Web Kaleidoscope

This assignment is based on a simple demonstration project which you can view here. All the component files for this demo are in the kaleidoscope folder within introShared on Cow.

  1. Create a new folder within your personal folder. Name this folder kaleidoscope. Within that folder create six subfolders called streamA, streamB, streamC, streamD, streamE, and streamF.


  2. Within kaleidoscope create a frameset page called index.html. Set up a frames grid with three columns and two rows (six frames total). Each frame should be 200x200 pixels. This task is a little complicated. Try to figure it out on your own, or consult the class notes. If all else fails, look at the shared files on Cow.


  3. The SRC for each frame in your grid should be a page within one of your six "stream" folders, A through F. You can name these pages anything you like.


  4. Use the META/refresh technique to set up an automatic flip on all or some of the pages in your stream folders, so that the contents of your frame grid change automatically. For reference, the form of the META tag is:


    5. <META HTTP-EQUIV="Refresh" CONTENT="[delay in seconds]; URL=[nextPage].htm">

    Note the odd placement of the quotation marks in the CONTENT attribute. This is not a typo. The string "URL=" may look like a separate attribute (and probably should have been) but it's actually within the double quotes that follow CONTENT=.

    This tag goes into the HEAD container of your document.

  5. The content, pacing, and number of your "stream" pages is up to you. Note that the last page within any flip sequence presents an interesting design question. If you link it back to the first page in that sequence, you have a loop. If you include no META tag on this page, the sequence simply stops. You might also link the last page of one sequence to the first page of another. See what you can create.