View your cart / checkout

Dreamweaver Tutorial - Server Side Includes

Dreamweaver - Basics
Dreamweaver Tutorials Home
Setting up a site using the Site Definition
Creating Hyperlinks in Dreamweaver
Creating Image Roll Overs in Dreamweaver
Creating a basic table Dreamweaver
Fonts and Font Sizes in Dreamweaver
Creating Image Maps in Dreamweaver
Positioning an Image with CSS
Server Side Includes in Dreamweaver
Beginners CSS Tutorial

Make Easy site-wide changes with Server Side Includes in Dreamweaver CS3

On most web sites certain elements of the page are repeated on subsequent pages, an example of this would be the header, footer or navigation elements that remain unchanged thought the entire site. Editing this kind of repetitive content is made a whole lot easier with Server Side Includes ( SSI ), by just making a change to the single Server Side Include page will see that changed reflected throughout the whole site instantly, a great time saver, just imagine that you have a huge 10,000 page site and you need to change the phone number, with Server Side Include this otherwise mammoth task can be completed in seconds.

View Dreamweaver basics in video format: Beginners Dreamweaver Tutorial Videos.

What are Dreamweaver Server Side Includes?
Setting up Server Side Includes in Dreamweaver is easy, even for the novice, in essence all you are doing is copying the snippet of code that you need to include in each page and saving it as a file, this file is then referenced instead of the code, sounds complicated? It’s not, let me give you an example.

How do you use Server Side Includes
All you need to do is create a standard .htm, .html or .asp file which will contain the code that we want to reuse, remember to remove all the head and html mark-up that Dreamweaver inserts when you create a new page, so in our simplified demonstration we are going to save a small paragraph of text as reusable content:-
Open a new html document, switch to CODE VIEW and strip out all the html body, head, and other mark up and insert this in to the code

<p>This is re-useable text, I am a include file </p>

Warning:
If you are storing sensitive code in the include file such as usernames, passwords or database
connection settings please make sure you are using either .asp or .php as the include file extension
and make the necessary alterations to the file so web users can’t navigate directly to that file and
view your information.

I always create a separate includes folder to hold all me includes files, this makes editing a lot faster and basically is just good housekeeping.
So save your file in the includes folder as test1.htm
Where want to included code to appear just insert the following:
<!--#include virtual="/includes/test1.htm" -->
That’s it

Important points to remember.
All the pages displaying Server Side Includes must be .asp or .shtml files.
The Include file itself must not have any < HTML>, <HEAD> or <BODY> tags. The file should only contain the code that has to be included into a file.
Remember if you’re using ASP code in the include file ensure that the include file is named .asp to prevent people directly accessing that file and viewing the code.
Paths used in the code of an Include file (i.e. images, links, JavaScript, Style Sheets etc.) must be set relative to Site root.

Using Server Side Includes in Dreamweaver
It is very easy to use Server Side Includes in Dreamweaver. Once you have made your Include file all you need to do is Click on Insert > Server Side Includes, choose the file you need, make sure the path is relative to Site Root and insert it. Once you have created all your server side includes and have them all neatly stored in their own folder, adding them in Dreamweaver is as simple as Clicking Insert> Server Side Includes and then navigating to your file.