<!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 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, Tina Clarke and Pat Geary http://frontpage-to-expression.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" /> <!-- ====================================== Website Template Name: Floral Inspiration Template Author: Patricia Geary Author URI: http://www.expression-web-tutorials.com/ Author Email: patgeary@comcast.net Date: October 2011 ======================================== --> </head> <body> <div id="pagebg"> <!-- 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 id="topNavigation"> <div class="AJXMenuRPTVUYB"> <!-- AJXFILE:../styles/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."><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> </div> <!-- Navigation ends here --> <!-- Content Container begins here --> <div id="contentWrapper"> <!-- Left Column begins here --> <div id="leftColumn1"> <h2>H2 left</h2> <h2>Column1 Title </h2> <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. <a href="#">More...</a></p> <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. <a href="#">More...</a></p> </div> <!-- Left Column ends here --> <!-- Right Column begins here --> <div id="rightColumn1"> <div class="sidebox"> <p class="sideboxheading">Credits</p> <p>The page background images are from <a title="The Inspiration Gallery." href="http://www.theinspirationgallery.com/">The Inspiration Gallery</a>. Please make sure and read their <a title="Inspiration Gallery Terms of Use." href="http://www.theinspirationgallery.com/">Terms of Use.</a></p> <p class="ctr"><img alt="Graphics from The Inspiration Gallery." src="images/tig_logo_green.png" width="100" height="29" /></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. <a href="#">More...</a></p> <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. <a href="#">More...</a></p> </div> <!-- Right Column ends here --> <!-- Main Content begins here --> <div id="content"> <!-- #BeginEditable "content" --> <h1>Floral Inspiration Site Templates</h1> <p>The Floral Inspirations Site Template package is meant to be an example of something you can do with one of the site templates offered by our sister site <a href="http://www.frontpage-to-expression.com/site-templates/" title="Migrating from FrontPage to Expression Web Site Templates."> Migrating from FrontPage to Expression Web</a>. This particular one is based on the 3 equal columns layout with a fixed width of 1024px. A <a title="A background image in the contentWrapper style rules achieves the equal column look." href="../../floral-inspiration/images/content-background..gif">background image</a> for the contentWrapper achieves this effect.</p> <p><img alt="Description of Picture." src="images/garden.jpg" width="288" height="189" class="imgctr" /></p> <h2>Body Background</h2> <p>To achieve the body background look, one image, the <a href="images/bord_floral_036.gif" title="Top Border Image.">top border</a>, is included in the body style rule and repeated horizontally. A second <div> tag was added to contain the <a href="images/wp_floral_036.jpg" title="main page background iamge."> main page background</a> and is repeated horizontally and vertically. Make sure you also specify a background color for each in case the background image does not load. </p> <blockquote><strong>The background of a box can have multiple layers in CSS3</strong>. The number of layers is determined by the number of comma-separated values in the ‘<a href="http://www.w3.org/TR/css3-background/#background-image">background-image</a>’ property. Note that a value of ‘none’ still creates a layer. Each of the images is sized, positioned, and tiled according to the corresponding value in the other background properties. The lists are matched up from the first value: excess values at the end are not used. If a property doesn't have enough comma-separated values to match the number of layers, the <a href="http://www.w3.org/TR/css3-background/#ua">UA</a> must calculate its used value by repeating the list of values until there are enough. <a href="http://www.w3.org/TR/css3-background/" title="Layering multiple background images."> Layering multiple background images</a></blockquote> <h2>Masthead</h2> <p>The Site Name on this DWT uses plain text styled with CSS. You might choose to use a graphic image as on the <a href="alternative-index.html">alternative-index.html</a></p> <h2>Menu</h2> <p>The menu on the Floral Inspiration site template uses one of the commercial add-ins for Expression Web, <a href="http://www.ajatix.com/pure-css-menu/expression-web-add-in.html"> 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/"> Dynamic Drive</a>. This add-in allows for both horizontal menus with drop downs and vertical menus with flyouts. </p> <h2>Sidebar Content</h2> <p>If you want the sidebars to remain the same from page to page, leave them as they are. If you want all or a portion of them to change from page to page, you will need to make those areas an editable region.</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 © 2011 Company Name. All Rights Reserved. | <a title="Privacy Policy." href="privacy-policy.html">Privacy Policy</a></p> <p class="tinytxt">Template Design: <a href="http://www.expression-web-tutorials.com/">Expression Web Tutorials & Templates</a> </p> </div> <!-- Footer ends here --></div> <!-- Page Container ends here --></div> </body> <!-- #EndTemplate --> </html>