a) Logo en roulerende newsflash
Het eerste stukje code betreft het logo van de website en een roulerende newsflash rechtsboven. Het zit binnen het div id=wrapper_r blok.
Wat valt er zoal op?
1) Borders - Zoals je kunt zien hebben we hier met een paar geneste div’s te maken: header > header_l > header_r. Dit is nodig om de rand bovenin, en de ronde hoeken links en rechts te kunnen maken. In het stylesheet zijn dit drie plaatjes die als achtergrondafbeelding toegevoegd worden: zie het bestand blue_bg.css regels 14, 18 en 22.
2) Logo - Het logo zelf is ook een achtergrondafbeelding, nl van de div id=’logo’: zie het bestand template.css regel 82. Nadeel van dit ontwerp is wel dat het logo geen link is naar de homepage (wat de meeste bezoekers wel verwachten). Ook kan je de naam van het logo niet gebruiken om extra informatie over je pagina mee te geven aan zoekmachines.
3) Newsflash - De roulerende tekst wordt door een module gemaakt met de jdoc:include code. In de backend van Joomla (Extensions > Module manager) kan je zien dat op de positie ‘top’ maar 1 module zit, nl de Newsflash module. Op die plek kan je ook de instellingen van de module aanpassen.
Het is standaard zo ingesteld dat je willekeurig de laatste berichten ziet uit de nieuwssectie. De positie van de tekst wordt bepaald door de padding van de div#header_r. Zie template.css regel 73.
Wil je op deze plek een vaste tekst? Maak dan een nieuwe module die je voorziet van statische tekst.
b) De navigatiebalk
Hierop volgt de navigatiebalk:
Een stukje ingewikkelder, maar volgens dezelfde principes:
1) Borders - Eerst dezelfde truc om boven, links en rechts border te maken, maar nu met tabarea, tabarea_l en tabarea_r.
2) Menu - Hierna komt het tabmenu met daarin een tabel om de navigatie-elementen te tonen.
3) Pillen - Vervolgens hierin 3 ‘pillen’: .pill_l, .pill_m en .pill_r; .pill_r bevat een achtergrondafbeelding met het linker ronde hoekje, .pill_m bevat een achtergrondafbeelding voor de achtergrond van de navigatie zelf en .pill_r bevat een achtergrondafbeelding met het rechter ronde hoekje. Dit wordt allemaal geregeld in template.css, regels 228, 235 en 242,
4) Navigatie-elementen - Tenslotte zit binnenin .pill_m een nieuwe div die een include bevat van een module ‘user3'. Als je weer kijkt in de backend zul je zien dat dit de module Top Menu is.
Het menu is opgebouwd als een lijst (ul met li elementen) die horizontaal wordt weergeven. Verder bevat elk element een donkergrijs achtergrondplaatje van 1 pixel breed, dat - rechts uitgelijnd, het grijze scheidingsstreepje veroorzaakt (zie template.css regels 254 en 260). 
Maar… waar komt dan het meest linkse streepje vandaan? Van de linkerpil in #pill_l. Tja, het is een flinke puzzel…
c) Het zoekveld
De code voor het zoekveld is een stuk eenvoudiger:
Niet meer dan een div#search waarin met een jdoc:include staat met module ‘user 4'. In de module manager zie je dat op die plek de Search module zit.
De instellingen van het zoekveld (breedte, tekst in het zoekvak en uitlijning) regel je via die module, maar ook via #search in template.css regel 146.
d) Het kruimelpad
Ook hier maar een klein stukje code:
Een div#pathway bevat weer een jdoc:include, maar nu met module ‘breadcrumb’. Eindelijk een module die je direct aan de naam herkent… In de module manager zie je dat op die plek de Breadcrumbs module is toegewezen. Via de module kan je bepalen of je de homelink wilt laten zien en hoe deze moet heten. Ook kan je instellen of je het laatste element van het kruimelpad wilt laten zien en wat het scheidingsteken moet zijn.
De opmaak regel je in template.css regel 138 en 333.
Algemene principes
Er zijn dus een paar algemene principes:
- Door 3 (geneste) divs te gebruiken worden in het ontwerp linkerkant, bovenkant en rechterkant voorzien van de juiste randen.
- Met jdoc:include worden modules ingesloten.
- Deze stel je in via de module manager en via stylesheets.
Hoe nu verder?
Nu we de bovenkant van de pagina klaar hebben, gaan we in het volgende artikel in deze serie verder met de body van de pagina.