src/sup/webplain/lazydays/index.html

   1 <!--
   2  ____________________________________________________________
   3 |                                                            |
   4 |    DESIGN + Pat Heard { http://fullahead.org }             |
   5 |      DATE + 2006.03.19                                     |
   6 | COPYRIGHT + Free use if this notice is left in place       |
   7 |____________________________________________________________|
   8
   9 -->
  10
  11 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  12     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  13
  14 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-AU">
  15
  16 <head>
  17
  18
  19   <title>lazy days ( intro )</title>
  20
  21   <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
  22   <meta name="author" content="fullahead.org" />
  23   <meta name="keywords" content="Open Web Design, OWD, Free Web Template, Lazy Days, Fullahead" />
  24   <meta name="description" content="A free web template designed by Fullahead.org and hosted on OpenWebDesign.org" />
  25   <meta name="robots" content="index, follow, noarchive" />
  26   <meta name="googlebot" content="noarchive" />
  27
  28   <link rel="stylesheet" type="text/css" href="css/html.css" media="screen, projection, tv " />
  29   <link rel="stylesheet" type="text/css" href="css/layout.css" media="screen, projection, tv" />
  30   <link rel="stylesheet" type="text/css" href="css/print.css" media="print" />
  31
  32 </head>
  33
  34
  35 <body>
  36
  37 <!-- CONTENT: Holds all site content except for the footer.  This is what causes the footer to stick to the bottom -->
  38 <div id="content">
  39
  40
  41
  42   <!-- HEADER: Holds title, subtitle and header images -->
  43   <div id="header">
  44     <div id="title">
  45       <h1>Lazy Days</h1>
  46       <h2>in the city</h2>
  47     </div>
  48     <img src="images/bg/balloons.gif" alt="balloons" class="balloons" /> <img src="images/bg/header_left.jpg" alt="left slice" class="left" />
  49     <img src="images/bg/header_right.jpg" alt="right slice" class="right" /> </div>
  50
  51
  52
  53   <!-- MAIN MENU: Top horizontal menu of the site.  Use class="here" to turn the current page tab on -->
  54   <div id="mainMenu">
  55     <ul class="floatRight">
  56       <li><a href="index.html" title="Introduction" class="here">Intro</a></li>
  57       <li><a href="help.html" title="Learn how to use the template">Help</a></li>
  58       <li><a href="tags.html" title="View the styled tags">Tags</a></li>
  59       <li><a href="print.html" title="View the print layout">Print</a></li>
  60       <li><a href="http://fullahead.org/contact.html" title="Get in touch" class="last">Mail</a></li>
  61     </ul>
  62   </div>
  63
  64
  65
  66
  67   <!-- PAGE CONTENT BEGINS: This is where you would define the columns (number, width and alignment) -->
  68   <div id="page">
  69
  70
  71     <!-- 25 percent width column, aligned to the left -->
  72     <div class="width25 floatLeft leftColumn">
  73
  74       <h1>Intro</h1>
  75
  76       <ul class="sideMenu">
  77         <li class="here">
  78           Dynamic Template
  79           <ul>
  80             <li><a href="#fluidity" title="Jump to section">Book of Fluidity</a></li>
  81             <li><a href="#coding" title="Jump to section">Coding</a></li>
  82           </ul>
  83         </li>
  84         <li><a href="http://fullahead.org" title="Goto Fullahead">Fullahead</a></li>
  85         <li><a href="http://threetree.net" title="Goto Threetree">ThreeTree</a></li>
  86       </ul>
  87
  88       <p>
  89         This sidebar can be used to jump to sections within the page, or other sub pages of the active tab.
  90       </p>
  91
  92       <p>
  93         Using this approach, you shouldn't need breadcrumbs since you've provided your visitor with a <b>visual cue</b> to where they are in the site.
  94       </p>
  95
  96       <p>
  97         To <b>learn more</b> about how to use this template, follow the <a href="help.html" title="View help">help</a> link.  You can also see the styled <a href="tags.html" title="View tags">tags</a> and the <a href="print.html" title="View print layout">print</a> layout version.
  98       </p>
  99
 100     </div>
 101
 102
 103
 104
 105     <!-- 75 percent width column, aligned to the right -->
 106     <div class="width75 floatRight">
 107
 108
 109       <!-- Gives the gradient block -->
 110       <div class="gradient">
 111
 112         <a name="fluidity"></a>
 113
 114         <h1>Dynamic Template</h1>
 115         <h2>Taken from the book of <a href="http://openwebdesign.org/viewdesign.phtml?id=2514" title="View template">fluidity</a>, this template is exceptionally easy to customize using re-useable CSS classes.</h2>
 116
 117         <p>
 118           This template quickly and easily allows for one, two, three or even four column layouts.  This is done with simple <acronym title="Cascading Style Sheet">CSS</acronym> classes that can be used over and over again.  To learn more about it, follow <a href="help.html" title="View help">this link</a>.  The template itself is valid <acronym title="eXtensible Hypertext Markup Language">XTHML</acronym> 1.0 strict and <i>almost</i> valid CSS.  The almost is added in there because CSS expressions were used.  You can read more about that <a href="#expressions" title="Read about CSS expressions">here</a>.
 119         </p>
 120
 121         <blockquote class="go">
 122           <p>
 123             This template doesn't use fixed columns.  With a few simple CSS classes you can quickly change the appearance.  <a href="help.html" title="View help">Click here</a> to learn how.
 124           </p>
 125         </blockquote>
 126
 127         <p>
 128           Since this template is fluid width and the font sizes are defined relatively, you can <b>change font size without breaking the layout</b>.  The fluid width also means that people with higher resolutions aren't constrained.
 129         </p>
 130
 131         <p>
 132           Total size of the images used is just under 25 <acronym title="kilobytes">kb</acronym>, so that's good news to all the dial-up users.  The code behind the template is semantically written which means that it is widely supported.  As for the browsers, it displays consistently in the usual suspects:
 133         </p>
 134
 135
 136         <ul>
 137           <li><b>Firefox</b> of course</li>
 138           <li><b>Opera</b> sure, why not</li>
 139           <li><b>Netscape</b> like firefox's less attractive cousin at the dance</li>
 140           <li><b>Internet Explorer</b> ...</li>
 141           <li><b>Safari</b> cause macs are computers too</li>
 142         </ul>
 143
 144       </div>
 145
 146
 147
 148
 149
 150       <div class="gradient">
 151
 152         <a name="coding"></a>
 153
 154         <h1>Coding</h1>
 155         <h2>Image Alignment and The Header</h2>
 156
 157         <p>
 158           <a href="http://www.mozilla.com/firefox/" title="Get Firefox"><img src="images/firefox.jpg" alt="pic" class="floatLeft"/></a>
 159           Images are fully supported using the <i>floatLeft</i> and <i>floatRight</i> classes.  Just apply one of them to the image you want to position.  Images that have link tags around them will also have a nifty rollover effect, as long as you're using a standards complients browser.  If you're not, well then no rollover effect for you.
 160         </p>
 161
 162         <p>
 163           The site header images are <a href="images/bg/header_left.jpg" title="View slice one">two</a> <a href="images/bg/header_right.jpg" title="View slice two">slices</a> and a repeated background.  Using the same approach, and a little bit of photoshop, you should be able to easily replace them.  However, since they were created by me, you're welcome to use them in any projects you might like.
 164         </p>
 165
 166         <h2>The Footer</h2>
 167         <p>
 168           A variation on the <a href="http://www.themaninblue.com/experiment/footerStickAlt/" title="View footerStickAlt code">footerStickAlt</a> technique is used to force the site footer to the bottom of the page if there isn't enough content to push it down.  This means your template will always look tidy and you won't have to worry about a lonely footer, hanging out halfway up your page.
 169         </p>
 170
 171         <a name="expressions"></a>
 172
 173         <h2>Readability using Maximum Width</h2>
 174         <p>
 175           To improve readability of this template (since it is fluid), the width is capped at 1000 pixels.  This seems like a pretty reasonable thing to do and that's why CSS has thoughtfully included the max-width property.  Unfortunately, IE decided it didn't need no stinkin' max-width, so a CSS expression was needed.
 176         </p>
 177
 178         <blockquote class="exclamation">
 179           <p>
 180             A CSS expression is like a snippet of javascript code that runs in your style sheet.  It's invalid CSS, but only IE pays any attention to it.
 181           </p>
 182         </blockquote>
 183
 184         <p>
 185           If you're concerned about having valid CSS, take out the expression.  It won't ruin the template in IE, it just means that the content will expand to 100% of the screen width.  All other browsers will behave.
 186         </p>
 187
 188       </div>
 189
 190     </div>
 191
 192   </div>
 193
 194 </div>
 195
 196
 197 <!-- FOOTER: Site footer for links, copyright, etc. -->
 198 <div id="footer">
 199
 200   <div id="width"> <span class="floatLeft"> design <a href="http://fullahead.org" title="Goto Fullahead">Fullahead</a>
 201     <span class="grey">|</span> valid <a href="http://validator.w3.org/check?uri=referer" title="Validate XHTML">XHTML</a>
 202     <span class="grey">|</span> should be valid <a href="http://jigsaw.w3.org/css-validator" title="Validate CSS">CSS</a>
 203     </span> <span class="floatRight"> <a href="index.html" title="Introduction">intro</a>
 204     <span class="grey">|</span> <a href="help.html" title="Learn how to use the template">help</a>
 205     <span class="grey">|</span> <a href="tags.html" title="View the styled tags">tags</a>
 206     <span class="grey">|</span> <a href="print.html" title="View the print layout">print</a>
 207     <span class="grey">|</span> <a href="http://fullahead.org/contact.html" title="Get in touch">mail</a>
 208         <span class="grey">|</span>
 209 <!--This theme is free for distriubtion,  so long as  link to openwebdesing.org and www.best10webhosting.net  stay on the theme-->
 210 Courtesy of <a href="http://www.openwebdesign.org" target="_blank">Open Web Design</a> &amp; <a href="http://www.dubaiapartments.biz/hotels/" target="_blank">Hotels - Dubai</a>
 211     </span> </div>
 212
 213 </div>
 214
 215 </body>
 216
 217 </html>