Expression® Web Design
| 
| 
File Includes
Tuesday, March 18, 2008
When working with FrontPage, you had the option of using FrontPage Page Includes. This made it very easy to have the same content on all your web pages. You would go to Insert - Web Component. In the Component Type on the left, you would choose Advance Controls. Now in the right side of the dialog box, you see HTML. Choose this and Finish. Now browse your FrontPage web site for the HTML you would like to include. This was one of the very few FrontPage components that was handled by FrontPage and locally and did not rely on FrontPage Server Extensions (FPSE).FrontPage also had an option called shared borders. This component relied heavily on FrontPage Server Extensions and would be corrupted very easily; through ten shared borders. Some people relied on these since they were fairly simple to use.
FrontPage also offered a Dynamic Web Template (DWT) that was managed locally by FrontPage. You created a "template" via FrontPage, made some regions editable and uneditable. The editable regions were then able to be changed on any new pages you attached to the template.
The real benefit was that you were able to see what the web page would look like before publishing it on the web server.
Another method was frames but these just even had more problems, especially with search engines. And a lot of web developers new to the HTML world had problems usually with it. One of the other problems was with the search engine results. If the search engine directed the user to the specific link in your web site, then users would not see any other frame (possibly your navigation). See a video tutorial on what might happen if you use frames.
File Includes
However, each of these methods had it's pitfalls, but there is another solution and some of the Expression Web users are relying on these methods now. Files are actually included by the server through a process. You have a variety of options to use.Server Side Includes
The first one we will look at is Server Side Includes (SSI). SSI can be used usually on all platforms (*NIX and Windows) with an .shtml or .shtm file extension. You use this directive:<!--#include file="includes/nav.html" -->
This will locate the nav.html in your includes folder and insert it into your web page before being rendered in the browser. There is also a way to have an *NIX server parse .html files as an .shtml file, which would help in not renaming the files. You can see an example of a web site using Server Side Includes.
ASP Server Includes
Active Server Pages (ASP) is usually ran on a server with some version of Windows installed. You can insert the page by adding<!--#include file="includes/nav.html" -->
to your code. This is using a relative path to your nav.html file. You can also use a virtual path
<!--#include virtual="/includes/nav.html" -->
This comes in handy on your 404 Error Page depending on how many folders you have, where the user might have come to get your 404 Error Page, and how the server actually handles the page. You can also download an example of a web site using ASP Includes.
PHP Server Includes
PHP Server Side Includes will come in very handy if you are using PHP to build your web site.<?php include("includes/nav.html"); ?>
Is the directive you can use to include you nav.html file in your PHP file. You can download an example site using PHP includes.
ASP.NET File Include
A lot of ASP users are attempting to migrate over to .NET, some with great success and some with very little success. And then you have the few (like me) that would like to still see ASP supported forever. But if you find yourself where you are using .NET and need to include a file:<%
Response.WriteFile ("includes/nav.html")
%>
JavaScript Includes
This is one that I do not recommend. You need to convert your HTML into JavaScript for it to be included into your HTML page. Plus, if the user does not have JavaScript enabled on the browser, the included content might not show. Search engines might also have a problem reading the information in the JavaScript. The one good thing about this is you do not need to worry about re-naming you .html files to .shtml or .asp.For example, if you HTML code was something:
| <a href="/default.asp">Home</a> | <a href="/about.asp">About</a> | <a href="/contact.asp">Contact</a> |
Then the JavaScript file would look something like
<!--
document.writeln("| <a href=\"/default.asp\">Home</a> | <a href=\"/about.asp\">About</a> | <a href=\"/contact.asp\">Contact</a> |");
//-->
To include this file into your HTML web page, you would add:
<script src="includes/nav.js"></script>
This even sounds more complicated than the others as well.
Some of the Differences between FrontPage Includes and Server Side Includes
As discussed previously in FrontPage Includes, users were able to actually see the included content. However, if it is a server side include, users were unable to see this content and sometimes it was more difficult to work with.In FrontPage Includes, FrontPage required the page that was going to be included to have a "complete" HTML page, for example, the page needed to have the <html>, <head>, and <body> elements to be displayed properly.
In a Server Side Include (SSI, ASP, PHP, .NET), you only want to include the code that you want to be seen. For example, you would only have:
| <a href="/default.asp">Home</a> | <a href="/about.asp">About</a> | <a href="/contact.asp">Contact</a> |
in the HTML page. If you include the <html>, <head>, and <body> elements, chances are it will still display properly, but some browsers might not show everything properly.
Expression Web will still show the FrontPage Page Includes since the Includes are handled via the program. Now if you wanted to change to some type of server side includes, you can do a Find - Replace in the Source code. If you do this, create a backup copy of your web site before changing this. This will help you in case something goes wrong.
