|
SSI or Server Side Includes are HTML comments that
direct the server to dynamically generate data for a
Web page.
SSI can be used to ensure that common components such
as a copyright notice, contact info or even
navigation stay the same on all pages throughout your
site. The use of SSI can also save time when
making site-wide changes to those components, since
changes only need to be made in one place
instead of to each page.
Support of SSI varies from one server to another,
however, #include and #exec are common commands.
SSI pages often end with an .shtml extension instead
of .html or .htm. This enables the Web server to
recognize pages that need to be processed before being
sent to the browser.
Does Your Server Support SSI?
Most hosting companies support SSI - but some do not.
You will need to contact your host and ask them about
SSI or follow these steps to test your server on your
own:
1. Create a new HTML page, and type the
following in between the opening <body> and the
closing </body> tags of the page:
<!--#echo var="DATE_LOCAL"
-->
2. Save and name the page, test.shtm
3. Upload the page to the remote server and view it
using your browser.
4. If you can see the current date displayed, your
Web host supports SSI. If can't see the date, your host
probably does not support SSI. Check with your host
to see if they will enable SSI on your site.
Exercise 1: Copyright Include
1. Create a file called copyright.html in FrontPage
or Dreamweaver. In it, put your copyright notice like
this:
©2007 The Template Store.
All rights reserved.
2.Your code should appear like this in HTML mode/view:
©2007<a href="https://www.thetemplatestore.com">
The Template Store</a>. All rights reserved.
In a web browser it should look like this:
©2007 The Template Store.
All rights reserved.
3. Remove the <html>, <head> and <body>
tags in the html code.
4. Now, place the file in the root directory of your
web site.
5.Open the pages in which the footer is to appear
and click the cursor on the page where you wish
to insert the footer. Switch to HTML view/mode and insert
the following HTML comment:
<!--#include virtual="/copyright.html"
-->
6. Upload the files to your server. If the copyright
notice appears on the pages with the include statement,
that's it! It worked!
Exercise 2: Simple Navigation
1.Open a new HTML file.
2.Let's add a simple nav bar such as this:
Home | Contact Us | Gallery | Orders
3.After typing the desired text, create the links
using using the proper Dreamweaver or FrontPage
commands.
4.Switch to HTML view/mode. The source code for the
example above should look similar to this:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF">
<p align="center"><font
face="Geneva, Arial, Helvetica, sans-serif"
size="2"><a href="home.htm">Home</a>
| <a href="mailto:myemail@address.com">Contact
Us</a> | <a href="gallery.htm">Gallery</a>
| <a href="orders.htm">Orders</a></font></p>
</body>
</html>
5.Highlight all the text displayed in blue and delete
it so that only the text in orange appears on the page.
6.Save the file as navigation.shtml or navigation.shtm.
7.Next, open the pages in which the navigation is
to appear and click the cursor on the page where
you wish to insert it.
8.Switch to HTML view/mode and insert the following
HTML comment:
<!--#include virtual="/navigation.shtml"
-->
9.Upload the files to your server. View the pages
in your browser to ensure the navigation appears
as it should.
These are merely simple exercises in SSI and you can
create more complicated files to include on your pages
when you are comfortable. To update your pages, simply
open the SSI page such as navigation.shtml above and
make your changes. Save your file and upload to your
server. All pages with the corresponding include statement
will be updated.
SSI is relatively easy to implement and can prove
to be a great time-saver when making global changes
to your site. TRY IT!
|
