Server Side Includes

When I first got interested in developing websites about ten years ago, my resources were very limited and I didn’t know how to get information and learn more about it. So I began do use the good old MS Front Page to create html pages, since I didn’t know how to write the code. It was a good learning experience and process, until a couple of semesters ago, when I took a web design class here at BYU-I. I wanted to make the best possible web site I could, since resources were not really a problem anymore.

When I started the class, I wanted to go ahead and start creating something to use as my class/personal website. I pulled out a pen and paper and started sketching out how I wanted the site to look like. I then came up with a design that seemed to be a good one, except for one thing: It would be a pain to update the site. Basically, it was composed of four different parts: A header on top, a menu bar right bellow the header, the main content bellow the menu, and the footer bellow the main content. They were also in separate DIVs. Can you imagine having to update the menu in all HTML pages if I had to add or take something off of it? It made no sense to have so much work. I then started looking for answers ad found something I had no idea existed and made life a lot easier. SERVER SIDE INCLUDE.

  So what is it and does it do? A Server Side Include allows you to create a single web file (PHP, INC, SHTML, etc.) so you can individually manipulate and make changes in the website without having to go into every single .HTML file in your site. The fallowing picture shows how I implemented SSI in this website.

I built a .shtml file named template.shtml so I could use as a template every time I needed to add a new page to the website, and then if I need to change a menu item, I just go ahead and change the menu.shtml file and upload the file to the server and this will affect all the .shtml files in my website automaticly.

The picture below shows how would the code look like inside the <body> tag.

If you are using dreamweaver, you can go to the insert menu and select Server Side Include and then choose the html file that you want.

Tuesday, December 9, 2008 6:12 PM

-
Comment:
Valid XHTML 1.0 Strict CSS Validation Valid WCAG 1A Logo Creative Commons License
©2008, Johan Baer, All Rights Reserved. | About Us | Usability | Site Plan | Privacy Policy | Contact US |