jimpix[articles]

digg stumbled upon delicious reddit google yahoo facebook

Background

A long time ago, I used to make webpages in Dreamweaver. The thing I really liked about it was the fact it supported templates. The idea was that you made a template file, and then could make countless other pages based on this template. Then, when you edited the template, all the other pages were also updated at the same time. But there was one drawback with this method: you then had to upload all of the other pages which used that template. If you're running a big site, that can take a long time.

And then I found out about (ASP) include files - which offer a lot more power, and are very simple to implement. But there is one pre-condition - your site needs to be running on a server which can support them. Generally speaking, that means the server needs to be able to run a server-side scripting language such as Microsoft's Active Server Pages (or ASP for short), or that far more popular PHP. If your site can only process standard HTML files, then unfortunately you can't use include files... There are doubtless countless other scripting langueages used to make websites which also use include files, but I don't know about them so am not mentioning then. I'm going to talk primarily about include files used in Active Server Pages for this article.

What exactly is an include file?

An include file allows you to, as the name implies, include content on your page. This is done by adding the link to the include file in the source code of your page.

This is an example of how to use an ASP include file in as ASP page (using a relative link):

<!--#INCLUDE file="../inc2/fb1.asp" -->

I'm not too familiar with PHP, but I have used includes before on one PHP site (to slot in a menu), and the syntax goes like this:

<?php include '_footer.htm'; ?>

The great thing about the include file route is that any (ASP/PHP) page can use them. I'll use the example of pages on this site as a way to explain about how useful they are.

Worked example

  1. <!--#INCLUDE file="../includes/c.asp" >
  2. <!--#INCLUDE file="../includes/_slot1.asp" >
  3. <title>Title goes here</title>
  4. <!--#INCLUDE file="../includes/_slot2.asp">
  5. <h1>jimpix...</h1>
  6. <!--#INCLUDE file="../includes/_slot3.asp" >
  7. <!-- main content goes here -->
  8. <!--#INCLUDE file="../includes/_slot4.asp" >

So, that's an 8 line template file. If I save the above into a new file, and save that as an ASP page, I get this page in its place. Not bad eh - very simple indeed.

In the above example, there are 5 ASP include files, which are used for the following:

c.asp - contains the connection string to the database, and a load of common functions which can be called on when required.

_slot1.asp (header) - contains the header information for the page:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <link rel="stylesheet" href="../css/blsky.css" media="screen" type="text/css" />
  6. <link rel="stylesheet" type="text/css" media="print" href="../css/print.css" />

Next, when the page is being slotted together, as per the example in lines 1-8 above, after _slot1.asp, I can add in any additional elements in the head section, such as the <title> or any other bits and pieces. After that comes the next include file, to close the <head> section, and start the <body> area.

_slot2.asp - contains the end of the <head> section, and the start of the <body> section:

  1. </head>
  2. <body>
  3. <div id="wrapper">
  4. <div id="title">

The <div> bits are to do with using Cascading Style Sheets to control layout instead of using tables. For this article, they're not too relevant.

After _slot2.asp I can add some text which will appear at the top of each page using the template. On this page for example, what appears after the _slot2.asp include file is this line:

<h1>jimpix[<span class="silver">words: ASP Includes</span>]</h1>

The next ASP include file contains the main navigation elements on the site:

_slot3.asp (the navigation)

  1. </div>
  3. <p id="menu_top">
  4. <!-- top navigation line goes here -->
  5. </p>
  6. <p id="menu_bottom">
  7. <!-- bottom navigation line goes here -->
  8. </p>
  9. <div> id="abar">
  10. <!-- style switcher links go here -->
  11. </div>
  13. <div id="content"><div><a name="top" id="top"></a></div>

The top <div> on line 1 above is used to close off the page header, and the bits on line 13 are the start of the main page contents. All the rest (lines 3-11) are used to display the navigation at the top of each page.

Anything which now appears after _slot3.asp appears as the main content of each page using this template. All the stuff in the include files is used to define page headers, the main "wrapper" of the content and the footer.

_slot4.asp (the footer)

  1. <div class="cleared"></div>
  2. </div>
  3. <div id="footer">
  4. <p>
  5. <!-- footer links go here -->
  6. </p>
  7. </div>
  8. </div>
  9. </body>
  10. </html>

The finished "article"

Once all of your ASP include files have been "bolted" together, you have a complete (x)html page:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <link rel="stylesheet" href="../css/blsky.css" media="screen" type="text/css" />
  6. <link rel="stylesheet" type="text/css" media="print" href="../css/print.css" />
  8. </head>
  9. <body>
  10. <div id="wrapper">
  11. <div id="title">
  13. </div>
  15. <p id="menu_top">
  16. <!-- top navigation line goes here -->
  17. </p>
  18. <p id="menu_bottom">
  19. <!-- bottom navigation line goes here -->
  20. </p>
  21. <div> id="abar">
  22. <!-- style switcher links go here -->
  23. </div>
  25. <div id="content"><div><a name="top" id="top"></a></div>
  26. <!-- individual page content goes here -->
  28. <div class="cleared"></div>
  29. </div>
  30. <div id="footer">
  31. <p>
  32. <!-- footer links go here -->
  33. </p>
  34. </div>
  35. </div>
  36. </body>
  37. </html>

Finally, what's so good about ASP Include Files?

Imagine you have a 50 page site. Lets say you have navigation similar to mine (i.e. a horizontal navigation bar at the top of the page). Now let's say that you wanted to add in a completely new section to your site.

Using the Dreamweaver template scenario, you could edit the template, which would in turn update all of the pages using that template. BUT you'd then need to upload all 50 pages to reflect the change in the navigation bar.

With the example above, all you need to do is to update one include file (_slot3.asp) and upload it, and all pages which have that page as an include are automatically up to date.

Same goes for any of the other elements contained within your ASP include files - an excellent time saving way to make your pages...

site statistics