If you have not read Part 1, with the introduction to this example, you may want to click here.
There are many template sites both free and paid sources. With this example, we took a free template design from Open Source Web Design dot org (OSWD.org) and built our foundation. Remember, a template is simply saving you time and money in designing the visual component and very little of the structural components. Immediately after downloading the template, we can begin our work.
Before we even get too far in, let’s start to analyze what we have. In most cases you will have a basic template home page and possibly a second content page. Also included, usually, are images that are a part of your website template and a CSS file. The CSS file is your brains behind the visual (and some structural) components of the website design. CSS stands for Cascading StyleSheet and is a very streamlined approproach to consistent web design. A CSS file at minimum contains the font choices and other stylistic attributes. However, it can contain the background images and foreground images displayed throughout your pages.
Since this is not a CSS tutorial, time to move on!
This is our starting template that we chose:
Now the first decision comes into play. Are you going to have any functionality in your website? Are you planning on having any dynamic content from a database displaying on your webpages? In this example the answer is yes.
The righthand column will have restaurant reviews pulled from a database and the main content area will have restaurants listings pulled from the same database. If the answer is yes, at this point you can rename your html template pages to have php extensions. At this point no code changes will need to occur as php can read all of the html tags without issue. Just remember that any hardcode links will not work right now as they are pointing to your .html pages. No need to change them just yet.
This is because we are about the rip up the page. The reason we use php is to more easily manage our website even if we don’t plan on having any functionality in our website YET. Making the change to php now gives you that flexibility to add it later without renaming your pages and for now the ability to manage it easier. This is how…
The section of code, usually directly under the body tag is your header. (We are not going to get into specifics on this as this tutorial would grow exponentially, but if you have question feel free to contact us.)
Create a new file, named header.php, and copy/paste this code into it while deleting it from your original file. Now do the same for the code that makes up your footer, naming it footer.php. Where that code was originally you are going to insert:
<?php include("header.php"); ?> and <?php include("footer.php"); ?> respectively.
What this does is allow you to know create copies of this page as a template, of your template. And as you decide to make change to each page, modifying header.php and footer.php will make changes to the entire site. So when you decide to add Google Analytics down the road, a quick modification to footer.php will inlcude it on all of your pages.
So back to the tutorial. Once you have created the structure that meets your needs, it is time to start customizing. By changing out images, and moving around some code, the site begins to evolve into your expanded vision.
Making color changes and possibly font changes, the site really starts to move away from the template it began as. In this example, we also changed the menu bar to our own, added google ads, flipped the homepage around and this is what it became:
Looking at them closely you can see the resemblance from which one came from the other, but they definitely do not look the same. Using a template can save a great amount of time and money, but you can make it your very own!