VerticalResponse Cheat Sheet

As of February 2009

Sample source file listing

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  <title>Explorations in Math: Helping Elementary Students Succeed in Math</title>
  <meta http-equiv="description" content="Explorations in Math is dedicated to helping elementary students succeed in Math! Our teachers work in the schools, during regular class schedules as a year long guest teacher and in after school clubs and activities, helping Math Make Sense to all students. ">
  <meta name="keywords" content="Exploration, Math, Mathematics, standardized tests, math clubs, chess clubs, creative curriculum, math camp">
  <link href="https://www.explorationsinmath.org/images/styles.css" rel="stylesheet" rev="stylesheet">
  
			FYI: this cascading style sheet [styles.css] in located on the EIM Web Site in the /images directory
					images referenced by cascading style sheet are also located in the /images subdirectory
		
 </head>
 <body>
  <table align="center" width="752px" border="0" cellspacing="0" cellpadding="0">
   <tr>
    <td colspan="3"><img src="https://proxy.pcdn.vresp.com/68e8792f5/www.explorationsinmath.org/images/top.gif" alt="Explorations in Math: Helping Elementary Students Succeed in Math" name="EIM Web Logo" width="780" height="69" /> </td>
   </tr>
   <tr>
    <td colspan="2" id="nav-container">
     <div id="nav-menu">
      <span style="float:left;text-align:left; font-size:20px; color: #FFFFFF; font-weight:bolder;margin-left: 20px;">
       March 2009 [Change the Month Year]
      </span>
      <span style="float:right;text-align:right; font-size:20px; color:#FFFFFF; font-weight:bolder; margin-right: 20px;">
       Beyond The Numbers [change the E-Newsletter title]
      </span>
     </div>
    </td>
    <td width="24" style="border-left: 1px solid #ffca5f;background-color: #cc2229;"> </td>
   </tr>
   <tr>
    <td width="171" valign="top" style="background-color: #ffe4af;">
		<!-- TemplateBeginEditable name="leftside_header_logo" --> 
		<!-- TemplateEndEditable -->
     <div id="leftsidebar-menu">
      <ul>
       <li>
        <a href="#"> Table Of Contents </a>
       </li>
	   [change the E-Newsletter TOCs]
       <li>
        <a href="#newsitem1">Math Integration</a>
       </li>
       <li>
        <a href="#newsitem2">Integration with Dave</a>
       </li>
       <li>
        <a href="#newsitem3">Teacher Challenge</a>
       </li>
       <li>
        <a href="#newsitem4">Web Resources</a>
       </li>
      </ul>
     </div>
     <div id="leftcontact">
      <br />
      <strong>Contact</strong> Explorations in Math at <a href="mailto:info@eimath.org">info@eimath.org </a>
     </div>
     </div>
     <br />
     <!-- TemplateBeginEditable name="leftside_quote" -->
     <div id="leftsidebar-quote">[change E-Newsltter leftsidebar-quote]</div>
     <div id="#elliottquote" style="text-align:justify;font-size:11px;">
	 [change E-Newsltter elliottquote]
	
      <p align="center">
       <strong>Reflections of Family Math Night at the New School </strong>
       <br>
       <img src="https://img.pcdn.vresp.com/media/9/d/1/9d184955b5/4c8bf36bcc/2d62260b46/library/IMG_2112.jpg" vspace="10" border="1">
      </p>
      <p>"Math makes me feel happy. I like math because you get to work with numbers."</p>
      <p>Alia Bash, Kindergarten Student</p>
      <p align="center">
       <img src="https://img.pcdn.vresp.com/media/9/d/1/9d184955b5/4c8bf36bcc/2d62260b46/library/IMG_2105.jpg" vspace="10" border="1">
      </p>
      <p>"Explorations in Math gets (kids) excited about math and we have to keep them excited about math. When I was growing up, I just up a big block up and didn't want to do anything with math...as long as you introduce them to all these different ways to learn math, that is a great opportunity for them."</p>
      <p>Althea Glass, Parent of twin daughters in fourth grade</p>
      <p align="center">
       <img src="https://img.pcdn.vresp.com/media/9/d/1/9d184955b5/4c8bf36bcc/2d62260b46/library/IMG_2099.jpg" vspace="10" border="1">
      </p>
      <p>"Math should be fun. We spend so much time doing worksheets in class and repetitive skills, we get so caught up in the process of the work that we forget to have fun doing it, to enjoy it and put it into real life to see this is just another way math is used."</p>
      <p>Chantel Anderson, Pre-K Teacher</p>
	
     </div>
     <!-- TemplateEndEditable -->
    </td>
    <td width="585" valign="top" style="padding-bottom: 3px;padding-left: 3px;padding-right: 3px;padding-top: 3px;">
	<!-- TemplateBeginEditable name="editable_content_here" -->
	[change E-Newsltter Content. For each Header & Body text]
     <p class="subhead12">
      <a name="newsitem1"></a> <strong>MATH IN THE ART ROOM? HECK, YEAH!</strong>
     </p>
     <p class="bodynorm">
      Research indicates that using an interdisciplinary or integrated curriculum provides opportunities for more relevant, less fragmented, and more stimulating experiences for learners. In EIM’s experience, integrating math curriculum into other subject areas is a wonderful opportunity to engage students. Here are what some EIM partnership schools are doing to integrate math across the curriculum:
     <ul>
      <li class="bodynorm">
       Literacy Coach Andrea Smith and Math Coach Marlene Boone are teaming at John Muir to integrate reading comprehension strategies into mathematical word problem solving. The response from teachers and students so far is encouraging.
      <li class="bodynorm">
       Van Asselt Elementary recently produced a family math night event that married music and math. Staff and 5th grade students used fractions to explain the quarter, half and whole notes. Each classroom developed their own eight beat rhythms in which all participants later shared in the cafeteria in a rousing finale.
      <li class="bodynorm">
       TT Minor’s former art teacher, Shellwyn Badger, took every opportunity to integrate math into student art. Whether cutting geometric shapes to make a quilt or mural or measuring string and ribbons, Ms. Badger helped students receive further reinforcement of math skills and concepts.
      <li class="bodynorm">
       PE teachers at many EIM partner schools have been reinforcing math skills and concepts by skip counting scores, measuring distance with pedometers, heartbeats with heart rate monitors as well as playing creative fitness games like odd/even tag and fitness bingo.
     </ul>
     </p>
     <p class="bodynorm">
      For your next family night, consider combining math and science or asking your enrichment teachers to get on board supporting math skills and concepts. The more students are exposed to the integration of math in other subject areas, the more aware they become that math is relevant, fun and part of everyday life. Stumped for ideas? Many other examples of integrating math across the curriculum can be found at the NCTM website,<a href="mailto:https://www.nctm.org/"> https://www.nctm.org/ </a>
     </p>
     <hr align="center" width="450" noshade style="color:#ffe4af">
     <p class="subhead12">
      <a name="newsitem2"></a> <strong>INTEGRATING MATH: A Personal View from EIM Head Teacher, Dave Gardner</strong>
     </p>
     <p class="bodynorm">
      Historically, one of the problems besetting math instruction has been treating it as if it were a subject in isolation, divorced from all other curriculum areas and even from the “real world”. Math is not a disjointed, discrete collection of facts, figures, algorithms, formulas and procedures to be memorized, regurgitated and then forgotten; math is all about making connections. Good math instruction demands that we do just that when we teach.
     </p>
     <p class="bodynorm">
      A good example of making connections across the curriculum is present in the 4th and 5th grade Everyday Math textbook: each book contains an extensive atlas (a world atlas for 4thgrade, a U.S. atlas for 5thgrade.) During the course of the year, students are asked to plan a trip using the atlas. Do these fantasy trips involve math? Of course. Students have to calculate distances, dates and times and must apply their knowledge of map scale. And doing this activity in a small group (another math best practice) provides opportunities for students to present their mathematical ideas to their peers, and, in turn, listen to the ideas of others. It’s an opportunity to challenge and to justify.
     </p>
     <p class="bodynorm">
      Another example I can provide is from my own career. When I taught 5th grade U.S. History, I integrated math and geography into the history curriculum For instance, students were to select five important Civil War battles and find the total number of casualties. Then, I asked them to use a Washington state atlas to find towns and cities whose population equaled (or came close to) the total of battlefield casualties. Aside from the skills involved, it brought home a little more forcefully what it means when, say, 17,000 people are killed in battles. I also asked them to use map scale to determine the distance covered by Sherman’s march to the sea. Integrating math in this manner (and you are limited only by your imagination), makes math more relevant and more meaningful to students. They see that math is a useful tool; something they can use to help them understand the world better.
     </p>
     <hr align="center" width="450" noshade style="color:#ffe4af">
     <p class="subhead12">
      <a name="newsitem3"></a> <strong>TEACHER CHALLENGE</strong>
     </p>
     <p class="bodynorm">
      A square brick wall is one row of bricks higher and one column of bricks narrower than another wall. How many more bricks are there in the square wall?
     </p class="bodynorm">
     <p class="bodynorm">
      Email responses to <a href="mailto:jenniferga@eimath.org">jenniferga@eimath.org </a> and you may win a game for your classroom.
     </p class="bodynorm">
     <p class="bodynorm">
      Congratulations to Coe Elementary 4/5 teacher Joe Bailey-Fogarty for winning the February teacher challenge!
     </p>
     <p class="bodynorm">
     </p>
     <hr align="center" width="450" noshade style="color:#ffe4af">
     <p class="subhead12">
      <a name="newsitem4"></a> <strong>WEB RESOURCES</strong>
     </p>
     <p class="bodynorm">
      Here are some great websites from NCTM, (National Council of Teachers of Mathematics) which you may find helpful to you and your students.
     <ul>
      <li class="bodynorm">
       Math Starter of the Day offers a daily math problem, ranging from puzzles, speed tests and creative ideas to start math lessons.
       <br>
       <a href="https://cts.vresp.com/c/?ExplorationsinMath/4c8bf36bcc/f9777d3092/b995556747"> www.transum.org/starter </a>
	   
      </li>
      <li class="bodynorm">
       Time Monsters offers interactive online lessons and quizzes about time.
       <br>
       <a href="https://cts.vresp.com/c/?ExplorationsinMath/4c8bf36bcc/f9777d3092/27eed1ec94"> www.timemonsters.com </a>
	   
      </li>
      <li class="bodynorm">
       Numbers Made Meaningful provides free, teacher tested math stories and games based on the story Trouble with Zero, for Pre-K through grade 1.
       <br>
       <a href="https://cts.vresp.com/c/?ExplorationsinMath/4c8bf36bcc/f9777d3092/811c72bc7b"> www.numbersmademeaningful.com </a>
	   
      </li>
     </ul>
     </a>
     </p>
     <p class="bodynorm">
     </p>
	 [stop editing]
     <!-- TemplateEndEditable --> </td>
    <td width="24" style="border-left: 1px solid #ffca5f;"> </td>
   </tr>
   <tr>
    <td colspan="3"><img src="https://proxy.pcdn.vresp.com/3658a3688/www.explorationsinmath.org/images/bottom.gif" width="780" height="45" /> </td>
   </tr>
  </table>
 </body>
</html>
		

Steps To Be Used In Changing Text

  1. Login to the VerticalResponse Account
  2. Upload Your List(s)
  3. Upload (or Find) Your Images
  4. Edit Your Images
    The <div id="leftsidebar-menu"> is 170 pixels wide, and the images are coded as having a 10 pixel vertical spacing (above and below) before text will be displayed.
    Images in the <div id="leftsidebar-menu"> should not greater than 150 pixels in width.
  5. Edit Your Email Campaign

styles.css Reference Listing

There are three (3) categories of ccs statements

  1. elements - over default HTML tag behavior
  2. class - allows the same element to have different styles
  3. ID Selectors - individually assigned for the purpose of defining on a per-element basis.
a {
text-decoration: none;
}
#wrap {
width:48.75em;
height:100%;
background-color:#ffe4af;
margin:0px;
padding-left: 0em;
}
#headerlogo {
background-image: url(https://www.explorationsinmath.org/images/top.gif);
background-color: #FFFFFF;
background-repeat: no-repeat;
height:69px;
margin:0px;
padding-bottom: 0px;
display:block
}
body {
margin-left:0px;
margin-top:0px;
}
body a {
color: #cc2229;
}
.sidequote {
font-size: 9px;
line-height: 18px;
font-family: Verdana, Geneva, Arial, sans-serif;
color: #000000;
margin-left: 0px;
letter-spacing: 0px;
word-spacing: 0px;
}
.bodysmallgrey {
font-size: 9px;
line-height: 14px;
font-family: Verdana, Geneva, Arial, sans-serif;
color: #666666;
margin-left: 0px;
letter-spacing: 0px;
word-spacing: 0px;
}
.bodynorm {
font-size: 10px;
line-height: 14px;
font-family: Verdana, Geneva, Arial, sans-serif;
color: #000000;
margin-left: 0px;
letter-spacing: 0px;
word-spacing: 0px;
}
.bodyspaced {
font-size: 10px;
line-height: 20px;
font-family: Verdana, Geneva, Arial, sans-serif;
color: #000000;
margin-left: 0px;
letter-spacing: 0px;
word-spacing: 0px
}
.bullets {
font-size: 10px;
line-height: 20px;
list-style-type: square;
font-family: Verdana, Geneva, Arial, sans-serif;
color: #000000;
margin-left: 0px;
letter-spacing: 0px;
word-spacing: 0px;
font-style: italic;
}
.eventtext {
font-size: 13px;
line-height: 20px;
font-family: Verdana, Geneva, Arial, sans-serif;
color: #000000;
margin-left: 0px;
letter-spacing: 0px;
word-spacing: 0px
}
.subhead12 {
font-size: 12px;
line-height: 20px;
font-family: Verdana, Geneva, Arial, sans-serif;
color: #000000;
margin-left: 0px;
letter-spacing: 0px;
word-spacing: 0px
}
.subhead12redbold {
font-size: 12px;
line-height: 20px;
font-family: Verdana, Geneva, Arial, sans-serif;
color: #000000;
margin-left: 0px;
letter-spacing: 0px;
word-spacing: 0px;
font-weight: bold;
text-decoration:underline;
}
.impact {
font-size: 20px;
line-height: 20px;
font-family: Verdana, Geneva, Arial, sans-serif;
color: #000000;
margin-left: 0px;
letter-spacing: 0px;
word-spacing: 0px;
text-align:center;
}
.subhead12 a {
color: #cc2229;
}
.subhead14 {
font-size: 14px;
font-weight:bold;
line-height: 34px;
font-family: Verdana, Geneva, Arial, sans-serif;
color: #000000;
margin-left: 0px;
letter-spacing: 0px;
word-spacing: 0px
}
.bodysmall1 {
font-size: 9px;
line-height: 12px;
font-family: Verdana, Geneva, Arial, sans-serif;
color: #666666;
margin-left: 0px;
letter-spacing: 0px;
word-spacing: 0px
}
#nav-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
#nav-menu li {
float: left;
margin: 0 0.15em;
text-align: center;
font-size:14px;
font-weight:bold;
line-height: 2.35em;
}
#nav-menu li a {
background-color: #cc2229;
height: 3em;
line-height: 2.35em;
float: left;
width: 7.9em;
height:2.35em;
display: block;
color: #FFFFFF;
text-decoration: none;
text-align: center;
font-size:14px;
font-weight:bold
}
#nav-menu li a:hover {
background-image: url(../../newsletters/images/border.gif);
background-repeat:no-repeat;
background-position: 5px;
background-color: #cc2229;
height: 3em;
line-height: 2.35em;
float: left;
width: 7.9em;
height:2.35em;
display: block;
color: #FFFFFF;
text-decoration: none;
text-align: center;
font-size:14px;
font-weight:bold
}
#nav-menu li a:active {
background-image: url(../../newsletters/images/border.gif);
background-repeat:no-repeat;
background-position: 5px;
background-color: #cc2229;
height: 3em;
line-height: 2.35em;
float: left;
width: 7.9em;
height:2.35em;
display: block;
color: #FFFFFF;
text-decoration: none;
text-align: center;
font-size:14px;
font-weight:bold
}
/* Hide from IE5-Mac \*/
#nav-menu li a {
float: none
}
/* End hide */
#nav-menu {
background-color:#cc2229;
height:2.2em;
width:47.55em;
border-right:1px solid #ffca5f;
margin-bottom: 0px;
padding-bottom: 0px;
display:block;
float:left;
}
#nav-container {
background-color:#cc2229;
height:2.2em;
}
#navcap {
background-color:#cc2229;
height:2.2em;
width:auto;
z-index:100;
float:right;
}
#leftsidebar {
background-color:#ffe4af;
width: 171px;
float:left;
height:100%;
margin-bottom:0px;
}
#leftsidebar-logo {
background-image: url(../../newsletters/images/head_home.jpg);
background-repeat:no-repeat;
height:10em;
width:171px;
padding-bottom: 8px;
}
#leftsidebar-quote {
position: relative;
top: 50px;
font-size: 11px;
text-align: left;
width: 140px;
margin-left: auto;
margin-right: auto;
}
#elliottquote {
font-size: 9px;
line-height: 18px;
font-family: Verdana, Geneva, Arial, sans-serif;
color: #000000;
margin-left: 0px;
letter-spacing: 0px;
word-spacing: 0px;
display:none;
}
#leftsidebar-menu {
width: 171px;
margin: 0px;
}
#leftsidebar-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
#leftsidebar-menu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
font-weight: bold
}
#leftsidebar-menu li a:link, #leftsidebar-menu li a:visited {
color: #FFF;
display: block;
background:  url(../../newsletters/images/menu5.gif);
padding: 8px 0 0 10px;
}
#leftsidebar-menu li a:hover {
color: #FFF;
background:  url(../../newsletters/images/menu5.gif) 0 -32px;
padding: 8px 0 0 10px;
}
#leftcontact {
font-size: 10px;
line-height: 20px;
font-family: Verdana, Geneva, Arial, sans-serif;
margin-left: 0px;
letter-spacing: 0px;
word-spacing: 0px;
position:relative;
top:30px;
left:5px;
}
#mainbody {
background-color:#ffffff;
text-align: left;
width:607.5px;
float:right;
height:100%;
margin-bottom:0px;
}
#bodytext {
background-color:#ffffff;
border-right:1px solid #ffca5f;
width: 556.4px;
min-height:400px;
height:100%;
float:left;
padding-left:1em;
padding-right:1em;
padding-top:1em;
margin-bottom:0px;
}
#content {
width: 550px;
max-width: 550px;
min-height:400px;
height:100%;
margin-bottom:0px;
}
#spacer {
height:35px;
width: 0px auto;
}
#mathfest-menu {
width:100%;
height:100%
}
#mathfest-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
#mathfest-menu li {
list-style: none;
padding: 0;
margin: 0;
float:left;
margin: 0 0.15em;
}
#mathfest-menu li a {
border-left:1px solid #000000;
padding-left: .5em;
padding-right: .5em;
font-size: 12px;
}
#rightline {
background-color:#ffffff;
height:100%;
width:7.27em;
float:right
margin-bottom:0px;
}
#newslettercontainer {
width:550px;
height:750px;
font-size: 12px;
line-height: 14px;
font-family: Verdana, Geneva, Arial, sans-serif;
letter-spacing: 0px;
word-spacing: 0px;
}
#donatediv {
width:550px;
height:auto;
}
.label {
float:left;
margin-right:20px;
width:100px;
height:auto;
}
.error {
font-family: Tahoma;
font-size: 8pt;
color: red;
display:none;
}
#mathfest07nav {
display:none;
}
#wineimg {
background-image: url(images/MM4Math09eGraphic.jpg);
background-repeat: no-repeat;
float:right;
margin-left:auto;
margin-right: auto;
margin-bottom: 10px;
height: 184px;
background-position:center;
display:block;
width:100%;
}
.Section1 {
width:500px;
height:auto;
}
.MsoNormal {
width:500px;
height:auto;
}
.MsoBodyText {
width:530px;
height:auto;
}
#eventtext {
font-size:11px;
font-family: Verdana, Geneva, Arial, sans-serif;
}
#newsletterlist {
line-height:30px;
}
#footer {
clear:both;
width:780px;
height:60px;
background-color:#fff;
}
#footertest {
background-image: url(../../newsletters/images/leftbottom.gif);
background-repeat:no-repeat;
background-color:#ffffff;
height: 45px;
width:172px;
float:left;
}
#footerright {
background-color:#ffffff;
height: 45px;
width:608px;
float:right;
}
#footerline {
background-color:#ffffff;
border-right:1px solid #ffca5f;
border-bottom:1px solid #ffca5f;
height: 23px;
width:589px;
float:left;
}

Web Design Group

The Web Design Group was founded to promote the creation of non-browser specific, non-resolution specific, creative and informative sites that are accessible to all users worldwide. To this end, the WDG offers material on a wide range of HTML related topics. We hope that with this site as a reference, you will be able to create Web sites that can be used by every person on the Internet, regardless of browser, platform, or settings.