You have a five page web site. Now you want to add an extra link to your footer area of five pages. No problem…

Open them in your html editor or Note pad and add that link. You might be finished in 5-10 minutes.

What if you have 10 or 50 page web site? It will take forever to edit a link on all of the 50 pages. Here comes SSI … How can you do that?

Step 1 :

First design a lay out for your web pages on a paper. Here is an example layout. You can see one header area, one footer area and two side bars. Design it in a way you like. If you want one more area below header, you can include something like ‘header2′ etc.

Step 2 :

Now you have to create a template for your web pages.

That template should consists of four SSI tags(in this case). One for header area, one for footer area and two for the two side bars.

When I finish my html code for the above example it looks like:

——————————————————-
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd“>
<html>
<head>
  <meta content=”text/html; charset=ISO-8859-1″
 http-equiv=”content-type”>
  <title></title>
</head>
<body>
<table style=”text-align: left; width: 90%;” border=”0″ cellpadding=”2″ cellspacing=”2″>
  <tbody>
    <tr>
      <td style=”text-align: left; vertical-align: top;” colspan=”3″>
<!–#include virtual=”/header.txt”–>
    </td>
    </tr>
    <tr>
      <td style=”width: 20%; text-align: left; vertical-align: top;”>
<!–#include virtual=”/leftbar.txt”–>
      </td>
      <td style=”width: 60%; text-align: left; vertical-align: top;”>
YOUR TEXT HERE! <br>
      <br>
      </td>
      <td style=”width: 20%; text-align: left; vertical-align: top;”>
<!–#include virtual=”/rightbar.txt”–>
   </td>
    </tr>
    <tr>
      <td style=”text-align: left; vertical-align: top;” colspan=”3″>
<!–#include virtual=”/footer.txt”–>
      </td>
    </tr>
  </tbody>
</table>
<br>
</body>
</html>
——————————————————-

If you copy and paste the above html code in your template and keep your text there.

Tips in creating these templates:

You can keep footer.txt, header.txt, sidebar.txt etc., instead of footer.htm, header.htm and sidebar.htm.

1. Always left the background color white. Because once you put up the 50 web pages and you don’t want that background, you have to update those 50 pages. So all the colors you want to keep, put them in your styles.css file.

2. Seperate the html code with some clear spaces so that you won’t be confused after looking at it.

3. Always you have to name these web pages where you keep SSI tags as ‘.shtml’ extentions, unless your host supports ‘Apache Handlers’. This is because, you are telling the server that these are the pages that have to parse them before sending to the browser.

4. Always keep the files that you include by SSI in root directory and use the ‘virtual’ SSI tag to include these files.(’exec’ method in not necessary because, you are just including the files not executing the some CGI script).

5. If you want second bar in future but not now, you can add second bar as usual and upload some empty file with sidebar2.txt name. In future you can alter your sidebar2.txt. If you don’t upload any file that was included in SSI tag, you will get ‘[error occurred in processing this directive]‘ message on the web page.

Step 3 :

Upload template as index.shtml and upload the header.txt, footer.txt, leftside.txt and rightbar.txt to your root directory.

All you have to do is pasting the text in the appropriate place.

If you want to add a link or delete a link you can open footer.txt or leftbar.txt and do it. Your whole site reflects the changes.

Author: Radhika (c)
http://www.webmasters-central.com/




Related Posts

  • No Related Posts Found





Tags: , , , , , , , ,
Posted in: Web Design