<!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 "Templates/paradise-beach.dwt" --> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- #BeginEditable "doctitle" --> <title>How to use this template</title> <!-- #EndEditable --> <style type="text/css"></style> <link rel="stylesheet" type="text/css" href="paradise.css" /> <!--[if lte IE 6.0]> <style type="text/css"> #pb { background: url('images/pb-blue.gif') no-repeat: } </style> <![endif]--> <!-- #BeginEditable "head" --> <!-- meta, styleblocks, etc. go here --> <style type="text/css"> .floatright { padding-left: .75em; float: right; } </style> <!-- #EndEditable --> </head> <body> <div> <p id="masthead"> <img alt="The Club at Paradise Beach" src="images/pb.gif" width="405" height="125" id="pb" /></p> </div> <div id="menu"> <ul> <li><a href="index.html">home</a></li> <li><a href="accomodations.html">accommodations</a></li> <li><a href="spa.html">spa</a></li> <li><a href="resource.html">activities</a></li> <li><a href="reservations.html">reservations</a></li> </ul> </div> <div class="featured"> <!-- #BeginEditable "featured" --> <h2>Featured editable region</h2> <p>This region was created to feature whatever bits you want to call extra attention to. You can use it or specials, news, or whatever you would like. Image are all centered in this narrow column by default using contextual selectors in the stylesheet.</p> <p>Mark had is celebrating his fifth year with Paradise Beach and is in charge our all our fitness instructors. His favorite class is tai chi on the beach.</p> <p> <img alt="Mark" src="images/mark.jpg" width="150" height="187" /></p> <p>Our diving instructor Jessie has logged over 1,000 hours as a PADI Certified Dive Master and Instructor. </p> <p> <img alt="Jessie" src="images/Jessie.jpg" width="150" height="198" /> </p> <!-- #EndEditable --> </div> <div id="content"> <!-- #BeginEditable "maincontent" --> <h1> <img alt="" src="images/dinner.jpg" width="300" height="200" class="floatleft" />Using The Club at Paradise Beach Template</h1> <p>This template has two editable regions in the body of the template.</p> <p>The first is the region you see here with the main content ready for text. </p> <p>The image to the left of the page title is contained in the h1 element and floated to the left depending on your preference.</p> <p>Below are three images that are floated side by side using a class called story. Each of these will take up just under one third of the space available but still be a minimum of 150px wide due to the images. If you wished to have a second row of images with captions I would recommend using a clearing element such as a horizontal rule with the style of "clear: left;" so that your new row will all have the same starting place in case your divs are not exactly the same height due to the content they contain.</p> <p>NOTE: In design view with the DWT applied the images will wrap to more than one row with the DWT editable region outline. Preveiw in yoru browser and you will see that the story divs are all on one row even at 800x600.</p> <div class="stories"> <p> <img alt="Dave and Heather" src="images/couple1.jpg" width="150" height="99" /></p> <p> The staff at Paradise Beach made our honeymoon unforgettable.<br /> <span class="visitors"><em>Dave and Heather<br /> New Haven, CT</em></span></p> </div> <div class="stories"> <p> <img alt="John and Debbie" src="images/couple2.jpg" width="150" height="102" /></p> <p>We have always dreamed of learning to sail. We look forward to returning again.<br /> <span class="visitors">John and Debbie<br /> Phoenix, AZ</span></p> </div> <div class="stories"> <p> <img alt="Gary and Helen" src="images/couple3.jpg" width="150" height="88" /></p> <p>We had so much fun on our first visit after we became empty nesters that this was our sixth visit. <span class="visitors">Gary and Helen<br /> Chicago, IL</span></p> </div> <p class="clearleft">Sorry but this resort does not exist. It is one of the featured designs at <a href="http://by-expression.com"> http://by-expression.com</a> Instructions on using this template at <a href="Templates/resource.html">resource.html</a></p> <!-- #EndEditable --> </div> <div id="footer">© 2007 by-expression.com and Cheryl D Wise</div> </body> <!-- #EndTemplate --> </html>