 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
sticks464
Joined: 31 Dec 2006
Posts: 937
|
 Posted: Tue Nov 27, 2007 6:16 am SSI Help |
 |
|
|
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:
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Page title</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<!-- Top Menu -->
<div id="menu">
<ul id = "navlist">
<li id = "active"><span>HOME</span></li>
<li><a href = "inventory.html">ABOUT US</a></li>
<li><a href = "contact.html">CONTACT US</a></li>
</ul>
</div>
<!-- Header -->
<div id="header"><p class="top">PC Users<br />Organization</p></div>
<!-- Main content -->
<div id="inner">
<!-- Side Menu -->
<div id="sidebar">
<p class="first">Site <span>N</span>avigation</p>
<ul id="navigation">
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">CALENDAR</a></li>
<li><a href="#">MEMBERS</a></li>
</ul>
<img src="images/left2.gif"alt="#" class="design">
<img class="comp" src="images/IntelliStation_E_Pro_with_Pentium_III.gif" alt="IntelliStation_E_Pro_with_Pentium_III">
</div>
<div id="content">
<p class="line">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
</div>
<div id="footer">
<p><a href="#">About Us</a> || <a href="#">Contact Us</a></p>
<p class="footbtm">© 2007 PC Users</p>
</div>
</div>
</div>
</body>
</html> |
Open a new file in your text editor (notepad is a normal one). Copy and paste the code for the left menu into this page.
| Code: |
<ul id="navigation">
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">CALENDAR</a></li>
<li><a href="#">MEMBERS</a></li>
</ul>
|
Save this page as menu.html (TYPE=text, ENCODING=ANSI) into the site root directory.
Going back to the main page, delete the code you just copied and insert the include statement in it's place
| Code: |
<div id="sidebar">
<p class="first">Site <span>N</span>avigation</p>
<!--#include file="menu.html" -->
<img src="images/left2.gif"alt="#" class="design">
|
Save this page as index.shtml.
Repeat the above step for each additional page that the menu is used on.
This can be done for any element that is repetative on many page reducing the edit time by editing one page instead of many.
**Styling is in external style sheet and will work as if the includes does not exist and the content is still on the original page** |
|
PayneLess Designs
Joined: 28 Feb 2007
Posts: 784
Location: Biloxi, MS
|
| Posted: Sun Dec 23, 2007 3:35 pm |
|
|
|
This code:
| Code: |
| <!--#include file="menu.html" --> |
only works for those pages that are in the same directory as the file being called. To call the same file on pages outside the root directory (pages in another folder) use:
| Code: |
| <!--#include virtual="/menu.html" --> |
Changes also need to be made to the .htaccess file to use SSI, plus your hosting service has to allow use of SSI on the server. .htaccess file:
| Code: |
AddType text/html .shtml
AddHandler server-parsed .shtml |
All pages for site should be renamed from*.html to *shtml except those that are the include files.
Ron
Last edited by PayneLess Designs on Mon Mar 31, 2008 7:12 pm; edited 1 time in total |
|
yangyang
Joined: 05 Oct 2006
Posts: 23
Location: kavoir.com
|
| Posted: Mon Mar 31, 2008 5:34 pm |
|
|
|
That is really something, man! Great writing up, sticks and PayneLess!
I have something to contribute too, look this:
| Quote: |
Changes also need to be made to the .htaccess file to use SSI, plus your hosting service has to allow use of SSI on the server. .htaccess file:
Code:
AddType text/html .shtml
AddHandler server-parsed .shtml |
You might also need to add
to httpd.conf or .htaccess, or Apache won't parse for SSI.
| Code: |
<!--#include virtual="/menu.html" -->
|
is always preferred over
| Code: |
<!--#include file="menu.html" -->
|
and the reason is what PayneLess has made clear.
To get 80% out of SSI, you only need one directive, that is <!--#include virtual=" ... " -->. It's the essence I believe. And to get the rest 20%, you might also want to know about these handy ones (incomplete, just examples I think that will amuse you):
Get file size:
| Code: |
| <!--#fsize file="script.pl"--> |
Get last modified date:
| Code: |
| <!--#flastmod virtual="index.html"--> |
Get visitor IP address:
| Code: |
| <!--#echo var="REMOTE_ADDR" --> |
Get today's date:
| Code: |
| <!--#echo var="DATE_LOCAL" --> |
Setting and getting a variable:
| Code: |
<!--#set var="name" value="Rich" -->
<!--#echo var="name" --> |
You can even do some concatenation:
| Code: |
<!--#set var="firstname" value="Rich" -->
<!--#set var="lastname" value="Mond" -->
<!--#set var="name" value="${firstname} ${lastname}" --> |
You get the idea. =) |
|
sticks464
Joined: 31 Dec 2006
Posts: 937
|
| Posted: Mon Apr 28, 2008 2:01 pm |
|
|
|
| Great post yangyang, however a good hosting service will have htaccess and Apache set up for using includes. |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
