How to use Server Side Includes (SSI)
Author: Daniel
W. Short
Author's Site: Web-Shorts.com
Reference ID: 15606
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.
- 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.
- 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.
- 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:
- 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 |
- 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 "the" destination for your stuff.</p></
<td>
</tr>
<tr align="center">
<td colspan="3" class="fineprint">Copyright © MySite.com, 1964-2033</td>
</tr>
</table>
</body>
</html>
<!-- Stop Bottom Include -->
- 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>
- 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 "the" destination for your stuff.</p></
<td>
</tr>
<tr align="center">
<td colspan="3" class="fineprint">Copyright © MySite.com, 1964-2033</td>
</tr>
</table>
</body>
</html>
- 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"-->
- 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.
« Previous | 1 | 2
|
