SSI Help

sticks464 · Joined: 31 Dec 2006 Posts: 2250

For those that want to use SSI (server Side Includes). It means just what it says "Server Side" so it cannot be view locally on the testing machine unless there is a server installed.

Read First:
http://www.htmlcodetutorial.com/help/ftopic3918.html

Example of a normal site page (index.html) of which there are 10 pages:

PayneLess Designs · Joined: 28 Feb 2007 Posts: 3506 Location: Biloxi, MS

This code:

yangyang · Joined: 05 Oct 2006 Posts: 44

That is really something, man! Great writing up, sticks and PayneLess!

I have something to contribute too, look this:

sticks464 · Joined: 31 Dec 2006 Posts: 2250

Great post yangyang, however a good hosting service will have htaccess and Apache set up for using includes.

cmrsf1 · Joined: 01 Nov 2009 Posts: 5

Hi,
I have been going thru all kinds of online tutorials about creating a .shtml file but still am not getting it to work. Here is the site so you can see what I am trying to do http://www.progressivelifetherapy.com/bio.html and here is the test file and what it is showing up as: http://www.progressivelifetherapy.com/test.shtml
Here is what my understanding is:
I should be able to go into the bio.html page and use it as a template by breaking down the various parts of the page into separate .html files. These files are to be uploaded to my root directory. I then create a new file (for testing purposes, I've created test.shtml)
I've gone into my bio.html page that I want to use as the template throughout my site. The logo is an image file that I have in a row of a table: In the original, it looks like this:<body> <body bgcolor="#000000">
<table width="756" border="0" align="center" cellpadding="4" bordercolor="#000000">
<tr>
<td colspan="2"><img src="/PLT-2.gif" width="785" height="50"></td>
</tr>

I have copied and pasted that code into a new file and called it top.html
Using this same logic, I then went to the menu on the left side, which is in a column of its own, copied and pasted the text into a new file and called it contents.htm. I then copied the code for the middle column and pasted it into a new file called body.htm and created a final file called footer.htm

I have then taken this list of files and pasted them into my test.shtml file. It looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">

</style>
<title></title>
</head>

<body>





</body>
</html>
When viewing the test file in a browser - http://www.progressivelifetherapy.com/test.shtml, all of the parts show up, but not in the order that they are supposed to. How do I go about accomplishing the original order that is shown in bio.html ?

I know that this is asking a lot, but can anyone set me straight on this? I have spent a lot of time on trial and error prior to coming here...
Thanks!
Casey

sticks464 · Joined: 31 Dec 2006 Posts: 2250

Looking at your code the biggest mistake your making is setting up your included pages as normal pages. Included pages only contain the parts of the original file that are moved to separate files for ease of editing/updating. Include pages should be the content that will get updated on a regular basis but is not confined to just that content.
Below is how each one of your included pages should look. It is good practice to use the same extension on all files and not mix them (htm or html).

Example:
top.html should have only the following and nothing else

cmrsf1 · Joined: 01 Nov 2009 Posts: 5

Hi,
I really do appreciate you taking the time to look at this and the clarifications you made in regard to elimininating everything from the html page except for the syntax directly related to each section of the page. I went in and cleaned up everything as you directed but the page still wasn't loading correctly. http://www.progressivelifetherapy.com/test.shtml I then combined three columns from the page and made them into contents.html This included the table of contents on the left which will require periodic updating, the body of text that I will want to be able to change for each page(middle of page) and the bottom row that shows copyright info. I've done this trial by creating a new test file: http://www.progressivelifetherapy.com/test2.shtml
I guess my question is, how do I exercise greater control over the formatting so that the tables will appear as originally laid out? ie: http://www.progressivelifetherapy.com/bio.html

Again,

Thanks!
Casey

cmrsf1 · Joined: 01 Nov 2009 Posts: 5

Hi,
I guess I'm struggling with trying to understand the overall use of the .shtml . It seems to me that the http://www.progressivelifetherapy.com/test3.shtml is correct. I have changed all the files in the menu to .shtml and made the links to go to the same. However, when I bring this up, the files in the contents menu all show up to have the .shtml suffix but when I click on one of those items, it brings up the new menu that was originally part of that file without the .shtml suffix. They are all .html I undertook this to make it so that when updating the site, I wouldn't have to go to each file to change each and every content menu and if I want to change the logo at the top of the page (top.html), add a menu item in (contents3.html) and change the copyright or add to the footer.html without having to go thru the whole site, one file at a time. I know it's supposed to be a simple concept but just understanding the fundamentals has been a bit tricky. Have I stated the above correctly? Or what simple concept here am I missing?

Thanks!

sticks464 · Joined: 31 Dec 2006 Posts: 2250

It makes no difference what the extension of the included files are, as long as they are in the right order and markup flows as if they were actually on the page.
I am doing you a mock-up of a css layout where it will be easier to understand and edit/update.

cmrsf1 · Joined: 01 Nov 2009 Posts: 5

Wow...! Thank you! I am studying up more about the whole css and ssi issues in this forum. I guess this is why I always like frames in a website because they were fairly easy to update. I'm looking forward to having this lesson down!

sticks464 · Joined: 31 Dec 2006 Posts: 2250

To keep files separate we will create some folders to contain the files and images. These folders will be inside the root folder or main folder. The main folder replicates the folder all files are uploaded into on the server, normally called public_html, htdocs or some other name. The root folder on your computer is only to contain all files and folders pretaining to the site being designed and is not uploaded.

Folders to create...
css - holds the css files
images - holds all images
inc - holds all files to be included on pages

This will be the master css (save it as master.css)file and goes in the css folder. This stylesheet will import two more stylesheets which will make editing of styles simple. The reset stylesheet will reset all browser defaults to zero, the main_menu stylesheet will style the menu in the left sidebar.

cmrsf1 · Joined: 01 Nov 2009 Posts: 5

Truthfully? I am blown away that you have taken the time to compile all of this! I will work with it and see what I come up with and let you know.

Thanks!