STEP ONE:

Make a folder called 1930s2 on your hard drive, and within that make a folder named Time, and within that a folder named after your year, e.g. 1938. Copy down the file that has the content of your timeline. You may need to view the source of your timeline page online to see what page the frame is pointing to--naming has been inconsistent. I would recommend making a 1938 folder and copying down my file, 1938fr2.html, for reference. Also copy down the timemenu folder that is one level above the year folders--this has the nav bar images. Copy down timeline.css, which is in the Time folder , and keep the same relative path.

Replace the html code with the code from the 1938 file or the source of the file (copied below as an example), replacing the first table tag and stopping 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 code also links you to the stylesheet.

<!-- 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 stylesheet. You should now be able to change the months formatting from font tags to a specific months style (viewable from the properties palette or the design palette, depending on what version you DW you have). 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 in the left-most column (below the Science and Technology graphic) 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, which may be at the end to the right or on the bottom of your row. The new 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.
You can run a find/replace on the color. E.g. replace bgcolor=”#ffcc33" with class=”green”

This allows us to change colors by just changing the style sheet. But it may not work great in Netscape 4 browsers and older.