Creating a template is useful if you have to create multiple pages that look the same. The benefit of a template is if the programmer has to change an element (say in the header), instead of editing hundreds of documents, he/she can just edit one: header.php. It works by using the include command. Wordpress is one of the many systems that uses this technique. Copy and paste the following codes into their proper documents and the outcome should look like this page.

The Code

For index.php your code should look like this:

Your Config.php file should contain:

Your header.php file should contain:

Your topBar.php file should contain:

Your menu.php file should contain:

Your footer.php file should contain:

Your style.css file should contain:

/*** Template by Leah Lawrence 
     www.snowowldesigns.com
***/

body{
	margin:0;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	background-color: #333333;
}

/**** Typography ****/

h1{
	font-family:Georgia, "Times New Roman", Times, serif;
	margin:0px;
	padding:5px 0px 15px 0px;
	font-size:22px;
}

h2 {
	font-size: 24px;
	color: #FFFFFF;	
}

p {
	font-size: 12px;
}

/**** Structure ****/

#container{
	width:1004px;
	margin:0px auto;
	border:solid 1px #CCC;
	border-top:none;
	background-color: #CCCCCC;
}
#header{
	background-color:#666666;
	padding:20px 0px 0px 30px;
	height: 120px;
}
#topBar{
	background:#F8F8F8;
	border-bottom:solid 1px #BBB; 
	text-align:right; padding:5px;
}
#menu{
	font-size:12px;
	width:180px;
	margin:0px;
	padding:20px;
	border-right:dotted 1px #CCC;
	float:left;
	background-color:#FFFFFF
}
#content{
	float:left;
	width:742px;
	padding:20px;
	padding-bottom:0px;
}
#footer{
	font-size:11px;
	border-top:dotted 1px #CCC; 
	padding:20px;
    background-color:#FFFFFF
    clear:both
}

/*** Other ***/

textarea {
	width: 600px;
	height: 220px;
	border: 3px solid #cccccc;
	padding: 5px;
}

ul, li {
	list-style: none;
	font-size: 18px;
	padding-top: 5px;
}

Template Tutorial - Home

The Code