index.html
<!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://www.expression-web-tutorials.com/ All Rights Reserved" name="copyright" />
<link rel="stylesheet" type="text/css" href="styles/site.css" />
<!-- 
======================================
Website Template Name:   Deep Woods Site Template 
Author: Patricia Geary
Author URI: http://www.expression-web-tutorials.com/
Author Email: patgeary@comcast.net
Date:  May 2011 
========================================
-->
</head>

<body>

<!-- Page Container begins here -->
<div id="outerWrapper">

	<!-- Masthead begins here -->
	<div id="header">
		<p class="title">Dandelion Meadow Template</p>
	</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">
			<p class="headerbar">Sectional 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>
			<p class="ctr">Connect with us on:<br />
			<img alt="Connect with us on Facebook." src="images/facebook_32.png" width="32" height="32" /> <img alt="Connect with us on Twitter." src="images/twitter_32.png" width="32" height="32" /></p>
			<hr />
			<p>You can use the sidebar for additional information. If you choose to change the information from page to pages, then you will need to make this an editable region. </p>
			<hr />
			<p class="ctr"><img alt="dandelions on the meadow © Maria Brzostowska #616050." src="images/fotolia_616050.jpg" width="180" height="240" /></p>
			<p><strong>The First Dandelion

    </strong></p>
			<p>Simple and fresh and fair from winter's close emerging,

    <br />
			As if no artifice of fashion, business, politics, had ever been,

    <br />
			Forth from its sunny nook of shelter'd grass--innocent, golden, calm as the dawn,

    <br />
			The spring's first dandelion shows its trustful face.<br />
			<em>Source: "Leaves of Grass," by Walt Whitman</em></p>
 <hr />
			<p>More text can be added in this sidebar area. You can include images but you will need to limit the size to no more than 180px at the most. You can add links or special sale information.. <a href="contact.html">Contact Us ></a> </p>
		</div>
		<!-- Left Column ends here -->
		<!-- Main Content begins here -->
		<div id="content">
			<!-- #BeginEditable "content" -->

<h1>Dandelion Meadow Template</h1>
<p>The Dandelion Meadow 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 Column Left Fixed Width to 1024px." href="http://www.frontpage-to-expression.com/site-templates/two-equal-col-fixed-1024/">Two Equal Column Left Fixed Width to 1024px</a>  - as a starting point. </p>
<p>A <a href="images/column-bg.jpg">background image</a> added to the #contentWrapper allows for two equal height columns.</p>
<h2>Masthead</h2>
<p>The masthead image is 800px wide by 200 pixels high. The photo is one offered on <a title="Free Header Graphics for Personal websites and blogs." href="http://www.freewebpageheaders.com/">FreeWebPageHeaders</a>. If you choose to use the image, the credit at the bottom must remain in place. There is a large selection of headers to choose from. The image is a background for the #header div. The site name is plain text with style rules in the external style sheet.  </p>
<p>You could also create an image for the site name if you wanted to use a fancier font-family.</p>
<h2>Top Navigation</h2>
<p>If you have a small site, the top navigation should work OK. If you have a larger site, then you can add the left side navigation as a sectional menu and use the top menu for the main pages.</p>
<h2>Left Navigation</h2>
<p>The vertical menu on the Dandelion Meadow template uses <a title="Arrow Green Vertical Menu." href="http://www.dynamicdrive.com/style/csslibrary/item/arrow_green_vertical_menu/">Arrow Green Vertical Menu</a> by Dynamic Drive. If you want the menu to change from section to section, then you will need to make it an editable region.</p>
<h2>Images</h2>
<p>Classes have been included to float images both right and left as well as centered (shown below) 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>The image used on the bottom of the page is a jpg image repeated horizontally across the entire bottom of the page. If you choose to use it, you much purchase the image <a title="spring meadow © Monika 3 Steps Ahead #11343079." href="http://us.fotolia.com/id/11343079">spring meadow © Monika 3 Steps Ahead #11343079</a>. There are a number of photos by this same artist which could be used for a bottom page border.</p>
			<p>Most of the images used as examples are from <a title="Fotolia.com." href="http://us.fotolia.com/">Fotolia.com</a>. </p>
<p><img alt="Field of dandylions © Hedgehog #31472737 ." class="imgctr" height="209" src="images/fotolia_31472737.jpg" width="322" /></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 -->
	</div>
	
<!-- Bottom Page Graphic begins here -->
<div id="bottom-bg">
<!-- 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 class="tinytxt"><strong>Header Image</strong>:<a title="Yellow Flowers · Copyright © DHester." href="http://www.freewebpageheaders.com/gallery/showphoto.php/photo/147">Yellow Flowers · Copyright © DHester</a></p>
		<p class="tinytxt">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>
<!-- Bottom Page Graphic ends here -->
<!-- Page Container ends here -->

</body>

<!-- #EndTemplate -->

</html>