Here is a gallery of my templates that I have made. They are all released under the Creative Commons License 3.0. Here are some previews:

The most basic of all layouts is the one column layout. It has a small navigation above the header, a header, a navigation below the header, the content and the footer. This is a perfect design for a small organization or church, or a site where you don’t need a sidebar, or you have a lot of static content. I use a one-column layout on my personal site http://www.gorgefamily.com/alec and it works great!

We will make a fixed width version for this but you can make it fluid if you want.

Okay, let’s start with the basic tags.


<div id="wrapper">
<div id="top-nav"></div>
<div id="head"><h1>This is the header</h1></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></div>
</div>

The wrapper allows us to center the content and get some separation from the top with the following CSS.


#wrapper {
width:790px;
margin:auto;
margin-top:15px;
}

What this does is it makes with entire website 790px wide and it centers it on the screen. This allows the page to be viewed at all popular resolutions. What the margin:auto part does is the browser renders a object with a margin that is the same on each side, thus centering it. Now let’s fill in some sample content:

<div id="wrapper">
<div id="top-nav">
<a href="#">Test Link 1</a><a href="#">Test Link 2</a>
</div>
<div id="head"><h1>The <span>header</span></h1></div>
<div id="nav"><a href="#">Test Link 1</a><a href="#">Test Link 2</a></div>
<div id="content">
Lorem ipsum dolor sit amet...
</div>
<div id="footer">Copyright blah blah blah</div>
</div>


The post gets really long after this so here is a break. Read the rest of this entry »