How To Ease The Pain Of Website Change

Teacher: Thomas Benton

You've just decided to add a new subdirectory to your 300 page website. Now you must add it to your nav bar so your site visitors will know that it's there. Painful. Unless you use SSI (Server Side Includes) directives on each page to display your nav bar.

Believe me, it's better to suffer the pain of changing all your pages to use SSI one time than it is to suffer each time you make a change to your website! If you're not using SSI, now is the time to start.

WHAT IS SSI?

Server Side Includes are small commands within HTML code that tell any browser to parse, along with the web page, another document on the server (or to *include* it). SSIs are now used in many different applications and aren't just limited to files. But, for this article we'll concentrate on including files to make your website maintenance life easier.

There are many excellent tutorials on using SSI. Just search the web for *SSI tutorials*. The search engine will return an ample supply. Browse the list and select one that suits your level of expertise.

SSI allows you to dynamically generate web pages. This means that things such as nav bars, headers, and footers can be generated *on the fly* using SSI. You create a txt document for each component, save it to a directory on your server, and then use SSI directives to display the component in your web page.

EXAMPLES:

Here's an example. Let's say that you use a nav bar located on the left side of your web page. You create a text file named *leftnav.txt*. Then, within your page template (you DO use templates to duplicate page layout don't you?)you include the directive:

This tells the server to look for the file in the directory named *includes*. Install all your SSI text files in the *includes* directory (or whatever directory name your choose to use).

WEB PAGE FILE EXTENSION OPTIONS:

First, check with your ISP to see if SSI is supported. If not, change ISPs! Then ask if your pages must be *.shtml* files to use SSI. This will be the case with most ISPs, however, some are set up to support SSI on *.htm* or *.html* pages.

If only files with the shtml extensions are supported, you have two options. You can save all your pages with the shtml extension OR you can instruct the server to treat your *.html* files as *.shtml* ones. If you have an existing site that's already listed in the search engines, you'll definitely want to use this method! Here's how.

FTP to your webserver and look for a hidden file named *.htaccess* in the root directory. If you use WS_FTP, type "-al" (without the quotes) in the little window on the right side of WS_FTP's window. This will cause it to display hidden files.

Transfer the *.htaccess* file to your local directory so that you can edit it. Don't be alarmed if you don't see this file in your webserver's root directory. You can create one your-self.

Open Windows Notepad (or NoteTab or any other text editor) and type the following:

Options Includes
AddType text/html .html
AddHandler server-parsed .html

(If you use*.htm* extensions, change the *.html* to *.htm*).

Save the document as *.htaccess* (without the *). Load it in your root directory. Now you can use SSI directives in your *.html* or *.htm* files and the server will recognize them as *.shtml*. That's all there is to it!

CREATING THE LEFTNAV.TXT FILE:

This is really very simple to do. If you use a WYSIWYG editor, simply create the component as a normal web page. We'll use leftnav.txt as an example.

Let's say that you display a stack of nav buttons in a table cell that's 150 pixels wide. (You can copy these from an existing web page if you want). Create a new web page and add the nav buttons and links with background colors, alignment, etc. You can even create the table that contains the navbuttons if you want. (Then the SSI directive will embed the table in your web page along with the buttons).

Now view the html for your web page. Copy everything between the ** and ** tags. (Do NOT include the tags). Open your text editor and paste this in a blank document. Save it as *leftnav.txt*.

Load this document in the appropriate directory on your web server. It should be in the same directory as the web pages using it if you use the *#include file* SSI directive. If you use the *#include virtual* SSI directive be sure to locate the file in the directory you name in the directive.

Now, if you use a header and footer that is the same on every web page, repeat the above process for each. You can use files with other extensions in the SSI directives and use SSI to display other web page components such as tables, etc.

The right time to start using SSI is when you first develop a website. Unfortunately, most of us weren't even aware of such a thing at that time. As the TV commercial used to say, "you can pay me now or pay me later". If you use the .htaccess option you can change your existing pages over a period of time. Not quite as painful a process this way.

Start using SSI as soon as you can. You'll really be glad you did!

NOTE: If you want to see this is use visit my website http://www.webdesignwisdom.com. You can view one of my SSI directive files by adding "wdw_footer.txt" to the above URL. The footer will display in your browser. Click View - Source to see the actual text file.

About the teacher:
The author, Thomas Benton, has been designing websites and marketing on the web since 1998. He helps beginning Internet Entrepreneurs *get it right the first time* at http://www.webdesignwisdom.com. (Check out his unique web search site http://www.slingsearch.com.)