<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" /> <!-- #BeginEditable "doctitle" --> <title>Home</title> <!-- #EndEditable --> <!-- #BeginEditable "headsection" --> <meta content="insert DESCRIPTION here" name="description" /> <meta content="Insert KEYWORDS here" name="keywords" /> <!-- #EndEditable --> <meta http-equiv="Content-Language" content="en-us" /> <meta content="General" name="rating" /> <meta content="no" http-equiv="imagetoolbar" /> <meta content="Copyright 2011, Pat Geary. http://expression-web-tutorials.com/ All Rights Reserved" name="copyright" /> <!-- ********************************* Design by: Expression Web Tutorials & Templates http://www.expression-web-tutorials.com/ Release Date: February 2011 ********************************* --> <link rel="stylesheet" type="text/css" href="styles/site.css" /> </head> <body> <p> </p> <!-- Page Container begins here --> <div id="outerWrapper"> <!-- Masthead begins here --> <div id="header"> <img alt="" src="images/site-logo-blue.gif" width="542" height="125" /> </div> <!-- Masthead ends here --> <!-- Navigation begins here --> <div id="topNavigation"> <ul> <li><a href="index.html" title="Home">Home</a></li> <li><a href="about.html" title="About">About</a></li> <li><a href="contact.html" title="Contact">Contact</a></li> <li><a href="links.html" title="Links">Links</a></li> <li><a href="search.html" title="Search">Search</a></li> <li><a href="site-map.html" title="Site Map">Site Map</a></li> </ul> </div> <!-- Navigation ends here --> <!-- Content Container begins here --> <div id="contentWrapper"> <!-- Left Column begins here --> <div id="leftColumn1"> <div class="search"> <form id="cse-search-box" class="myform" action="http://www.google.com/cse"> <div> <input type="hidden" name="cx" value="009206261522604705567:szjmq6-ogvi" /><input type="hidden" name="ie" value="UTF-8" /><input type="text" name="q" size="10" /> <input class="submit" type="submit" name="sa" value="Search" /> <br /> Google Custom Search</div> </form> <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script> </div> <p class="headerbar">Section Menu </p> <ul> <li><a href="#" title="null link">Link</a></li> <li><a href="#" title="null link">Link</a></li> <li><a href="#" title="null link">Link</a></li> <li><a href="#" title="null link">Link</a></li> <li><a href="#" title="null link">Link</a></li> <li><a href="#" title="null link">Link</a></li> <li><a href="#" title="null link">Link</a></li> <li><a href="#" title="null link">Link</a></li> </ul> <p class="headerbar">Section Menu </p> <ul> <li><a href="#" title="null link">Link</a></li> <li><a href="#" title="null link">Link</a></li> <li><a href="#" title="null link">Link</a></li> <li><a href="#" title="null link">Link</a></li> <li><a href="#" title="null link">Link</a></li> <li><a href="#" title="null link">Link</a></li> <li><a href="#" title="null link">Link</a></li> <li><a href="#" title="null link">Link</a></li> </ul> <div class="sidebox"> <p class="sideboxheading">News</p> <p>You can put whatever you want in <a href="index.html">this</a> box. You can also have several boxes if you choose to.</p> </div> <p class="ctr"><img alt="Join Us on Facebook." src="images/facebook_32.png" width="32" height="32" /> <img alt="Follow us on Twitter." src="images/twitter_32.png" width="32" height="32" /></p> </div> <!-- Left Column ends here --> <!-- Main Content begins here --> <div id="content"> <!-- #BeginEditable "content" --> <h1>Nightlights Template</h1> <p>The Nightlights 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 Equal Height Column Left Fixed Width to 1024px." href="http://www.frontpage-to-expression.com/site-templates/two-equal-col-fixed-1024/">Two Equal Height Column Left Fixed Width to 1024px</a> - as a starting point. </p> <p>The template package uses an XHTML transitional doctype statement. Both the template and the style sheet validate.</p> <p>The #contentWrapper uses a <a href="images/content-bg.jpg">background image</a>. This allows for two equal height columns with the border stretching from top to bottom no matter which column has the most content. The image is 220px by 100px repeated vertically. The image is white with a blue right border of 2px. If you change the width of the left side navigation you will have to create a new background image to accommodate the changed width of the column. The <a title="psp file for the content background." href="images/content-bg.psp">psp file</a> for the background image has been included in the image folder so that you can change the border color if you so desire. </p> <h2>Masthead</h2> <p>The <a title="Masthead background image." href="images/masthead-bg.jpg">background image</a> for the masthead is called from the external style sheet and the <a title="site name and tagline image." href="images/site-logo-blue.gif">site name and tagline</a> is transparent gif image inserted into the DWT. The logo was created using the Logo Creator. I will be happy to change the site name and tagline for you or you can create your own transparent gif which is 542px by 125px.</p> <h2>Left Navigation</h2> <p>The vertical menu on the Nightlights template is one I use quite often. If you want the menu to change from section to section, then you will need to make it an editable region.</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.</p> <p>The <a title="Google Custom search box." href="http://www.google.com/cse/">Google Custom search box</a> will need to be adjusted with the code for YOUR custom search. The Search page uses the Bing search box. You can, of course, use any search engine you choose. The styling for the search areas is part of the external style sheet. </p> <h2>Images</h2> <p>Classes have been included to float images both right and left as well as centered on the page. The image within the content of this page has a drop shadow added using an graphics editor. 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.</p> <p> </p> <img alt="Description of Picture." src="images/fotolia_12037108.jpg" width="303" height="206" class="imgctr" /> <h2>License Information: </h2> <p>This contribution is licensed to you under <a href="http://creativecommons.org/licenses/by/3.0/us">Creative Commons</a> by the owner, Pat Geary. 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 or the copyright statement meta tag.</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> <!-- Content Container ends here --> <!-- Footer begins here --> <div id="footer"> <p>Copyright © 2011 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 title="Privacy Policy." href="privacy-policy.html">Privacy Policy</a></p> <p>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>