Considering the amount of help I ask for, I decided to post a tutorial that I am hoping even the most basic of beginners can follow!

This tutorial will give you the Javascript, HTML and CSS you need to create a site with multiple "pages" within a single container, that, using Javascript, fade in and out by changing the opacity of each page from 1.0 (visible) to 0.0 (invisible). Everything that fades in and out will all be contained in a single HTML document (not including the Javasript and CSS)!

Starting with the basic HTML, I'll be using HTML5. As you create multiple "pages", be sure to use notations and indentations so that it is easy to navigate during development and editing.

Head (HTML): Here I give you the link to your CSS document and the required Javascript documents. This assumes your javascript files are in a folder simply named "javascript", and your style sheet (style.css) is in the same location as this HTML document.

Code:
<!DOCTYPE HTML>

<html>

<head>
            			
        <meta charset="utf-8">

	<link href="style.css" rel="stylesheet" type="text/css">

	<title>JavaScript Fade</title>
            
         <!--Start JavaScript-->
	 <script src="javascript/jquery-1.6.2.min.js"></script>

         <!--Page Transition JavaScript-->
         <script src="javascript/transition.js"></script>
         <script src="javascript/page-declaration.js"></script>
         <!--End of Page Transition JavaScript-->
         <!--End of JavaScript-->

</head>
Note: The jquery-1.6.2.min.js javascript file will not be provided in this tutorial. You can simply search for it online to download it, or get it from google here.

Body: This next portion takes place in the <body> portion of the HTML document. It is your navigation; you can add or remove as many pages as you like; the href="#" is the same for each page, it is only the id that changes.

Code:
<body>

<!--Start Navigation-->

      <nav>
		<ul>
		<li><a href="#" id="page1_nav">PAGE 1</a></li>
		<li><a href="#" id="page2_nav">PAGE 2</a></li>
                <li><a href="#" id="page3_nav">PAGE 3</a></li>
		<li><a href="#" id="page4_nav">PAGE 4</a></li>
		<li><a href="#" id="page5_nav">Page 5</a></li>
		</ul>
     </nav>

<!--End of Navigation-->
Note: The CSS I will be providing later does not include styling for this list. While <nav> is native to HTML5, it will need some styling to look good!

The next portion is the actual content of each "page". All of the pages will be held in a primary container, and each page will be in their own sub-container, and will be identified by the "id" used in the navigation. This is all contained within the <body> and comes after the navigation.

Code:
<!--Begin Content-->
  	
     <div class="container">

          <!--Page 1-->

          <div class="main jscontainer" id="page1">
          </div>

          <!--End of Page 1-->


          <!--Page 2-->

          <div class="main jscontainer" id="page2">
          </div>

          <!--End of Page 2-->


          <!--Page 3-->

          <div class="main jscontainer" id="page3">
          </div>

          <!--End of Page 3-->


          <!--Page 4-->

          <div class="main jscontainer" id="page4">
          </div>

          <!--End of Page 4-->


          <!--Page 5-->

          <div class="main jscontainer" id="page5">
          </div>

          <!--End of Page 5-->
</div>
<!--End of Content-->
Note: These divs are currently empty. Add simple lines of text to test them out, but be sure to edit their appearance in the style sheet. You can have columns, tables, slideshows, modal links, anything you can dream of within each container. You can also change the "main" portion of the div class, but not the "jscontainer".

Javascript in the <body>: This next portion is what I call the page transition navigation, and it is the first piece of javascript. It is part of what controls the animation of each "page". This relies on the "id" supplied in the navigation, as well as the pages in "page-delaration.js" which will be gone over in a couple of more steps. You can add or remove as many pages as you want.

Code:
<!--Page Transition Navigation-->
    
     <script>
     
     <!--Page1 Transition-->

          $('#page1_nav').click(function() {  

          $('#page2').animate({opacity: 0},666).hide();

          $('#page3').animate({opacity: 0},666).hide();

          $('#page4').animate({opacity: 0},666).hide();

          $('#page5').animate({opacity: 0},666).hide();

          $('#page1').show().animate({opacity: 1.0},666);

	   });
     
     <!--End of Page1 Transition-->

     <!--Page2 Transition-->

          $('#page2_nav').click(function() {  

          $('#page1').animate({opacity: 0},666).hide();

          $('#page3').animate({opacity: 0},666).hide();

          $('#page4').animate({opacity: 0},666).hide();

          $('#page5').animate({opacity: 0},666).hide();

          $('#page2').show().animate({opacity: 1.0},666);

	   });
     
     <!--End of Page2 Transition-->

     <!--Page3 Transition-->

          $('#page3_nav').click(function() {

          $('#page1').animate({opacity: 0},666).hide();  

          $('#page2').animate({opacity: 0},666).hide();

          $('#page4').animate({opacity: 0},666).hide();

          $('#page5').animate({opacity: 0},666).hide();

          $('#page3').show().animate({opacity: 1.0},666);

	   });
     
     <!--End of Page3 Transition-->

     <!--Page4 Transition-->

          $('#page4_nav').click(function() {

          $('#page1').animate({opacity: 0},666).hide();  

          $('#page2').animate({opacity: 0},666).hide();

          $('#page3').animate({opacity: 0},666).hide();

          $('#page5').animate({opacity: 0},666).hide();

          $('#page4').show().animate({opacity: 1.0},666);

	   });
     
     <!--End of Page4 Transition-->

     <!--Page5 Transition-->

          $('#page5_nav').click(function() {

          $('#page1').animate({opacity: 0},666).hide();  

          $('#page2').animate({opacity: 0},666).hide();

          $('#page3').animate({opacity: 0},666).hide();

          $('#page4').animate({opacity: 0},666).hide();

          $('#page5').show().animate({opacity: 1.0},666);

	   });
     
     <!--End of Page5 Transition-->

     </script>
<!--End of Page Transition Navigation-->

</body>
Note: I'm no Javascript expert; I've tried having this as a seperate .js document, and it doesn't work. Keep this after all of you content (but before your footer if you use one), and keep it within the <body></body> tags!

HTML: This next portion is your entire HTML document. I've always appreciated when tutorials supply you with everything you need to know in one simple copy-and-past solution, so here you go!

Code:
<!DOCTYPE HTML>

<html>

<head>
            			
        <meta charset="utf-8">

	<link href="style.css" rel="stylesheet" type="text/css">

	<title>JavaScript Fade</title>
            
         <!--Start JavaScript-->
	 <script src="javascript/jquery-1.6.2.min.js"></script>

         <!--Page Transition JavaScript-->
         <script src="javascript/transition.js"></script>
         <script src="javascript/page-declaration.js"></script>
         <!--End of Page Transition JavaScript-->
         <!--End of JavaScript-->

</head>

<body>

<!--Start Navigation-->

      <nav>
		<ul>
		<li><a href="#" id="page1_nav">PAGE 1</a></li>
		<li><a href="#" id="page2_nav">PAGE 2</a></li>
                <li><a href="#" id="page3_nav">PAGE 3</a></li>
		<li><a href="#" id="page4_nav">PAGE 4</a></li>
		<li><a href="#" id="page5_nav">Page 5</a></li>
		</ul>
     </nav>

<!--End of Navigation-->

<!--Begin Content-->
  	
     <div class="container">

          <!--Page 1-->

          <div class="main jscontainer" id="page1">
          </div>

          <!--End of Page 1-->


          <!--Page 2-->

          <div class="main jscontainer" id="page2">
          </div>

          <!--End of Page 2-->


          <!--Page 3-->

          <div class="main jscontainer" id="page3">
          </div>

          <!--End of Page 3-->


          <!--Page 4-->

          <div class="main jscontainer" id="page4">
          </div>

          <!--End of Page 4-->


          <!--Page 5-->

          <div class="main jscontainer" id="page5">
          </div>

          <!--End of Page 5-->
     
     </div>

<!--End of Content-->

<!--Page Transition Navigation-->
    
     <script>
     
     <!--Page1 Transition-->

          $('#page1_nav').click(function() {  

          $('#page2').animate({opacity: 0},666).hide();

          $('#page3').animate({opacity: 0},666).hide();

          $('#page4').animate({opacity: 0},666).hide();

          $('#page5').animate({opacity: 0},666).hide();

          $('#page1').show().animate({opacity: 1.0},666);

	   });
     
     <!--End of Page1 Transition-->

     <!--Page2 Transition-->

          $('#page2_nav').click(function() {  

          $('#page1').animate({opacity: 0},666).hide();

          $('#page3').animate({opacity: 0},666).hide();

          $('#page4').animate({opacity: 0},666).hide();

          $('#page5').animate({opacity: 0},666).hide();

          $('#page2').show().animate({opacity: 1.0},666);

	   });
     
     <!--End of Page2 Transition-->

     <!--Page3 Transition-->

          $('#page3_nav').click(function() {

          $('#page1').animate({opacity: 0},666).hide();  

          $('#page2').animate({opacity: 0},666).hide();

          $('#page4').animate({opacity: 0},666).hide();

          $('#page5').animate({opacity: 0},666).hide();

          $('#page3').show().animate({opacity: 1.0},666);

	   });
     
     <!--End of Page3 Transition-->

     <!--Page4 Transition-->

          $('#page4_nav').click(function() {

          $('#page1').animate({opacity: 0},666).hide();  

          $('#page2').animate({opacity: 0},666).hide();

          $('#page3').animate({opacity: 0},666).hide();

          $('#page5').animate({opacity: 0},666).hide();

          $('#page4').show().animate({opacity: 1.0},666);

	   });
     
     <!--End of Page4 Transition-->

     <!--Page5 Transition-->

          $('#page5_nav').click(function() {

          $('#page1').animate({opacity: 0},666).hide();  

          $('#page2').animate({opacity: 0},666).hide();

          $('#page3').animate({opacity: 0},666).hide();

          $('#page4').animate({opacity: 0},666).hide();

          $('#page5').show().animate({opacity: 1.0},666);

	   });
     
     <!--End of Page5 Transition-->

     </script>

<!--End of Page Transition Navigation-->

</body>

</html>
Javascript: This is your first "external" javascript document. This is what controls the animation for the "jscontainer" div. If you change the name of that div in the style sheet, you need to change "jscontainer" in this javascript document to the same name.

transition.js
Code:
// JavaScript Document

 $(function() {
        $('.jsmenu li a').click(function(e) {
            e.preventDefault();
            $this = $(this);
            $('.container').css('height', $('.container').height());
            $('.jscontainer').css('position', 'absolute');
            $('.jscontainer').not('.' + $this.attr('rel')).fadeOut('fast', function() {
               
                $('.' + $this.attr('rel')).fadeIn('slow',function() {
                    $('.container').css('height', '');
                    $('.' + $this.attr('rel')).css('position', 'relative');
                });
            });
        });
    });
Javascript: This piece of javascript is what provides you with the page id applied to each div, and is used in the "page transition navigation". It starts with "page1" having an opacity of 1.0 (visible), while the rest of the pages have an opacity of 0.0 (invisible).

page-declaration.js
Code:
// JavaScript Document

$(document).ready(function() {

         $('#page1').animate({opacity: 1.0});
	 
	 $('#page2').animate({opacity: 0.0}); 

	 $('#page3').animate({opacity: 0.0});
	 
	 $('#page4').animate({opacity: 0.0});
	 
	 $('#page5').animate({opacity: 0.0});

});
Note: When you change/customize your page id's (e.g. from "page1" to "home"), you must change it in the div (id), in the "page transition navigation" and in the page-declaration.js file.

CSS: Finally, you have your style sheet. For both containers (.container and .jscontainer), widths can be adjusted per your needs, but modifications beyond that may alter the function of the fading script(s). The .main div that I supply you can, for the most part, be altered as you wish. This one is styled so that it fits within the containers that I've created, is centered on the page/within the containers, it has a 5px padding, a border radius of 5px, and a white background.

style.css
Code:
.container {
	margin: 0 auto;
	width: 980px;
	display: block;
	margin-bottom: 30px;
	
}

.jscontainer {
	display: none;
	width: 980px;
	overflow: auto;
	
}

.main {
	margin: 0 auto;
	width: 970px;
	padding: 5px;
	background-color: #FFFFFF;
	border-radius: 5px;

}
Note: This does not include the styling for your body (e.g. website background, font size and style, etc), nor does it include the styling for the navigation menu. If you need help with this CSS, or any part of additional HTML, a great place to start is W3 Schools, and it is free!

If you have any further questions about this, please just ask!