People | Departments | Search UMD
	Search ITSS:

Making and Applying a SSI

Global events are great for using server-side includes. The header and footer for this page come from a directory in the ITSS web site and not off my hard drive. As I write this page I cannot see the effect the ssi will have until I put this page on the web server and view it off the server with my browser. Dreamweaver will only render a ssi in the editor if the ssi is on the local hard drive.

Make an Include File

To see how this is done, open the file "GlobalEvent.html" from the example web site folder.

1. Go to the "File" menu
2. Choose "Open..."
3. Locate the folder you downloaded (ExampleWebSite)
4. Open ExampleWebSite
5. Open "docs_for_exercises"
6. Open the file "GlobalEvent.html"

1. Select the text in "GlobalEvent.html" by dragging your cursor over it
2. Copy the text
3. Go to the "File" menu
4. Choose "New"
5. Show HTML Source (button in lower right-hand corner of the editing window)
6. Delete everything you see in the HTML source view
7. Paste in the copied text
8. Go to the "File" menu
9. Choose "Save As..."
10. Name the file "viSSI.html"
11. Save in the "ExampleWebSite" folder

Why did I delete everything in the HTML source view? Dreamweaver assumed I'm starting a completely new web page and added the usual opening and closing HTML code. If I include this code in an existing web page, I'll have duplicate code items that should not exist. This can cause all kinds of nasty problems in a web page.

Insert the Include File

To see how this is done, open the file "EditMe.html" from the example web site folder.

1. Go to the "File" menu
2. Choose "Open..."
3. Locate the folder you downloaded (ExampleWebSite)
4. Open ExampleWebSite
5. Open "docs_for_exercises"
6. Open the file "EditMe.html"

1. Click in your edit window where you want the code to be included
2. Go to the menu "Insert"
3. Choose "Server-Side Include"
4. Pick the file created above, "viSSI.html"

You should see the lines of text created earlier where you placed your cursor. Click on this inserted text. Notice how Dreamweaver automatically highlights the group, and the properties window indicates the selection is a ssi (see Figure 3 below).

Edit the Include File

1. Click once on the included code to select it
2. Click on the "Edit..." button in the properties window
3. Make your changes
4. Save your changes
5. Close the window

When you're ready, move on to "Making and Applying a Library Object."

Dreamweaver Management Tools Navigational Links

1. Dreamweaver Management Tools Workshop
2. Defining a Site
3. Server-Side Include (SSI) and Library Object
4. Making and Applying a SSI
5. Making and Applying a Library Object
6. Creating and Applying a Template
7. Find and Replace
8. Web Design References

• ITSS Training Homepage