13 July 2006 15 views One Comment Print This Post

I have been talking to a friend at work who missed most of the internet revolution. Webpage creation is a bit of a mystery and acronyms like HTML, XHTML, CSS, PHP, CGI, and XML are making his head swim. But he is persistent and has tried to read up on the various technologies by buying a couple of books. Unfortunately he may know just enough to feel paralyzed and unable to figure out what to do first.

So, I’m going to demonstrate how to create a slick looking website with free (and nearly free) resources available on the internet as a an example.

Goal

The goal of this exercise is to create a good looking, dynamic website using a free template from the web and upload it to a free host to see it all working.

Definition

What the heck is a dynamic website? Well it could mean a variety of things, but for this exercise, it will mean a website that has webpages which reuse pieces to make the webpages look similar.

The High-level Plan

First, I am going to go to oswd.org and pick out a free, open source webpage template to use for the example website.

In order to make all the webpages look similar, I am going to use a free PHP script called FastTemplate, from thewebmasters.net. PHP is a readily available scripting language that should work on most Apache webservers. It may also be available on other webservers, too.

I am going to cut up the oswd.org template into reusable pieces and then use FastTemplate to put them together when served up from a webserver to a browser.

In order to see it in action, we’ll need a webhost. There are free webhosts available on the internet, and I will be using t35.com for this example. Normally I would not use a free host, but I need someplace to host the example website so the exercise can be complete.

Step 1: Get some free hosting

I suggest doing this step first because it may take some time to setup your account on the web server.

In order to make this whole tutorial free, I went out and found a free host who allows PHP files. As I mentioned, I am going to use FastTemplate to generate dynamic pages from reusable pieces. So, we need a host with PHP support - and free. I found t35.com by doing some research. Normally, I would use a paid host, but I signed up for a t35.com account for this example. When you are ready for a paid host, you may want to consider 1and1.com, I’ve tried several hosts in the past few years and I really like them.
Step 2: Get a webpage template

Open Source Web Design (oswd.org) is a place where talented people share their web template designs. For this example, I will choose a template from oswd instead of trying to design one of my own. Like I said, there are many talented people willing to share their work. They have taken the time to figure out how to create standardized web templates that work in most browsers; and they look good, too.
I’m going to use Localize by ad_267 because the layout is simple and obvious.

Here is a diagram showing the regions of the template:

When you download the files, you’ll need to extract them with WinZip or a tool like it. WinZip has a free evaluation version. If you use the evaluation version, you should see something like this when you download the zip file:

As you can see, the template is only 3 files: A stylesheet (screenstyle.css), an example webpage (index.html) and an image (leaf.jpg). We will use the index.html as our template, and the stylesheet will make it all look pretty.

Extact and save the files somewhere that you can work on your PC. I chose to extract it to a New Folder called “an-example-website” in My Documents.

Now that you have all the files, upload them to your website to see them in action. You may need WS_FTP, from ipswitch, or something like it. Ipswitch offers a free evaluation version of WS_FTP.

If you open a browser and go to youraccountname.t35.com, you should see the template working. Since t35.com is a free host, they put an advertisement up in front of your page the first time you visit. My webpage looked like this when it first opened:

So, we have chosen a template, downloaded it to our PC, uploaded it to our free web host and actually seen it working in a browser. At this point, we know everything works. Now let’s start breaking things.

Step 3: Get FastTemplate and cut up the template into reusable pieces

Download FastTemplate from thewebmasters.net.

You will need to decompress the file before opening it in WinZip. So, save it to disk, first. Then open it with WinZip.

WinZip will ask you to decompress the file. When you extract the file, extract it to the Localize directory. The directory structure should look like this:

Now we are going to cut up the Localize template into small files which FastTemplate will reassemble.

Open the index.html file, in the Localize directory, with Wordpad or Notepad. You will notice that the file is made up of a bunch of div tags. These div tags arrange the content in the page into logical areas. Each div tag has a different class in this file. The screenstyle.css will be used, by the browser, to format the appearance of the content within the div tags, based on their class value.

If you look at the index.html file, you will notice that the class values of the div tags can be mapped directly to the red blocks in the diagram above.

We are going to cut the div tags (except container), and their content, and paste them into new sub-template files. In their place we are going to put a placeholder, which will be replaced at runtime by FastTemplate.

Here is an example of the div tag with the class value titleblock being replaced by a placeholder, {TITLEBLOCK}.

Here is the file before editing:

We create a new titleblock.tpl file in the Localize directory with that div tag in it, like this:

Save it to the Localize directory, like this:

Then replace the div in the index.html with a placeholder, {TITLEBLOCK}, like this:

Repeat those steps for each div (except container). Create a new file for navbar, content, rightcontainer, and footer.

Then rename the index.html file to index.tpl.

You should end up with a directory that looks like this:

Your index.tpl should look something like this:

Create a new file called index.php that looks like this:

That’s it. If you have done everything here, you now have a bunch of reusable files which FastTemplate will assemble when index.php is requested.

So, let’s try it out.

Step 4: Upload and test

Upload all of your .tpl files and your .php file to you t35.com account.

Your filelist, WS_FTP, should look something like this:

Now, try to access http://youraccountname.t35.com/index.php with a browser (remember to replace youraccountname, with your t35.com account/username).

It should look exactly like the index.html file does.

So now what?

Now you can create as many pages as you want by creating a new contentpage.php file which uses a different contentpage.tpl as the content. For example, if you wanted an “About” page, you could create an about.tpl file with the content, and an about.php file which set “{CONTENT}” to “about.tpl”. Then, when you upload and access about.php, you should see the contents of your about.tpl file in the content area of the template.

You can now edit the pieces of your website to look the way you want them to and each page will get the changes. If you want to put a different picture in the top of the template, each page will get the change by editting the titleblock.tpl file.

Problems

The host, t35.com, doesn’t allow .htaccess files, apparently. I tried. I was going to show how you can associate .html files with .php so that your index.php could be named index.html. This works on my host, 1and1.com. You may want to try 1and1.com or shop around for someone who allows .htaccess files.

If you enjoyed this post, make sure you subscribe to the EricHolsinger.com RSS feed!