Understanding Server-Side Includes (SSIs) | Design and Deploy Websites with Macromedia Dreamweaver MX 2004 and Contribute 3: Training from the Source

Server-side includes (SSIs) are text files that contain HTML and other code. The code in these files is combined into a Web page on the server before the completed page is served to the client. The same SSI can exist in an unlimited number of pages on a site. The use of SSIs makes common areas of a site extremely easy to updatejust modify and publish one file, and the changes are instantly applied to every associated page.

There are two types of SSI: those that use only HTML, and those generated by application server code. A Web page that uses an HTML-based SSI often requires a certain filename extension so that it will be processed by the server. Servers often disable automatic processing of standard HTML to enhance performance. On UNIX servers, an .shtm or .shtml extension is used; Windows servers require .stm, .asp, or .aspx to indicate that a page should be processed.

The HTML-based SSI is inserted into a Web page by using a comment-style tag with a particular syntax:

 <!-- #include file="../includes/header.inc" -->

The file attribute is used when SSI is referenced in a document-relative link.

To refer to an SSI file with a site-root relative link, use the virtual attribute, like this:

 <!-- #include virtual="/includes/header.inc" -->

Tip

Use the virtual syntax when inserting an SSI in a Dreamweaver template to make sure that the include can be located from any directory in the site.

The actual SSI files should contain just the necessary code to be inserted. The standard HTML page format of an outer <html> tag pair with both <head> and <body> tags is unnecessary in an SSIand (as you'll see) causes problems in both Dreamweaver and Contribute. The included files are usually named with an .inc, .ssi, or .txt extension. Although there are no real requirements for any particular filename extension, a .txt extension enables the file to be edited when used in conjunc tion with Contribute. (Don't use the .txt extension if you don't want the file to be editable.)

One common use for an SSI is the incorporation of sitewide navigation; typically, these files use images for navigation buttons or background graphics. If images are used in an SSI, special care must be taken to make sure that the images are always accessible from the page containing the SSI. The standard way to ensure this is to use site-root relative links for all dependent files within an SSI.

Some SSIs are integrated by an application server, such as ColdFusion or PHP. Although these files might initially use code in addition to or instead of HTML, the include is also rendered as HTML after it has been processed by the Web application server.

Note

Contribute has been known to have problems with dynamically supplied SSIs, occasionally changing a relative path to an absolute one. The solution is to set the path in a variable first and then use the application server syntax to include the file, as in this sample PHP code:

 <?php $includepath = 'nav_include.inc.php' ?> <?php include($includepath); ?>

When a Contribute user views or edits a page containing an SSI, the page is displayed just as it would be in the browser. However, when it comes to editing, any section of the page that initially contained an SSI is locked and uneditable. As you'll see later in this lesson, it's possible to control whether the server-side include file itself is editable from Contribute.