<!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=iso-8859-1" http-equiv="Content-Type" /> <!-- #BeginEditable "doctitle" --> <title>Home</title> <!-- #EndEditable --> <!-- #BeginEditable "headsection" --> <meta name="description" content="Insert DESCRIPTION here" /> <meta name="keywords" content="Insert KEYWORDS here" /> <!-- #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" /> <link rel="stylesheet" href="styles/ajxmenu.css" type="text/css" /> <script src="ajxmenu.js" type="text/javascript"></script> </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 --> <!-- Navigation begins here --> <div class="AJXCSSMenueDFaTFD"><!-- AJXFILE:ajxmenu.css --> <div class="ajxmw1"> <div class="ajxmw2"> <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> </div> </div> <br /> </div> <!-- Navigation ends here --> <!-- Content Container begins here --> <div id="contentWrapper"> <!-- Main Content begins here --> <div id="content"> <!-- #BeginEditable "content" --> <h1>Ocean Template</h1> <p style="margin-left:20px"> <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> <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/5x50-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 just below 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>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="alternative-index.html" title="alternative template."> alternative template</a>.</p> <h2>Top Navigation</h2> <p>The menu on the Ocean template uses one of the commercial add-ins for Expression Web, <a title="Expression Web CSS Drop Down Menus." href="http://www.plimus.com/jsp/redirect.jsp?contractId=2531826&referrer=patgeary">CSS Drop Down Menus </a>by Ajatix. If you do not have this program you can substitute another horizontal menu for it. There are several available from <a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/" title="Dynamic Drive."> Dynamic Drive</a>. This add-in allows for both horizontal menus with drop downs and vertical menus with flyouts.</p> <p>I have included an alternative menu with this set. The <a href="alternative-index.html" title="alternative template."> alternative template</a> uses the <a href="http://www.dynamicdrive.com/style/csslibrary/item/inverted-shift-down-menu/"> Inverted Shift Down Menu</a> from Dynamic Drive. 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. 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>