I thought I’d share my normal procedure for starting a new web site, using a free CSS template, chopping it up into separate PHP parts, editing bits, and putting it all back together again. Unless you are a web designer by trade, or have one that works for you, you may not be comfortable starting a design from scratch, so you probably head over to your favorite free templates site and look for one you like. I do that frequently! If I’m not in the mood to spend tons of time pulling creativity out of my a**, er, brain, I grab someone else’s creative genius, tweak it to match my needs, pull it apart, and put it back together again.

Now, some of you are probably wondering what I mean by chopping it up into separate PHP parts, and why I might do that. See, I love using dynamic bits of code in my pages, so that down the line, the site is easier to maintain. For instance, I always like to have my main navigation in one file that gets included on every page. If I need to make a change to the navigation, I only need to change it one place, rather than on every page. I do the same kind of thing to every element that is going to be the same site-wide (on every page of the site). To do this, I need to create separate files to hold each of these site-wide elements, and then put a little php code to call the files into the template I’m using for the site. Enough chatting, let me just show you what I mean.

Step One: Grab a free CSS template from your favorite template site (such as OSWD). I’ve chosen to use Coffee N Cream for this example. Click on that link (it will open in a new window or tab), so you can see the template we’ll be using. Now, if you right-click anywhere in that template, and choose This Frame > View Frame Source, you’ll see the HTML code that is used for that template (shown below). If you download the template, you’ll see that same code in a file called index.html. You’ll also see some images, and a file called default.css. Although the images and CSS file are necessary for the final product, we won’t need to touch them for our PHP chop shop. Right now, we’ll only be dealing with the HTML code - chopping it up into separate files that can be included in the original file as PHP code.

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="description" content="description">
<meta name="keywords" content="keywords">
<meta name="author" content="author">
<link rel="stylesheet" type="text/css" href="default.css" media="screen">
<title>Coffee N Cream</title>

<div class="container">

	<div class="header">

		<div class="title">
			<h1>Coffee N Cream</h1>
		</div>

	</div>

	<div class="navigation">
			<a href="index.html">Vestibulum</a>

			<a href="index.html">Suspendisse</a>
			<a href="index.html">Elemen</a>
			<a href="index.html">Maecenas</a>
			<a href="index.html">Sodales</a>
			<div class="clearer"><span></span></div>
		</div>

	<div class="main">		

		<div class="content">

			<h1>Porttitor posuere</h1>
			<div class="descr">Jun 13, 2006 by Vulputate</div>

			<p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, <a href="index.html">nunc eget pretium</a> porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est.</p>

			<blockquote><p>Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus.</p></blockquote>

			<p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam.</p>

			<p>Fusce porta pede nec eros. Maecenas ipsum sem, interdum non, aliquam vitae, interdum nec, metus. Maecenas ornare lobortis risus. Etiam placerat varius mauris. Maecenas viverra. Sed feugiat. Donec mattis <a href="index.html">quam aliquam</a> risus. Nulla non felis sollicitudin urna blandit egestas. Integer et libero varius pede tristique ultricies. Cras nisl. Proin quis massa semper felis euismod ultricies.
			</p>

			<h1>Adipiscing</h1>

			<div class="descr">Jun 11, 2006 by Laoreet</div>

			<p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam. Phasellus rutrum elit vel nisi. Cras mauris nulla, egestas quis, cursus at, venenatis ac, ante. Fusce accumsan enim et arcu. Duis sagittis libero at lacus. Suspendisse lacinia nulla eget urna.</p>

			<ul>
				<li>Tristique</li>
				<li>Aenean</li>
				<li>Pretium</li>

			</ul>

			<p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, nunc eget pretium porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est. Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus. Fusce eleifend, dui ut posuere auctor, justo elit posuere sapien, at blandit enim quam fringilla mi.</p>

			<h1>Interdum</h1>
			<div class="descr">May 24, 2006 by Lectus</div>

			<p>Praesent nisi sem, bibendum in, ultrices sit amet, euismod sit amet, dui. Donec varius tincidunt nisi. Ut ut sapien. Integer porta. Fusce nibh. Curabitur pellentesque, lectus at <a href="index.html">volutpat interdum</a>, sem justo placerat elit, eget feugiat est leo tempor quam. Ut quis neque convallis magna consequat molestie. Nullam semper massa eget ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque a nibh quis nunc volutpat aliquam</p>

			<code>margin-bottom: 12px;
font: normal 1.1em "Lucida Sans Unicode",serif;
background: url(img/quote.gif) no-repeat;
padding-left: 28px;
color: #555;</code>

			<p>Eget feugiat est leo tempor quam. Ut quis neque convallis magna consequat molestie.</p>

		</div>

		<div class="sidenav">

			<h1>Something</h1>

			<ul>
				<li><a href="index.html">pellentesque</a></li>
				<li><a href="index.html">sociis natoque</a></li>
				<li><a href="index.html">semper</a></li>
				<li><a href="index.html">convallis</a></li>
			</ul>

			<h1>Another thing</h1>
			<ul>
				<li><a href="index.html">consequat molestie</a></li>
				<li><a href="index.html">sem justo</a></li>
				<li><a href="index.html">semper</a></li>
				<li><a href="index.html">sociis natoque</a></li>

			</ul>

			<h1>Third and last</h1>
			<ul>
				<li><a href="index.html">sociis natoque</a></li>
				<li><a href="index.html">magna sed purus</a></li>
				<li><a href="index.html">tincidunt</a></li>

				<li><a href="index.html">consequat molestie</a></li>
			</ul>

		</div>

		<div class="clearer"><span></span></div>

	</div>

	<div class="footer">© 2006 <a href="index.html">Website.com</a>. Valid <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> &amp; <a href="http://validator.w3.org/check?uri=referer">XHTML</a>. Template design by <a href="http://templates.arcsin.se">Arcsin</a>

	</div>

</div>

Step Two: Look at the various sections of the HTML code and determine where the logical separations are, and which pieces should be pulled out into their own separate files. For this example, I would pull out the entire navigation div (the one that starts with <div class=”navigation”> and ends with the closing div tag just before the main div. I would also pull out the sidenav div and the footer div. Each of those are elements that I will likely want to be the same throughout the site - on every page. So for a 100 page site, rather than repeating (and editing) each of those elements 100 times, I’d rather just edit them once - in their own separate files - and just include them into my template.

Step Three: Cut/paste each of those sections into a new blank page (using your favorite HTML editor or text editor). Name each one appropriately. So I would remove the navigation div from the main template, place it into a new blank page, and name that page main-nav.inc (for example). You don’t have to end these pages in .inc if you don’t want, but I do it so that I know that these are bits of code that will be included in other pages (with “inc” being short for “include”). In the place of the code in the template, I would place this one line of php code: <?php include(”main-nav.inc”); ?> From now on, any time I make a change to the main-nav.inc code, it will automatically be instantly updated on every page of the site that is using that template. Repeat the same steps for the sidenav div and footer div, saving each part as sidenav.inc and footer.inc, and then replacing that code in the template with <?php include(”sidenav.inc”); ?> and <?php include(”footer.inc”); ?> respectively.

Step Four: To review, you should be starting out with just the one template page that you downloaded, (not counting the css file), but you’ve ended up with four pages - the original template page that now has bits of php code included in it, and three new pages, main-nav.inc, sidenav.inc, and footer.inc. You can reuse that template page many times. You’ll be changing the information in the top HEAD portion, and you’ll be changing the information in the main and content divs, but you won’t have to deal with the menus or footers within these templates ever again. (Each separate file listed below).

New index.html file:

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="description" content="description">
<meta name="keywords" content="keywords">
<meta name="author" content="author">
<link rel="stylesheet" type="text/css" href="default.css" media="screen">
<title>Coffee N Cream</title>

<div class="container">

	<div class="header">

		<div class="title">
			<h1>Coffee N Cream</h1>
		</div>

	</div>

	<div class="main">		

		<div class="content">

			<h1>Porttitor posuere</h1>
			<div class="descr">Jun 13, 2006 by Vulputate</div>

			<p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, <a href="index.html">nunc eget pretium</a> porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est.</p>

			<blockquote><p>Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus.</p></blockquote>

			<p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam.</p>

			<p>Fusce porta pede nec eros. Maecenas ipsum sem, interdum non, aliquam vitae, interdum nec, metus. Maecenas ornare lobortis risus. Etiam placerat varius mauris. Maecenas viverra. Sed feugiat. Donec mattis <a href="index.html">quam aliquam</a> risus. Nulla non felis sollicitudin urna blandit egestas. Integer et libero varius pede tristique ultricies. Cras nisl. Proin quis massa semper felis euismod ultricies.
			</p>

			<h1>Adipiscing</h1>

			<div class="descr">Jun 11, 2006 by Laoreet</div>

			<p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam. Phasellus rutrum elit vel nisi. Cras mauris nulla, egestas quis, cursus at, venenatis ac, ante. Fusce accumsan enim et arcu. Duis sagittis libero at lacus. Suspendisse lacinia nulla eget urna.</p>

			<ul>
				<li>Tristique</li>
				<li>Aenean</li>
				<li>Pretium</li>

			</ul>

			<p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, nunc eget pretium porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est. Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus. Fusce eleifend, dui ut posuere auctor, justo elit posuere sapien, at blandit enim quam fringilla mi.</p>

			<h1>Interdum</h1>
			<div class="descr">May 24, 2006 by Lectus</div>

			<p>Praesent nisi sem, bibendum in, ultrices sit amet, euismod sit amet, dui. Donec varius tincidunt nisi. Ut ut sapien. Integer porta. Fusce nibh. Curabitur pellentesque, lectus at <a href="index.html">volutpat interdum</a>, sem justo placerat elit, eget feugiat est leo tempor quam. Ut quis neque convallis magna consequat molestie. Nullam semper massa eget ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque a nibh quis nunc volutpat aliquam</p>

			<code>margin-bottom: 12px;
font: normal 1.1em "Lucida Sans Unicode",serif;
background: url(img/quote.gif) no-repeat;
padding-left: 28px;
color: #555;</code>

			<p>Eget feugiat est leo tempor quam. Ut quis neque convallis magna consequat molestie.</p>

		</div>

		<div class="clearer"><span></span></div>

	</div>

</div>

main-nav.inc file:

	<div class="navigation">
			<a href="index.html">Vestibulum</a>

			<a href="index.html">Suspendisse</a>
			<a href="index.html">Elemen</a>
			<a href="index.html">Maecenas</a>
			<a href="index.html">Sodales</a>
			<div class="clearer"><span></span></div>
		</div>

sidenav.inc file:

		<div class="sidenav">

			<h1>Something</h1>

			<ul>
				<li><a href="index.html">pellentesque</a></li>
				<li><a href="index.html">sociis natoque</a></li>
				<li><a href="index.html">semper</a></li>
				<li><a href="index.html">convallis</a></li>
			</ul>

			<h1>Another thing</h1>
			<ul>
				<li><a href="index.html">consequat molestie</a></li>
				<li><a href="index.html">sem justo</a></li>
				<li><a href="index.html">semper</a></li>
				<li><a href="index.html">sociis natoque</a></li>

			</ul>

			<h1>Third and last</h1>
			<ul>
				<li><a href="index.html">sociis natoque</a></li>
				<li><a href="index.html">magna sed purus</a></li>
				<li><a href="index.html">tincidunt</a></li>

				<li><a href="index.html">consequat molestie</a></li>
			</ul>

		</div>

footer.inc file:

	<div class="footer">© 2006 <a href="index.html">Website.com</a>. Valid <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> &amp; <a href="http://validator.w3.org/check?uri=referer">XHTML</a>. Template design by <a href="http://templates.arcsin.se">Arcsin</a>

	</div>