We're going to get started by building out a small and simple website with a few pages. They'll all share the same header, navigation, sidebar, and footer. They'll all have a main content area where the unique content for each page will be displayed.
- Get started by setting up an
index.htmlfile with all the associated files and folders as we did in Chapter 1, Designer, Meet jQuery. The body of theindex.htmlfile will contain our header, navigation, sidebar, and footer:<div id="ajax-header"> <h1>Miniature Treats</h1> <ul id="ajax-nav"> <li><a href ="index.html">Home</a></li> <li><a href ="cupcakes.html">Cupcakes</a></li> <li><a href ="petitfours.html">Petits Fours</a></li> <li><a href ="teacakes.html">Tea Cakes</a></li> <li><a href ="muffins.html">Muffins</a></li> </ul> </div> <div id="main-col"> <div id="main-col-wrap"> <p>Welcome to the miniature treats roundup. We've got a variety of miniature goodies to share with you.</p> <p>Don't be shy - just dive right in. Your mouth will water with the possibilites.</p> <p>If it's tiny enough to be a single portion all on it's own, we've included it here.</p> </div> </div> <div id="side-col"> <div class="widget"> <h4>More Information</h4> <ul> <li><a href="http://en.wikipedia.org/wiki/Cupcakes">Cupcakes (Wikipedia)</a></li> <li><a href="http://en.wikipedia.org/wiki/Petit_fours">Petits Fours (Wikipedia)</a></li> <li><a href="http://en.wikipedia.org/wiki/Tea_cake">Tea Cakes (Wikipedia)</a></li> <li><a href="http://en.wikipedia.org/wiki/Muffins">Muffins (Wikipedia)</a></li> </ul> </div> <div class="widget"> <h4>Also Delicious</h4> <ul> <li><a href="http://en.wikipedia.org/wiki/Banana_bread">Banana Bread</a></li> <li><a href="http://en.wikipedia.org/wiki/Pumpkin_bread">Pumpkin Bread</a></li> <li><a href="http://en.wikipedia.org/wiki/Swiss_roll">Swiss Roll</a></li> <li><a href="http://en.wikipedia.org/wiki/Cheesecake">Cheesecake</a></li> <li><a href="http://en.wikipedia.org/wiki/Bundt_cake">Bundt Cake</a></li> </ul> </div> </div> <div id="ajax-foot"> <p>Sample of progressively enhanced asynchronous navigation</p> </div>
You'll notice one extra
<div>that you may not have been expecting: inside<div>with an id of main-col, I've added a<div>tag with an id of main-col-wrap. This is not used for layout or CSS purposes, but will be used once we create our JavaScript for asynchronously loading the content. - Next, we'll write some CSS to create a simple layout. Open your
styles.cssfile and add the following styles:#ajax-header { margin: 40px 0 0 0; } #ajax-header h1 { color:#859900;margin:0 0 10px 0;padding:0; } #ajax-nav { background:#859900;margin:0;padding:0;overflow:hidden;zoom:1; } #ajax-nav li { list-style-type:none;margin:0;padding:10px 20px;display:block;float:left; } #ajax-nav a, #ajax-nav a:link, #ajax-nav a:visited { color: #eee8d5; } #ajax-nav a:hover, #ajax-nav a:active { color: #fff; } #main-col { float:left;width:60%; } #side-col { float:right;width:35%; } .widget { border:2px solid #859900;margin:10px 0; } .widget h4 { margin:0 0 10px 0;padding:10px;background:#859900;color:#FDF6E3; } .float-right { float:right;margin:0 0 10px 10px; } .float-left { float:left;margin:0 10px 10px 0; } .source { font-size:12px; } #ajax-foot { clear:both;margin:10px 0 40px 0;padding:5px;background:#859900;color:#f3f6e3; } #ajax-foot p { margin:0;padding:0;font-size:12px;}The final page will look similar to the following screenshot:
If you're feeling inspired, feel free to write some extra CSS to style your page to be a bit fancier.
- Next, we'll create the other pages of the site, namely the pages for cupcakes, petits fours, tea cakes, and muffins. The HTML will be exactly the same as the home page, with the exception of the content inside
<div>with anidofmain-col-wrap. The following is a sample of my content for the cupcakes page:<div id="main-col-wrap"> <h2>Cupcakes</h2> <p><img src="images/cupcakes.jpg" class="float-right" alt="Photo of cupcakes"/>A cupcake is a small cake designed to serve one person, frequently baked in a small, thin paper or aluminum cup. As with larger cakes, frosting and other cake decorations, such as sprinkles, are common on cupcakes.</p> <p>Although their origin is unknown, recipes for cupcakes have been printed since at least the late 18th century.</p> <p>The first mention of the cupcake can be traced as far back as 1796, when a recipe notation of "a cake to be baked in small cups" was written in <em>American Cookery</em> by Amelia Simms. The earliest documentation of the term <em>cupcake</em> was in "Seventy-five Receipts for Pastry, Cakes, and Sweetmeats" in 1828 in Eliza Leslie's <em>Receipts</em> cookbook.</p> <p class="source">Text source: <a href="http://en.wikipedia.org/wiki/Cupcakes">Wikipedia</a><br/>Image source: <a href="http://flickr.com/people/10506540@N07">Steven Depolo</a> via <a href="http://commons.wikimedia.org/wiki/File:Blue_cupcakes_for_graduation,_closeup_-_Tiffany,_May_2008.jpg">Wikimedia Commons</a></p> </div>
Outside of this<div>, the rest of my page is exactly the same as the home page we created earlier. Go ahead and create the pages for muffins, tea cakes, and petits fours in a similar manner so that you have a five-page website with a shared header, navigation, sidebar, and footer.
Don't forget that each page of your site should contain a link to the styles.css file in the head section and a link to jQuery and the scripts.js file at the bottom of the document, just before the closing</body> tag.
What just happened?
We set up a simple five-page website in HTML. Each page of our website shares the same header, navigation, sidebar, and footer. Then we set up some simple CSS to style our page. The only hint that something fancy is going to happen here is an extra<div> wrapped around our main content area — the area of the page that contains different content from page to page.