SBI! Includes - Step By Step

I think that the SBI! Includes is one of my favorite parts of SBI! At the same time I have a feeling that it is underutilized by many web masters. It is simply a major time saver for me.

SBI! Includes is the SBI! version of SSI. SSI stands for Server Side Includes and basically works on the server level to insert snippets of HTML code into the final page that is rendered on the users browser. This is extremely helpful in making maintenance easy and tidy.

I try and think about SBI! Includes as a set of building blocks that I can modify myself.

Here is the simple step by step approach I would use for a new site:

Step 1 - Make a draft of the L&F you want using tables with the graphics and everything leaving space for the navbar on the left.

I usually plan my sites similar to the table above. Assign background colors to each section and add graphics. Using tables is considerably easier to do than full CSS design.

At this time you can do the design in any tool you find comfortable working with. From a pencil drawing on a napkin to DreamWeaver or FrontPage that I use. Consider this a draft and treat it like that.

In the following article I will use my 4x4OffRoads.com web site as a real life example.

You can use the following HTML as a starting point:

Step 2 - First include file should be the Header with the logo and top image.

Choose a name that is easy to remember. No need to think about keywords since this is only for the server to know. The file extension should be .shtml - and note that the file name can not be the same as a page on your site (or in fact a name that is reserved by SBI! like navbar, head and footer).

This is the HTML for the 4x4OffRoads.com site. I name it 4x4-header.shtml

I wrap the content within TABLE tags. The sites Look and Feel is based on standard SiteSell templates. You could start with your own or copy and modify the above code.

There are a few tricks in this short snippet. If you are not sure what they are for you can always add the lines later.

• The first line loads a favicon (you must make this file and load it separately).
• Next comes a JavaScript that puts the page in the primary position (useful for image search results from Google and Yahoo!).

i) A special include file for the left hand column - where you include the NAVBAR and can add other elements at will.

Here is my left-column.shtml

This can work almost unchanged for most sites. I find it convenient to use the NAVBAR. If you want to change it for another method of navigation it is easy to make a change in this single file. This is also a convenient place to put things like the AdSense Link unit or Newsletter signup forms. I would not put an AdSense skyscraper here since it would count as the top first ads from Google and therefore be the most expensive - this is bad since skyscrapers get so few clicks and would lower my income.

II) An optional right hand column - where you can have newsletter signups and hot items etc.

A fictional right-column.shtml

You get the html for your newsletter signup from the block builder. Adjust the hot items text and make the links to your own preferred pages.

iii) A Footer with the copyright and optionally links to major sections etc.

Here is the ultra simple 4x4-footer.shtml I use. Not much to comment on here except that the table width is the same as other parts of the site, like the header table and the main content table.

Step 3 - Plan other possibilities like Google AdSense include blocks - so you can make global changes to the AdSense L&F.

If you have other components on your site that are used throughout like AdSense making include files can help. Then you can modify color combinations, borders and layout in a single place. This can mean significant improvements in the bottom line.

A separate include file for JavaScript menu system or anything else you can imagine may be worth your while.

Step 4 - Finally make a template using all these include files and use that as the starting point for all pages.

Key parts of a working template.

Using these methods can hopefully save you countless hours that you can use building content for your site.