The primary reason to use includes is to assist in creating a site that is easily managed and updated. It is difficult however to do this with an existing site, the time to implement an organised structure, incorporating include pages, is when the site is being designed, or redesigned.

Planning is very important and the most common mistake that people make is not realizing how much a site is likely to grow. When you have perhaps a dozen or two dozen pages, making changes by individually opening each page is a nuisance. By the time the site has grown to hundreds of pages it has become a Herculean task.

This article describes an approach to design which tries, to some extent at least, to separate style and content and to break content into categories to make it more easily managed. It is NOT purist on this topic since for many people absolute separation of the two is both impractical and technically too difficult, it may not even be totally desirable. 

This is a simple approach which anyone can use in any site with minimal difficulty and which will mean a site which is easily updated or whose appearance can be altered quite significantly without it being a major redesign project. Throughout the article I will refer to real sites that use the methods explained.

Approaching the Design

It is self evident that each new site needs a different approach, no two are identical. Before you can even start to look at how the site will look and how you will build and organise it, you need to think about many factors peculiar to the site, of which these are just a few:

• Who will be using it? 
• What is it intended to achieve? 
• What different sorts of content will be incorporated? 
• How much is it likely to grow (this is very commonly underestimated)? 
• How often will content change? 
• What is the nature of the content?

This article is not the place for a discussion of all these factors, many of which have already been covered in the series of articles here.

Creating a Template

Having considered the factors above the next task is to create a suitable template for the site. 

A template is really no more than a typical site page. It should include all the elements that the final pages need to include, the appearance, layout, navigation, any repeating information such as navigation, contact details and copyright information, place for text with sample text included and so on. The template should take account of all factors peculiar to the site. Some sites will need a few slightly different templates but for the sake of simplicity we will assume here that one will suffice. 

Once the template is designed you have a site - all you need to do is copy the page for each new one that you need. It is therefore well worth spending a fair bit of time on your template and on getting it right.

There are four stages in making the basic template:

1. Create the Look and Feel

The most common way to start making a template is to construct an image of how you want the page to look in a graphics program. This allows you to create all the images you need, place the various elements of the page within the design and satisfy yourself that the whole thing looks right. By the time you finish with this stage you should have an image that looks exactly as the template page will.

This is an example of an image for a template. In this case there were no images used for navigation, if there had been alternative images for rollovers need to be created before the template page can be made.

2. Create the Page Structure

This requires you to look carefully at the image you have made and see how best to recreate it on the final page. In the case of the example above the image was cut up to create a series of images that will be used on the final page. These look like this. I find it useful to add notes to these images - it really helps if you need to revisit the design at a later stage.

How you do this deconstruction of the image is up to you, you can use a program such as ImageReady or you can do it manually. However you do it careful construction of the final page is essential so that it all slots together again. You will need a good grasp of tables and using them to achieve a satisfactory result. If you are unsure of how to go about this read this article on tables to clarify things in your mind.

Keep in mind when making the page that you will be using includes - make things easier for yourself later by separating the page into different sections in your mind and letting the table content follow this plan. For example using three tables stacked on on top of the other, for header, main area and footer areas of the page - will make things easier later. Bear in mind the fact that each include page must go into a self contained area - its own table or table cell - if you are going to be able to add content around it later.

By the end of this stage you should have a page that is empty, but looks good!

3. Make it Work

First You need to place text in each area where it will appear on the final pages, navigation, contact details, main text, copyright information and so on. You can also add any JavaScripts or DHTML required for navigation at this stage and make sure they are functional. It doesn't matter at this stage where the links go - you can add the final links later.

This is also the time to structure and style your text content with CSS. If you have not used CSS, please consider learning how to do so now, there is no one thing more important to easy manageability than CSS. Have a look at the introduction to the subject here. 

My approach to this is to take each element on the page one by one and create the style for it. You can easily tweak them later.

By the end of this stage you should have a fully functional web page, although not a particularly interesting or useful one. In the case of the page used as an example above the final functioning template can be seen here. 

(The sharp eyed among you may notice that the navigation is now different from the one on the original design. The site owner wanted a change, I edited a single navigation include file and the style sheet and it was done!)

4. Test, Test, Test!

Look at your completed template in as many browsers, on as many platforms and at as many different resolutions as you can. Ask for opinions on the design now - this is a good time to post your site for an initial critique. 

When you are finally happy with your template it is time to move on to the next phase - breaking it up again to make your include pages. 

Deconstructing the Template

Before starting this stage save a copy of your template in its current state and create a folder in your site called 'includes' to which you will save the include pages as you make them.

1. Creating Includes

When you look at your completed template there will be several areas that lend themselves to being extracted and saved as includes. We will look at creating an include page for the header as an example.

The top part of most pages on most sites remains the same. If you have, as recommended above, placed the head part of the page in a separate table, it is a simple matter to extract it now and place it in its own page.

You can do this by carefully selecting the entire table in the HTML and pasting it into a new page. If you are unhappy about working in HTML a simpler way is it simply to make a copy of the template, delete everything except the header and then save the file as header.htm in the includes folder. 

In either case you can then reopen your template, delete the head part and replace it by including the file you just made, includes/header.htm. If you are using FP includes the page will now look the same as it did originally with the header appearing in your layout though not editable there, in the case of other 'flavors' of includes you will not see the included content on the final page, it will not appear until the page is on a server. It is useful therefore to publish such sites early so that you can test the template.

Repeat this for all the other parts of the page that will be used as includes - the navigation, the footer information, text navigation and so on.

Returning to our sample site, you can see the various include pages used as individual pages which may help to to see how they then slot together.

Header 
A table with all images etc in it.
Navigation 
Looks plain here, when added to the page the style sheet comes into play.
Notices  
Currently does not contain a bottom text navigation, but this could be added in minutes to the whole site.
Footer
Just a table with a simple background, but saved as an include in case we decide to do something with it in the future.

2. Extracting other Content

Why stop at includes? If you have used any scripts in the creation of your page consider placing these in their own external .js files and linking to them. 

While using an embedded style sheet in the head of your page will work, really for convenience and easy management of your site an external style sheet is far more useful. If you have not already done so, extract your style now and create a link to it.

Both of these procedures are well explained in this article, called, charmingly, Shrinking Your Head!

In the case of the sample site this is the style sheet, there are no .js files in this site.

The Final Result

You now have a page which can be opened, copied and have text added in minutes to create new pages on your site.

The time spent struggling to get the template right will seem as nothing the day your realize you need to redesign the navigation bar on a site containing dozens of pages and you that you can do it by editing just one or two files. If you decided that your site looked a bit tired in future by editing the style sheet, the include files and replacing a couple of images you could have a total redesign of even a large site completed in a matter of hours. 

Some Other Uses for Includes

1. Breakout Content

Small breakout boxes, including short frequently changed information, usually linking to content you wish to draw attention to or which is new, are a very useful application of includes.

By creating a series of include pages - say called breakout1.htm, breakout2.htm and so on, you can update the information on many pages at the same time. The breakout boxes on this site are implemented using FrontPage includes. If you go through a few pages you will see how they can be added to the appropriate pages at will and edited across the entire site easily.

2. Section Specific Navigation

You can incorporate section specific menus within a main navigation bar by using a series of different navigation includes, one for each section. While in many cases it may be better to separate main and subsidiary navigation, using multiple includes can be a good solution in some cases. I use this on my own site which has different navigation include pages on the main page and this page, giving the effect of dropdown subsidiary navigation but implemented in a very 'low tech' way.

3. Print Versions of Pages

Sometimes you have content you want made available in a print version as well as a standard page. While a site using a database to store content will have little difficult doing this, a standard static site can make it easier using includes.

You can create content that you want to provide in a printable version in a very simple page with no tables or images, just the content. This page can then be included in the final web page and also in a separate page suitable for printing. If you are doing this repeatedly you could create a simple template page for the printable version and even a separate CSS style sheet for those pages, using a style more suitable for printing. Now you just need to edit one page to update both versions.

You can, should you so desire, also make this page available to other sites to use as a PHP include as discussed in Part II of this series.

In reality if you are doing this a lot you may be better off considering a move to some sort of database system. 

Can you come up with other uses? Let me know and I will add them here!

<< Part II - Creating  SSI, PHP and ASP Includes