Here is one way you could load div's of content into your page with JQuery's .load() method. The content div's can just be stored in a separate html file for editing like this:
movies.html:
Code:
<div id="movie-1">
 <h2>This is Movie 1</h2>
 <p>This is a paragraph of textual information about <b>movie 1</b> that will blow your mind.</p>
</div>


<div id="movie-2">
 <h2>This is Movie 2</h2>
 <p>This is a paragraph of textual information about <b>movie 2</b> that will blow your mind.</p>
</div>


<div id="movie-3">
 <h2>This is Movie 3</h2>
 <p>This is a paragraph of textual information about <b>movie 3</b> that will blow your mind.</p>
</div>
Then your index.html page could load these into a #content div using a basic menu like so:

index.html:

Code:
<!DOCTYPE>
<html>
 <head>
  <title>Simple AJAX Test</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-latest.min.js"></script>
 </head>
 
 <body>
  
  <section id="container">
   
   <header>
    <h1>Header</h1>
    <nav id="menu">
     <ul>
      <li><a href="movie-1">Movie 1</a></li>
      <li><a href="movie-2">Movie 2</a></li>
      <li><a href="movie-3">Movie 3</a></li>
     </ul>
    </nav>
   </header>


   <section id="content">
  
    <div id="movie-1">
     <h2>This is Movie 1</h2>
     <p>This is a paragraph of textual information about <b>movie 1</b> that will blow your mind.</p>
    </div>
  
   </section>
   
   <footer>
    <p>Copyright &#169; 2012 Ben HartLenn</p> 
    <p>All Rights Reserved</p>
   <footer>
   
  </section>
  
  <script type="text/javascript" charset="utf-8">
   $(document).ready(function(){
    
    $('#menu ul li a').click(function(){
     $('#content').load('movies.html #' + $(this).attr('href'));
     return false;
    });
    
   });
  </script>
  
 </body>
 
</html>