Forum Moderators: not2easy

Message Too Old, No Replies

Leave sidebar and title bar but change main content

         

daviddoria

9:57 pm on Mar 22, 2009 (gmt 0)

10+ Year Member



Currently, my index.html is like this (posted below).

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


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

<div class="header">
<div id="logo">
<h1>Example.com</h1>
</div>
<div class="menu">
<ul>
<li><a href="mailto:email@example.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>

[edited by: eelixduppy at 2:32 am (utc) on Mar. 23, 2009]
[edit reason] exemplified [/edit]

g1smd

11:09 pm on Mar 22, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Look at 'PHP Includes'. You put those small bits of common site-wide code inside small files and then simply 'include' those in as needed - only one file to change when you want a global change.

If your URLs end .html or .htm use AddHandler or AddType to tell your server to treat html files as if they have PHP scripts inside them - that way you do NOT have to change any URLs on your site.

Do make sure you include a way for every page to have a unique title and meta description.

In your 'content file' I would do this:

<?php 
$title= "This Page Title";
$meta = "This Page Meta";
?>
<!DOCTYPE html ... ... >
<head>
<?php
include '/includes/header.php';
?>
</head>
<body>
<?php
include '/includes/pagetop.php';
include '/includes/navbar.php';
?>
The page content goes here.
The page content goes here.
</body>
</html>

and in the header.php file you would have all your usual HTML code except for two minor changes:

<title><?php echo($title); ?></title>
<meta name="description" content="<?php echo($meta); ?>">

Every page needs a unique title and meta description.

You would also have an include file for the navbar - and you make that dynamic by letting it detect which page you are on and changing the class name for the link to that page in the navbar so that your CSS styles it differently.