Is there any one thing asked about more often in the OutFront forums than include pages? Probably not and the questions come from those grappling to come to terms with the concept as well as those looking for solutions for quite complex scenarios. Including content from one page in another is an extremely useful technique and one which everyone should be familiar with. FrontPage makes it very easy to do, but there are other ways and this tutorial is intended as an overview of the entire subject, from the basics of using FP includes to a look at Server Side Includes (SSI), ASP includes and PHP Includes with, hopefully, a few useful tricks along the way.

Towards the 'Ping!' Moment

Most people, when they first hear about includes, have a little difficulty in understanding exactly what the big deal is. They ponder, experiment, fiddle with pages waiting for the 'Ping!' moment, that moment of clarity when it all suddenly makes sense. If you have not reached that point yet this section is for you. If you have, you can skip this part.

The easiest way to get a feel for the concept of inclusion is to take a simple scenario.

You have built a site, starting with maybe half a dozen pages but over time growing to three or four times that many. Each page has contact details on it. You move. If you have not used includes this means opening each page in turn and editing your contact details, quite a chore.

By using includes you could avoid all this work. Your contact information could be in a single page, with the content of this page 'included' in every other page on the site. Now you just need to open one page, edit the details, and every other page on the site is automatically updated.

While this is obviously convenient, it is really quite a lowly example of the power of includes. Perhaps the most common reason for using includes is navigation. As your site grows you will inevitably want to make changes to the navigation, adding items, removing items, even reorganizing the entire thing. By creating your navigation bar in a single page and then including it in all the other pages of your site, you can alter the navigation bar for the entire site in minutes by editing a single file.

Assuming you now understood the 'why', its time for the 'how'.

How to Include Content Using FrontPage

Since doing is learning, this section requires you to fire up FrontPage and create a new web. Go do that now.

Ready?

Now do the following 5 steps.

1. Create a page containing a single 4 cell table, 2 cells on top and 2 below. Make the table 100% wide, with the left cells set at 180 pixels and the right cells with no width defined. In the top right cell type "This is Page One". Save the page as page1.htm.
    
2. Create a new page. In it type your contact details - no tables, just your contact details. Save it as contact_details.htm
    
3. Create a new page. In it type a series of words such as might appear in a navigation bar - Home, About Us, Services, Contact Us etc - with each item on a new line. Again no table required, just type in the words. Save the page as navigation.htm
    
   You are now ready to start including.
    
4. Open page1.htm. Place your cursor in the top left column, and do the following:
    
   Insert>Component>Include Page.

   In the dialogue box that appears browse to your navigation.htm file, select it and click OK and then OK again.

   As you can see your navigation is now 'included' on page1.htm

   If you look at the page in HTML view (if you wish, you don't have to!), you will see the include 'bot' code:

   <!--webbot bot="Include" U-Include="navigation.htm" TAG="BODY" -->
    

5. Repeat step 4, this time starting with your cursor in the lower right cell and including contact_details.htm

   In HTML view you can now see:

   <!--webbot bot="Include" U-Include="contact_details.htm" TAG="BODY" -->

   Pause now and have a look at your page1.htm in normal view. You will find that if you attempt to edit the content you included - the navigation and contact details - you are unable to. You can only edit this content by opening the actual files that the information is in. Close page1.htm.

   Let's assume you have just moved house. Open contact_details.htm. Edit your address. Save the file. Now open page1.htm again. As you will see your contact details have been updated.
    

6. Make a copy of page1.htm, call it page2.htm. Now open your navigation.htm page an make some alteration to it. If you reopen page1.htm and page2.htm you will see that both have been updated.

That is really all there is to it. Imagine now that instead of just page1.htm and page2.htm your site contains 200 pages. If contact_details.htm and navigation.htm is included on each, editing a single file will update them all with new details or an edited navigation.

A few Important Points

Plan your Layout

Using tables, or some form of 'container', to hold content is essential if you are using includes. The included page will entirely fill the space available to it. If you include navigation.htm in a page without tables you will be unable to enter other content to the right of it. Try it and see. Thus when using includes it is important to plan your page layout carefully so that sections of it that will use include pages are self contained, leaving other areas for the actual page content.

The first step in creating a new web should be making a template. This will be a page laid out as you want it with space allocated for each include, and for each part of the pages individual content. There is some more about doing this here.

http://www.outfront.net/tutorials_02/design/layout.htm

Using Multiple Includes

There is no problem with using multiple includes in a page, you could readily have a header include containing your logo and everything on the top of the page, a footer with perhaps navigation and contact details, a navigation bar on the left and a news section in a column on the right all placed using include pages. While there is some increase in the time it will take the page to load, as the server looks in turn for each page to include, this is overridden by the fact that subsequent pages will now load very quickly, since the include pages will already be in your user's cache.

Be Organized

It is a very good idea to save all your include files in a single folder and to name them clearly so that their function is obvious. FrontPage automatically updates the links as you move files around, so if you have followed the practical example above you can now just create a folder called 'includes', then drag and drop the include pages into it.

Know What is Included

When an FP include is added to your final page, only the content between the <body> and </body> tags is included. In the normal run of things this has little significance, but if you are using a JavaScript in your include page it becomes important. Most JavaScripts will have a portion that goes in the <head></head> part of the page, or will require a link to an external script in the head of the page. Since this part of the page is left behind in the case of an include, it must either be placed in the head of the final page or moved to the body part of the include page.

Similarly any part of the script that goes within the <body> tag itself must be added to the <body> tag of the final page.

If this means nothing to you now, don't worry about it, pass on, but remember you read it because some day it may save you a lot of angst!

Publish - Do Not FTP

For FrontPage include pages to work you must publish your site, not FTP it. In fact include pages will work to some extent if you FTP, in that they will appear on the final pages. However if you update an include page the change will only appear on a final page once it has been opened, saved and FTPed again. This pretty much takes away any advantage of using includes. It also brings us neatly to the next part of the tutorial, using different flavors of includes other than those provided by FrontPage.

In the next part of this tutorial we will look at the other 'flavors' of includes and what, if any, advantages they offer over FrontPage includes. In the last part we will have a more detailed look at the practicalities of building easily managed sites with templates and includes.