Setting up a frames site

To set up the frames site for My Genealogy, I created a frameset file called index.html the code for which is listed below.

<html><head><title>My Genealogy</title></head>

The head of the HTML document

Creates two frames, one 30 pixels deep at the top, one for the rest of the vertical height.
Says "put the file frame.html in the top frame as described.

Creates two more frames in the bottom frame, a bottom border 40 pixels deep and the rest of the screen above that.
Says "put the file home.html in the middle frame (called "middle).

Says, "put the file ad.html in the bottom frame, called "bottom"

To set up the top frame with the rollover menu bar, I did this:

In Adobe ImageStyler, I created a file frame
Using the Text tool, I made each name and aligned them at the top of the page.
With each text object selected chose Javascript under Window, and created different a new layer for MouseOver
Chose an appropriate Style under Window for MouseOver.
(And while I didn't do it this way, I could have)
Created a different layer for MouseDown, and using Web under Window, set the URL for the file.
Then under File I Exported the entire file as an HTML file with the name frame.html and corresponding image files where the above frame could find it.

To set up the middle frame, I created a different page for each of the buttons on top to link to.

Many of these pages were created as ordinary HTML files with Netscape Composer (Articles, Websites, Home), but some of them were created as ImageStyler documents (Timeline), one was created as an imagemap (Trees), and several of the links off of Timeline combined ImageStyler documents with HTML tables.

To set up the bottom frame, I created the ad.html as a simple HTML document.

How I made the grandparents frame in TimeLine

Photographs

Several years ago, I took photographs of my mother's old photographs and had them developed to a CD-ROM
Other photographs I scanned into the computer.
I started out with the .gif format, but have gradually moved mostly to .jpg.
I used Adobe PhotoShop to edit these photographs

Maps

Using www.mapblast.com and www.switchboard.com I saved maps of various regions as .gif or .jpg files.
I used Adobe PhotoShop to edit these photographs or to merge them.

How I put the collage together using PhotoShop and ImageStyler

In Adobe PhotoShop, I copied head and shoulder shots and saved them.
I used Adobe ImageStyler, and imported the head and shoulder shots and the maps, playing with the placement of the imported files.
I played with the Style settings and, under Properties, the Alpha Channel settings to create the cameos.
Now I exported the collage as HTML.

ImageReady

I needed to use ImageReady, because, even though you can create links from the cameos in ImageStyler, unfortunately, when images overlap, as when these images overlay the map, the rollover effect occurs whenever the mouse is over the map as well as the cameos. This is a stated limitation of the program, that for rollovers to work, the images have to be nonoverlapping.
So in ImageReady, I was able to slice the image into 5 discrete rectangles and export the image to HTML.

More ImageStyler

I then took the images that were exported from ImageReady and placed them contiguously in ImageStyler
From there, I was able to create nonoverlapping rollovers for three non-adjacent rectangles.
Now I exported the ImageStyler file with rollovers to HTML

Inserting tables

I wanted to create three columns of text falling roughly below the three grandparents panels.
I opened the HTML file from the ImageStyler export into Netscape Communicator. (I could have used PageMill or FrontPage, if I owned a copy.)
I chose Edit Source under the Edit menu and typed in the table code. (Communicator doesn't make tables easy to use.)
Alternatively, PageMill (and perhaps FrontPage) work tables much better, so I could have opened the HTML export from ImageStyler in PageMill and inserted a proper table. You can drag the borders of tables in PageMill to the shape you want, unlike with Communicator.

Created by Jim Andris, October 20, 1999.