STEP ONE:

Replace the html code with the following, up to right before the first <tr><td> tags that begin the politics and society row. The new code includes the header information, javascript functions, and the beginning of the table and the first two rows, which is now where the navigation bar is. You’ll need to replace the title info with your own, as well as the meta tags. This also connects you to the stylesheet, but you’ll need to copy the stylesheet down to your hard drive (or wherever you’re working) to be able to apply them through the properties palette.

<!-- Begin paste-->
<html>
<head>
<!-- Change title here-->
<title>1938 Timeline</title>
<!-- Change meta tags-->
<meta name="keywords" content="1938 timeline, American studies, 1930s America">
<meta name="description" content="A multimedia timeline of events in America in 1938.">

<SCRIPT LANGUAGE="JavaScript">

function Start(page) {
EditionsWin = this.open(page, "EditionsWindow", "toolbar=no,menubar=no,location=no,scrollbars=yes,resizable=yes,height=300,width=400,left=175,top=100");EditionsWin.focus();
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

//-->
</SCRIPT>

<!--this links to stylesheet-->
<link href="../timeline.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--
body {
background-color: #000000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
</HEAD>

<BODY onLoad="MM_preloadImages('../timemenu/yearinrev_over.gif')">

<TABLE border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="700">
<!-- fwtable fwsrc="timeline.png" fwbase="timemenu.gif" fwstyle="Dreamweaver" fwdocid = "605270610" fwnested="1" -->
<tr>
<td><a href="../timefr.html" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('timemenu_r1_c1','','../timemenu/timemenu_r1_c1_f2.gif',1);"><img name="timemenu_r1_c1" src="../timemenu/timemenu_r1_c1.gif" width="131" height="88" border="0" alt="Exit Timeline"></a></td>
<td><table align="left" border="0" cellpadding="0" cellspacing="0" width="569">
<tr>
<td><img name="timemenu_r1_c2" src="../timemenu/timemenu_r1_c2.gif" width="569" height="17" border="0" alt=" "></td>
</tr>
<tr>
<td><table align="left" border="0" cellpadding="0" cellspacing="0" width="569">
<tr>
<td><img name="timemenu_r2_c2" src="../timemenu/timemenu_r2_c2.gif" width="123" height="71" border="0" alt="Select a Year"></td>
<td><table align="left" border="0" cellpadding="0" cellspacing="0" width="49">
<tr>
<td><a href="../1929/1929fr.html" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('timemenu_r2_c3','','../timemenu/timemenu_r2_c3_f2.gif',1);"><img src="../timemenu/timemenu_r2_c3.gif" alt="1929" name="timemenu_r2_c3" width="49" height="18" border="0" onload="MM_preloadImages('../timemenu/timemenu_r1_c1_f2.gif','../timemenu/timemenu_r2_c4_f2.gif','../timemenu/timemenu_r2_c5_f2.gif','../timemenu/timemenu_r2_c6_f2.gif','../timemenu/timemenu_r2_c6_f2.gif','../timemenu/timemenu_r3_c3_f2.gif','../timemenu/timemenu_r3_c4_f2.gif','../timemenu/timemenu_r3_c5_f2.gif','../timemenu/timemenu_r3_c6_f2.gif','../timemenu/timemenu_r4_c3_f2.gif','../timemenu/timemenu_r4_c4_f2.gif','../timemenu/timemenu_r4_c4_f2.gif','../timemenu/timemenu_r4_c5_f2.gif','../timemenu/timemenu_r4_c6_f2.gif')"></a></td>
</tr>
<tr>
<td><a href="../1933/1933fr.html" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('timemenu_r3_c3','','../timemenu/timemenu_r3_c3_f2.gif',1);"><img name="timemenu_r3_c3" src="../timemenu/timemenu_r3_c3.gif" width="49" height="19" border="0" alt="1933"></a></td>
</tr>
<tr>
<td><a href="../1937/1937fr.html" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('timemenu_r4_c3','','../timemenu/timemenu_r4_c3_f2.gif',1);"><img name="timemenu_r4_c3" src="../timemenu/timemenu_r4_c3.gif" width="49" height="34" border="0" alt="1937"></a></td>
</tr>
</table></td>
<td><table align="left" border="0" cellpadding="0" cellspacing="0" width="53">
<tr>
<td><a href="../1930/1930fr.html" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('timemenu_r2_c4','','../timemenu/timemenu_r2_c4_f2.gif',1);"><img name="timemenu_r2_c4" src="../timemenu/timemenu_r2_c4.gif" width="53" height="18" border="0" alt="1930"></a></td>
</tr>
<tr>
<td><a href="../1934/1934fr.html" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('timemenu_r3_c4','','../timemenu/timemenu_r3_c4_f2.gif',1);"><img name="timemenu_r3_c4" src="../timemenu/timemenu_r3_c4.gif" width="53" height="19" border="0" alt="1934"></a></td>
</tr>
<tr>
<!--Take out the _f2 on this image. Add _f2 to the end of the image name of YOUR year-->
<td><a href="../1938/1938fr.html" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('timemenu_r4_c4','','../timemenu/timemenu_r4_c4_f2.gif',1);"><img name="timemenu_r4_c4" src="../timemenu/timemenu_r4_c4_f2.gif" width="53" height="34" border="0" alt="1938"></a></td>
</tr>
</table></td>
<td><table align="left" border="0" cellpadding="0" cellspacing="0" width="53">
<tr>
<td><a href="../1931/1931fr.html" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('timemenu_r2_c5','','../timemenu/timemenu_r2_c5_f2.gif',1);"><img name="timemenu_r2_c5" src="../timemenu/timemenu_r2_c5.gif" width="53" height="18" border="0" alt="1931"></a></td>
</tr>
<tr>
<td><a href="../1935/1935fr.html" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('timemenu_r3_c5','','../timemenu/timemenu_r3_c5_f2.gif',1);"><img name="timemenu_r3_c5" src="../timemenu/timemenu_r3_c5.gif" width="53" height="19" border="0" alt="1935"></a></td>
</tr>
<tr>
<td><a href="../1939/1939fr.html" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('timemenu_r4_c5','','../timemenu/timemenu_r4_c5_f2.gif',1);"><img name="timemenu_r4_c5" src="../timemenu/timemenu_r4_c5.gif" width="53" height="34" border="0" alt="1939"></a></td>
</tr>
</table></td>
<td><table align="left" border="0" cellpadding="0" cellspacing="0" width="52">
<tr>
<td><a href="../1932/1932fr.html" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('timemenu_r2_c6','','../timemenu/timemenu_r2_c6_f2.gif',1);"><img name="timemenu_r2_c6" src="../timemenu/timemenu_r2_c6.gif" width="52" height="18" border="0" alt="1932"></a></td>
</tr>
<tr>
<td><a href="../1936/1936fr.html" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('timemenu_r3_c6','','../timemenu/timemenu_r3_c6_f2.gif',1);"><img name="timemenu_r3_c6" src="../timemenu/timemenu_r3_c6.gif" width="52" height="19" border="0" alt="1936"></a></td>
</tr>
<tr>
<td><a href="../1940/1940fr.html" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('timemenu_r4_c6','','../timemenu/timemenu_r4_c6_f2.gif',1);"><img name="timemenu_r4_c6" src="../timemenu/timemenu_r4_c6.gif" width="52" height="34" border="0" alt="1940"></a></td>
</tr>
</table></td>
<td><img name="timemenu_r2_c7" src="../timemenu/timemenu_r2_c7.gif" width="239" height="71" border="0" alt="Key: Politics and Society, Science and Technology, Arts and Culture, World"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>

</td>
</tr>
</table>

</td>
</tr>
<tr><td><img src="../timemenu/timemenu_r1_c2.gif" width="10" height="3" border="0" alt=" "></td></tr>

<!--END PASTE-->

STEP TWO:

The new code links to a style sheet. You should now be able to change the months formatting from font tags to a specific months style (viewable from the properties palette). If you prefer to paste code, for example, use: <span class="months">January 1938</span>. Take out the extra font tags.

STEP THREE:

Replace left-hand Politics and Society, etc. with images using the following code pasted in related cells:
<img src="../timemenu/politics.gif" alt="Politics and Society" width="100" height="28">

<img src="../timemenu/science.gif" alt="Science and Technology" width="100" height="28">

<img src="../timemenu/culture.gif" alt="Arts and Culture" width="100" height="28">

<img src="../timemenu/world.gif" alt="World" width="100" height="28">

STEP FOUR:
Replace the year with

<img src="../timemenu/1938.gif" alt="1938" width="100" height="23">
Change the year according to what year you have. E.g., 1937 would be <img src="../timemenu/1937.gif" alt="1938" width="100" height="23">

STEP FIVE:

Add the film in review image and apply the link from the old graphic. Th enew image goes in the cell above the Politics and Society Graphic.

e.g.

<a href="yearreview38.html" onMouseOver="MM_swapImage('yearinrev','','../timemenu/yearinrev_over.gif',1)" onMouseOut="MM_swapImgRestore()"> <img src="../timemenu/yearinrev.gif" alt="Year in Review" name="yearinrev" width="100" height="38" border="0" id="yearinrev"></a>

IF YOU HAVE TIME:

For the text inside the cells, take out the font tags and apply the style bodytext (e.g., <span class=”bodytext”>texttext</span> or <li class=”bodytext”>)

If the previous timeline editor used a variety of font tags, you can search for them by looking for <font

I also made a style for the colors of the different categories. They are named green, blue, yellow, and orange. If you choose to apply these to cell tags, you can take out the bgcolor= stuff.
E.g. <td class=”green”> instead of <td bgcolor=”#ffcc33">

This allows us to change colors by just changing the style sheet. But it may not work great in Netscape 4 browsers and older–I’ll have to check when I’m back at work.