I understand the possibilities there are with XSSI, but i just don't see how I can use it with my site. So...er...HELP! To start, I want get rid of the frames on my site. I was using them on the old site, got fed up with it and abandoned that. So I really don't think I should start using them again.
This is how I look at frames: Frames are often used as a way of adding the same piece of HTML (like a navigation bar) to a set of pages over and over again. They are used as a crutch for when you don't have a way of adding pieces to your pages in a dynamic way. For instance, when I started my first major web site, I was coding it by hand on an underpowered server. I put the navigation in a separate frame because my site was well over 100 individual pages and I didn't want to have to go through and re-code the site each time I made a change to the navigation. I didn't have access to SSIs on that web server, so I had to settle for using frames.
SSIs can serve that purpose in a much more efficient fashion. By placing your navigation inside a file that will be #included, you can make those changes on the fly, without having to deal with the problems associated with frames. Your visitors will love you for it.
So, I think I should use #includes for all the common elements and not make them part of the actual page. Is that correct?
That's exactly right. SSIs are great for including in pieces that will be used over and over again in a site.
Now, take the next step: Don't limit your #includes to just the Navigation bars or other visible elements. On my For Placement Only site, I have an included file that has all of my BODY tag attributes in it. Having one file for this makes it a snap for me to change link colors, background images, etc. And even beyond that, I have a place to inserting a style sheet and JavaScript directly into the page. (Style sheets and JavaScript can be brought into a file using other mechanisms, but I prefer using SSIs because I know they will work and not break in one browser or another.)
Here's a diagram explaining what I mean. Below you can see a diagram showing the concepts of using SSI's to establish the layout of a page.
<HTML>
<HEAD> ** </HEAD>
<BODY ** >
+----------------+
|**| ** |**|
|--+----------+--|
| | | |
| | | |
|**| Content! |**|
| | | |
| | | |
|--+----------+--|
|**| ** |**|
+----------------+
</BODY>
</HTML>
Everywhere you see the '**' is a place where you could have an included file, because often, most pages will use these same pieces over and over again. Notice also that by following this format, we can make the content of the page become independent of the structure of the page. (Now where have I heard of that idea before?) Here's a sample of the source HTML files for my FPO site:
<!--#include virtual="/rosso/includes/template_doctype.shtml" -->
<HTML>
<HEAD>
<TITLE> for placement only + menu </TITLE>
<!--#include virtual="/rosso/includes/template_head.shtml" -->
</HEAD>
<BODY <!--#include virtual="/rosso/includes/template_bodytag.shtml" -->>
<!--#include virtual="/rosso/includes/template_top-left.shtml" -->
<!--#include virtual="/rosso/includes/template_top-center.shtml" -->
<!--#include virtual="/rosso/includes/template_top-right.shtml" -->
<P>CONTENT</P>
<!--#include virtual="/rosso/includes/template_bot-left.shtml" -->
<!--#include virtual="/rosso/includes/template_bot-center.shtml" -->
<!--#include virtual="/rosso/includes/template_bot-right.shtml" -->
</BODY>
</HTML>
Inside my /includes/ directory I have each of the files that the above #include commands refer to. The first one is a standard DOCTYPE definition line. The second is a full CSS style sheet and some JavaScript. In the BODY tag I have an #include that allows me to change all of the BODY attributes (LINK, BACKGROUND, etc.) from one '/includes/template_bodytag.shtml' file.
Note that even the TABLE, TR and TD tags that make up the 3x3 grid in the first diagram are inside of the #included files. This makes the page layout completely wrap around the page content. This leaves me free to edit and manipulate the pages in BBEdit and still have them somewhat viewable when I preview them in Netscape locally off my hard drive rather than off of the (SSI enabled) web server.
One final piece to think about. Notice how my #include commands all refer back to the root of the web server rather than using '../includes/' or '../../includes/'. I've made the #include references absolute rather than relative.
The best way to start out is to make a sample document that will be a template for all the other pages in the site. Once the page is finished, marked out the parts that should be put into the #included files. Copy and paste those pieces into new text files and then save them out. Now go back to your original page and start putting the correct #include commands into the HTML. Then use that page as your template for all the other pages on your site.
ehm...would the use of XSSI not mean i will have a lot of extra files on the server?
No. It means that when you need to make a change to your site (like adding a menu items to your navigation bar) you only have to do it in one file, not 10 or 100.
Is there any other advantage to using a Page Template system like this?
Well, I was able to very quickly add a "printer friendly version of this page" system to the XSSI Library site, precicely because of this template system.
But what about the variable parts, such as different menu items, different content?
XSSI supports setting Environment Variables and then using IF/THEN/ELSE statements to figure out what to include. I'll write another article on how the dynamic menu works on FPO and at Paradise Discotechque. (The key to this last step is having the server set up so that #included files are also run through the XSSI module. Having this capability depends on what version of the SSI module you have. Apache has supported this kind of nested interpreted SSIs since 1.3)
Good luck and let me know how it works out.
