<!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/alternative-site.dwt" --> <head> <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" /> <!-- #BeginEditable "doctitle" --> <title>Home</title> <!-- #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/alternative-site.css" /> </head> <body> <!-- Page Container begins here --> <div id="outerWrapper"> <!-- Masthead begins here --> <div id="header"> <img alt="" height="75" src="images/site-name.gif" width="300" /></div> <!-- Masthead ends here --> <!-- Navigation begins here --> <div class="invertedshiftdown"> <ul> <li><a href="index.html" title="Home"><b>Home</b></a></li> <li><a href="about.html" title="About Us."><b>About</b></a></li> <li><a href="contact.html" title="Contact Us."><b>Contact</b></a></li> <li><a href="links.html" title="Links."><b>Links</b></a></li> <li><a href="search.html" title="Search Our Site."><b>Search</b></a></li> <li><a href="site-map.html" title="Site Map."><b>Site Map</b></a></li> </ul> <!-- End of Search form --> <br class="clr-bth" /> </div> <!-- Navigation ends here --> <!-- Content Container begins here --> <div id="contentWrapper"> <!-- Main Content begins here --> <div id="content"> <!-- #BeginEditable "maincontent" --> <h1>Ocean Template</h1> <h2>Ocean Template with Alternative Menu</h2> <a href="http://www.expression-web-tutorials.com/ocean.fwp" title="Download Ocean Site Template Personal Web Package."><img alt="Download Ocean Site Template Web Package." src="http://www.expression-web-tutorials.com/images/black.png" width="150" height="50" /></a> <a title="Instructions for Using Personal Web Package." href="http://www.expression-web-tutorials.com/personal-web-package-instructions.html"> <img alt="Instructions." src="http://www.expression-web-tutorials.com/images/instructions.jpg" width="170" height="50" /></a><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/" title="Site Templates."> Migrating from FrontPage to Expression Web</a> - the <a href="http://www.frontpage-to-expression.com/site-templates/1col-fixed1024/" title="Site Template - one column fixed width to 1024px."> one column fixed width to 1024px</a> - as a starting point. </p> <p>Changes made to the template include a <a href="images/5x100-bg.jpg" title="gradient image background.">gradient image</a> added to the body style for the band across the top of the page. Then a top margin was added to the outerWrapper style so that it begins at the halfway point of the gradient image. </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 of the Big Sur coastline was taken on a trip to California. The style rules within the external style sheet were changed to include the image as the background. </p> <p>This template uses a transparent image for the site name. It was created with the Logo Creator that is a commerical program but any graphics editor that allows you to create transparent graphic images would work. </p> <h2>Top Navigation</h2> <p>This alternative template makes use of one of the css menus from Dynamic Drive, the <a href="http://www.dynamicdrive.com/style/csslibrary/item/inverted-shift-down-menu/"> Inverted Shift Down Menu</a>. Credits within the style sheet should remain in place if you use this menu. This menu is only going to work for a small site as there is no dropdown capability and you are limited in the number of links you can add to the menu. Too many links will cause the menu to break.</p> <p>The rounded corners styles will cause the style sheet to throw up four errors when you try and validate it as they rely on CSS3 style rules. You can see the difference in the menu tabs by viewing the template in Firefox and Internet Explorer. </p> <p>If you need a menu with a one level dropdown, I can highly recommend the free <a href="http://www.projectseven.com/tutorials/navigation/auto_hide/"> Project Seven CSS Express Menu</a>. NOTE: Thanks to Barry Carlson for the additional code that cover Safari and Chrome and make provision for the W3C proposed CSS3 standard. </p> <p><img alt="Picture of coast off Big Sur." src="images/ocean.jpg" width="278" height="211" class="imgctr" /></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> <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> <!-- #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 Your Name your-domain.com | <a href="privacy-policy.html" title="Privacy Policy.">Privacy Policy</a></p> <p>Template Design: <a href="http://www.expression-web-tutorials.com/" title="Expression Web Tutorials & Templates."> 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 --> </html>