
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>
            Sample Template
        </title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta http-equiv="imagetoolbar" content="no" />
        <meta http-equiv="content-style-type" content="text/css" />
        <meta http-equiv="keywords" content="php, scripting, php script, image swap, picture change" />
        <meta http-equiv="description" content="Sample page showing image  swap on:click of a UL menu list for the nav list and a search form and a list of Links using php scripting" />
        <meta http-equiv="reply-to" content="jlhaslip@yahoo.ca" />
        <meta http-equiv="author" content="Jim Haslip" />
        <link rel="stylesheet" type="text/css" href="style_file_here.css" />
<style type="text/css">
/*<![CDATA[*/
* html { margin:0; padding:0;}
html { margin: 0; padding: 0; }
html, body {
   height: 100%;
   }
#wrapper { /* div you want to stretch */
   min-height: 100%;
   }
body {
 margin:0 auto;
 padding: 0;
 text-align:center;
 width:700px;
 font-family: verdana, arial, sans-serif;
 color:#000;
 font-size:11px;
 font-weight:normal;
 }
#header {
        font-family: georgia, verdana, arial, sans-serif;
        color:white;
        background-color:#003366;
        font-size: large;
        font-weight:600;
        padding: 0;
        margin 0;
        width:700px;
        text-align: left;
  line-height: 14pt;
  height: 1%;
  }
#wrapper {
 margin: 0;
 padding: 0;
   }
#sidebar_left {
     float: left;
      width: 180px;
   border-right: 1px dotted #666666;
 margin: 0;
 padding-bottom: .5em;
     }
h1 {
 margin-top: 0;
 padding: 0 0 0 .5em;
font-size: 1.4em;
 }
h2 {
 margin: 0;
 padding: 0 0 0 1.5em;
font-size: 1em;
 }
ul {
   text-decoration: none;
   list-style-type: none;
   text-align: left;
   width: 180px;
 margin: 0;
 padding: 0;
   }

li {
    margin:0;
    padding:0;
    }
    
#sidebar_left li a {
 display:block;
 padding-left: 1.5em;
 }
#sidebar_left h4 {
 background-color: #F3F4F5;
 height:2em;
 text-align: left;
 padding-left: 1em;
 padding-top: 1em;
 margin: .5 .5em .5em 0;
 width: 80%;

 }
#banners ul, #banners li {
 text-align: center;
 margin: 0;
 padding: 0;
   }
div {
 margin: 0;
 padding: 0;

 }
#content {
   margin: 0 0 0 180px;
   padding: 0;
   }
#content img {
 float: left;
 margin: 1em;
 }
form {
 margin-top: 1em;
 margin-bottom: 1em;
 }
p {
 margin: .25em;
 padding:.25em;
 text-align:left 
 }
#footer  { clear:both; margin_top: .5em; }
#footer p { margin: 0 auto; padding: .25em; text-align:center; border-top: 1px dotted #666666; }
#footer a { margin: 1em auto; padding: .15em; }
.footer_text { font-size: 7px; }
a         { color: #003366; border: 1px dotted #ffffff; }
a:link    { text-decoration: none; }
a:visited { text-decoration: none; }
a:active  { color: #54622D;  }
a:hover   { color: #cc6633; border:1px dotted #cc6633;  }
/*]]>*/
</style><!--[if lte IE 6]>
<style type="text/css">
#wrapper {
height: 100%;
}
</style>
<![endif]-->
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <h1>
                    Put here your title
                </h1>
                <h2>
                    and this is your description
                </h2>
            </div><!-- header -->
            <div id="sidebar_left">
                <div id="nav">
                    <h4>
                        Navigation
                    </h4>
                    <ul>
                        <li>
                            <a href="?">main page</a>
                        </li>
                        <li>
                            <a href="?do=archives" title="">picture 1</a>
                        </li>
                        <li>
                            <a href="?do=stats" title="">picture 2</a>
                        </li>
                        <li>
                            <a href="?dosearch=yes" title="">picture 3</a>
                        </li>
                        <li>
                            <a href="?" title="">other link</a>
                        </li>
                    </ul>
                </div><!-- close nav -->
                <div id="search">
                    <h4>
                        Quick search
                    </h4>
                    <div>
                        <!-- The Quick Search Form -->
                        <form method="post" action="?dosearch=yes">
                            <div>
                                <input type="text" name="story" size="14" /> <input type="hidden" name="do" value="search" /> <input type="submit" name="submit" value=
                                "Search" size="14" />
                            </div><!-- close form div -->
                        </form><!-- End of the Search Form -->
                    </div>
                </div><!-- close search -->
                <div id="banners">
                    <h4>
                        Banners
                    </h4>
                    <ul>
                        <li>banner item here
                        </li>
                        <li>banner item
                        </li>
                        <li>banner item here
                        </li>
                    </ul>
                </div><!-- close banners -->
                <div id="links">
                    <h4>
                        Links
                    </h4>
                    <ul>
                        <li>
                            <a href="http://cutephp.com" title="PHP News Content Management System">CutePHP Scripts</a>
                        </li>
                        <li>
                            <a href="http://news.google.com" title="Google News Site">Google News</a>
                        </li>
                        <li>
                            <a href="http://mozilla.org" title="Mozilla dot Org">Mozilla.org</a>
                        </li>
                    </ul>
                </div><!-- close links -->
            </div><!-- close sidebar_left -->
            <div id="content">
<?PHP

/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */
/*   Here we decide what page to include           */
/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  */

if($_POST['do'] == "search" or $_GET['dosearch'] == "yes")
{ 
    $subaction = "search"; 
    $dosearch = "yes"; 
    echo "<img src='img_green.jpg' alt='alt text here' />";
}
elseif($_GET['do'] == "archives")
{ 
    echo "<img src='img_suv.jpg' alt='alt text here' />";
}
elseif($_GET['do'] == "stats")
{ 
    echo "<img src='img_sport.jpg' alt='alt text here' />";
}
else
{ 
    echo "<img src='img_sedan.jpg' alt='alt text here' />";
}

?>            </div><!-- close content div -->
            <div id="footer">
                <p class="footer_text" >
                    <a href="http://validator.w3.org/check?uri=referer">validate the xhtml</a> ~~~ &copy; 2006 Sample CuteNews page by BuffaloHELP ~~~ <a href=
                    "http://jigsaw.w3.org/css-validator/">validate the css</a>
                </p>
            </div><!-- footer -->
        </div><!-- wrapper -->
    </body>
</html>