Part 1 - Getting started.

You will not be able to test your pages on your hard drive, since these includes need a web server for them to work. You will need to build the pages on your hard drive, and then upload them to your host server for testing. I’m going to use PHP includes. I find this work best for me, as I use other PHP scripting on my pages, and I’m more familiar with PHP and SSI. You may use what ever fits your needs best. There are plenty of tutorials that you can easily find if you get stuck. This tutorial is pretty universal, so should work with little or no modification.

Note! If you use a Windows system, check my resourse page to see how you can set up a server on your hard drive.

First, make a new folder on your hard drive named test. This way you can upload the whole folder and test everything out and not loose track of the pages. Inside the test folder, make another new folder and name it includes. This is where you will keep all of your include files. If you are going to use any images in your test pages, you should add a folder for them named images.

Lets start with a simple page layout for our includes.

Start a new page. Add the usual standards head and body tags. If you are using a Cascading Style Sheet, add that to this page. You can refer to my CSS Lessons if you need any help with style sheets. Then add a table with 3 rows and 1 column with a width of 100%. In row 1 add a new table with 1 column. In row 2, add another table with 2 columns. In row 3 add a table with 1 column. Then save it as test.php or the file extension that fits your include from the list above.

This is what you should have so far. Note! I added comments to my page to show where the new tables will go. This will help me from getting lost in a complicated table. A comment is just that, a comment. It adds useful information without displaying it when the page is vied in a browser. <!-- comment goes here -->

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> <!-- Row 1 Header --><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table> </td>
</tr>
<tr>
<td> <!-- Row 2 --> <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
</tr>
</table></td>
</tr>
<tr>
<td> <!-- Row 3 Footer --> <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table> </td>
</tr>
</table>

Now, so you can check your work on your hard drive, we will build the page just as you normally would. This way you can open the page locally to make sure everything fits properly. If you like, you could copy over a page that you have already built. However, I recommend for this tutorial, that you build new pages to help you understand the process more completely.