Design your web page using SSI
Posted on February 22nd, 2009 by Admin
SSI or Server Side Includes can save a web designer lots of time and stress. Our website has been developed partially using SSI, the header and footer of the site is the same for each page, only the content of the page changes as you navigate. This means that when we change our sites header or footer the whole website is updated at the same time, nifty ay?
How we created our header
We started off by creating our header, you will need everything from the <HTML> opening tag down to the <BODY> start tag. For example;
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title></title>
</head>
<body>
This will form the header of our website, so we included our menu after the body tag. When you have this code, you need to save it. Create a folder called includes within your web sites root (this is where your included content will go). Save the header file as header.shtml
*Note that all of your html files need to be saved as .SHTML which tells the server that your working with SSI.
Then our footer
Once you have saved your header we need to create your footer, which is done by taking the code from </BODY> down to </HTML> which is the end of your html document, for example;
</body>
</html>
Again we wanted to include our footer menu here so we added this before the closing body tag. Save this footer into your includes folder just as you did with the header.
And finally content pages
Once this has been done you can start creating your sites content pages. These will be simply all of the content that would normally be within your body tags. The first line of each content page needs to call the HEADER, to do this simply type
<!–#include file=”includes/header.shtml” –>
This will call the header so that it appears at the top of your site. Do the same on the last line of your document with the footer.shtml. Once this has been done save the content page as you would a normal web page, for example if it is your homepage call it index.shtml. Save all of your content pages to your sites root folder.
*Note, when designing using SSI you will only ever be able to see your complete site when its on the server or within a web development program such as dreamweaver. This is because SSI is for the server so your home pc wont perform the tasks.
Tags: SSI
This entry was posted on Sunday, February 22nd, 2009 at 4:58 pm and is filed under HTML Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.
Comments are closed.