Tips en Tools Voor Joomla - de Basis

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.
nl)
Tips en tools voor Joomla!
Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

Professionele websites voor iedereen
Eric Tiggeler

Meer informatie over deze en andere uitgaven kunt u verkrijgen bij:
Sdu Klantenservice
Postbus 20014
2500 EA Den Haag
tel.: 070 – 378 98 80
fax: 070 – 378 97 83
e-mail: sdu@sdu.nl
Vormgeving en zetwerk: Redactiebureau Ron Heijer, Markelo

Omslagontwerp: Scherphuis/Snijder, Assen
Druk- en bindwerk: BalMedia, Schiedam
ISBN: 978 90 12 58040 3

NUR: 991
© Sdu Uitgevers bv, Den Haag, 2008
Alle rechten voorbehouden. Behalve de door de Auteurswet 1912 gestelde uitzonderingen,

mag niets uit deze uitgave worden verveelvoudigd (waaronder begrepen het opslaan in een ge-
automatiseerd gegevensbestand) en/of openbaar gemaakt door middel van druk, fotokopie,
microfilm of op welke andere wijze dan ook, zonder voorafgaande schriftelijke toestemming
van de uitgever.
De bij toepassing van art. 16b en 17 Auteurswet 1912 wettelijk verschuldigde vergoedingen
wegens kopiëren dienen te worden voldaan aan de Stichting Reprorecht, Postbus 3060, 2130
KB Hoofddorp, tel.: (023) 799 78 10.
Voor het overnemen van een gedeelte van deze uitgave in bloemlezingen, readers en andere
compilatiewerken op grond van art. 16 Auteurswet 1912 dient men zich te wenden tot de
stichting PRO, Postbus 3060, 2130 KB Hoofddorp, tel.: (023) 799 78 09. Voor het overnemen
van een gedeelte van deze uitgave ten behoeve van commerciële doeleinden dient men zich te
wenden tot de uitgever.
Hoewel aan de totstandkoming van deze uitgave de uiterste zorg is besteed, kan voor de afwe-
zigheid van eventuele (druk)fouten en onvolledigheden niet worden ingestaan en aanvaarden
auteur(s), redacteur(en) en uitgever deswege geen aansprakelijkheid voor de gevolgen van
eventueel voorkomende fouten en onvolledigheden.
All rights reserved. No part of this publication may be reproduced, stored in a retrieval system
of any nature, or transmitted in any form or by any means, electronic, mechanical, photocopy-
ing, recording or otherwise, without the prior written permission of the publisher.
While every effort has been made to ensure the reliability of the information presented in this
publication, Sdu Uitgevers neither guarantees the accuracy of the data contained herein nor
accepts responsibility for errors or omissions or their consequences.

Inhoud
Inleiding ix
1 Een cms, hoe werkt dat? 1

1.1 Wat is een cms? 1
1.2 Wat is het verschil met het werken aan een gewone site? 2
1.3 Hoe installeer je Joomla? 4
1.4 Hoe werk je met Joomla? 5
1.4.1 Wat is de frontend? 6
1.4.2 Wat is de backend? 8
1.4.3 Wat zijn de belangrijkste bedieningsknoppen? 10
2 Hoe begin je met Joomla? 13

2.1 Een website in een uur 13
2.2 Hoe kleed je de standaardsite uit? 14
2.3 Hoe pas je het uiterlijk van de site aan? 17
2.4 Hoe voeg je inhoud toe? De drie basisstappen van Joomla 20
2.5 Hoe vul je de homepage? 28
2.6 Hoe voeg je een enquête toe? 30
2.7 Hoe voeg je een reactieformulier toe? 32
2.8 Hoe nu verder? 34
3 Hoe bedenk je een gebruikersvriendelijke indeling? 37

3.1 Hoe werkt dat, indelen in drie niveaus? 37
3.2 Kan het ook zonder die drie niveaus? 39
3.3 Een vast indelingssysteem, is dat niet ongebruiksvriendelijk? 39
3.4 Welke instellingen kies je bij het maken van secties en categorieën? 41
3.4.1 Hoe voeg je een sectie toe? 41
3.4.2 Hoe voeg je een categorie toe? 44

Tips en tools voor Joomla
4 Verschillende soorten webpagina’s: hoe maak je ze in Joomla? 45

4.1 Hoe maak je de homepage? 48
4.1.1 Hoe selecteer je welke artikelen op de Front Page komen? 49
4.1.2 Hoe pas je de volgorde van items in de Front Page aan? 49
4.1.3 Hoe pas je de Front Page verder aan? 51
4.1.4 Iets anders op de homepage, kan dat ook? 57
4.2 Hoe maak je overzichtspagina’s? 59
4.2.1 Hoe maak je een overzichtspagina in een Blog Layout? 60
4.2.2 Hoe pas je de Blog Layout aan? 62
4.2.3 Hoe maak je een overzichtspagina in een List Layout? 70
4.2.4 Hoe kun je de Section List Layout aanpassen? 70
4.2.5 Hoe kun je de Category List Layout aanpassen? 74
4.2.6 Hoe kun je de List Layout verder aankleden? 75
Wanneer kies je een Blog Layout en wanneer een List Layout? 78
4.3 Hoe maak je een gewone pagina? 79
4.3.1 Hoe voeg je een afbeelding toe? 84
4.3.2 Hoe verdeel je een langer artikel in meerdere pagina’s? 85
4.3.3 Hoe verdeel je een artikel in introtekst en vervolgtekst? 87
4.3.4 Hoe stel je de algemene voorkeuren in voor artikelen? 88
4.4 Hoe maak je een archiefpagina? 92
5 Hoe maak je menu’s? 95

5.1 Hoe stel je een menu samen? 95
5.2 Hoe maak je een nieuw menu? 96
5.2.1 Hoe pas je de eigenschappen van het menu aan? 100
5.2.2 Wat voor soorten menulinks kun je maken? 103
5.3 Hoe maak je submenu’s? 104
5.4 Hoe maak je gekoppelde menu’s? 107
5.5 Menu’s en usability: hoe hou je de klikstroom kort? 108
5.6 Hoe maak je hyperlinks in artikelen? 109
6 Hoe breid je de mogelijkheden uit? 113

6.1 Wat zijn extensies? 113
6.2 Hoe installeer je nieuwe extensies? 115
6.3 Hoe regel je de instellingen van een extensie? 115
6.4 Welke extensies zitten er al standaard in Joomla? 119
6.5 Welke extensies moet je zeker hebben? 122
6.5.1 Hyperlinks maken in artikelen 122
6.5.2 Tekstverwerken met de Joomla Content Editor 126
vi
Inhoud
6.5.3 Teasers aan een pagina toevoegen 131

6.5.4 Een pagina verdelen met tabs 135
6.5.5 Content plaatsen waar je maar wilt 140
6.5.6 Automatisch een complete inhoudsopgave van een sectie maken 144
6.5.7 Afbeeldingen laten zien in een lightbox 148
6.5.8 Zoekmachinevriendelijke url’s maken 151
7 Hoe zet je de lay-out naar je hand? 155

7.1 Hoe ontjoomla je een website? 155
7.2 Hoe kom je aan templates? 156
7.3 Hoe installeer je een template? 157
7.4 Een template aanpassen 161
7.5 Een template die niet op een template lijkt, kan dat ook? 165
7.6 Zelf een template maken 169
8 Wat is de efficiëntste manier van werken? 171

8.1 Welke browser moet je gebruiken? 171
8.2 Hoe kun je snel schakelen tussen frontend en backend? 171
8.3 Hoe kun je je werkomgeving bewaren? 174
8.4 Hoe pas je gemakkelijk de css-stijlen aan? 175
8.5 Welke ontwikkeltools zijn er nog meer? 179
Bijlage: Joomla installeren 183

1 Download de Joomla-bestanden 184
2 Plaats de bestanden op de webserver 184
3 Maak een database aan 184
4 Installeer Joomla 185
5 De taal instellen op Nederlands 194
6 De basisinstellingen aanpassen 195
Register 201
vii
Inleiding
Joomla, een webrevolutie
Je wilt een website bouwen die goed te onderhouden is, prettig te gebruiken en een eigen-
tijdse uitstraling heeft. Als je dan gebruikmaakt van een contentmanagementsysteem zoals
Joomla, gaat dat stukken makkelijker.
De site ontwerpen, de content up-to-date houden, extra’s toevoegen: met Joomla hoef
je geen webprofessional meer te zijn om toch heel professionele resultaten te krijgen.
Of je nu een persoonlijke weblog wilt maken, een kleine site van een vereniging of een
omvangrijke corporate website, Joomla brengt het binnen ieders bereik. Het content
managementsysteem (cms) is een revolutionaire tool: wat de tekstverwerker jaren geleden
betekende voor het publiceren op papier, betekent het contentmanagementsysteem voor
het publiceren op het web.
Het cms Joomla is dan ook een enorm succes. Het is de motor achter zo’n 20 miljoen
sites wereldwijd en het eind van de groei is nog lang niet in zicht. Geen wonder, want het
biedt alle voordelen van een state-of-the-art contentmanagementsysteem. Het is relatief
gemakkelijk te gebruiken, je kunt het uitbreiden met een grote hoeveelheid extra functies
en het is opensourcesoftware, die gratis beschikbaar is en voortdurend wordt doorontwik-
keld door een internationaal team van vrijwilligers.
Hoe maak je de overstap?

Hoe aantrekkelijk websites maken met Joomla ook lijkt, toch is er een drempel om ermee
te beginnen. Werken met zo’n uitgebreid systeem is heel anders dan werken aan een
‘gewone’ website. Hoe begin je, hoe vind je je weg in het cms, en hoe bouw je de site die
jóú voor ogen staat?
Dit boek is bedoeld om die stap over de drempel makkelijker te maken. Of je nu een
kleine of grote site wilt bouwen, Tips en tools voor Joomla! legt uit hoe je het aanpakt. Met
de nadruk op de praktijk: het gaat niet om wat Joomla allemaal kan, maar om wat jij
kunt met Joomla. Het gaat om de resultaten die je wilt bereiken en problemen die je wilt
oplossen: ‘hoe krijg ik dat voor elkaar met Joomla?’

Tips en tools voor Joomla! besteedt veel aandacht aan het eindproduct: verschillende soor-
ten pagina’s, en hoe je die maakt in Joomla. Hoe krijg je de homepage zoals je hem heb-
ben wilt, hoe maak je een slim ingedeelde contentpagina, hoe maak je logische menu’s?
Uiteindelijk draait het daarbij altijd om de bezoeker: hoe bied je die een aantrekkelijke,
goed te gebruiken website? Dat kan uitstekend met Joomla, maar je moet wel de juiste
keuzes maken om het gebruiksgemak van je site te vergroten.
Voor wie?
Tips en tools voor Joomla! is bedoeld voor iedereen die een site wil bouwen en daarbij
alle voordelen van Joomla wil benutten. Technische begrippen en webjargon zijn tot het
uiterste beperkt. Natuurlijk kunnen we om centrale begrippen als html en css niet heen,
maar in het boek vind je verwijzingen naar websites die je meer over die basisbegrippen
uitleggen. Het is meegenomen als je al ervaring hebt met ‘ouderwetse’, statische sites,
maar je hoeft geen ervaring te hebben met programmeren of coderen – het bijzondere
aan Joomla is nu juist dat je het uiterste uit je nieuwe website kunt halen zonder ook maar
een regel in een programmeer- of scripttaal te hoeven schrijven. Die laagdrempeligheid is
ook het uitgangspunt van dit boek.
De opbouw van dit boek

Tips en tools voor Joomla! begint met een kort hoofdstuk over de achtergrond van Joomla
en stapt dan meteen over naar de praktijk van het webbouwen: een sitestructuur beden-
ken, pagina’s en menu’s maken, uitbreidingen toevoegen en de lay-out aanpassen. Elk
hoofdstuk beantwoordt één hoofdvraag:
1 Een cms, hoe werkt dat?

2 Hoe begin je met Joomla?
3 Hoe bedenk je een gebruikersvriendelijke indeling?
4 Verschillende soorten webpagina’s: hoe maak je ze?
5 Hoe maak je menu’s?
6 Hoe breid je de mogelijkheden uit?
7 Hoe zet je de lay-out naar je hand?
8 Wat is de efficiëntste manier van werken?
De uitgebreide inhoudsopgave bij dit boek kun je gebruiken als een FAQ: als je een ge-
richte vraag hebt, kies je eerst de hoofdvraag waar die kwestie onder valt, en dan vind je
daaronder alle vragen die met dat onderwerp te maken hebben.

Inleiding
Tot slot
Met Tips en tools voor Joomla! heb ik een boek willen schrijven dat heel veel praktische
informatie bundelt die ik zelf bij het webbouwen stukje bij beetje verzameld heb vanuit
de meest uiteenlopende bronnen – van websites uit Costa Rica tot Engelse, Nederlandse
en Duitse handboeken. Dit boek geeft je antwoord op concrete vragen die je gaande-
weg krijgt wanneer je Joomla wilt inzetten als serieus webgereedschap. Ik hoop dat je
het daarbij inderdaad kunt gebruiken, dat het je verder helpt bij praktijkproblemen en
je veel uitzoekwerk bespaart. Heb je vragen, opmerkingen, wil je meer weten? Kijk op
www.joomla.erictiggeler.nl voor aanvullende informatie, updates op het boek, een FAQ en
een reactieformulier.
Een paar afspraken

V Je schrijft Joomla officieel met een uitroepteken. Zo staat het ook op het omslag van
dit boek. Maar in het boek zelf staat gewoon Joomla, omdat een uitroepteken midden
in de zin nogal opvalt en soms verwarrend is.
V Het teken > betekent ‘doorklikken naar’: bijvoorbeeld Extensions > Module Manager
> Main Menu betekent ‘Ga naar Extensions, klik op Module Manager, klik op Main
Menu’.
V Tussen vierkante haken staan namen die je zelf moet invullen, omdat ze specifiek zijn
voor jouw site. Bijvoorbeeld: Menus > Main Menu > [Naam van de link].
V Dit boek is gebaseerd op de Engelstalige versie van Joomla. Je zult dus Engelse begrip-
pen tegenkomen, maar als je de Nederlandse versie gebruikt, maakt dat niet uit. De
meeste centrale begrippen (extensions, articles, menu enz.) verschillen in het Engels en
Nederlands nauwelijks van elkaar. Waar dat wel zo is, geef ik de Nederlandse term
tussen haakjes.
xi
Een andere manier van websites bouwen
Wat is anders aan een site gebaseerd op een contentmanagement

systeem, als je het vergelijkt met ‘gewone’, statische sites? Het kost mis-
schien wat moeite om de principes door te krijgen, maar daarna pluk
je de vruchten: een site die je veel makkelijker aanpast, uitbreidt en
onderhoudt. In dit eerste hoofdstuk lees je meer over die principes. Wat
maakt werken met Joomla anders, wat zijn de belangrijkste functies?
1.1 Wat is een cms?
Een contentmanagementsysteem (cms) stelt je in staat om professionele websites te maken

zonder dat je uitgebreide kennis nodig hebt van programmeertalen. Het bevat allerlei
functies die je met een gewone, statische website niet of niet makkelijk voor elkaar krijgt:
een zoekfunctie, de mogelijkheid voor je bezoekers om commentaar te geven op artike-
len, forums, enzovoort. Bovendien hoef je een site die door een cms wordt aangestuurd,
niet alléén te onderhouden: ook andere gebruikers kunnen inhoud plaatsen.
Een cms kun je zien als een krachtige ‘publiceermachine’: installeer de machine, zet een
paar knoppen om, stop er content in en je hebt een gemakkelijk aan te passen en voort-
durend uit te breiden website. De kracht van Joomla is daarbij niet alleen dat het een vrij
eenvoudig cms is om mee te leren werken, maar ook dat het voortdurend wordt dooront-
wikkeld en uitgebreid. Er is wereldwijd een enorme community die zich inzet om Joomla
zelf te ontwikkelen en te verbeteren, maar ook om nieuwe toevoegingen (extensies) voor
het systeem te maken.
Wat kun je met een cms dat je ‘met de hand’ niet kunt? Een cms maakt het vooral mogelijk
om de inhoud van je site makkelijk te beheren: je kunt nu al een berichtje schrijven voor de
homepage van volgende maand, en Joomla zorgt er automatisch voor dat het verschijnt
op de datum die jij bij het schrijven prikt. Maar ook het toevoegen en bijhouden van hy-
perlinks is een klus die met een cms veel makkelijker gaat: een statische website wordt al
snel een onoverzichtelijke kluwen van pagina’s en hyperlinks. Het cms houdt hyperlinks
voor je bij en zorgt er bijvoorbeeld voor dat, als je een nieuwspagina toevoegt, automa-
tisch een link verschijnt in de lijst met ‘laatste nieuws’.

Afbeelding 1.1 Met een cms voeg je zonder veel moeite extra’s toe, zoals automatisch bijgehouden
hyperlinks naar hot topics of meest gelezen artikelen.
Een cms zoals Joomla kan zoveel functies bieden doordat het gebruikmaakt van de krach-
tige programmeertaal PHP en gekoppeld is aan een database.
G Hoewel je weinig hoeft af te weten van html en css om met Joomla te wer-
ken, is het wel slim om van de basisbeginselen kennis te nemen. Dan sta je
niet meteen voor verrassingen als je eens een keer onder de motorkap moet
kijken. Als je zelf de lay-out van je site wilt aanpassen, dan is het zelfs een
must om wat van css af te weten. Gelukkig zijn html en css geen ingewik-
kelde codetalen en zijn er veel goede websites die je een introductie geven.
Een paar voorbeelden:
n http://www.handleidinghtml.nl/
n http://www.webontwikkelaar.nl/css/cursus/
n http://css.startpagina.nl/ geeft een overzicht
1.2 Wat is het verschil met het werken aan een gewone site?
Werken met een cms verschilt sterk van het maken van ‘gewone’, statische websites, waar-
bij je pagina voor pagina maakt en die uploadt naar een webserver. In het editorscherm
van bijvoorbeeld Dreamweaver bewerk je de webpagina die je bezoeker uiteindelijk ook in
zijn browser ziet. Maar in Joomla bestáán geen webpagina’s. Joomla pakt stukje bij beetje

de inhoud van de pagina bij elkaar uit een database. Alleen de bezoeker van je site ziet
de volledige webpagina’s die Joomla samenstelt, jij als webbouwer of webredacteur werkt
met de blokken waaruit de webpagina’s bestaan.
Wat zijn dat voor blokken? Denk aan een blok met een menu, een blok met een afbeel-
ding, een blok met artikeltekst, enzovoort. Welke blokken Joomla precies bij elkaar pakt,
en in welke volgorde en lay-out die blokken op het scherm verschijnen, dat bepaal jij – niet
per pagina, maar per blok.
Via verschillende instellingen aan de achterkant van Joomla (de backend, zie 1.4.2) be-
paal je bijvoorbeeld waar het blok mainmenu verschijnt, dat het hoofdmenu van de site
bevat. In de Article Manager bepaal je welk artikel verschijnt in het ‘hoofdblok’ op de
pagina, en met Module Manager kies je welke extra modules er op die pagina te zien zijn
– denk bijvoorbeeld aan een banner of een newsflash.
Het lijkt misschien onhandig: wil je één pagina beïnvloeden, dan moet je in Joomla de
instellingen veranderen van de verschillende blokken op die pagina. Maar je moet het
eigenlijk andersom zien: als je op één plaats in Joomla de instellingen van een blok veran-
dert – bijvoorbeeld van een menu – dan stel je dat meteen in voor verschillende pagina’s
tegelijk. En je kunt precies bepalen op welke pagina’s een blokje opduikt: het blok met
de speciale aanbiedingen voor tuinliefhebbers kun je met een paar klikken alléén laten
verschijnen op de homepage en in de rubriek tuinartikelen.
Omdat één blok op heel veel pagina’s kan voorkomen, verander je door de instellingen
van één blok soms het hele aanzien van de site. Die flexibiliteit is onmogelijk als je pagina
voor pagina een statische site bouwt. Kortom, websites bouwen met Joomla betekent een
nieuwe manier van werken, maar je krijgt er veel flexibiliteit voor terug.
Hieronder zie je een illustratie van Joomla als ‘blokkendoos’. De sjabloon van de web
pagina (de template) bevat lege vakken die je kunt vullen met blokken. In dit geval zijn die
blokken de zoekmachine (bovenaan), het menu (in de linkerkolom), het broodkruimelpad,
de centrale paginacontent (een introductiepagina bij dit onderdeel van de site), en in de
rechterkolom een extra blok.

Afbeelding 1.2 De webpagina als blokkendoos. Op de achtergrond zie je de sjabloon van de website,
dat Joomla vult met content. De bezoeker ziet één pagina, die in dit geval is samengesteld uit minstens vijf
verschillende ‘contentblokken’.
1.3 Hoe installeer je Joomla?
Joomla is een webapplicatie: software die je installeert op een webserver en waar je

vervolgens online een website mee bouwt en onderhoudt. Een statische website bestaat
vaak alleen uit ‘platte’ html-pagina’s; Joomla is een applicatie die voortdurend informatie
opslaat naar en leest uit een database. Maar al is de achterliggende techniek wat ingewik-
kelder, bij vrijwel elke webhost kun je tegenwoordig terecht voor een hostingaccount die
Joomla ondersteunt.

Om Joomla te kunnen installeren, heb je dus een hostingaccount nodig; je huurt ruimte
op het web. Een goed overzicht van webhostingbedrijven vind je via www.webhosters.nl/.
Zodra je beschikt over hostingruimte op een webserver, kun je Joomla installeren in vier
stappen:
1 Download de Joomla-bestanden van www.joomla.org.

2 Plaats de bestanden via ftp op de webserver.
3 Maak een database aan.
4 Installeer Joomla via een online-installatieprocedure in je browser.
Uitgebreide instructies voor deze vier stappen vind je in de Bijlage: Joomla installeren.
Hierna gaan we ervan uit dat je Joomla geïnstalleerd hebt en dat je beschikt over de mo-
gelijkheid om bestanden te uploaden naar je site (ftp’en). Je kunt de volgende hoofdstuk-
ken ook volgen als je nog niet over Joomla beschikt, maar het is gemakkelijker als je zelf
de stappen uit dit boek ‘live’ kunt uitproberen.
G Joomla zelf installeren is een koud kunstje: als je een account hebt bij een
webhost, en dus bestanden kunt uploaden en een database kunt aanmaken,
dan is het in tien minuten gebeurd. Maar als je geen zin hebt om Joomla zelf
te installeren, dan kun je ook kiezen voor een webhost die Joomla al voor-
geïnstalleerd aanbiedt in zijn hostingpakket. Je hoeft dan niets zelf te doen
om gebruik te maken van Joomla (of alleen op een knop ‘activeer Joomla’
te klikken). Googel eens op ‘webhosting Joomla’.
1.4 Hoe werk je met Joomla?
Met Joomla bouw en onderhoud je een website online, in je browser. Dat betekent dat je
vanaf elke plek met internettoegang je site kunt beheren. Dat doe je via de achterkant van
Joomla: de backend, die alleen toegankelijk is voor beheerders van de site. Je moet inlog-
gen met je gebruikersnaam en password om de backend te kunnen bereiken. Vervolgens
kun je vanuit de backend de site-indeling aanpassen, artikelen toevoegen, enzovoort.
Wat de bezoeker ziet van Joomla, is de voorkant: een website waar je niet aan merkt dat
Joomla de motor is. De frontend is dus de website zoals de bezoeker die ziet.

Hieronder lees je eerst meer over deze twee centrale begrippen in Joomla: eerst over het
eindproduct van je werk in Joomla, de frontend, dan over de backend, de werkruimte voor
webontwikkelaar en -beheerder.
1.4.1 Wat is de frontend?

De frontend bereik je via het webadres van de site, bijvoorbeeld www.mijnsite.nl. Na een
standaardinstallatie van Joomla ziet de site eruit zoals op de afbeelding hieronder. Deze
site bevat de voorbeelddata die Joomla standaard kan mee-installeren: de site is dus niet
leeg, maar al gevuld met (Engelstalige) voorbeeldartikelen, afbeeldingen, menu’s en al-
lerlei extra functies.
Afbeelding 1.3 Zo ziet Joomla eruit meteen na installatie.
Je krijgt zo in één klap een kant-en-klare website, vol toeters en bellen. Dat is trouwens
meteen een risico van het installeren van Joomla inclusief voorbeelddata: de site zit wel
erg vol met extra functies, en je moet vooral de verleiding weerstaan om die allemaal te
handhaven als je je eigen site maakt. Het is immers maar de vraag of je bezoekers alle-
maal zitten te wachten op polls, newsflashes enzovoort. Maar de voorbeeldsite is wel een
uitstekende illustratie van wat Joomla allemaal kan. Hieronder zie je wat de belangrijkste
onderdelen en functies zijn.

Afbeelding 1.4 De onderdelen van een webpagina nadat Joomla geïnstalleerd is met voorbeelddata.
De onderdelen van de frontend

1 De header, een afbeelding met het logo van de site.
2 De newsflashmodule: laat elke keer dat de pagina geopend wordt een ander wille-
keurig artikel zien.
3 Het topmenu: een menu aan de bovenkant van de pagina dat naar hoofdrubrieken
leidt.
4 De zoekfunctie.
5 Het hoofdmenu (Main Menu).
6 Laatste nieuws (Latest News Module): links naar de meest recente nieuwsartikelen.
7 Populaire artikelen (Popular): links naar de meestgelezen artikelen.
8 Homepage-items: intro’s van geselecteerde artikelen.
9 Poll: mini-enquête.
10 Who’s online: hoeveel bezoekers zijn er op dit moment?
11 Banner: wisselende advertenties.
Deze elf onderdelen zijn nog niet eens het maximale: er kan ook nog bijvoorbeeld een
loginformulier zijn (dat geregisteerde gebruikers toegang geeft tot bepaalde pagina’s). Als

een gebruiker is ingelogd, kan er een speciaal menu verschijnen dat hem de mogelijkheid
geeft een artikel toe te voegen.
Hoe de voorkant eruitziet, wordt niet alleen bepaald door welke onderdelen er ‘uit’ of
‘aan’ staan. De vormgeving van de site regel je met een template, een sjabloon dat de lay-
out van alle pagina’s in de site bepaalt. Het is heel gemakkelijk om een andere template
te laden en daarmee het uiterlijk van de site volledig te veranderen. Bij de installatie van
Joomla vind je al enkele templates in de Template Manager (waaronder rhuk_milkyway,
dat in het voorbeeld hierboven gebruikt is). Je kunt die templates aanpassen, je kunt je
eigen template maken, maar op het web vind je bovendien duizenden uitstekende (vaak
gratis) templates die je in een paar klikken kunt downloaden en installeren.
1.4.2 Wat is de backend?

Je bereikt de backend van je site door /administrator toe te voegen aan het gewone web
adres. Dus: www.mijnsite.nl/administrator. Je komt dan bij de achterdeur, de personeels-
ingang van je site. Je krijgt een inlogscherm:
Afbeelding 1.5 De personeelsingang: de backend van Joomla.
Hier vul je de gebruikersnaam in (standaard admin) en het password (dat je tijdens de

installatieprocedure kiest; zie 9.4).
Na het inlogscherm kom je in de eigenlijke backend. Dat is de beheeromgeving: hier vind

je alle functies om bijvoorbeeld content toe te voegen of wijzigen, de indeling en de lay-out
van de site te veranderen.

Hieronder zie je hoe de startpagina (het Control Panel) van de backend eruitziet. Die start-
pagina geeft toegang tot alle functies die je als sitebeheerder nodig hebt.
Afbeelding 1.6 Op de startpagina van de backend staan knoppen voor veelgebruikte functies, zoals het
toevoegen van een nieuw artikel.
De belangrijkste vijf onderdelen van deze pagina staan hieronder.
Afbeelding 1.7 De belangrijkste onderdelen van Joomla’s backend.

1 De menubalk met uitklapmenu’s die je toegang geven tot alle functies.

n Site: o.a. gebruikersbeheer, bestandsbeheer, globale configuratie
n Menus: beheer van de menu’s
n Content: artikelen toevoegen, aanpassen, site-structuur indelen
n Components: speciale functies, zoals banners en polls, beheren
n Extensions: uitbreidingen (modules) en templates beheren
n Tools: o.a. mails versturen
n Help: Joomla-hulpfunctie
2 n Preview (overschakelen naar de frontend).

n Informatie over o.a. aantal ingelogde gebruikers
n Logout: uitloggen uit de backend
3 Knoppen naar veelgebruikte functies (die je ook kunt bereiken via de menubalk), bij-
voorbeeld Add new article (nieuw artikel toevoegen).
4 Welkomstinformatie. Die zie je alleen na een nieuwe installatie; in de tekst zelf staan
instructies hoe je deze informatie weghaalt.
5 Extra informatie: onder andere links naar recent toegevoegde artikelen.
1.4.3 Wat zijn de belangrijkste bedieningsknoppen?

Bij alles wat je in Joomla doet, vind je boven aan het scherm de belangrijkste bedienings-
knoppen. Welke knoppen dat zijn, hangt af van de pagina waar je je bevindt: op de pagi-
na met menu’s (Menus > Menu Manager) vind je gedeeltelijk andere knoppen dan op de
pagina met artikelen (Content > Article Manager). Veel knoppen zijn algemeen: functies
als copy en delete gebruik je niet alleen bij artikelen, maar ook bijvoorbeeld bij menu’s.
Hier zie je een voorbeeld van de knoppen in de Article Manager:
Afbeelding 1.8 De werkbalk van de Article Manager.
n Publish: een artikel op de site publiceren

n Unpublish: (een artikel) op de site depubliceren (verbergen, zonder het weg te gooi-
en)
n Copy: kopiëren
n Delete: verplaatsen naar de prullenbak (Trash)
n Edit: bewerken
n New: een nieuw item maken. Bijvoorbeeld een nieuw artikel, of een nieuw menu.
n Help: Joomla-hulpfunctie oproepen
10
Afbeelding 1.9 De werkbalk past zich aan aan de activiteit waarmee je bezig bent.
De knoppen hierboven zie je onder andere als je een artikel bewerkt.
n Preview: voorbeeld bekijken (het effect zien dat de wijzigingen hebben op de frontend
van de site)
n Save: opslaan (en het huidige Joomlavenster sluiten)
n Apply: toepassen (zonder het huidige venster te sluiten)
n Cancel: annuleren (zonder veranderingen op te slaan)
n Help: Joomla-hulpfunctie oproepen
De functies van de knoppen in Joomla spreken voor zichzelf, maar let wel op het verschil
tussen Apply (Toepassen) en Save (Opslaan). Klik op Apply om de wijzigingen die je op de
pagina hebt aangebracht, op te slaan, zonder de pagina te sluiten. Je kunt bijvoorbeeld
de tekst van een artikel bewerken en dan klikken op Apply en Preview, zodat je in een
nieuw venster kunt controleren of het resultaat naar wens is. Wil je vervolgens nog wijzi-
gingen aanbrengen in hetzelfde artikel, dan hoef je het niet opnieuw te openen. Pas als
je ten slotte op Save klikt, dan wordt het artikel opgeslagen én je sluit het Joomla-venster
waarin je aan het werk was.
11
Een snelrecept voor je site
Een website bouwen in Joomla kan in recordtempo: als je gebruikmaakt

van de lay-out en de functies die Joomla al bij een standaardinstallatie
bevat, heb je in een uur een volledige, professionele website online.
Eventueel kun je later de site nog veel meer naar je hand zetten: dan
bouw je gewoon verder op dezelfde basis.
2.1 Een website in een uur
Stel je voor: je hebt het verzoek gekregen van een opdrachtgever om zo snel mogelijk een
website te maken. De opdrachtgever is een semi-professioneel theaterensemble, DaNova-
Music, dat komend weekend al een optreden geeft. Maar het heeft nog geen website! Het
bestuur vraagt of het mogelijk is om morgen al een functionele website online te hebben
dat bezoekers van het concert en andere belangstellenden voldoende informatie geeft
over het theaterkoor.
Natuurlijk kan dat. Wat een paar jaar geleden nog voorbehouden was aan gespecialiseerde
ontwerpbureaus en webontwikkelaars met diepgaande kennis van programmeer- en script-
talen, is met Joomla mogelijk met – bij wijze van spreken – een paar muisklikken. En zelfs als
het binnen een uur moet, krijg je al mooie resultaten. Je past daarbij de standaard-Joomla-
site zo aan, dat hij goed aansluit bij wat de opdrachtgever op het web wil presenteren.
Je kunt daarbij ook veel verder gaan en bijvoorbeeld de vormgeving perfect op maat
maken voor de opdrachtgever. Maar in dit scenario houden we het zo eenvoudig mogelijk
– en presenteren toch een professionele site.
Wat kun je in een uur bereiken? Dit staat op het wenslijstje:
n een eigen logo op de site en aangepaste kleuren

n een menuopbouw die het mogelijk maakt om de opdrachtgever zelf de tekstpagina’s
te laten vullen
n een poll, om de interactie met de bezoekers te vergroten
n een reactieformulier.
2.2 Hoe kleed je de standaardsite uit?
Als je Joomla hebt geïnstalleerd met voorbeelddata (zie de Bijlage: Joomla installeren),
beschik je in één klap over een complete website. In het vorige hoofdstuk zag je al hoe
die eruitziet wanneer je Joomla op de standaardmanier hebt geïnstalleerd, inclusief alle
voorbeelddata (Afbeelding 1.4 op pagina 7).
Het is zinvol om die voorbeelddata te installeren als je Joomla voor de allereerste keer
leert kennen. Je krijgt dan in plaats van een lege pagina een volledige website waarin je
de verschillende pagina’s kunt verkennen en aanpassingen kunt uitproberen, zodat je een
goede eerste indruk krijgt van de mogelijkheden. Maar zodra je zelf een site bouwt, heb
je die voorbeelddata niet nodig. Om de site-in-een-uur te maken, verwijder je de voor-
beelddata dus. Mocht je Joomla zonder voorbeelddata hebben geïnstalleerd, dan kun je
de onderstaande twee stappen overslaan.
Stap 1: extra’s uitzetten

Om te beginnen verwijderen we de extra’s: Joomla is standaard ingericht voor een grotere
site, een portal met veel verschillende rubrieken en een actieve stroom nieuws. Voor ons
doel is dat nu overbodig. Zet daarom een aantal onderdelen uit: verberg voor de webbe-
zoeker de Joomla-modules die allerlei extra functies toevoegen. Denk daarbij aan menu’s,
advertenties, banners enzovoort.
Je verbergt die extra’s door modules uit te zetten. Dat doe je als volgt:
n Ga naar het webadres waar je Joomla geïnstalleerd hebt. Om in te loggen in de back

end, voeg je administrator toe: www.mijnsite.nl/administrator.
n Log in: voer je username en password in. Zodra je aangemeld bent, zie je de start
pagina van de backend.
n Schakel modules die overbodig zijn, uit. Ga naar Extensions > Module Manager. Je
krijgt een overzicht van alle modules die op de site actief kunnen zijn, zoals menu
modules en een bannermodule. In de kolom Enabled zie je of de module actief is, dat
wil zeggen zichtbaar in de frontend.
Afbeelding 2.1 Met een klik op het vinkje bij Enabled verandert de status van de module: hij is nu voor de
bezoeker niet meer zichtbaar.
14
n Klik op het vinkje achter de module Banners. Het vinkje verandert in een kruis: de mo-
dule is nu aan de voorkant van de site niet meer zichtbaar.
n Doe hetzelfde voor Banners, Example Pages, Advertisement, Resources, Login Form,
Who’s Online, NewsFlash, Latest News, Popular, Syndication.
n Bekijk het resultaat: klik op Preview.
Afbeelding 2.2 Joomla uitgekleed: zonder inlogformulier, banner, advertentie enzovoort. Wat overblijft: de
header, één menu, de ‘mainbody’ met content, en de module Polls (enquête). Een goede basis om de site zelf
verder aan te passen en te vullen.
15
Stap 2: voorbeeldinhoud verwijderen

Als je de site met voorbeelddata hebt geïnstalleerd, bevat die voorbeeldartikelen die on-
dergebracht zijn in secties en categorieën. Ook staan er allerlei menu-items in het hoofd-
menu. Inhoud verwijderen gaat altijd van klein naar groot: eerst de artikelen, dan de
categorieën waarin die artikelen zijn ondergebracht, en tot slot de secties waarbinnen die
categorieën zijn ondergebracht.
n Verwijder eerst de inhoud, de artikelen. Ga naar Content > Article Manager.

n Klik helemaal onderaan het scherm op Display #: All, zodat je alle artikelen van de site
in beeld krijgt.
n Zet een vinkje in het selectievakje bovenaan de linkerkolom (naast #). Daarmee selec-
teer je meteen alle items in die kolom:
Afbeelding 2.3 Met een vinkje helemaal bovenaan in de kolom selecteer je alle items.
n Klik op Trash (de prullenbak). Bevestig dat je alle artikelen wilt verwijderen.
n Je moet de artikelen nu nog uit de Trash definitief verwijderen. Ga naar Content >
Article Trash, selecteer alle artikelen en klik op Delete. Bevestig dat je de artikelen wilt
verwijderen.
Verwijder nu de categorieën en secties die Joomla voor de artikelen had aangemaakt:
n Ga naar Content > Category Manager. Zet een vinkje om alle categorieën te selec
teren. Klik op Delete.
n Ga naar Content > Section Manager. Zet een vinkje om alle categorieën te selecteren.
Klik op Delete.
16
Je hebt nu een bijna lege site:
Afbeelding 2.4 Alle content is verdwenen, op de hyperlinks in het hoofdmenu na.
Tot slot hoef je alleen nog het Main Menu te legen. Dat gebeurt op een vergelijkbare ma-
nier: ga naar Menus > Main Menu, zet een vinkje om alle menu-items te selecteren en klik
op Trash. Je krijgt nu een melding dat alle menu-items verwijderd zijn (naar de menuprul-
lenbak Menu Trash), op één na: het menu-item Home. Dat is essentieel voor een goede
werking van Joomla, dus dat blijft altijd staan.
2.3 Hoe pas je het uiterlijk van de site aan?
Het logo veranderen

Om te beginnen vervang je het Joomlalogo door het logo van de opdrachtgever van de
nieuwe site. Het oorspronkelijke Joomlalogo is 298 pixels breed x 75 pixels hoog. Dat is
vrij smal, omdat Joomla standaard ruimte houdt voor een newsflash naast het logo. Die
ruimte hebben we niet nodig: voor de nieuwe site maken we daarom (in Photoshop, maar
het kan natuurlijk in elke grafische editor) een logo van 500 x 75 pixels.
n Sla het logobestand op als png-bestand, bij voorkeur met een transparante achter-
grond. Zo past het logo goed in de achtergrondkleur van de pagina. In dit geval geven
we het logo de naam danovalogo.png.
17
n Het oorspronkelijke Joomlalogo heet mw_joomla_logo.png. Je vindt het in de map ima-

ges van de huidige template: httpdocs/templates/rhuk_milkyway/images/mw_joomla_
logo.png. Upload je nieuwe logo met een ftp-programma naar diezelfde map.
n Pas nu de stylesheet van de site aan, zodat er ruimte ontstaat voor het bredere logo.
De stylesheet moet bovendien verwijzen naar je nieuwe afbeeldingsbestand. Ga naar

Extensions > Template Manager en klik op rhuk_milkyway. Klik op Edit CSS en selecteer
template.css. Nu kun je de css-code van de template aanpassen:
n Zoek de css-stijl met de naam div#logo. Verander de breedte (width) tot 500 pixels en
pas de verwijzing naar het logobestand aan (background: url). De css-stijl moet er dan
zo uitzien:
n Klik op Preview.
Afbeelding 2.5 Het Joomlalogo is vervangen.
Kleuren van de template aanpassen

Op het scherm in afbeelding 2.5 is nog iets aangepast: de achtergrondkleur van de pa-
gina is zwart, de rand om het hoofdmenu is rood. Zo passen de kleuren van de pagina
beter bij die van het logo.
Hoe kun je de basiskleuren van de site aanpassen? Bij de template rhuk_milkyway kun je
kiezen uit verschillende kleurencombinaties. Dat is niet bij elke template zo: de template-
18
ontwerper kan dit soort extraatjes inbouwen. Je vindt zulke opties dan bij de parameters
van de template. In dit geval heeft de template een paar parameters waarmee je de
hoofdkleuren kiest.
n Ga naar Extensions > Template Manager en klik op rhuk_milkyway.

n Kies bij Parameters voor Color Variation: Red en Background Variation: Black.
Afbeelding 2.6 Met de parameters van de template rhuk_milkyway kun je het kleurschema veranderen.
n Klik op Preview. De oorspronkelijke kleur (blauw) is nu verdwenen uit de achtergrond

en de menurand.
Laatste stukje van horizontaal menu opruimen

Als je het menu bovenaan de pagina verwijdert (depubliceert), blijft er nog een stukje van
over: in het midden staan twee halve bolletjes tegen elkaar aan.
Afbeelding 2.7 Als je het horizontale menu verwijdert, blijft een ongewenst stukje menuopmaak in beeld.
Daar staan normaal gesproken de menulinks tussen van het horizontale menu (het zo-
genoemde pill menu). Je verwijdert de bolletjes door een paar regels te schrappen in het
css-bestand.

n Klik op Edit CSS en selecteer het bestand template.css. Klik op Edit.
n Selecteer nu de css-code vanaf /horizontal pill menu */. Dat is het stuk van de stijl table.
pill tot en met de stijl #pillmenu a#active_menu-nav (die eindigt met background-posi-
tion: 0 0;} ).
n Omdat we het horizontale menu in deze site nooit zullen gebruiken, verwijderen we
deze stijlen.
n Klik op Save en klik op Preview.
19
Voettekst verwijderen
Afbeelding 2.8 De standaard-voettekst.
n Tot slot kun je nog de voettekst verwijderen (of vervangen door andere tekst). Je vindt
die tekst in de template.
n Klik op Edit HTML. Zoek naar de volgende tekst en selecteer die:
<p id=”power_by”>
<?php echo JText::_(‘Powered by’) ?> <a href=”http://www.joomla.org”>Joomla!</a>.
<?php echo JText::_(‘Valid’) ?> <a href=”http://validator.w3.org/check/
referer”>XHTML</a> <?php echo JText::_(‘and’) ?> <a href=”http://jigsaw.w3.org/
css-validator/check/referer”>CSS</a>.
</p>
n Klik op de Delete-toets. Klik op Preview: de voettekst is verdwenen.
2.4 Hoe voeg je inhoud toe? De drie basisstappen van Joomla
Als je ‘gewone’ html-sites maakt, voeg je pagina’s toe in twee stappen: je maakt een
pagina, en brengt een link naar die pagina aan. In Joomla gaat daar iets aan vooraf: je
moet de pagina eerst rubriceren. Je moet hem onderbrengen in een sectie en een catego-
rie. Nieuwe contentpagina’s maken gaat altijd in deze drie stappen: (1) maak een sectie
en een categorie, (2) maak een artikel, (3) maak een menulink. Die volgorde ligt vast. Je
kunt geen contentpagina publiceren zonder dat je een sectie/categorie hebt om de pagina
aan vast te maken. En je kunt geen link aanmaken naar een artikel dat nog niet bestaat
(zie afbeelding 2.9).
Voor de site-in-een-uur zet je die drie stappen hieronder met zevenmijlslaarzen aan. In de
volgende hoofdstukken lees je er nog veel meer over, want deze vormen de basis van het
werken met Joomla.
20
Afbeelding 2.9 De volgorde waarin je een webpagina maakt. Er moeten eerst een sectie en categorie zijn,
dan kun je content (artikelen) maken, tot slot kun je een link daarnaartoe aanbrengen.
Stap 1: maak een sectie en een categorie

n Ga naar Content > Section Manager. Klik op New.
Vul het veld Title in: Nieuws. Klik op Save. Je hebt een sectie gemaakt.
n Ga naar Content > Category Manager. Klik op New.
n Vul alleen het veld Title in: Recente optredens. Klik op Save. Je hebt een categorie ge-
maakt.
Stap 2: maak een artikel

n Ga naar Content > Article Manager. Klik op New. In de editor die nu verschijnt, schrijf
je het artikel (zie afbeelding 2.10).
n Typ in het vak Title de titel van het artikel (in het voorbeeld Spetterende show in Brussel)
en in het vak Alias nogmaals die titel, nu in kleine letters en met streepjes (spetterende-
show-in-brussel).
n Kies bij Section voor Nieuws, en bij Category voor Recente optredens. Nu zie je waar-
om je pas een artikel kunt schrijven als er een sectie en artikel voor zijn: daarzonder
kun je het niet toewijzen aan de juiste plaats in Joomla’s sitestructuur.
n Voeg nu (willekeurige) tekst toe in het editorscherm.
n Klik na de eerste alinea op de knop Readmore onder aan het editorscherm. Er ver-
schijnt een rode stippellijn. Door deze scheiding kan Joomla het intro (de eerste zin-
nen) desgewenst apart afbeelden op onder andere de homepage, met een Lees meer-
link erbij voor lezers die willen doorklikken.
n Voeg een afbeelding in. Klik op de knop Image onder aan het editorscherm. Selecteer
in het popupscherm een afbeelding. Je kunt ook een afbeelding uploaden: klik op
Browse files, kies het bestand en klik Start Upload. Klik op Insert (de knop rechtsboven).
Het popupscherm sluit (zie afbeelding 2.11).
n Klik op Save. Het artikel is klaar.
21
Afbeelding 2.10 In dit scherm schrijf je nieuw artikel.
Afbeelding 2.11 In dit popupscherm selecteer je een afbeelding. Met Insert voeg je die afbeelding in.
22
Stap 3: voeg een menulink toe

n Ga naar Menus > Main Menu.
n Kies bij Menu Item Type: Articles > Section Blog Layout.
n Vul bij Title in Nieuws. Selecteer onder Parameters – Basic de sectie Nieuws. Klik op
Save.
De site is af!
Nou vooruit, de site is nog niet helemaal af. Maar de basis wel: je hebt een vormgeving,
en je hebt een sitestructuur, mét een artikel. Op het web ziet de site er nu uit zoals je hier-
onder ziet. De homepage is nog leeg, maar bevat wel de menulink Nieuws uit stap 4:
Afbeelding 2.12 De lege homepage.
Als de bezoeker klikt op Nieuws, komt hij uit bij een overzichtspagina van de sectie Nieuws.
Die pagina heeft Joomla ‘vanzelf’ toegevoegd doordat je er een menulink naar hebt ge-
maakt! Op die overzichtspagina staat nu nog maar het intro van één artikel:
23
Afbeelding 2.13 De sectie Nieuws.
Klikt de bezoeker op Lees meer, dan komt hij uit bij het volledige artikel. Je ziet dat het
broodkruimelpad boven het artikel de structuur volgt die je met secties en categorieën
aanbrengt: van Home naar de sectie Nieuws naar het in de categorie Recente optredens
ondergebrachte artikel Spetterende show in Brussel (zie afbeelding 2.14).
De site verder vullen met content

Als je de site met meer content wilt vullen, herhaal je de stappen 1 tot en met 3. Deze
voorbeeldsite krijgt in totaal drie secties. Maak nu die ‘containers’ (de secties en catego-
rieën, stap 1), en maak de content (de artikelen, stap 2). Je werkt aan een resultaat dat er
in schema zo uitziet:
24
Afbeelding 2.14 De pagina met het volledige artikel uit de sectie Nieuws.
Hierna zie je diezelfde siteopbouw uit het schema terug in de Article Manager, nadat alle
secties, categorieën en artikelen zijn toegevoegd. Helemaal rechts staan secties en cate-
gorieën, links staan de titels van de artikelen.
25
Afbeelding 2.15 Een overzicht van de content van de complete site: alle artikelen en de secties en
categorieën waar ze onder vallen.
Als je secties, categorieën en artikelen hebt toegevoegd tot je de bovenstaande lijst hebt,
maak je die inhoud toegankelijk via het menu (stap 3 hierboven). Aan het Main Menu
voeg je twee hyperlinks toe, allebei van het type Section Blog Layout. Dat laatste betekent
dat die links leiden tot overzichtspagina’s van de geselecteerde secties. Je voegt de links
als volgt toe:
n Maak via Menus > Main Menu > New een hyperlink van het Menu Item Type Articles
> Section Blog Layout, met de titel Wie zijn wij, en met als doel de sectie Wie zijn wij.
n Maak op dezelfde manier een hyperlink Wat zingen wij, van hetzelfde type, met als
doel de sectie Repertoire.
Hieronder zie je het resultaat. In het Main Menu (Menus > Main Menu) staan nu in totaal
vier menu-items:
Afbeelding 2.16 De inhoud van het Main Menu.
26
Aan de voorkant begint de site nu al veel meer op een complete website te lijken. Hier zie
je de overzichtspagina van de rubriek Nieuws. Doordat we drie nieuwe artikelen hebben
toegevoegd aan de categorieën onder de sectie Nieuws, worden die artikelen automatisch
als intro’s op de overzichtspagina van de sectie Nieuws getoond. Plaats je in die intro’s
ook nog een afbeelding, dan krijg je een aantrekkelijke pagina:
Afbeelding 2.17 De homepage bevat nu een selectie van (intro’s van) artikelen op de site.
Nog een voorbeeld: dit is wat de bezoeker ziet als hij klikt op Wie zijn wij. Ook hier een
pagina met een greep uit de inhoud van de sectie.
27
Afbeelding 2.18 De overzichtspagina van de sectie ‘Wie zijn wij’.
2.5 Hoe vul je de homepage?
Aanvinken welke informatie op de homepage komt

De homepage toont een aantal intro’s en links naar artikelen op de site. Maar de home-
page wordt niet vanzelf gevuld. Of een artikel daar verschijnt, bepaal je bij het artikel zelf:
als je dat schrijft of bewerkt, zie je een optie Front Page. Klik op Yes, en het artikel wordt
opgenomen op de homepage.
Afbeelding 2.19 Bij de artikeleigenschappen bepaal je of het artikel op de Front Page verschijnt.
28
Je kunt ook via Content > Article Manager klikken op het kruisje in de kolom Front Page.
Het kruisje verandert in een vinkje: het artikel wordt nu op de homepage getoond.
Afbeelding 2.20 De Article Manager biedt een snelle

manier om artikelen op de Front Page te publiceren.
In de voorbeeldsite vinken we voor drie artikelen in de Article Manager aan dat ze op

de homepage moeten verschijnen: DaNovaMusic zingt nu ook klassiek, De vrouwen van
DaNovaMusic, Over ons jazzrepertoire. Hieronder zie je het resultaat:
Afbeelding 2.21 Drie artikelen op de Front Page.

29
Hoe verander je de koptekst op de homepage?

Standaard staat boven de homepage-artikelen de kop ‘Welcome to the Front Page’. Die
verander je als volgt.

n Klik op Home.
n Verander de tekst onder Parameters – System > Page Title. Wil je geen kop, laat het
tekstvak dan leeg.

n Klik op Save.
Hoe verander je de volgorde van de items op de homepage?

n Ga naar Content > Front Page Manager.
n Je ziet welke artikelen op de Front Page verschijnen. Met de pijltjes in de kolom Order
pas je de volgorde van die items aan.
2.6 Hoe voeg je een enquête toe?
Zelfs zonder daar iets voor te doen, heb je al de beschikking over extra functies in de
website tot nu toe: zo heb je standaard een zoekmachine en een dynamisch broodkrui-
melspoor, dat zich aanpast aan de locatie van de bezoeker en hem helpt om te navigeren
over de site. Maar je kunt nog veel andere extra’s toevoegen. Echte interactiviteit bijvoor-
beeld, in de vorm van een poll, een enquête van één vraag waaraan de bezoeker van de
site voor de aardigheid kan meedoen. Ga naar Components > Poll en klik op New.
Afbeelding 2.22 In het scherm Poll vul je de details in van een enquête.
30
n Vul de Title in: kies een nieuw nummer voor ons repertoire.
n Vul een Alias in: kies-een-nieuw-nummer.
n De Lag kun je onveranderd laten. Een bezoeker mag binnen één dag (de standaard-
Lag van 86.400 seconden, ofwel 24 uur) maximaal één keer stemmen.
n Klik bij Published op Yes.
n Vul in de velden met Options de opties in waaruit de bezoekers mogen kiezen.
n Klik op Save.
De poll moet nu nog een positie krijgen: op welke pagina’s en wáár op die pagina’s moet
de poll verschijnen? Dat bepaal je via Extensions > Module Manager. Klik daar op de
module Poll.
n Vul de Title in: Stem!

n Show Title: Yes.
n Position: Right. De enquête verschijnt in de rechterkolom.
n Menu Assignment: All. De enquête verschijnt op alle pagina’s.
n Module Parameters: kies de Poll die je hebt aangemaakt, dus Kies een nieuw nummer
voor ons repertoire.
n Klik op Save en klik op Preview.
Vanaf nu verschijnt de Poll op alle pagina’s. De bezoeker kan een keuze maken, klikken
op Stem en de resultaten bekijken.
Afbeelding 2.23 De poll verschijnt in de rechterkolom.
31
G Je kunt polls niet alleen gebruiken om een keus te geven uit verschillende
antwoorden, maar ook voor een simpele vraag of stelling met het antwoord
ja/nee of eens/oneens.
Afbeelding 2.24 Een poll om de lezer te laten reageren op een stelling (www.echo.nl).
2.7 Hoe voeg je een reactieformulier toe?
Het laatste onderdeel uit de wensenlijst van de opdrachtgever: de bezoeker moet contact
kunnen opnemen via een reactieformulier.
Bepaal de contactpersoon
n Maak een contactpersoon aan: iemand wiens (mail)adres en andere bereikbaarheids-
gegevens op de site komen te staan. Je kunt een uitgebreid systeem aanleggen met
lijsten contactpersonen per afdeling, maar in dit geval volstaat één naam en mail-
adres. Je voert die gegevens in via Components > Contact Manager. Er zijn nog geen
contactpersonen; klik dus op New.
n Vul een naam in van de contactpersoon: in dit geval Management DaNovaMusic. Kies
als Category: Contacts.

Onder Information is alleen E-mail voor ons doel belangrijk: daar wordt het formulier
naartoe verstuurd. De overige informatie kun je invullen als je die op de formulier
pagina wilt publiceren, maar nodig is dat niet. Handig is het vak Miscellaneous infor-
mation: daar kun je een korte toelichting opnemen.
n Bij de Contact Parameters kun je aangeven of je de contactgegevens ook wilt tonen
op de contactpagina. Voor een informatieformulier is niet meer nodig dan een e-mail-
adres dat je invult bij Information. Daarmee werkt het formulier. Je hoeft dat adres (of
andere contactgegevens) niet te publiceren – tenzij je dat wilt, natuurlijk, om de bezoe-
ker meer mogelijkheden te geven om te reageren.
n Tot slot is bij de Advanced Parameters van belang dat E-mail form op Show staat. Zo
niet, dan verschijnt er wel informatie over de contactpersoon op de pagina, maar geen
contactformulier.
32
Maak een menulink

Nu je een contactpersoon hebt opgegeven, kun je een link aanbrengen naar een reactie-
formulier. Dat doe je zo:

n Klik op New.
n Kies bij Menu Item Type voor Contacts > Standard Contact Layout.
n Vul een Title in voor het menu-item (bijvoorbeeld: Neem contact op) en een alias
(neem-contact-op).
n Kies onder Parameters-Basic de contactpersoon die je net hebt aangemaakt:
Afbeelding 2.25 De Parameters – Basic van de Standard Contact Layout.
n Klik op Save. De site beschikt nu over een link Neem contact op en een reactieformulier:
Afbeelding 2.26 De site beschikt over een contactformulier.
33
2.8 Hoe nu verder?
De één-uur-website is compleet. Hieronder zie je het resultaat. Om te laten zien hoe je de

site met weinig moeite nog verder aankleedt, bevat de site nog wat extra blokken: in de
linkerkolom staat een afbeelding van een gitaarspeler, rechts een tekstblokje Over DaNo-
va. Beide blokken zijn zogenoemde Custom HTML-blokken; daarover lees je meer in 6.4.
Afbeelding 2.27 De één-uur-website is compleet. In deze site zijn nog maar de basismogelijkheden van
Joomla toegepast.
34
Met weinig moeite bereik je in Joomla een gelikte website – al is het nog maar een basis-
site. Met wat meer inspanning krijg je een nog veel geavanceerder resultaat. Wat die extra
inspanning precies inhoudt, dat lees je in de volgende hoofdstukken. Daar bouw je verder
op de kennis die je hier hebt opgedaan: de principes die gelden voor de site-in-een-uur,
gelden ook voor elke andere Joomlasite. Maar als je meer dan een uur neemt, kun je de
vormgeving verfijnen en de site uitbreiden met allerlei functies.
En als je een heel andere vormgeving wilt?

Is de website-in-een-uur je toch te standaard? Verander dan de basislay-out van je site
door een andere template te installeren. Het is weinig werk, en het effect is groot. Hier-
onder zie je hoe een andere template is toegepast op de site van DaNovaMusic. Met
– letterlijk – een paar muisklikken heb je een volledig andere uitstraling. Hoe je templates
installeert, lees je in 7.3.
Afbeelding 2.28 Een voorproefje van het effect van templates: in één klap krijgt dezelfde content een volledig
andere vormgeving.
35
3 Hoe bedenk je een
gebruikersvriendelijke indeling?
De site opbouwen met secties en categorieën
Voordat je een site kunt bouwen, moet je nadenken over de indeling

van de inhoud. Wat wil je op de site zetten, hoe hangt de informatie
samen? In Joomla breng je alle inhoud onder in een structuur met drie
niveaus: secties, categorieën en artikelen. In dit hoofdstuk lees je hoe je
je content ordent binnen die drie lagen.
In het vorige hoofdstuk heb je kennisgemaakt met de basisvaardigheden: een site opzet-
ten, de standaardlay-out aanpassen, secties/categorieën en artikelen toevoegen. Je hebt
kunnen zien dat je bij het opbouwen van de content van een Joomlasite altijd drie stappen
volgt:
1 Maak secties en categorieën als raamwerk voor de inhoud.

2 Vul dat raamwerk met content: de artikelen.
3 Maak de gewenste menulinks naar die secties/categorieën/artikelen.
Vanaf hier gaan we op die vaardigheden dieper in. In dit hoofdstuk staat stap 1 centraal:
hoe maak je een handige indeling in secties en categorieën? Je moet eerst de indeling
áchter de content bedenken, voordat je content kunt maken. In dit hoofdstuk gaat het over
die indeling. In de hoofdstukken 4 en 5 komen de tweede en derde stap aan bod.
3.1 Hoe werkt dat, indelen in drie niveaus?
Een contentmanagementsysteem managet je content. Het helpt je om een geordende,

makkelijk te beheren en uit te breiden hoeveelheid informatie op het web te zetten. Maar
dat kan het systeem alleen doen als jij die content van tevoren helder hebt ingedeeld. In
Joomla moet je alle content indelen in secties en categorieën. Om de vergelijking met een
boek te maken: je kunt secties zien als hoofdstukken en categorieën als paragrafen. On-
der die categorieën vallen je artikelen, de teksten die meestal centraal op de webpagina
staan.

Tips en Tools Voor Joomla - de Basis

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tips en Tools Voor Joomla - de Basis

Uploaded by

Copyright:

Available Formats

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

Vormgeving en zetwerk: Redactiebureau Ron Heijer, Markelo

ISBN: 978 90 12 58040 3

© Sdu Uitgevers bv, Den Haag, 2008

Alle rechten voorbehouden. Behalve de door de Auteurswet 1912 gestelde uitzonderingen,

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

1 Een cms, hoe werkt dat? 1

2 Hoe begin je met Joomla? 13

3 Hoe bedenk je een gebruikers­vriendelijke indeling? 37

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

4 Verschillende soorten webpagina’s: hoe maak je ze in Joomla? 45

5 Hoe maak je menu’s? 95

6 Hoe breid je de mogelijkheden uit? 113

6.5.3 Teasers aan een pagina toevoegen 131

7 Hoe zet je de lay-out naar je hand? 155

8 Wat is de efficiëntste manier van werken? 171

Bijlage: Joomla installeren 183

Hoe maak je de overstap?

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

De opbouw van dit boek

1 Een cms, hoe werkt dat?

Een paar afspraken

Wat is anders aan een site gebaseerd op een contentmanagement­

1.1 Wat is een cms?

Een contentmanagementsysteem (cms) stelt je in staat om professionele websites te maken

Copyright Academic Service / Eric Tiggeler (www.joomla.erictiggeler.nl)

n http://css.startpagina.nl/ geeft een overzicht

1.3 Hoe installeer je Joomla?

Joomla is een webapplicatie: software die je installeert op een webserver en waar je

1 Download de Joomla-bestanden van www.joomla.org.

1.4 Hoe werk je met Joomla?

1.4.1 Wat is de frontend?

Afbeelding 1.3 Zo ziet Joomla eruit meteen na installatie.

De onderdelen van de frontend

1.4.2 Wat is de backend?

Afbeelding 1.5 De personeelsingang: de backend van Joomla.

Hier vul je de gebruikersnaam in (standaard admin) en het password (dat je tijdens de

Na het inlogscherm kom je in de eigenlijke backend. Dat is de beheeromgeving: hier vind

De belangrijkste vijf onderdelen van deze pagina staan hieronder.

Afbeelding 1.7 De belangrijkste onderdelen van Joomla’s backend.

1 De menubalk met uitklapmenu’s die je toegang geven tot alle functies.

n Menus: beheer van de menu’s

n Content: artikelen toevoegen, aanpassen, site-structuur indelen

n Components: speciale functies, zoals banners en polls, beheren

n Extensions: uitbreidingen (modules) en templates beheren

n Tools: o.a. mails versturen

2 n Preview (overschakelen naar de frontend).

n Logout: uitloggen uit de backend

1.4.3 Wat zijn de belangrijkste bedieningsknoppen?

Hier zie je een voorbeeld van de knoppen in de Article Manager:

Afbeelding 1.8 De werkbalk van de Article Manager.

n Publish: een artikel op de site publiceren

De knoppen hierboven zie je onder andere als je een artikel bewerkt.

Een website bouwen in Joomla kan in recordtempo: als je gebruikmaakt

2.1 Een website in een uur

Wat kun je in een uur bereiken? Dit staat op het wenslijstje:

n een eigen logo op de site en aangepaste kleuren

2.2 Hoe kleed je de standaardsite uit?

Stap 1: extra’s uitzetten

n Ga naar het webadres waar je Joomla geïnstalleerd hebt. Om in te loggen in de back­

Stap 2: voorbeeldinhoud verwijderen

3 Hoe bedenk je een gebruikersvriendelijke indeling? 37

Wat is anders aan een site gebaseerd op een contentmanagement

n Ga naar het webadres waar je Joomla geïnstalleerd hebt. Om in te loggen in de back