Member Avatar for daviddoria

Currently, my index.html is like this

<html>
<head>
<title>EngineeringNotes.net</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>


<div class="header">
	<div id="logo">
		<h1>EngineeringNotes.net</h1>
	</div>
	<div class="menu">
		<ul>
			<li><a href="mailto:daviddoria@gmail.com">Contact Me</a></li>
			<li><a href="phpBB3">Forums</a></li>
			<li><a href="Ideology.html">Ideology</a></li>
		</ul>
	</div><!-- end menu -->
</div><!-- end header -->


<div class="page"><!-- start page -->
	<div class="sidebar"><!-- start sidebar -->
		<h2>EE Topics</h2> 
		<ul>
			<li><a href="Notes/EE/PatternRecognition.pdf">Pattern Recognition</a> </li>
			<li><a href="Notes/EE/ImageProcessing.pdf">Image Processing</a> </li>
			<li><a href="Notes/EE/ComputerVision.pdf">Computer Vision</a> </li>
			<li><a href="Notes/EE/ComputerGraphics.pdf">Computer Graphics (stub)</a> </li>
			<li><a href="Notes/EE/SignalsAndSystems.pdf">Signals and Systems</a> </li>
			<li><a href="Notes/EE/Communications.pdf">Communications</a> </li>
		</ul>
		

	</div><!-- end sidebar -->
	
	<div class="content"><!-- start content -->
		<h2>About this Site</h2>
		<p>
		This site is inteded to provide a "crash course" in many subject areas
		related to electrical engineering. The primers are not at all designed
		to
		be a replacement for a formal course in these topics. The target
		audience is a serious student who feels that it is worth their time
		outside of class to make sure they are getting the "big picture" and
		seeing the value of the subject rather than simply learning the mechanics of "doing problems". 


	</div><!-- end content -->
	
</div><!-- end page -->

</body></html>

If I want to change the content in the "page" section, but leave the title header and sidebar there, how would I do this? I can't imagine I have to have the header and sidebar on every page, or when I have to make a change to either of those, I have to change it on every page!

Any suggestions?

Thanks,
Dave

  • 4 Contributors
  • 5 Replies
  • 180 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by daviddoria
Member Avatar for cfajohnson


Use Server-Side Includes, e.g.:

<!--#include file="page.html" -->

Or:

<!--#include file="header.html" -->
<body>
 <h1>Title</h1>
 <p>...</p>
</body>
<!--#include file="footer.html" -->
Member Avatar for MJ Pieterse

i would suggest to iFrames

Member Avatar for FC Jamison

So should the code look something like this?

<html>
<head>
<title>EngineeringNotes.net</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>


<!--#include file="header.html" -->

<div class="page"><!-- start page -->

	<!--#include file="sidebar.html" -->

	
	<div class="content"><!-- start content -->
		<h2>About this Site</h2>
		<p>
		This site is inteded to provide a "crash course" in many subject areas
		related to electrical engineering. The primers are not at all designed
		to
		be a replacement for a formal course in these topics. The target
		audience is a serious student who feels that it is worth their time
		outside of class to make sure they are getting the "big picture" and
		seeing the value of the subject rather than simply learning the mechanics of "doing problems". 


	</div><!-- end content -->
	
</div><!-- end page -->

</body></html>

With the header.html file as...

<div class="header">
	<div id="logo">
		<h1>EngineeringNotes.net</h1>
	</div>
	<div class="menu">
		<ul>
			<li><a href="mailto:daviddoria@gmail.com">Contact Me</a></li>
			<li><a href="phpBB3">Forums</a></li>
			<li><a href="Ideology.html">Ideology</a></li>
		</ul>
	</div><!-- end menu -->
</div><!-- end header -->

...and the sidebar.html file being...

<div class="sidebar"><!-- start sidebar -->
		<h2>EE Topics</h2> 
		<ul>
			<li><a href="Notes/EE/PatternRecognition.pdf">Pattern Recognition</a> </li>
			<li><a href="Notes/EE/ImageProcessing.pdf">Image Processing</a> </li>
			<li><a href="Notes/EE/ComputerVision.pdf">Computer Vision</a> </li>
			<li><a href="Notes/EE/ComputerGraphics.pdf">Computer Graphics (stub)</a> </li>
			<li><a href="Notes/EE/SignalsAndSystems.pdf">Signals and Systems</a> </li>
			<li><a href="Notes/EE/Communications.pdf">Communications</a> </li>
		</ul>
		

	</div><!-- end sidebar -->
Member Avatar for FC Jamison

OK...that worked on my server when I named the original document index.shtml. The shtml extention was required so that I could add the SSI (server side include) directives to the existing page.

Member Avatar for daviddoria

Interesting, cool though - thanks all!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.