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, techniques and ideas to HTML, CSS Styles, Fireworks and Dreamweaver tutorials you'll find all you need to know about web design right here!
SmartWebby.com is the web design flagship website of Jandus Technologies, a global provider of 'smart, innovative & fresh' best web design and rapid web programming services - highly professional, of top quality and globally affordable. Operational since January 2001, we have successfully built professional web sites for clients from all over the world (USA, UK, Canada, Australia, India, Greece, Denmark, Singapore, etc.). By creating attractive low-cost web designs that are W3C standard compliant, load-time and search engine optimized, we beat our competitors hands down comprehensively - in value, time and pricing. We specialize in Rapid SEO Web Design using Adobe Tools; W3C compliant tableless CSS & HTML/XHTML programming; Rapid ASP.net, AJAX, ASP and PHP web programming for database driven web sites and ecommerce web design; Quality Logo Design, Flash Animation and Interactive Flash Programming. No matter what your requirements are, our team of highly trained experienced web designers is capable of delivering a website that's over & above your expectations. Write to us for your free web design quote today! Also check out our Custom Web Design Packages and Professional Dreamweaver Templates for easy DIY websites templates.
