You might be one of the lucky people that have a website that is much larger than 5 pages. When you need to make changes to your site, then it would be a little time consuming & pointless to make the same change to every page on your site. For this very reason, I would like to show you how you can use common elements by making use of PHP includes.

In this tutorial I will use the free template jd_b030 available from the Interspire site. I will break this layout into a common header, a footer and a main content section. The only unique part of each page will be the main content section – every header and footer will be governed by the content within the header.htm and footer.htm files.

What you will need for this tutorial:
·   A general understanding of HTML
·   A host that supports PHP scripting
·   Dreamweaver MX or another visual html editor

The idea behind using php includes for your header, footer is the creation of reusable elements to streamline the way you work and to decrease the maintenance time of your site updates.

By using common elements throughout your site, it is almost like using a stylesheet for your elements; when you make a change to a common element, then this content will change wherever this element is being shown throughout your website.



First I will build one page with a header and footer include. For the time being, these will be blank and will be ready for content code to be inserted.
The easiest way I've found to prepare our site for building is to make a copy of the template file jd_b030.htm (we will use it's contents later) and name it index.php.

My folder structure after copying is shown below



Make sure your index.php file is open in your html editor.
Create the php includes for the file by scrolling to the very top of your code and inserting the following code:

For the header insert the following line of code

<?php include(‘header.htm'); ?>

eg.


This will simply look for the header.htm document in the same folder as the index.php file and insert it's contents into this file at this point. You will only see the contents of this include when you call the index.php file from the browser in a php compatible environment.

For the footer file include, scroll down to the very bottom of your html code and insert the following line of code:

<?php include(‘footer.htm'); ?>

eg.


This will look for the footer.htm document in the same folder as the index.php file and insert it's contents here in this file.
Now create a header.htm and footer.htm files. Simply open your html editor, create a new document and save it as header.htm. Do the same for the footer file and save a blank document as footer.htm.

My folder structure now looks like this




If you remember in the last section I told you to copy the jd_b030 html layout file and call it index.php. The reason I did this is because now we simply have to ‘cut' the portion of the code we need to insert into the header.htm and footer.htm files – There's really no room for error this way.

Look below at the page layout that we will break up into separate files.



With your index.php file open choose the top part of the document that you wish to make a common header from. Be sure to include your navigation bar as this is usually the part of the code that changes from time to time. Cut the code out of the page and insert the code into your header.htm file. Please remember not to cut out the include reference for the header file – it has to stay in the index.php file, not in the header file.

Now go back to index.php file and do the same for your footer code. Scroll down and cut out the html code that you wish to use for the common footer. Insert this code into the footer.htm file and save the document.

The following code is the page code showing where we are cutting out the code for the header.htm and footer.htm files.

Notice the grey areas are the parts of the code that we have cut out - the top part is for the header.htm file and the bottom grey code is for the footer.htm file.

>> Start html file – this line is for your reference only
<!-- Provided by MyFreeTemplates.com -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyFreeTemplates.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="Keywords here">
<meta name="description" content="Description here">
<meta name="Author" content="MyFreeTemplates.com">
<META NAME="robots" CONTENT="index, follow"> <!-- (Robot commands: All, None, Index, No Index, Follow, No Follow) -->
<META NAME="revisit-after" CONTENT="30 days">
<META NAME="distribution" CONTENT="global">
<META NAME="rating" CONTENT="general">
<META NAME="Content-Language" CONTENT="english">
<script language="JavaScript" type="text/JavaScript" src="images/myfreetemplates.js"></script>
<link href="images/myfreetemplates.css" rel="stylesheet" type="text/css">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/btn_home_dn.jpg','images/btn_about_dn.jpg','images/btn_contact_dn.jpg',
'images/btn_products_dn.jpg',
'images/btn_support_dn.jpg',
'images/btn_news_dn.jpg')">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td height="87"><table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="342" rowspan="2"><img src="images/toplogo.jpg" width="342" height="87"></td>
          <td width="34" rowspan="2"><img src="images/topmidspace.jpg" width="34" height="87"></td>
          <td background="images/topbg.jpg"><img src="images/topbg.jpg" width="1" height="54"></td>
        </tr>
        <tr>
          <td background="images/topnavbg.jpg"><img src="images/btn_home.jpg" name="btn_home" width="55" height="33" id="btn_home" onMouseOver="MM_swapImage('btn_home','','images/btn_home_dn.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/navspacer.jpg" width="1" height="33"><img src="images/btn_about.jpg" name="btn_about" width="58" height="33" id="btn_about" onMouseOver="MM_swapImage('btn_about','','images/btn_about_dn.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/navspacer.jpg" width="1" height="33"><img src="images/btn_contact.jpg" name="btn_contact" width="67" height="33" id="btn_contact" onMouseOver="MM_swapImage('btn_contact','','images/btn_contact_dn.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/navspacer.jpg" width="1" height="33"><img src="images/btn_products.jpg" name="btn_products" width="79" height="33" id="btn_products" onMouseOver="MM_swapImage('btn_products','','images/btn_products_dn.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/navspacer.jpg" width="1" height="33"><img src="images/btn_support.jpg" name="btn_support" width="72" height="33" id="btn_support" onMouseOver="MM_swapImage('btn_support','','images/btn_support_dn.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/navspacer.jpg" width="1" height="33"><img src="images/btn_news.jpg" name="btn_news" width="50" height="33" id="btn_news" onMouseOver="MM_swapImage('btn_news','','images/btn_news_dn.jpg',1)" onMouseOut="MM_swapImgRestore()"></td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td valign="top">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" background="images/topnavbg.jpg">
        <tr>
          <td height="9" colspan="2" background="images/basebg2.jpg"><img src="images/basebg2.jpg" width="1" height="9"></td>
        </tr>
        <tr>
          <td width="150" rowspan="2" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td valign="top"><img src="images/mainpic1.jpg" width="150" height="157"></td>
              </tr>
              <tr>
                <td height="1" bgcolor="#FFFFFF"><img src="images/spacer.gif" width="1" height="1"></td>
              </tr>
              <tr>
                <td><img src="images/arrow.jpg" width="20" height="10">News</td>
              </tr>
              <tr>
                <td><img src="images/spacer.gif" width="1" height="1">
                  <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td width="20" rowspan="3"><img src="images/spacer.gif" width="20" height="1"></td>
                      <td><br>
                        <span class="sidelinks">Headling One</span></td>
                    </tr>
                    <tr>
                      <td class="sidelinks2">Date here</td>
                    </tr>
                    <tr>
                      <td class="sidelinks2">Small description...<br> <br>
                        <a href="#" class="sidelinks2">&gt;&gt; more info</a></td>
                    </tr>
                    <tr>
                      <td rowspan="3"><img src="images/spacer.gif" width="20" height="1"></td>
                      <td><br>
                        <span class="sidelinks">Headling Two</span></td>
                    </tr>
                    <tr>
                      <td class="sidelinks2">Date here</td>
                    < /tr>
                    <tr>
                      <td class="sidelinks2">Small description...<br> <br>
                        <a href="#" class="sidelinks2">&gt;&gt; more info</a></td>
                    </tr>
                  </table></td>
              </tr>
            </table></td>
          <td valign="top" bgcolor="#FFFFFF">
            <table width="100%" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td height="29" colspan="3" background="images/navbasebg.jpg"><img src="images/navbasebg.jpg" width="1" height="29"></td>
              </tr>
              <tr>
                <td width="40">&nbsp;</td>
                <td>
             <h1><br>Page Header</h1>
                  <h2>Sub Header</h2>
                  <p>Page content goes here; This is filler text to enable you
                    to see what the page should look like with text in it. Page
                    content goes here; This is filler text to enable you to see
                    what the page should look like with text in it. Page content
                    goes here; This is filler text to enable you to see what the
                    page should look like with text in it.</p>
                  <table width="100%" border="0" cellspacing="0" cellpadding="5">
                    <tr>
                      <td width="145" align="center" valign="top"><img src="images/snap1.jpg" width="120" height="90"></td>
                      <td valign="top"><p class="producthdr">Product One</p>
                        <p>Product Description here. A brief description about
                          the product here to give a quick reference to your viewers.</p>
                        <p><a href="#">&gt;&gt; more information</a></p></td>
                    </tr>
                    <tr>
                      <td width="145" align="center">&nbsp;</td>
                      <td>&nbsp;</td>
                    </tr>
                    <tr>
                      <td width="145" align="center" valign="top"><img src="images/snap2.jpg" width="120" height="90"></td>
                      <td valign="top"><p class="producthdr">Product Two</p>
                        <p>Product Description here. A brief description about
                          the product here to give a quick reference to your viewers.</p>
                        <p><a href="#">&gt;&gt; more information</a></p></td>
                    </tr>
                  </table>
                </td>
                <td width="25">&nbsp;</td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td bgcolor="#FFFFFF">&nbsp;</td>
        </tr>
      </table></td>
</tr>
  <tr>
    <td height="24" background="images/basebg1.jpg"><img src="images/basebg1.jpg" width="1" height="24"></td>
  </tr>
  <tr>
    <td height="44" valign="top" background="images/basebg2.jpg">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td class="baseline"><br>
            &nbsp;&nbsp;&copy; Copyright 2003. MyFreeTemplates.com. All Rights Reserved.</td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>
>> End html file – this line is for your reference only

Your PHP includes page is now built. All you need to do now is upload the files into your browser and call the index.php file. It should output the html page just like your original document except now the content of the top and bottom is coming from an external document.

Now that we've built one content page (index.php), we can simply go ahead and use this page as a ‘template' to build new website pages.
Open the index.php file in your html editor and simply click on File >> Save as.
Browse to the folder where you have saved the other site files, and give this new file a name such as ‘contact.php' and click ‘save'. A new content file called content.php should now be created.
For all other files in your site, simply repeat the above and name your files something else like the following: about.php, support.php, companyprofile.php, and so on.
To link these pages together, you will need to insert the links in the header.htm file.
Open your header.htm file and in DW click on a button to insert a link to. Go to your property inspector and choose the link icon to browse for the file and click ‘ok'. Alternatively you can enter the name of the file in the space provided.



In the raw code version, you can insert links by looking for the html code for each button and inserting a link reference tag for each button image.

<img src="images/btn_home.jpg" name="btn_home" width="55" height="33" id="btn_home" onMouseOver="MM_swapImage('btn_home','','images/btn_home_dn.jpg',1)" onMouseOut="MM_swapImgRestore()">

I've separated the above code to show you the first button only.
<img src="images/navspacer.jpg" width="1" height="33">
<img src="images/btn_about.jpg" name="btn_about" width="58" height="33" id="btn_about" onMouseOver="MM_swapImage('btn_about','','images/btn_about_dn.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/navspacer.jpg" width="1" height="33"><img src="images/btn_contact.jpg" name="btn_contact" width="67" height="33" id="btn_contact" onMouseOver="MM_swapImage('btn_contact','','images/btn_contact_dn.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/navspacer.jpg" width="1" height="33"><img src="images/btn_products.jpg" name="btn_products" width="79" height="33" id="btn_products" onMouseOver="MM_swapImage('btn_products','','images/btn_products_dn.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/navspacer.jpg" width="1" height="33"><img src="images/btn_support.jpg" name="btn_support" width="72" height="33" id="btn_support" onMouseOver="MM_swapImage('btn_support','','images/btn_support_dn.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/navspacer.jpg" width="1" height="33"><img src="images/btn_news.jpg" name="btn_news" width="50" height="33" id="btn_news" onMouseOver="MM_swapImage('btn_news','','images/btn_news_dn.jpg',1)" onMouseOut="MM_swapImgRestore()"></td>

To insert a link on the first button simply add a link tag to it as shown below. The link code is in bold

<a href="index.php">
<img src="images/btn_home.jpg" name="btn_home" width="55" height="33" id="btn_home" onMouseOver="MM_swapImage('btn_home','','images/btn_home_dn.jpg',1)" onMouseOut="MM_swapImgRestore()">
</a>

Repeat the above link code for all the other buttons in the navigation.
When you need to update your navigation, all you need to do is update this one file and it will be changed on every page that uses this include.

Well, now you see how easy it really is to build a site using our templates and at the same time making life easier on yourself to make site wide changes using a header and footer file.

If there is other content on your site that you wish to make reuseable – like a contact form or a news and upcoming events page etc. you may simply do this using the same principles and the php include code I have shown you above.

Next tutorial, we'll show you how to integrate this site to work in WebEdit and even include a common navigation menu to allow your users to edit the one navigation for the whole site, in WebEdit Professional.