Flash Tutorials
& Resources
Dreamweaver
Tutorials
Fireworks &
Illustrator Tutorials
Photoshop
Tutorials
Web Design
Tutorials & Resources
CSS
Tutorials
CorelDraw
Tutorials
You are here : : Home > Free Resources > Dreamweaver Tutorials > Server Side Includes  

 

Featured Fireworks & Dreamweaver Template

Animals Template 6
Animals & Wildlife
$49.95

Server Side Includes

Written by
Rachna

Make Easy site-wide changes with Server Side Includes

If you are developing big web sites with parts of the web pages having repetitive content, you absolutely must use Server Side Includes(SSI). Notice in this site all the sections have the same header, site search and left menu. If we were to make a change any of these areas we would have to manually change it in all the pages or if we were using templates or libraries we would have to FTP all the pages every time we make a change. As we are using Includes we need to make the change only in the Include and it automatically gets reflected in all the sites that are using that Include. Best of all it reduces our FTP time by more than 200% as we only need to FTP one file and not all the pages using the Include (If you are familiar with using templates and libraries you will know that though using templates and libraries cuts down your development time a lot you still have to FTP all the files that use the library or template. This is not the case when using SSI's).

What are Server Side Includes?

Server Side Includes allow you to write some commonly used code once and have the server insert it into the pages for you. In other words an include file has code that you would like to reuse. Any ASP or SHTML page that wants to use the code in the include file will have a special line that indicates the place holder for the code.
This code looks like: <!--#include virtual="/path" -->
This results in the server taking the entire content of the file and inserts it into the page, replacing the <! -- #include ..--> line.

How do you use Server Side Includes

Server Side Includes are very easy to use. All you need to do is create a .htm, .html or .asp file which contains the reusable code. Take the header in our site as an example. We make the header an html file (Important: This should not contain any HTML, HEAD or BODY tags). In this case the code will start and end with the TABLE tag.

Very Important: If you are using highly confidential ASP code (or any other web technology), like your database connection string or some business logic, in your include file then make sure the include file is named .asp so that no one can open the include file and see your code.

Once you have made the Include file all you need to do is, include it in all the pages that will use this code (In the case of our site header, the whole site uses it so we have included it in the Template). Go to the page that will use this include and add the following code in the appropriate place:

<!--#include virtual="/path" --> Replace path with the path of the Include file.

That's it! Its as easy as that! Now whenever you make a change in the Include it will automatically get reflected in all the pages using the Include and you will need to only FTP one page instead of hundreds of pages.

Important points to remember while using Server Side Includes

  • All the pages using Server Side Includes must be .asp or .shtml files.
  • The Include itself must not have any < HTML>, <HEAD> or <BODY> tags. The file should only contain the code that has to be included into a file.
  • If you are using ASP code in your include file then make sure the include file is named .asp so that no one can open the include file and see your code.
  • All paths used in the code of an Include file (i.e. images, links, etc.) must be relative to Site root and not relative to document.
  • When you use an Include within a file it must be included relative to Site Root and not relative to Document.

Using Server Side Includes in Dreamweaver

It is very easy to use Server Side Includes in Dreamweaver. Once you have made your Include file all you need to do is Click on Insert > Server Side Includes, choose the file you need, make sure the path is relative to Site Root and insert it.

We hope you have found this time saving tip useful. If you aren't already using Templates while developing web sites you may interested in reading our article on Using Templates in Dreamweaver (Another big Time saving tip!).

 


Now building a website is as easy as 1-2-3!

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.


Looking for high-quality Website Design? Choose from over 58000 templates!

create a free html5 website

Learn How to Create a Simple HTML5 Website

Learn how to create a simple Html5 website

Bootstrap 3 Responsive Website Tutorial

Bootstrap 3 Responsive Website Tutorial

Video Tutorial - Create a simple responsive website using Dreamweaver

responsive_website

Best Website Templates of 2015

best website templates

Featured Template
Template # 61190
Type: Magento
Price: $179