<!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/soccer-blue.dwt" --> <head> <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" /> <!-- #BeginEditable "doctitle" --> <title>Soccer Template - Blue</title> <!-- #EndEditable --> <!-- #BeginEditable "head" --> <meta content="Description of Your Site Goes Here." name="description" /> <meta content="keywords for your site here separate with commas" name="keywords" /> <!-- #EndEditable --> <meta content="en-us" http-equiv="Content-Language" /> <meta content="General" name="rating" /> <meta content="no" http-equiv="imagetoolbar" /> <meta content="Copyright � 2010, Your Name All Rights Reserved" name="copyright" /> <link href="soccer.ico" rel="shortcut icon" /> <script type="text/javascript" src="js/minmax.js"></script> <link href="styles/soccer-blue.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="banner"> <img alt="" src="images/soccer-title-blue.gif" width="450" height="100" /></div> <div id="vertmenu"> <!--webbot bot="Include" u-include="includes/left-menu.html" tag="BODY" startspan --> <p class="heading">Navigation</p> <ul> <li><a href="#" title="Home.">Home</a></li> <li><a href="#" title="About.">About</a></li> <li><a href="#" title="Schedules.">Schedules</a></li> <li><a href="#" title="Photo Gallery.">Photo Gallery</a></li> <li><a href="#" title="Tournaments.">Tournaments</a></li> <li><a href="#" title="Coaches.">Coaches</a></li> </ul> <p class="heading">Heading</p> <ul> <li><a href="#" title="Sub Heading 2.">Sub Heading 1</a></li> <li><a href="#" title="Sub Heading 3.">Sub Heading 1</a></li> <li><a href="#" title="Sub Heading 4.">Sub Heading 1</a></li> <li><a href="#" title="Sub Heading 5.">Sub Heading 1</a></li> <li><a href="#" title="Sub Heading 6.">Sub Heading 1</a></li> <li><a href="#" title="Sub Heading 7.">Sub Heading 1</a></li> </ul> <!--webbot bot="Include" endspan i-checksum="29176" --><div class="sidebox"> <p class="sideboxheading">News</p> <p>Images within the content area are from <a title="Fotolia." href="http://us.fotolia.com/">Fotolia</a> and are samples only to demonstrate the image classes. </p> <p>You may use any of my free templates for non-commercial purposes (personal sites, non-profit organizations, etc.). I do require that you keep the credit link on all pages. </p> </div> </div> <div id="content"> <!-- #BeginEditable "content" --> <h1>Soccer Template - Blue</h1> <p style="margin-left: 20px"><a title="Download the Soccer Template Package." href="../soccer.fwp"> <img alt="Download Soccer Web Package." src="black.png" width="150" height="50" /></a> <a title="Instructions for Using Personal Web Package." href="../personal-web-package-instructions.html"> <img alt="Instructions." src="instructions.jpg" width="170" height="50" /></a></p> <p><img alt="http://www.fotolia.com/id/646489" class="imgrgt" height="257" src="images/fotolia_646489.jpg" width="386" />This is a fluid width template which means it will resize to fit the viewer's browser window with no horizontal scroll at 800x600. The width of the container is set at 90%. A maximum width for the container has been set at 1400pixels. Because IE 6 and below do NOT recognize max width, I have added minmax.js so that the page will render properly in those browsers. You can read <a href="http://www.doxdesk.com/software/js/minmax.html">CSS minimum and maximum sizes</a> to learn more. This script makes these CSS properties work transparently in IE version 5.0 upwards. At 800x600 the blue background will look more like a wide border. The code is written using XHTML Transitional doctype and validates as does the external style sheet. </p> <p>The navigation menu for this template is from CSS Drive - <a title="Dashed Vertical Menu by CSS Drive." href="http://www.cssdrive.com/index.php/examples/exampleitem/dashed_vertical_menu/">Dashed Vertical Menu</a>. Other vertical menus are available from <a title="CSS Library." href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">CSS Library</a>.</p> <p>Editable regions include doctitle, headsection for description and keywords, and the content area. The masthead image is 400x163 pixels with the background color set to #003399 . If you change the image, make sure you change the background color to match. The masthead logo is a transparent image. You may request the text in the logo be changed for your site name or substitute the top logo for one of your own. The class of imgrgt or imglft has been applied to the images within the content area. </p> <p>Changes to the "look" of the site should be made to the external style sheet. You will need to create additional styles as you add content. If you change the width of the left navigation, make sure you adjust the left margin for the content area. The soccer template is also available in <a href="default.html" title="Green Soccer Template.">green</a> and <a href="default-red.html" title="Red Soccer Template.">red</a>.</p> <h2>Soccer Template Package</h2> <p>The soccer template package contains the DWT for ALL three versions, a default.html file with the DWT attached, and all supporting files, folders and graphic images including a shortcut icon which is of course, a soccer ball. </p> <h2>H2 Tag - Sub Topic</h2> <p>Mauris ligula metus, accumsan quis, lacinia sed, tincidunt vitae, ligula. Nulla bibendum sagittis metus. Nam arcu lacus, luctus sit amet, pretium ut, congue in, velit. Vivamus justo magna, laoreet vel, porta eleifend, aliquet ac, mauris. <a title="Vestibulum luctus." href="../mauve-flowers/index.html">Vestibulum luctus</a> lectus et lorem. Quisque ac tortor ac nibh interdum aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce et est vel libero dapibus accumsan. Aliquam dapibus nunc in ante. Ut sagittis, leo nec volutpat ultrices, leo dolor eleifend ligula, at dictum dolor augue tincidunt tortor. Morbi hendrerit. Donec facilisis interdum eros. Sed posuere, augue imperdiet consectetuer posuere, magna magna euismod nunc, ut facilisis dui ipsum quis tortor. Pellentesque feugiat, justo eu auctor iaculis, sapien quam convallis neque, non sodales ligula orci ut mauris. Vivamus tincidunt lobortis magna. Maecenas tempor. </p> <h3>H3 Tag - Sub Topic</h3> <p class="imglft"><img alt="http://www.fotolia.com/id/722412" height="386" src="images/fotolia_722412.jpg" width="257" /></p> <p>Phasellus tempor blandit risus. Integer at quam ac ante bibendum varius. Aenean ac nisl. Nam a enim eu orci interdum blandit. Pellentesque ipsum. Fusce at odio a enim vehicula sagittis. Integer eu arcu. In sodales justo eu dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam at mauris. Pellentesque imperdiet, justo id pellentesque tristique, dolor dolor rutrum justo, eget luctus leo orci ac sem. Morbi neque erat, vestibulum quis, eleifend eu, blandit id, urna. Ut non enim. Pellentesque egestas mollis nisl. Donec vel neque eu ipsum aliquet luctus. Proin luctus. Proin pretium. </p> <p>Ut quis odio. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In hac habitasse platea dictumst. Nunc mi. Integer congue, eros eu elementum gravida, nibh augue hendrerit purus, sed vehicula tellus augue id justo. Mauris et massa. Vestibulum viverra nonummy erat. Pellentesque pellentesque dui non est aliquet accumsan. Proin tellus mauris, fermentum ornare, rhoncus volutpat, ultricies vel, metus. Proin pulvinar, massa et porttitor eleifend, tortor lacus suscipit quam, id molestie dui sem non turpis. Cras suscipit, elit porttitor fringilla consequat, orci massa ullamcorper urna, vitae lacinia pede dolor eget ligula. Nulla augue felis, venenatis nec, rutrum et, sagittis id, odio. Duis vitae augue. </p> <p>Nunc urna. Mauris lectus. Nunc mollis vulputate dolor. Etiam odio enim, bibendum sed, egestas sed, pharetra vel, elit. Maecenas eros ligula, viverra a, plcerat a, dictum et, risus. Mauris elit. Vivamus cursus consequat nunc. Proin et nunc sed nibh tempus tempus. Curabitur hendrerit interdum nisl. Nulla bibendum varius turpis. In condimentum ultrices eros. Nullam ligula tellus, pharetra et, faucibus non, vestibulum eget, leo. Vestibulum vitae nisi sed eros condimentum rutrum. Pellentesque in purus. Proin nisi risus, tempor sit amet, auctor eu, ultrices vitae, nisi. Donec rhoncus semper nunc. Nunc feugiat sodales dui. Morbi lectus. Vestibulum non dolor nec nibh egestas gravida. Vestibulum augue.</p> <p>This is how a list will look:</p> <ul> <li>Main item</li> <li>Main Item</li> <li>Main Item<ul> <li>Sub Item</li> <li>Sub Item</li> </ul> </li> </ul> <!-- #EndEditable --></div> <div id="footer"> <p>Your Name | <a href="mailto:yourname@yourdomain.com" title="Email to Your Name.">yourname@yourdomain.com</a> </p> <p>Copyright 2010 | All Rights Reserved</p> <p class="smtxt">Template Design: <a title="Expression Web Tutorials & Templates." href="http://www.expression-web-tutorials.com/">Expression Web Tutorials & Templates</a></p> <p class="smtxt">Template Created: May 2010</p> </div> </div> </body> <!-- #EndTemplate --> </html>