Divergent Destinies

When using multiple SSI-Container directive DIVs and matching SSI-Filler directive DIVs, you are able to "punch holes" in your Master Pages where other resource documents are able to put content. This feature enables you to provide entire sections for bulk content, offer extensions to navigation elements, provide small fill-in-the-blank spots for pre-existing text, expose element attributes for value substitution, and other even more creative combinations.

To restate due to its importance here (and my apologies for its overly technical verbiage): BODY tag content in a resource document will be discarded if it is not wrapped in an SSI-Filler directive DIV with an ID attribute value that precisely matches the ID attribute value of an SSI-Container in the Master Page identified by the resource document's SSI-Template directive META element's CONTENT attribute value. If we dial down the jargon a bit, this means that in order to cram stuff from a resource document into its Master Page, we have to carefully match the resource document's fillers with its Master Page's containers and we're not allowed to try to cram stuff into any other Master Page directly from the resource document. However, we are able to cram stuff into more than one container in the resource document's Master Page at the same time.

All the concepts we just reiterated have already been exhaustively covered previously in this tutorial, so let's create a new resource document for the fictional "Section Two" master page:

/section2.html

<!DOCTYPE html>
<html>
   <head>
      <title>Two FTW</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <meta name="SSI-Template" content="section-2-master.html">
      <meta name="description" content="Section 2 For The Win">
      <meta name="keywords" content="SECTION,PAGE,SPECIFIC,KEYWORDS">
   </head>
   <body>
      <div title="SSI-Filler" id="section-2-nav">
         <a href="http://www.vgcats.com">VGC</a>
         <a href="http://www.albinoblacksheep.com">ABS</a>
         <a href="http://www.penny-arcade.com/">P-A</a>
      </div>
      <div title="SSI-Filler" id="section-2-content">
         <p>Section 2 has more fun than Section 1!</p>
         <p>Just look at our totally awesome links!</p>
      </div>
   </body>
</html>

This resource document is a little bigger than previous resource documents because its Master Page has two containers and we want to put something interesting into each of them. We followed all the rules, so let's take a look at what we've done.

Results

Point your web browser at the new file at http://your-site/section2.html and you should see something that looks an awful lot like:

Figure 13: Rendered Two-Filler Resource Document With Chained Master Pages

After reminding ourselves that we're not here for pretty pictures, let's take a look at the generated source code:

<!DOCTYPE html>
<html>
   <head>
      <title>Two FTW - Two - Sections - Your Site</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <meta name="description" content="Section 2 For The Win">
      <link rel="stylesheet" href="style-master.css">
      <link rel="stylesheet" href="section-style.css">
      <link rel="stylesheet" href="section-2-style.css">
      <meta name="keywords" content="SECTION,PAGE,SPECIFIC,KEYWORDS">
   </head>
   <body>
      <header>
         <h1>On Every Page</h1>
         <p>This content will appear on every page that points to this
            file as its Master Page.</p>
      </header>
      <article>
         <section>
            <header>
               <h2>Something About Every Section</h2>
               <p>Something relevant to every Section</p>
            </header>
            <article>
               <div id="s2container">
                  <div id="s2navColumn">
                     <nav>
                        <a href="resource.html">Resource</a>
                        <a href="section1.html">Section 1</a>
                        <a href="section2.html">Section 2</a>
                        <div id="s2links">
                           <a href="http://www.vgcats.com">VGC</a>
                           <a href="http://www.albinoblacksheep.com">ABS</a>
                           <a href="http://www.penny-arcade.com/">P-A</a>
                        </div>
                     </nav>
                  </div>
                  <div id="s2contentColumn">
                     <p>Section 2 has more fun than Section 1!</p>
                     <p>Just look at our totally awesome links!</p>
                  </div>
               </div>
            </article>
         </section>
      </article>
      <footer>
         &copy; Your copyright notice here
         <address>
            Your name,<br>
            when this page was last updated, and<br>
            how to contact you here.
         </address>
      </footer>
   </body>
</html>

Figure 14: Resulting HTML, Two-Filler Resource Document With Chained Master Pages

Analysis

Multiple containers in chained master pages, filled with ease, using pure HTML! For as busy as the results look here, there really are no surprises if you have been following this walk-through from the first step.