Nu we de header van het ontwerp helemaal onder de knie hebben, zijn we toegekomen aan de body van het template. Ook hier begin ik met een bespreking van de body van rhuk_milkyway, aangezien die het eenvoudigst is. Belangrijk om even op te merken is dat de hele pagina opgemaakt kan worden met CSS! Dit biedt enorme voordelen voor een ontwerper.
De opbouw van de body is een beetje als het Droste vrouwtje: alle onderdelen zijn genest. Wil je de pagina begrijpen, dan moet je de onderdelen een voor een uitpakken.

De bodytag

Het eerste wat opvalt is de body-tag zelf. Hierin zie je drie variabelen die gebruikt worden om de vormgeving van de pagina te bepalen. Deze komen uit de instellingen die je in dit template kunt veranderen bij de installatie:
a) de kleur ( $this->params->get('colorVariation'); ),
b) de achtergrond ( $this->params->get('backgroundVariation'); ) en
c) de breedte ( $this->params->get('backgroundVariation'); ).

Een gastartikel van Jof Neuhaus – illustrator en eigenaar van joah.nl – over het vormgeven van je website.

Denken in rechthoekjes: standaard maar toch origineel
Html pagina’s worden door de browser opgebouwd in blokjes. Dit zijn altijd rechthoeken: bijvoorbeeld de div of table tags. Een browser begint linksboven eindigt rechtsonder. Door deze manier van werken krijgen de meeste sites ook snel het karakter van een berg gestapelde blokjes. Dit is niet erg, maar het kan zijn dat je juist ronde of golvende vormen wilt gebruiken in je ontwerp. Om dit te bewerkstelligen kun je gebruik maken van achtergrondplaatjes met ronde vormen. Ook kun je onderdelen afzonderlijk positioneren met verschillende marges of met absolute coördinaten. Maar blijf echter altijd denken in blokjes! Wanneer je net zo denkt als je browser, zie je eventuele technische obstakels sneller aankomen.

Onbekend maakt onbemind
Hoe saai dat ook klinkt; het is waar. De gemiddelde surfer kijkt in één oogopslag of de site biedt waar hij of zij naar op zoek is, en zo niet dan is hij/zij binnen 5 seconden weer vertrokken. Hierbij wordt niet alleen op inhoud gescand, maar zeker ook op een begrijpelijke interface. Wanneer je een al te afwijkende manier van navigeren hebt bedacht zullen de meeste bezoekers er simpelweg van weglopen.

Afb. Boomstrucuur

Dat betekent dus dat je er goed aan doet om je navigatie in te richten volgens de bij iedereen bekende boomstructuur. Daarnaast verwachten de meeste bezoekers het navigatieblok ook links- of rechtsboven, of als een horizontale balk bovenin. Zet je het op een andere plek, dan moeten bezoekers gaan zoeken. Uitzonderingen op de regel zijn sites waarbij het juist gaat om een afwijkend karakter, zoals kunstzinnige sites. Vaak zijn sites van kunstenaars, vormgevers of illustratoren enigszins afwijkend.

Als je je site hebt aangemeld bij zoekmachines zul je zien dat je deze al snel langskomen en je website indexeren. Dat gebeurt in principe voor elke pagina die ze kunnen bereiken. Mooi, maar wil je wel alle pagina's opnemen in Google en laten meetellen? Los van problemen met pagina's die nooit geindexeerd hadden mogen worden (zoek maar eens op vertrouwelijk bij Google), heb je ook pagina's die niet nodig zijn om te indexeren. Welke zijn dit, waarom zou je ze niet indexeren en hoe geef je dit aan? Tot slot een interessant voorbeeld hiervan bij marktplaats.nl.

Pagina's die niet geindexeerd hoeven te worden
Een algemene regel is de volgende: sluit pagina's uit die niet bijdragen aan de kern van je website. Je website heeft een uniek verhaal waarmee je gevonden wilt worden. Dit verhaal onderscheidt je van anderen. Alles wat niet bijdraagt aan dat verhaal laat je erbuiten. Stel je hebt een website over baby's, dan zijn de disclaimer, algemene voorwaarden, contactpagina, kandidaat. Wat deze pagina's zijn verschilt dus per website (per verhaal).

Waarom zou je ze uitsluiten?
Door ze uit te sluiten leer je een zoekmachine welk begrippenveld voor jouw website van belang is. Daaraan help je ook mee door je links op de juiste manier te benoemen. Het totaal aantal relevante pagina's wordt verminderd, waardoor de waarde die je site heeft (je PageRank) wordt doorgegeven aan die pagina's die het hardst nodig hebben. Stel je homepage heeft PR4 en het aantal links in die pagina wordt van 20 teruggebracht naar 10, dan maken die 10 meer kans op een hogere pagerank, dan die 20 (nl. 1/10 in plaats van 1/20, dus 10% in plaats van 5%).
Link altijd met woorden die iets te maken hebben met de inhoud van je website, niet met de navigatie. Dus noem een link bij de naam van de doelpagina (gebruik niet 'klik hier', maar 'geld verdienen met weblogs'). Zie hiervoor mijn artikel over een juist gebruik van hyperlinks.

< ?php include('wp-content/themes/relaxation_3column_beta1-5/elements/joomla-template-15-announcement.php'); ?>

In het vorige artikel heb ik uitgelegd wat je zoal kunt instellen aan de homepage van Joomla. Dat bleek heel wat te zijn. Het eindresultaat ziet er ongeveer zo uit:

Bepalen welke artikelen op de homepage komen
In de Frontpage Manager van Joomla zie je welke artikelen op de homepage staan. Helaas kan je daar niet nieuwe artikelen selecteren. Dit doe je bij de inhoud van een artikel zelf.
1) Ga naar het overzicht van items: Content > Content by Section > News > News items.
2) Klik achter een item in de kolom Frontpage om het item op de homepage te zetten of juist van de homepage af te halen.

De items op de homepage vormgeven
De vormgeving van de items op je homepage wil je misschien aanpassen. Niet alleen om je eigen vormgeving beter weer te geven, maar ook omdat het stylesheet van Joomla geen rekening houdt met zoekmachine optimalisatie. Zo zou je elke titel binnen een header-H1 tag willen weergeven, omdat die beter scoren.
Helaas moet ik je hier teleurstellen. Het is niet mogelijk om de opbouw eenvoudig aan te passen zonder in de code te gaan hacken. Het schijnt dat dit in de volgende versie van Joomla wel mogelijk is.

Dat je met CSS heel wat kan bereiken blijkt wel uit de site van MaxDesign. Als je op zoek bent naar een aantal goede tutorials over CSS kan ik je deze website van harte aanbevelen.

Lijsten
In 3 tutorials (Listamatic 1 en 2 en Listutorial) wordt helemaal uit de doeken gedaan hoe je lijsten kunt bewerken met CSS. Ideaal voor het maken van menu's:
- opmaak van je lijsten
- menulijsten
- horizontale lijsten (zoals hierboven mijn menu)
- het vervangen van bullets door afbeeldingen
Een Browser chart laat precies wat werkt in welke browser. Begin je net met CSS, start dan met de Listutorial.

Floats
In het Floatutorial staat hoe je onderdelen in je site uitlijnt met CSS. Bijvoorbeeld om een afbeelding naast je tekst te plaatsen. Ben je van plan fotoslides te gaan maken? Dan is deze tutorial een goed begin.
Een ander onderdeel hiervan is een uitleg van een 2-koloms of 3-koloms liquid layout met CSS. Whelp.nl heeft een 3-koloms layout. Liquid betekent dat de breedte meegroeit of krimpt met de breedte van een browser. Hier heb ik zelf niet voor gekozen omdat ik de voorkeur geef aan pagina's die voorspelbaar zijn. Ook houd ik er in de opbouw van mijn pagina (teksten en afbeeldingen) rekening mee. Bij een liquid layout heb je dat – naar mijn mening – wat minder in de hand.

Selectors
Dit tutorial tot slot gaat meer over de basale mogelijkheden van CSS en welke keuzes je hierin kunt maken. Wat minder aansprekend, maar – net als die hierboven – zeer uitgebreid en duidelijk.

Meer lezen?
Ben je geïnteresseerd in CSS? Kijk dan ook eens bij de CSS Zen Garden.