[QUOTE=rainwalker78]
Thanks for the input. Firefox is my browser, and I will definitely add those plug-ins.
I have no doubt that I am doing some things incorrectly since I have been doing this for less than a month. The whole point of this, for me, was to learn these things. However, If you are looking at the repeating html and body tags in my masthead and navigation divs, I think that is happening because I am using the include statement (<!–#include file =“randomfile.aspx”–>) for the navigation and header. There may be a better way to do this. If there is, eventually I will find it.
[/quote]
A server side include is only a chunk of code. You don’t create teeny tiny web pages and put them all together to create one big web page. OK, I know I lost you. Allow me to illustrate. We take all of this code for a simple web page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
#container {
width: 46em;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
#header {
background: #DDDDDD;
padding: 0 10px 0 20px;
}
#header h1 {
margin: 0;
padding: 10px 0;
}
#mainContent {
padding: 0 20px;
background: #FFFFFF;
}
#footer {
padding: 0 10px;
background:#DDDDDD;
}
#footer p {
margin: 0;
padding: 10px 0;
}
-->
</style></head>
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
</div>
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
… and plop it into a blank web page. Post to your web site. It’s a simple design, all CSS, with a single centered column. Now if you want to build this same page with server side includes SSIs, here is just one way to break up the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="/path/to/css/css-code.css" rel="stylesheet" media="screen" type="text/css" />
</head>
<body>
<div id="container">
<!--#include virtual="/path/to/header.shtml" -->
<!--#include virtual="/path/to/content.shtml" -->
<!--#include virtual="/path/to/footer.shtml" -->
</div>
</body>
</html>
The SSI only contains this code:
<div id="header">
<h1>Header</h1>
</div>
The SSI only contains this code:
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
</div>
The SSI only contains this code:
<div id="footer">
<p>Footer</p>
</div>
Notice how the CSS is referenced, and that I didn’t explain it. Your homework assignment is to figure that out on your own. Also, the SSI coding I used is for an Apache web server. If your site is on a Windows web server (IIS), the specific code will be different, but the concept remains (almost) the same.