[ Back to Jaybirdsweb ]
DreamweaverMX-intermediate CourseDreamweaver MX
hz

Server-Side Includes - Tutorial

Server-Side Includes (SSI) are a lot like library items — pieces of HTML code that you include in your document. Includes make your pages much easier to maintain because when you update the include file, the pages containing that include file are updated all at once. Unlike library items, the include files are processed by the web server. The web document itself contains instructions for processing the includes. The server looks at the files and sees that they contain includes, and then the server recreates the files with the include's contents on the page in the right location and then serves the new file to the browser. This is called parsing the file. If you aren't familiar with SSI, LVS offers an excellent course titled "XHTML & SSI" taught by Vikki Brooks, I highly recommend this class.

The following is a simple example showing you how to use Dreamweaver MX and Server-Side Includes. If you would like to try this example, please make sure your web host is configured to use SSI. You can test your host for SSI compatibility by downloading this zip file and following the instructions in the Readme.txt

How to use SSI in Dreamweaver MX

  1. Download the aboutus zip file; extract to your main site folder.

  2. Create a new folder called includes.

  3. Open up the file aboutus.shtml in Code View.
    All files containing includes must end with the .shtml file extension.

    Select/Highlight all the code contained within these two comment tags:


    <!-- Selection for leftnav starts here -->
    <td id="navbar">
    <h2>Nav Bar</h2>
    <p>This is the navigational bar.</p>
    <p><strong>Main Links Here:</strong></p>
    <ul>

    <li><a href="http://www.projectseven.com/tutorials/css_t/index.htm">Project Seven</a></li>
    <li><a href="#">Link Two</a></li>
    <li><a href="#">Link Three</a></li>

    <li><a href="#">Link Four</a></li>
    <li><a href="#">Link Five</a></li>
    <li><a href="#">Link Six</a></li>
    </ul>
    </td>
    <!-- End leftnav selection here -->


    From the menu bar select Edit > Cut.

  4. Create a new file; from the menu bar select File > New; General tab; Category: select Other > Text. Click on the Create button.

    5. New blank Text File

  5. From the menu bar; select Edit > Paste. Save As: leftnav.html, and be sure to Save in the includes folder. See screenshot below.

    6. Save in includes folder

  6. Go back to the aboutus.shtml file. Make sure you're in Code View, and that your cursor is at the spot where we just cut the navigation code. From the menu bar; select Insert > Script Objects > Server-Side Include.

    7. Server-Side Includes

  7. The Select File dialog box appears; select the includes folder, select the leftnav.html file. Press OK.

    8. Select File dialog box

  8. File > Save. With your mouse, click on the comment code for the SSI:
    <!--#include file="includes/leftnav.html" -->

    Look at the Property Inspector, make sure the radio button for Virtual is selected.
    (If you have any trouble selecting the radio button for Virtual, refresh your site F5)

    See screenshot. File > Save.

    9. SSI - Property Inspector

  9. You should see the following SSI comment code:
    <!--#include virtual="includes/leftnav.html" -->

Let's go ahead an add one more include file to our document.

  1. While in Code View; scroll down to the footer code. Select/Highlight the code that starts and ends with the following comment tags:

    <!-- Selection for footer starts here -->
    <tr>
    <td colspan="2" id="footer">JaybirdsWeb &copy; 2002</td>
    </tr>
    <!-- Selection for footer ends here -->

     From the menu bar select Edit > Cut.

  2. Create a new file; from the menu bar select File > New; General tab; select Other > Text. Click the Create button. Edit > Paste. Save As: footer.html. Save in the includes folder.

    3. *Why do we create a text file instead of an HTML file? We want a blank file to paste our code into. We don't want any of the HTML code tags that are already present in the aboutus.shtml file.

  3. Open up the aboutus.shtml file in Code View and place your cursor where you just cut the bottom navigation code.

  4. From the Insert panel; choose the Script tab. Click on the Server-Side Include button.

    5. Insert Panel - Script Tab

  5. The Select File dialog box appears, showing the includes folder; select the footer.html file. Click OK.

    6. Select File dialog box

  6. File > Save. With your mouse, click on the comment code for the SSI:

    <!--#include file="includes/footer.html" -->

    Look at the Property Inspector, make sure the radio button for Virtual is selected.
    (If you have any trouble selecting the radio button for Virtual, refresh your site F5)

  7. File > Save.

    Your SSI comment code should now be:
    <!--#include virtual="includes/footer.html" -->

Note: You will notice that if you preview the file in your browser that you won't see your include files, but once the files are uploaded to your web server, you will be able to view them.

Edit Server-Side Include files

  1. Have your aboutus.shtml file open in Code View.

  2. Click on the include comment code for the bottom navigation:
    <!--#include virtual="includes/footer.html" -->

  3. In the Property Inspector; click on the Edit button. See screenshot.

    4. Server-Side Include file - Property Inspector

  4. This brings up the footer.html file. Change the date to 2005.

    5. Note: You will not see the CSS styles reflected in your include file.

  5. File > Save. Close the footer.html file. (You could have also just opened up the footer.html file and made your changes).

  6. File > Save your aboutus.shtml file. You will see in the Design View of your document that the date has been changed to 2005.

Let's add another page

  1. Have your aboutus.shtml file open in Code View; Save As: contact.shtml. Change the h1 in the content section from About Us to Contact Info.

  2. Select the comment code tag for the leftnav include, click on the Edit button in the Property Inspector, or simply double-click on the leftnav.html located in the includes folder.

  3. Change Link Two to: About Us; browse to and select the aboutus.shtml file.

  4. Change Link Three to: Contact Info; browse to and select the contact.shtml file.

  5. File > Save.

Open up both the aboutus.shtml file and the contact.shtml file, and you'll see both files have been updated with the new links. Can you imagine what a time saver includes can be when updating several files at a time!

*Make sure to upload all your files — don't forget the includes folder!

Note: If you upload your files and look at the source code for the aboutus.shtml file, you will see the complete HTML code.

Click here to see my finished document.

Points to remember when using SSI

  • All pages using Server Side Includes must end with the file extension .shtml , (unless you've altered your .htaccess file, or are using other server-side languages such as .asp or .php etc.)

  • The include file should only contain the code that has to be included into a file, no additional <html>, <head> or <body> tags.
Additional resources covering Server-Side Includes:

[ << Back to Jaybirdsweb ] ~ [ Top ]