<!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 2010, Pat Geary. http://www.expression-web-tutorials.com/ All Rights Reserved" name="copyright" /> <link rel="stylesheet" type="text/css" href="styles/site.css" /> </head> <body> <!-- Page Container begins here --> <div id="outerWrapper"> <!-- Masthead begins here --> <div id="header"> <p class="title">My Site Name</p> </div> <!-- Masthead ends here --> <!-- Content Container begins here --> <div id="contentWrapper"> <!-- Left Column begins here --> <div id="leftColumn1"> <div id="vertmenu"> <!--webbot bot="Include" U-Include="_includes/menu.html" TAG="BODY" startspan --> <p class="heading">Site Navigation</p> <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> <!--webbot bot="Include" endspan i-checksum="24981" --></div> <div class="sidebox"> <p class="sideboxheading">News</p><p>Insert news items, or anything you might want to call attention to here. If you wish this message to change from page to page, then this will need to be an editable region.</p></div> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. <a href="#">More...</a></p> </div> <!-- Left Column ends here --> <!-- Main Content begins here --> <div id="content"> <!-- #BeginEditable "content" --> <h1>Ocean Two Column Site Template</h1> <p>The Ocean 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 Fixed Width to 1024px." href="http://www.frontpage-to-expression.com/site-templates/two-col-fixed-1024/">Two Column Left Fixed Width to 1024px</a> - as a starting point. </p> <p>Changes made to the template include: style rules added for the #contentWrapper which include a <a title="Background image for contentWrapper." href="images/new-bg.jpg">background image</a>. This allows for two equal height columns.</p> <p>Viewing the style sheet and comparing it to the original site template will allow you to see the changes made to the styles.</p> <h2>Masthead</h2> <p>The masthead image is 1200px wide by 245 pixels high. You could also use this masthead image with a fluid layout by limiting the maximum size of the container to 1200px. The photo was taken on a trip to California of the Big Sur coastline. The style rules within the external style sheet were changed to include the image as the background. </p> <p>Adjustments were also made to the style rules for the site name. If you wanted to use a fancy script, the site name could be an image inserted into the DWT as was done with the <a href="http://www.css-layouts.org/ocean/alternative-index.html">alternative template</a>.</p> <h2>Left Navigation</h2> <p>The vertical menu on the Ocean template uses one of my favorites from CSS Drive, the <a title="dashed vertical menu." href="http://www.cssdrive.com/index.php/examples/exampleitem/dashed_vertical_menu/">dashed vertical menu</a>. The <a href="alternative-index.html">alternative template</a> includes another vertical menu 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> <h2>Images</h2> <p> <img alt="Description of Picture." class="imgrgt" src="images/ocean.jpg" width="278" height="211" />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> <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 © 2010 Company Name. All Rights Reserved. | <a href="privacy-policy.html" title="Privacy Policy.">Privacy Policy</a></p> <p>Template Design: <a href="http://www.expression-web-tutorials.com/">Expression Web Tutorials & Templates</a> </p> <p>Header Image: California Coastline along Big Sur Photo by Pat Geary </p> </div> <!-- Footer ends here --></div> <!-- Page Container ends here --> </body> <!-- #EndTemplate --> <!-- #EndTemplate --> </html>