It is time to create the main layout for the site. We'll set up a simple layout using a table. The table will be split up into the following sections:

The following list contains links to the banner and the layout-images that will be used to create the main appearence of the site.

• Banner image: banner.png
• Upper left section of chess piece: piece_upper_left.png
• Upper right section of chess piece: piece_upper_right.png
• Lower left section of chess piece: piece_lower_left.png
• Lower right section of chess piece: piece_lower_right.png

Grab and save these images inside the "design/tscm/images/" directory.

Setting up the main layout
Edit the main template file ("design/tscm/templates/pagelayout.tpl"). Copy & paste the lines from the box below into the "body" section within the template file itself (simply replace the "Hello world!" string with the following code).

<!-- Main table -->

<table cellspacing="0" cellpadding="0" class="main">

 

   <!-- Chess piece + banner + chess piece -->

   <tr>

       <td><img src={"piece_upper_left.png"|ezimage} /></td>

       <td><a href={"/"|ezurl}><img src={"banner.png"|ezimage} /></a></td>

       <td><img src={"piece_upper_right.png"|ezimage} /></td>

   </tr>

 

   <!-- Chess piece + main menu + chess piece -->

   <tr>

 

       <!-- Left chess piece -->

       <td><img src={"piece_lower_left.png"|ezimage} /></td>

 

       <!-- Main menu -->

       <td class="border">

 

           <!-- Main menu table -->

           <table cellspacing="0" cellpadding="0" class="menu">

               <tr>

                   <td><a href={"/"|ezurl}>News</a></td>

                   <td><a href={"/"|ezurl}>Members</a></td>

                   <td><a href={"/"|ezurl}>Guestbook</a></td>

                   <td><a href={"/"|ezurl}>Links</a></td>

               </tr>

 

           <!-- End of main menu table -->

           </table>

 

       </td>

 

       <!-- Right chess piece -->

       <td><img src={"piece_lower_right.png"|ezimage}></td>

 

   </tr>

 

   <!-- Left border + dynamic content + right border -->

   <tr>

       <td class="border"></td>

       <td class="content">{$module_result.content}</td>

       <td class="border"></td>

   </tr>

 

   <!-- Footer -->

   <tr>

       <td colspan="3" class="footer">

    {include uri="design:footer.tpl"}

       </td>

   </tr>

 

<!-- End of main table -->

</table>

The footer
Notice that the main template includes a file called "footer.tpl". In other words, the actual content of the footer will be put into this file instead of the main template file. This is simply done in order to demonstrate and practice the split-up and inclusion of template files. Create an empty text file and copy the following line into it (everything on one line):

Copyright © 2003 - The Scandinavian Check Mates -

Powered by <a href="http://ez.no">eZ publish</a> &trade;

Save the file as "design/tscm/templates/footer.tpl".
Hereafter you must clear the override cache; thus press "Clear template caches" in the administration, setup, cache management menustructure. (Otherwise the footer will not appear.)

Testing
Reload/refresh the TSCM page again. You should see something that resembles the following screenshot: