I guess since, I started my ramble I might as well finish it.
Your banner, navigation and footer are constant throughout the site. Therefore, in "real world" development these would be identified as static elements. Static elements are essentially "concepts" that stay consistent throughout the entirity of the site. Now, there can be exceptions to were these change, but its based on whether or not the content stays consistent throughout most of the site. Becasue of this your banner, navigation and footer are perfect candidates. Therefore, you can create a mark-up structure that reflects this.
<body>
<div class="static" id="masthead"></div> <!-- end of div#masthead -->
<div class="static" id="footer"></div> ><!-- end of div#footer -->
<body>
Now, without taking anything else into regards we have created containers that manage the appearance of the masthead and footer throughout the entire site. These two divs will stay consistent throughout the entire site. However, another thing I noticed about your site is that the layout generally stays consistent. You have essentially a two column grid going. Therefore, you can add this layout in your html.
<body>
<div class="static" id="masthead"></div> <!-- end of div#masthead -->
<div class="static" id="content">
<div class="column left"></div>
<div class="column right"></div>
</div> ><!-- end of div#content -->
<div class="static" id="footer"></div> ><!-- end of div#footer -->
<body>
Here I have inserted a new div #content that will hold all your page specific information. Than as child elements I have added two columns. One is a right column and the other is a left. Now by using CSS you can create a two column grid that effects the entire site:
div#content div.column.left {
float: left;
width: 180px;
}
div#content div.column.right {
margin-left: 180px /* linked to .column.left width */
}
So once those changes are made in the CSS the columns can be controlled regardless of the page. The reason why I used classes rather than id's for the columns are because again – columns are a concept. So now you have the ability to reuse that class to mark-up your site more semantically if you decide to use columns again. You would just be more specific in your CSS target to override the previous styles for the default.
Once you have all that figured out you can place your main navigation ul inside the div.column.right. I'm not going to do that as I'm sure you can figure it out. However, what I would recommend is following the same architecture and naming conventions with the ul. Therefore, it might be best give the ul a class of "static menu main" or something that equally describes the menus function in the site. With those changes (not including the links) your markup should than look something like this.
<body>
<div class="static" id="masthead"></div> <!-- end of div#masthead -->
<div class="static" id="content">
<div class="column left">
<ul class="static menu main">
<!-- appropriate list elements with nested anchors -->
</ul>
</div>
<div class="column right"></div>
</div> ><!-- end of div#content -->
<div class="static" id="footer"></div> ><!-- end of div#footer -->
<body>
I'm not going to get into the steps necessary to populate that list like you have on your site with child uls. However, it would be best to mark-up those uls with classes that relate to the parent. This is a short example:
<ul class="static menu main">
<li><a href="#">music</a>
<ul class="menu music">
<li><a href="alternative"></a></li>
<li><a href="folk"></a></li>
</ul>
</li>
<li><a href="#">misc</a></li>
</ul>
So basically, each nested ul class should relate to the path of the parent list element for a solid semantic and easily manageable list of elements and related page information.
Once you have all that figured out than all you need to do is implement a content managing system that changes what is placed in the div.column.left. The easiest way to do this would be to a create a server side document with switch statements. Basically, you would need to include a php document that handles this information.
<body>
<div class="static" id="masthead"></div> <!-- end of div#masthead -->
<div class="static" id="content">
<div class="column left">
<ul class="static menu main">
<!-- appropriate list elements with nested anchors -->
</ul>
</div>
<div class="column right">
<?php include("handler.php"); ?>
</div>
</div> ><!-- end of div#content -->
<div class="static" id="footer"></div> ><!-- end of div#footer -->
<body>
That line of code would link to a php document that you could than handle what information goes into that "frame" – div. Now, rather than needing 10+ html pages you can handle everything with three doucments:
index.php (html page with php include )
handle.php (php document )
presentation.css (CSS document that manages styles and skins )
So he last thing I'm going to show you is a brief introduction to hooking this all up with php.
The first thing you need to know is that the only information accessible to php is within something called a query string. A query string is formated like so:
<a href="index.php?pg=music">music</a>
Now, when that page is sent that information can be extracted in the global $_GET array. The global $_GET array holds all queries that were sent to the page. Therefore, you can send as many queries(pretty much) as you like in a query by separating them with amperstands like so:
<a href="index.php?pg=music&sub=alternative">music</a>
Therefore, going back to our previous example an appropriate way to handle your links using php would by using the following format:
<ul class="static menu main">
<li><a href="<?php echo $_SERVER['PHP_SELF']; ?>?pg=music">music</a>
<ul class="menu music">
<li><a href="<?php echo $_SERVER['PHP_SELF']; ?>?pg=music&sub=alternative">alternative</a></li>
<li><a href="<?php echo $_SERVER['PHP_SELF']; ?>?pg=music&sub=folk">folk</a></li>
</ul>
</li>
<li><a href="<?php echo $_SERVER['PHP_SELF']; ?>?pg=misc">misc</a></li>
</ul>
Now when a link is clicked the current page is reloaded and the queries within the href of the clicked link are available in the $_GET global array. Those queries can be extracted like so:
$_GET["pg"]
That would reference the pg value. Therefore, if the user clicks the music link the value of the above would be "music". However, if they click the misc link than it would be "misc". So now you have access to the "page" the user would like to go which is how you would determine the information presented in the right column via the handler.php include. Even though the page essentially stays the same the content within the right.column will change. This changing content therefore is dynamic. The content does not stay the same but, changes based on the "page" the user is on. This is unlike the masthead, footer and overall layout. They all stay consistent throughout the entire site.
Now, lastly to actually control output based on the information available in the $_GET global array you need a control structure. The most basic of control structures is the if statement:
if(this) than do this;
So for example:
if(isset($_GET['pg'])) {
// do something
}
The isset() function introduced checks whether or not the 'pg' index is available within the $_GET global array. If you were to just say: if($_GET['pg']) an error would be thrown if their wasn't a pg query. Therefore, you use isset() to check whether it is available before trying to access it.
Now, the first time a user enetrs the site the pg Query is not going to be avialable. Therefore, you should use an if else statement:
if(isset($_GET['pg'])) {
switch($_GET['pg']) {
case 'music':
echo 'music page';
break;
case 'misc':
echo 'misc page';
default:
echo 'your at my home page';
}
} else {
echo 'your at my home page';
}
There's alot more to get into. However, thats pretty much the basics if you(or anyone else) feels like expanding on it. Normally, I personally, wouldn't handle the output using such a primitive switch method. However, I'm quit sure that my method would be to complex and mind numing to explain so I used the most basic switch statement instead.
* notice: there may be some discrepincies in my code, but in order to get all this work you would need to research a bit further anyway.My explaination here is just a conceptual overview of the necessary steps to take in order to implement a more solid and manageable structure throughout the entirety of the site. By no means is it the exact implementation you should use – just a conceptual outline.