<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- #BeginTemplate "springtime.dwt" --> <head> <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" /> <!-- #BeginEditable "doctitle" --> <title>Springtime Template</title> <!-- #EndEditable --> <!-- #BeginEditable "headsection" --> <meta content="Description of Your Site Goes Here." name="description" /> <meta content="keywords for your site here separate with commas" name="keywords" /> <!-- #EndEditable --> <meta content="en-us" http-equiv="Content-Language" /> <meta content="General" name="rating" /> <meta content="no" http-equiv="imagetoolbar" /> <meta content="Copyright � 2008, Your Name All Rights Reserved" name="copyright" /> <!-- #BeginEditable "scripting" --> <!-- Scripting area here --> <!-- #EndEditable --> <style media="all" type="text/css"> <!-- @import url('springtime.css'); --> </style> <script src="p7exp/p7exp.js" type="text/javascript"></script> <!--[if lte IE 7]> <style> #menuwrapper, #p7menubar ul a { height: 1%; } a:active { width: auto; } </style> <![endif]--> <link href="p7exp/p7exp.css" rel="stylesheet" type="text/css" /> </head> <body onload="P7_ExpMenu()"> <div id="outerWrapper"> <div id="sitename"> Site Name</div> <div id="header"> </div> <div id="menuwrapper"> <!--webbot bot="Include" tag="BODY" u-include="_includes/menu.html" startspan --> <ul id="p7menubar"> <li><a href="_includes/javascript;;">Home</a></li> <li><a class="trigger" href="_includes/javascript;;">Dropdown One</a> <ul> <li><a href="_includes/javascript;;">Sub 1.1</a></li> <li><a href="_includes/javascript;;">Sub 1.2</a></li> <li><a href="_includes/javascript;;">Sub 1.3</a></li> <li><a href="_includes/javascript;;">Sub 1.4</a></li> </ul> </li> <li><a class="trigger" href="_includes/javascript;;">Dropdown Two</a> <ul> <li><a href="_includes/javascript;;">Sub 2.1</a></li> <li><a href="_includes/javascript;;">Sub 2.2</a></li> <li><a href="_includes/javascript;;">Sub 2.3</a></li> <li><a href="_includes/javascript;;">Sub 2.4</a></li> <li><a href="_includes/javascript;;">Sub 2.5</a></li> </ul> </li> <li><a class="trigger" href="_includes/javascript;;">Dropdown Three</a> <ul> <li><a href="_includes/javascript;;">Sub 3.1</a></li> <li><a href="_includes/javascript;;">Sub 3.2</a></li> <li><a href="_includes/javascript;;">Sub 3.3</a></li> <li><a href="_includes/javascript;;">Sub 3.4</a></li> <li><a href="_includes/javascript;;">Sub 3.5</a></li> <li><a href="_includes/javascript;;">Sub 3.6</a></li> <li><a href="_includes/javascript;;">Sub 3.7</a></li> <li><a href="_includes/javascript;;">Sub 3.8</a></li> </ul> </li> <li><a class="trigger" href="#">Dropdown Four</a> <ul> <li><a href="#">Sub 3.1</a></li> <li><a href="#">Sub 3.2</a></li> <li><a href="#">Sub 3.3</a></li> <li><a href="#">Sub 3.4</a></li> <li><a href="#">Sub 3.5</a></li> <li><a href="#">Sub 3.6</a></li> <li><a href="#">Sub 3.7</a></li> <li><a href="#">Sub 3.8</a></li> </ul> </li> </ul> <!--webbot bot="Include" endspan i-checksum="56795" --><br class="clearit" /> </div> <div id="contentWrapper"> <div id="content"> <!-- #BeginEditable "maincontent" --> <h1>Springtime Template</h1> <p style="margin-left:20px"> <img alt="Picture of Arboretum." class="imgrgt" height="232" src="images/arboretum2.jpg" width="309" /> The Springtime Template was created using one of the layouts from <a href="http://www.shareasale.com/m-pr.cfm?merchantID=18179&userID=301139&productID=461787021"> Eric Meyer's CSS Sculptor for Expression Web</a>. It is a one column fluid layout which will resize to 800x600 with no horizontal scroll. However, the <strong>maximum width</strong> of the container has been set at 1024px. Both the style sheet and the template validate. The page was coded using an XHTML Transitional doctype. Editable regions in the dwt include the doctitle, headsection (description and keywords), and the main content area. All of the gradient images were created using <a href="http://tools.dynamicdrive.com/gradient/" title="Dynamic Drive's Gradient Image Maker."> Dynamic Drive's Gradient Image Maker</a>.</p> <p><strong>NOTES</strong>: </p> <ul> <li>The <strong>page background</strong> uses a gradient image 20px by 700px tiled horizontally with the top color #4A3C32 and the bottom color #786159. The bottom color of the gradient is also the background color of the page.</li> <li>The background for the <strong>Site Name</strong> is a gradient image which measures 5px by 60px and is tiled horizontally. The top color of the gradient is #44583A and the bottom color is #5A754D. </li> <li>The background image for the <strong>masthead</strong> is 1024px by 355px although the height of the header div is set at 250px. You can certainly increase the height if you wish. You can also change the header image to one of your choice.</li> <li>The container for the page is set at 80% but a maximum width of 1024px is set to constrain the container to the size of the header image. </li> <li>The menu uses the <a href="http://www.projectseven.com/tutorials/navigation/auto_hide/" title="Project Seven CSS Express Menu."> Project Seven CSS Express Menu</a>. The menu is an include so that it is easier for you to edit.</li> </ul> <p> <img alt="Photograph of trillum." class="imglft" height="232" src="images/trillum.jpg" width="309" />The images are floated to the left and right by applying a classs imglft or imgrgt. Classes are included for using small text and for centering content within a <p> tag. Others classes should be added as you need them. </p> <p>To change colors, font families and sizes, edit the style rules in the external style sheet. As you work in Expression Web, the masthead image will look like it does not fill the area BUT if you preview in your browser, you will see that it does. The templates has been checked in IE6, IE 7, Firefox 3 and Opera 9.</p> <p>Nulla placerat pharetra libero. Cras lectus nulla, posuere non, sodales non, condimentum vel; justo. Cras luctus quam non nibh. Donec condimentum pulvinar nisi. Nullam tempus mauris a lorem. Proin scelerisque? Quisque bibendum dictum mauris. Vestibulum id felis non sem tempus tempor. Quisque eros? Proin facilisis tempus leo. Donec vitae quam. Proin ultricies nisl in mauris. Sed tristique. Phasellus gravida. Nullam ante tellus, eleifend quis, volutpat sed; adipiscing at, diam. </p> <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris sollicitudin nulla at sapien. Maecenas elementum imperdiet metus. Maecenas risus. Sed non neque vel ipsum tempor sollicitudin. Donec at justo et leo pellentesque sodales? Nulla condimentum, neque pulvinar vestibulum laoreet, felis enim mollis dui, ut scelerisque dui mi sit amet magna? Ut laoreet, lorem accumsan fermentum blandit, mi lacus semper felis, ac porta arcu ante sed eros. Nullam scelerisque turpis accumsan leo. Cras non tortor. Vestibulum egestas massa a urna. Aliquam erat volutpat. Phasellus hendrerit, velit id euismod suscipit, dui velit convallis enim, non mattis ligula diam in nunc. Duis laoreet augue eu metus. </p> <p>Donec placerat laoreet risus. Curabitur libero. Aliquam a justo. Etiam rutrum convallis nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa. Donec massa. Duis placerat commodo lacus. Nam nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi mattis felis. In eu neque. Praesent consectetur, tellus eget adipiscing scelerisque, erat felis ultricies felis; quis dignissim nisl mi id massa? Ut arcu. Fusce est. Proin bibendum. </p> <!-- #EndEditable --></div> </div> <div id="footer"> Copyright � 2009 Your Name your-domain.com<br /> Template Design: <a title="Expression Web Tutorials & Templates." href="http://www.expression-web-tutorials.com/">Expression Web Tutorials & Templates</a><br /> Header Image: Arboretum at James Madison University Photo by Pat Geary </div> </div> </body> <!-- #EndTemplate --> </html>