<!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 "dwt/site.dwt" --> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <!-- #BeginEditable "doctitle" --> <title>Home</title> <!-- #EndEditable --> <!-- #BeginEditable "headsection" --> <meta content="insert DESCRIPTION here" name="description" /> <!-- #EndEditable --> <meta http-equiv="Content-Language" content="en-us" /> <meta content="General" name="rating" /> <meta content="no" http-equiv="imagetoolbar" /> <meta content="Copyright 2010, Your Name" name="copyright" /> <link rel="stylesheet" type="text/css" href="styles/site.css" /> <!-- #BeginEditable "styleblock" --> <style type="text/css"> <!-- any page level styles go here --> .auto-style1 { text-align: center; } </style> <!-- any page level scripts go here --> <!-- #EndEditable --> <!-- ********************************* Design by: Expression Web Tutorials & Templates Release Date: September 2010 ********************************* --> <link rel="stylesheet" href="cssmenutools/scripts/MTHM.css" type="text/css" /> </head> <body> <!-- Page Container begins here --> <div id="outerWrapper"> <!-- Masthead begins here --> <div id="header"> </div> <!-- Masthead ends here --> <!-- Navigation begins here --> <div id="topNavigation"> <div id="MTHMFGYNRVADiv" class="MTHMFGYNRVAwrapper"> <div id="MTHMFGYNRVATop" class="MTHMFGYNRVAtop"> <div class="MTHMFGYNRVAtopmiddle"> <ul> <li class="MTHMFGYNRVAitem1" style="margin-left: 0px"><a href="index.html" title="Home"><span>Home</span></a></li> <li class="MTHMFGYNRVAitem1"><a href="about.html" title="About Us."><span>About</span></a></li> <li class="MTHMFGYNRVAitem2"><a href="#"><span>Products</span></a></li> <li class="MTHMFGYNRVAitem1"><a href="contact.html" title="Contact Us"><span>Contact</span></a></li> <li class="MTHMFGYNRVAitem1"><a href="links.html" title="Resourch Links."><span>Links</span></a></li> <li class="MTHMFGYNRVAitem1"><a href="search.html" title="Search Our Site."><span>Search</span></a></li> <li class="MTHMFGYNRVAitem1"><a href="site-map.html" title="Site Map."><span>Site Map</span></a></li> </ul> </div> </div> <script type="text/javascript" src="cssmenutools/scripts/MTHM.js">/* MTHMMenu script ID:MTHMFGYNRVA */</script> </div> </div> <!-- Navigation ends here --> <!-- Content Container begins here --> <div id="contentWrapper"> <!-- Left Side Column begins here --> <div id="leftColumn1"> <div id="search"> <p><strong>Search This Site</strong></p> <form id="myform" action="http://search.freefind.com/find.html" method="get"> <div> <input name="id" type="hidden" value="00000000" /><input name="pageid" type="hidden" value="r" /><input name="mode" type="hidden" value="all" /><input name="n" type="hidden" value="0" /><input class="cf" name="query" size="10" type="text" /> <input class="submit" type="submit" value=" Go " /> <br /> </div> </form> </div> <p>You can use this area for a secondary sectional navigation or place your banner ads, Google Ad Sense code, or other advertising here. </p> <p class="ctr"><img alt="Description of Image." src="images/100x100-image.jpg" width="132" height="100" /></p> <p class="ctr"><img alt="Description of Image." src="images/100x100-image.jpg" width="132" height="100" /></p> <div class="sidebox"> <p class="sideboxheading">Sales</p> <p>You can put news, announcements or whatever you want here. If you want this box to change from page to page, you will need to make it an editable region within the DWT.</p> </div> <p class="ctr"><img alt="Short description of image." src="images/150x150-image.jpg" width="150" height="150" /></p> </div> <!-- Left Side Column ends here --> <!-- Main Content Area begins here --> <div id="content"> <!-- #BeginEditable "content" --> <h1>Red and Black Site Template</h1> <p>The Red and Black template uses one of the Site Templates offered on our sister site <a href="http://www.frontpage-to-expression.com/site-templates/">Migrating from FrontPage to Expression Web</a> - the <a title="Two Column Left Liquid Equal Height Columns Layout." href="http://www.frontpage-to-expression.com/site-templates/2-equal-columns-left-liguid/index.html">Two Column Left Liquid Equal Height Columns Layout</a> - as a starting point. It uses the XHTML 1.0 Transitional doctype. The #contentWrapper style uses a <a title="contentWrapper background image." href="images/content-bg.jpg">background image</a> which allows for two equal height columns. The #outerWrapper (page container) is set with a width of 80% and will fill 80% of the viewer's browser window, At 800x600 resolution, there should be no horizontal scroll.</p> <p>You can easily add more pages, delete any of the pages you do not need, or even rename existing pages. Pages included with this template are:</p> <ul> <li>Home Page</li> <li>About Us</li> <li>Contact Us</li> <li>Products<ul> <li>Product One - sample two column layout for your products</li> <li>Product Two - sample individual product page</li> <li>Product Three - sample two column layout for your products (slightly different than the one above)</li> <li>Product Four - sample individual product page (slightly different than the one above)</li> </ul> </li> <li>Resource Links</li> <li>Search</li> <li>Site Map</li> <li>Privacy Policy</li> </ul> <h2>Masthead</h2> <p>The masthead image is a 466px by 110px transparent gif created with the Logo Creator. You can use any graphics editing program to create your own image or request that I change the wording for you. The style rules within the external style sheet were changed to include the image as the background for the masthead.</p> <h2>Top Navigation Menu</h2> <p>The top navigation menu makes use of one of the new Expression Web add-ins, <a title="Download Trial of Horizontal Menu Advancer Trial." href="http://www.plimus.com/jsp/download_trial.jsp?contractId=2615350&referrer=patgeary">Horizontal Menu Advancer</a> by cssmenutools. You will need to have that add-in installed on your computer to edit the above menu or create a new one. The Products menu item has a drop down to show you how it would work. The menu is capable of having multiple level dropdowns BUT you will need to be careful of the number of items you add to your top level menu or it will break when viewed on small screen. </p> <p>As an alternative, you can use one of the free menus available from</p> <ul> <li><a title="Dynamic Drive CSS Horizontal menus." href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Dynamic Drive</a> or</li> <li><a title="CSS Express Drop-Down Menus." href="http://www.projectseven.com/tutorials/navigation/auto_hide/index.htm">Project Seven</a></li> </ul> <h2>Left Side Column</h2> <p class="auto-style1"><img alt="Short description of image." src="images/200x200-image.jpg" width="200" height="200" class="imgrgt" />The left side column is currently a non-editable region on the DWT. You can use it for supplemental navigation, images, Google Ad Sense code or whatever you might choose. If you wish to have this section change from page to page or section to section, create an editable region BELOW the <div> for the search box. You can then use <a title="Expression Web and Design Time Includes." href="http://www.expression-web-tutorials.com/expression-web-includes.html">includes</a> for the left column if you wish.</p> <p>Also included is the styling for a side box you can use as part of your left sidebar. Again if you wish to use different content in the side box for each page, you will need to make this section an editable region. Create the editable region for only that part of the left sidebar you want to change from page to page. Those areas that should remain the same on each page should be within the non-editable region.</p> <h2>Images</h2> <p>Classes have been included to float images both right and left as well as centered on the page. All images you insert should be resized to the size you want displayed NOT resized by changing the width and height within the html code. Remember to add an alt tag to any images you insert for accessibility.</p> <h2>License Information</h2> <p>This template is licensed under a <a title="Creative Commons Attribution 3.0 United States License." href="http://creativecommons.org/licenses/by/3.0/us/">Creative Commons Attribution 3.0 United States License</a>. You must attribute the template design to <a href="http://www.expression-web-tutorials.com/">Expression Web Tutorials & Templates</a> by the link in the footer.</p> <p> </p> <!-- #EndEditable --></div> <!-- Main Content ends here --> <!-- Do NOT Delete or your footer will not fall below your content area --><br class="clearFloat" /> <br /> </div> <!-- Footer begins here --> <div id="footer"> <p><a title="Home." href="index.html">Home</a> | <a title="About Us." href="about.html">About</a> | <a title="Contact Us." href="contact.html">Contact</a> | <a title="Links." href="links.html">Links</a> | <a title="Search Our Site." href="search.html">Search</a> | <a title="Site Map." href="site-map.html">Site Map</a></p> <p>Copyright � 2010 Company Name. All Rights Reserved.</p> <p><a title="Copy and Paste the email address to your email editor to send me mail.">your-name<code>@</code>your-domain.com</a> | <a href="privacy-policy.html" title="Privacy Policy.">Privacy Policy</a></p> <p class="tinytxt">Template Design: <a title="Expression Web Tutorials & Templates." href="http://www.expression-web-tutorials.com/">Expression Web Tutorials & Templates</a></p> </div> <!-- Footer ends here --></div> <!-- Page Container ends here --> </body> <!-- #EndTemplate --> <!-- #EndTemplate --> </html>