DreamweaverFAQ.com
Search the site!Search DWfaq.com | Print This PagePrinter Friendly Page
Current: Default | Default: Snazz-o-Matic


DreamweaverFAQ.com » Tutorials » Dynamic » Using Server Side Includes


How to use Server Side Includes (SSI)

Putting your includes together

One way to think of an SSI is server side copy/paste (thanks Harry for the analogy). The server takes the content of your include and pastes it in place of the SSI call. This allows you to create extremely complex layouts using SSI. Take DWfaq.com for example. We use a large number of includes for every page. Here's an example of a page oncom.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="copyright" content="Copyright © 2002 DreamweaverFAQ.com All Rights Reserved.">
<!--#include file="inc_css.asp" -->
<!--#include file="pre_body.asp" -->

</head>
<!--#include file="inc_top.asp" -->
All the page content
<!--#include file="inc_bottom.asp" -->

Notice that we have includes for CSS, stuff before the body tag (pre_body.asp) which includes javascript and CSS calls, and then a top and bottom include. All of the dwfaq headers including the flyout menus and the footer with it's complex table structures are located in includes. Changing the tutorials flyout in our menu is just a matter of changing inc_top.asp. Heck, we even put the <body> tag inside an SSI since we're not going to have different javascript actions on different pages.

How to build your SSIs

Putting together a complex SSI layout really isn't all that difficult. Just build your page in Dreamweaver, and then cut/paste the pieces into the SSIs and replace them with the necessary SSI calls. Let's create an example using a header, left hand nav, right hand nav and a footer. We're going to be using one table to layout the page.

  1. Create a new ASP VBscript file by clicking File > New and choose Dynamic Page, ASP VBScript. Save the file as content.asp so our include paths will be correct once we've added them in.
  2. Create two more ASP VBScript files and name then inc_top.asp and inc_bottom.asp. Delete everything on the page, including <html>, <head> and <body> tags. The two files should be completely empty.
  3. Add a 3 column, 3 row table to your page, and merge all three columns of the first and last row. Your finished table should look like this:
 
     
 
  1. Fill in some content as placeholders, and dress up your table a bit. In this example we've added some links on the left and a news story on the right, with our content in the center. I've added a few styles and made quite the piece of masterful site design.

MySite.com - Your destination for stuff

Cool Stuff
Alright Stuff
Rockin' Stuff
Fair to middlin' Stuff

This is all the content about how awesome cool stuff is. If you don't have stuff, please contact us today so we can sell you lots of stuff that you may or may not every use.

Some lorem ipsume latin shtuff goes here.

Da News

MySite.com - your destination for stuff, has been featured in numerous magazines as "the" destination for your stuff.

Copyright © MySite.com, 1964-2033
  1. Now we need to take a look at the code for our table and decide how to chop it up. What should be put into includes, and what should be left on the page. anything that has to change from page to page should be left out of the includes. In our example, we want everything but the middle content to be the same on every page. I've commented the code below to set where I'm going to chop up the page. I decided to put the </head> and <body> tags inside my top include because every page will have the same scripts, backgrounds, etc. This isn't necessary if your'e going to have different settings on each page.
<html>
<head>
<title>MySite.com - Your destination for stuff</title>
<!-- Start Top Include -->
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="3">
<tr>
<td colspan="3"><h1>MySite.com - Your destination for stuff</h1></td>
</tr>
<tr valign="top">
<td nowrap class="altcolor"><a href="#">Cool Stuff</a><br> <a href="#">Alright Stuff</a><br> <a href="#">Rockin' Stuff</a><br> <a href="#">Fair to middlin' Stuff</a> </td>
<td>
<!-- Stop Top Include -->
<p>This is all the content about how awesome cool stuff is. If
you don't have stuff, please contact us today so we can sell you
lots of stuff that you may or may not every use.</p>
<p>Some lorem ipsume latin shtuff goes here. </p>
<!-- Start Bottom Include -->
</td>
<td><h2>Da News</h2>
<p>MySite.com - your destination for stuff, has been featured in numerous
magazines as &quot;the&quot; destination for your stuff.</p></ <td>
</tr>
<tr align="center">
<td colspan="3" class="fineprint">Copyright &copy; MySite.com, 1964-2033</td>
</tr>
</table>
</body>
</html>
<!-- Stop Bottom Include -->
  1. Next, I'm going to cut everything from <!-- Start Top Include --> to <!-- Stop Top Include --> and place it in inc_top.asp. inc_top.asp now looks like this:
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="3">
<tr> <td colspan="3"><h1>MySite.com - Your destination for stuff</h1></td>
</tr>
<tr valign="top"> <td nowrap class="altcolor"><a href="#">Cool Stuff</a><br> <a href="#">Alright Stuff</a><br> <a href="#">Rockin' Stuff</a><br> <a href="#">Fair to middlin' Stuff</a> </td>
<td>
  1. Next, I'm going to cut everything from <!-- Start Bottom Include --> to <!-- Stop Bottom Include --> and place it in inc_bottom.asp. inc_bottom.asp now looks like this:
      </td>
<td><h2>Da News</h2>
<p>MySite.com - your destination for stuff, has been featured in numerous
magazines as &quot;the&quot; destination for your stuff.</p></ <td>
</tr>
<tr align="center">
<td colspan="3" class="fineprint">Copyright &copy; MySite.com, 1964-2033</td>
</tr>
</table>
</body>
</html>
  1. Now, replace the comment tags in content.asp with the include calls, like this:
<html>
<head>
<title>MySite.com - Your destination for stuff</title>
<!--#include file="inc_top.asp"-->
<p>This is all the content about how awesome cool stuff is. If you don't have stuff, please contact us today so we can sell you
lots of stuff that you may or may not every use.</p>
<p>Some lorem ipsume latin shtuff goes here. </p>
<!--#include file="inc_bottom.asp"-->
  1. Save all three files, upload and view content.asp in your browser. If you view source, it should look exactly as it did when we first build the page in Dreamweaver.

Viewing the page in Dreamweaver's design window should also look exactly as we originally designed it. You won't be able to edit those included files from content.asp (you'll have to open them separately) but you'll be able to work on the page as if there were no includes.

::back to top::

::This page last modified 8/13/2013 at 03:37::

Copyright © 2001-2019 DreamweaverFAQ.com All Rights Reserved.
All brands, trademarks, tutorials, extensions, code, and articles are the property of their respective owners.
A production of Site Drive Inc.
Legal Notice | Privacy Policy | Disclaimer & Notice