In het vorige artikel hebben we de header en de footer van het Plankenkoor template aangepast. We kijken nu naar de body. We gaan dit omzetten naar template dat klaar is voor Joomla 1.5 en beter met CSS bestuurd kan worden. Veel code in dit artikel, maar dit komt ten goede aan de overzichtelijkheid.

De basisopzet van het template
De indeling van de body is grofweg alsvolgt:
1) een allesomvattende tabel (een raamwerk met een linkerzijkant, het midden, en de rechterzijkant)
2) het logo
3) de bovennavigatie
4) de zijbalk met navigatie en contactgegevens
5) de hoofdinhoud met
a) een deel voor speciale berichten (bovenaan) - nieuwsflitsen
b) de gewone berichten (daaronder)
6) en tot slot code om statistieken te kunnen volgen
Dit ziet er dan als volgt uit:

plankenkoor-home

Het raamwerk
Groot nadeel van het gebruik van een tabel is dat je er maar weinig aan kunt aanpassen. Daar komt bij dat een tabel eerst helemaal moet worden ingeladen, voordat deze getoond wordt. Als je gebruik maakt van div’s kan het goed stijlen met CSS en zal de pagina beter inladen. Zoals je ziet heb ik in het template heel wat extra’s moeten gebruiken om de juist witmarges te krijgen. Dit kan veel beter.

<table width="100%" cellpadding="0" cellspacing="0" border="0" >
<tr>
<!-- 1. sideleft -->
<td class="sideleft"> </td>
<td align="center" width="801">
<table width="801" cellpadding="0" cellspacing="0" border="0" class="nerf">
<!-- 2. logo plankenkoor -->
<!-- spacer -->
<tr><td > </td></tr>
<!-- 3. navigatie -->
<tr>
<td align="center">
<!-- navigation IR -->
</td>
</tr>
<!-- spacer -->
<tr><td> </td></tr>
<!-- sitecontent -->
<tr>
<td>
<table>
<tr><td width="30"> </td>
<td valign="top">
<!-- 4. side navigation -->
<br/>
<!-- 4. contact -->
</td>
<td width="30"> </td>
<td valign="top">
<!-- 5.a topcontent -->
<!-- 5.b content -->
</td>
<td> </td></tr>
</table>
</td>
</tr>
<!-- sitecontent -->
<!-- spacer -->
<tr><td > </td></tr>
</table>
</td>
<!-- 1. sideright -->
<td class="sideright"> </td>
</tr>
</table>

We maken het onszelf gemakkelijk en nemen zoveel mogelijk het raamwerk over van het meegeleverde Joomla template Beez.

Van tabellen naar DIV
Het nieuwe raamwerk zal dus helemaal opgebouwd worden uit DIVs. Dat is in het begin altijd een lastig karwei. Door het raamwerk van Beez te gebruiken maken we het ons al iets gemakkelijker. Helemaal ‘kaal’ ziet dat er als volgt uit:

<!-- all -->
<div id="all">

<!-- header -->
<div id="header">

<!-- 2. logo (logo plankenkoor) -->
<div id="logo">
</div>
<!-- end logo -->

<!-- 3. topnavigation (navigatie) -->
<div id="topnavigation"></div>
<!-- end topnavigation -->

<div class="wrap"> </div>
</div>
<!-- end header -->

<!-- contentarea -->
<div id="contentarea">

<!-- 4. left (side navigation en contact) -->
<div id="left">
</div>
<!-- end left -->

<!-- wrapper -->
<div id="wrapper">

<!-- 5.a en 5.b main (topcontent en content) -->  
<div id="main">
</div>
<!-- end main -->

<div class="wrap"></div>
</div>
<!-- end wrapper -->

</div>
<!-- end contentarea -->

<!-- end footer -->
<div id="footer">
<div class="wrap"></div>
</div>
<!-- end footer -->

</div>
<!-- end all -->

Een invuloefening
De onderdelen van het Plankenkoor template schemeren er al door heen. Ik heb overigens voor het gemak de overbodige elementen (met name de rechterkolom uit het Beez template) verwijderd. Hierna vul ik de verschillende onderdelen uit het oude template alvast in…

<!-- all -->
<div id="all" class="nerf">

<!-- header -->
<div id="header">

<!-- 2. logo (logo plankenkoor) -->
<div id="logo">
<a href="<?php echo $this->baseurl ?>/"><img src="<?php echo $this->baseurl ?>/templates/plankenkoor/images/plankenkoor_top.gif" border="0" alt="<?php echo JText::_('Plankenkoor, het leukste koor uit Amsterdam'); ?>" height="86" /></a>
<!-- end logo -->

<!-- 3. topnavigation (navigatie) -->
<div id="topnavigation">
 <!-- navigation IR -->
  <?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/templates/plankenkoor/includes/_navigation.php' ); ?>
  <!-- //navigation IR -->
</div>
<!-- end topnavigation -->

<div class="wrap"> </div>
</div>
<!-- end header -->

<!-- contentarea -->
<div id="contentarea">

<!-- 4. left (side navigation en contact) -->
<div id="left">
<!-- side navigation -->
  <?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/templates/plankenkoor/includes/_sidenavigation.php' ); ?>
<!-- //sidenavigation -->
<br/>
<!-- contact -->
<?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/templates/plankenkoor/includes/_contact.php' ); ?>
<!-- //contact -->
</div>
<!-- end left -->

<!-- wrapper -->
<div id="wrapper">

<!-- 5.a en 5.b main (topcontent en content) -->
<div id="main">
<?php if(mosCountModules('topcontent')) { ?>
<!-- topcontent -->
<?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/templates/plankenkoor/includes/_topcontentpod.php' ); ?>
<!-- topcontent -->
<?php } ?>

<!-- content -->
<?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/templates/plankenkoor/includes/_contentpod.php' ); ?>
<!-- content -->
</div>
<!-- end main -->

<div class="wrap"></div>
</div>
<!-- end wrapper -->

</div>
<!-- end contentarea -->

<!-- end footer -->
<div id="footer">
<div class="wrap"></div>
</div>
<!-- end footer -->

</div>
<!-- end all --></div>

Als je dit doet zul je zien dat alle elementen onder elkaar staan. Immers, we hebben nog niet aangegeven in het stylesheet hoe de verschillende onderdelen zich ten opzichte van elkaar moeten positioneren.

plankenkoor-home-div

Wat heb ik er nu aan toegevoegd? Onderdeel 2) het logo, 3) de bovenste navigatie, 4) de linkerkolom (met hoofdnavigatie en contact), 5) de content. Onderdeel 1 (zijbalken) gaan we regelen met het stylesheet. Ik heb wel alvast de class .nerf toegevoegd aan #all, zodat we de achtergrond weer zien (dit kun je ook direct toewijzen als eigenschap van #all).

Hoe nu verder?
De volgende stap is het stylesheet aanpassen zodat de elementen goed op de pagina komen te staan. Daarna gaan we de includes vervangen door Joomla 1.5 includes.