Services
Website Design Tutorials
Server Side Includes (SSI)
Tool(s) Required:
HTML Editor: Any
Recommended: Adobe Dreamweaver CS3
Server Side Includes are files that have some commonly used code that can be reused by many pages in your site. When you use a SSI file the server takes the entire content of the file and inserts it into the page, replacing the include code. As an example, imagine you have a large portal web site with links at the top, bottom and sides common to all pages (or a section of pages). To make the site easy to maintain you can have the header, footer, right menu and/or left menu as include files. So when there is a change to be made you just need to make the changes, save and upload the corresponding include file and not the many files using it.
How are Server Side Includes better and different from frames?
Though frames are sort of similar to Server Side Include files, we do not recommend their use as not all browsers support them. In frames each frame is a separate page with its own <html><head><body> tags (unlike SSI where they cannot have these tags) and is called in the main page where the frames are defined.
Create your own SSI file and call it by using the given code
-
Create a file which contains the reusable code with the extension .htm, .html, .asp or .php
Very Important: If you are using highly confidential ASP/PHP 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/.php so that no one can open the include file and see your code. -
You cannot use include files in HTM or HTML files, You can use them only in SHTML, ASP, PHP pages, etc. - that support include files.
- Now go to the page
that will use the include and add the following code in the appropriate
place:
SHTML or ASP: <!--#include virtual="/path_relative_to_site" -->
PHP: <?php include("../path_relative_to_document") ?>
Calling Server Side Includes into your page using Macromedia Dreamweaver
In your page, keeping your cursor in the place where the include file should come, Click on Insert > HTML > Script Objects > Server Side Includes (for MX 2004) or Insert > Server Side Includes (for Dreamweaver 4). In the pop-up window that appears select your include file, give the path as relative to Site Root (for ASP) and click OK.
We hope you have found this time saving tip useful. Read our article on Using Templates in Dreamweaver (Another big Time saving tip!).
Absolutely FREE Web Templates
Check out these quality free web templates and download them without any registration or sign-up!
FREE Flash Actionscript & Animation Guide
Learn Flash the easy way using these easy-to-follow tutorials! Get your basics right or learn advanced flash actionscript!
Quality Dreamweaver Templates
Professional quality dreamweaver templates in over 20 categories, starting at just $9.95! Instant download & easy customization
This page is part of the SmartWebby's Free Web Design Guide, a collection of free web design tutorials, articles, tips and guidelines on effective web site design. From web design tips and ideas to HTML, CSS Styles, Fireworks and Dreamweaver you'll find all you need to know about web design right here!
SmartWebby.com provides top-quality web design & web programming services globally. Since January 2001, we have successfully built more than 200 professional web sites for clients from all over the world (USA, UK, Canada, Australia, India, Greece, Denmark, Singapore, etc.). By creating highly professional W3C Standard compliant and load-time optimized websites at extremely affordable prices, we leave our competition far behind in terms of "value for money". We specialize in Rapid Web Design using Adobe Tools, ASP.net/ASP/PHP web programming, W3C Standard compliant CSS & HTML programming, high quality Flash Animation and Interactive Flash Programming. No matter what your requirements are, our team is capable of delivering a website that's over & above your expectations. Check out our popular Web Design Packages today!
