JOOMLA 3.x. Content Management System (CMS) Online webdesign m.b.v. Joomla. Carl Maegerman

Transcriptie

1 JOOMLA 3.x Content Management System (CMS) Online webdesign m.b.v. Joomla Carl Maegerman

2 INHOUDSOPGAVE 1 WAT IS JOOMLA? WAT IS EEN CMS WAAROM JOOMLA GEBRUIKEN WEBSITE PUBLICEREN MET EEN HTML EDITOR (DREAMWEAVER) WEBSITE PUBLICEREN MET EEN CMS (JOOMLA) DOMEINNAAM + WEBHOSTING HUREN VOOR 1 JAAR BIJ ONE.COM FTP CLIENT FILEZILLA DOWNLOADEN EN INSTALLEREN JOOMLA INSTALLATIE JOOMLA DOWNLOADEN EN UITPAKKEN OP JE PC JOOMLA INSTALLATIEBESTANDEN OP JE WEBRUIMTE ZETTEN In je hoofddomein - dit doe je normaal, als je nog geen website hebt (bvb In een subdomein van je hoofddomein - dit doe je als je reeds een website hebt en je wilt eens experimenteren met Joomla. De Joomla site staat dan gewoon in een subdomein (bvb JOOMLA OP JE WEBRUIMTE INSTALLEREN CONFIGURATIE DATABASE SAMENVATTING VERWIJDEREN INSTALLATIEMAP DE JOOMLA WEBSITE BEKIJKEN EN BEHEREN (FRONT-END EN BACK-END) FRONT-END EERSTE TABBLAD BACK-END TWEEDE TABBLAD JOOMLA INTERFACE OP NEDERLANDS INSTELLEN HOE ZIET EEN JOOMLA WEBPAGINA ERUIT MODULEPOSITIES WEERGEVEN ALS VOORBEELD WELKE STAPPEN MOET JE DOEN OM DIT TE KUNNEN TONEN OVERZICHT MODULE POSITIES VAN HET TEMPLATE BEEZ ENKELE AAN TE RADEN EXTENSIES JCE EDITOR INSTALLEREN ALS STANDAARD TEKSTVERWERKER JCE downloaden JCE installeren Downloaden JCE Nederlands taalbestand Installeren JCE Nederlands taalbestand JCE activeren als standaard tekstverwerker GANTRY FRAMEWORK INSTALLEREN Gantry bundle downloaden Gantry bundle installeren Gantry Template instellen als standaard template Overzicht module posities van het template Gantry - Voorbeeld Overzicht module posities van het template Gantry - schematisch BACKUP MAKEN VIA DE JOOMLA EXTENSIE AKEEBA BACKUP AKEEBA KICKSTART Carl Maegerman 2/70

3 15 STAPPENPLAN AKEEBA BACKUP MAKEN EN TERUGZETTEN HET MAKEN VAN DE BACKUP EXTRA STAPPEN OM DE BACKUP VEILIG TE STELLEN TERUG ZETTEN BACKUP DE STAPPEN OM EEN JOOMLA WEBSITE TE MAKEN TEMPLATE SCHEMA TEKENEN CATEGORIEËN ARTIKELS NAVIGATIEMENU EXTRAATJES CONCLUSIE JOOMLA VS DREAMWEAVER KLASSIKAAL VOORBEELD WEBSITE PCVO MEETJESLAND ONTWERP DE CATEGORIE OPLEIDINGEN MAKEN HET ARTIKEL INFORMATICA MAKEN EN IN DE CATEGORIE OPLEIDINGEN STEKEN HET NAVIGATIEMENU MAKEN Een Menuitem maken die geen Sub-menuitems bevat met link naar een Artikel (Welkom) Een Menuitem maken die Sub-menuitems bevat die geen link bevat (Opleidingen) Een Sub-menuitem maken met link naar een Artikel (Informatica) Een Menu item maken met link naar een Categorieblog (Nieuwtjes) VOLGORDE ARTIKELEN IN ARTIKEL BLOG ONGEWENSTE VERMELDINGEN BIJ ARTIKELS VERBERGEN DE MODULE BREADCRUMBS ACTIVEREN STARTPAGINA INSTELLEN KIEZEN OF VERWIJDEREN VAN HET LOGO IN DE TOP BANNER EEN BANNER PLAATSEN BOVENAAN DE PAGINA UITTESTEN BACKUP MAKEN BACKUP UITTESTEN ALGEMENE WEBSITE INSTELLINGEN WEBSITE Website-instellingen Metadata-instellingen SEO-instellingen MEER OVER ARTIKELS AFBEELDINGEN HYPERLINKS LEES MEER LEES MEER + INTRO TEKST Voor één artikel Voor alle artikelen gekoppeld aan het menu item Nieuwtjes Voor alle artikelen GROTE HERHALINGSOEFENING MYSQL DATABASE VOLLEDIG LEEGMAKEN WEBRUIMTE VOLLEDIG LEEGMAKEN JOOMLA INSTALLEREN EN OP NEDERLANDS INSTELLEN JCE EDITOR INSTALLEREN GANTRY BUNDLE INSTALLEREN Carl Maegerman 3/70

4 21.6 AKEEBA BACKUP INSTALLEREN AKEEBA KICKSTART INSTALLEREN AKEEBA BACKUP UITVOEREN BACKUP BESTAND KOPIËREN NAAR JE LOKALE PC BACKUP TERUGZETTEN MET AKEEBA KICKSTART MAKEN VAN DE WEBSITE PCVO MEETJESLAND OVERZICHT MODULE POSITIES VAN HET TEMPLATE GANTRY AANGEPASTE HTML MODULE OP BEPAALDE POSITIE PLAATSEN ARTIKELEN - NIEUWSFLITS MODULE IN DE SIDEBAR PLAATSEN FOTOALBUM OF FOTOGALERIJ MET ONE.COM EEN FOTOALBUM EMBEDDEN EEN FOTOGALERIJ EMBEDDEN GEBRUIKERSBEHEER MENUITEM ENKEL ZICHTBAAR MAKEN VOOR EEN BEPAALDE GEBRUIKERSGROEP TOEGANGSNIVEAU WIJZIGEN Toegangsniveau wijzigen voor Front-end gebruikers Toegangsniveau wijzigen voor Back-end gebruikers NUTTIGE GRATIS EXTENSIES FOTO SLIDER DJ-IMAGESLIDER CONTACTFORMULIER - RAPID CONTACT MAP - GOOGLE MAP AGENDA - GCALENDER Modules publiceren Menu item maken GASTENBOEK - VITABOOK LINK MET FACEBOOK SP FACEBOOK EEN ANDER TEMPLATE GEBRUIKEN VOOR JE WEBSITE MEERTALIGE SITE INSTALLEREN VAN DE TAALBESTANDEN MENUS MAKEN Nederlands menu Maken van het Engels menu ARTIKELS MAKEN IN DE JUISTE TAAL Nederlands artikel Engels artikel MENU ITEMS TOEVOEGEN AAN DE MENU S Nederlandse menu items Engelse menu items MODULES TAAL FILTER TAAL SELECTIE GANTRY TEMPLATES MANAGER CORRECT INSTELLEN Nederlands menu Engels menu BREADCRUMBS AANPASSEN BESLUIT Carl Maegerman 4/70

5 1 Wat is Joomla? Joomla is een open-source, content managenment system, afgekort CMS. (een ander voorbeeld van een CMS is Drupal). Joomla komt van het Swahili Allemaal samen. Het is een internationaal software project ontwikkeld en ondersteund door duizenden mensen over de hele wereld. 1.1 Wat is een CMS Alle content (= inhoud) die op je webpagina s komt te staan, wordt opgeslagen in de tabellen van een database. Dus deze content staat niet op HTML pagina s, die we maken in een HTML editor (bvb. Dreamweaver). Er wordt een template (= sjabloon) gemaakt voor je website en iedere keer dat iemand klikt op een link in jouw site, wordt de content die bewaard wordt in de database, naar het template gestuurd en wordt de HTML pagina gecreëerd die op haar beurt getoond wordt in je browser. Webhosting Server Joomla FRAMEWORK - INHOUD Joomla TEMPLATE - OPMAAK Joomla My SQL database HTML pagina Local PC Browser IE, Firefox, Chrome, Opera, Safari, 1.2 Waarom Joomla gebruiken Een website kan men sneller maken dan bij een HTML editor De klant kan zelf updates doorvoeren in de content van zijn webpagina s Carl Maegerman 5/70

6 Men kan snel bepaalde functionaliteit toevoegen aan zijn site d.m.v. Extensions, zonder dat men daarvoor een webdeveloper moet inschakelen Bijna elke site die men in HTML gebouwd heeft, kan men bouwen in Joomla Zéér populair CMS, met ondersteuning van vele duizenden personen Carl Maegerman 6/70

7 2 Website publiceren met een HTML editor (Dreamweaver) ROOT map lokaal De ROOT map kan je dezelfde naam van je site geven. Bijvoorbeeld: Lesgever ROOT map webhoster Domeinnaam: Domeinnaam gekoppeld met Webruimte ROOT ROOT Webruimte is beveiligd met een FTP login Thuis op de PC Lokale bestanden images Server webhoster Externe site images foto1.jpg foto1.jpg foto1.jpg foto1.jpg CSS CSS opmaak1.css opmaak1.css opmaak2.css opmaak2.css templates templates sjabloon1.dwt sjabloon1.dwt sjabloon2.dwt sjabloon2.dwt index.html index.html cursusmateriaal.html cursusmateriaal.html toffehyperlinks.html toffehyperlinks.html Startpaginanaam is standaard index.html LET OP: bestandsnaam in kleine letters UPLOADEN = PUBLICEREN Kopiëren van lokale bestanden naar de webruimte die je kreeg bij de webhoster. Carl Maegerman 7/70

8 3 Website publiceren met een CMS (Joomla) 4 Local PC ROOT map webhoster Je hebt enkel een PC nodig met een besturingssysteem en een browser. In deze browser kan je dan je website beheren en bekijken. Domeinnaam: Domeinnaam gekoppeld met Webruimte Browser ROOT Beheren (d.m.v. login) Bekijken (iedereen op het internet) Carl Maegerman 8/70

9 Domeinnaam + webhosting huren voor 1 jaar bij One.com Surf naar en typ hierin de gewenste domeinnaam Klik dan op het pijltje naast het zoekveld Is je gewenste domeinnaam nog vrij, zoals bvb hieronder, kies dan het goedkoopste pakket en vul de gegevens correct in. Hierna bevestig je met volgende Carl Maegerman 9/70

10 Je kiest nu de manier van betalen, mogelijkheden zijn creditkaart of overschrijving Vergeet daarna ook niet het selectievakje van de voorwaarden aan te vinken Nu nog eens op de knop Kopen klikken Je zal nu nog een mail ontvangen waarin gevraagd wordt om te betalen (als je via een overschrijving wou betalen) Nadat de betaling is ontvangen zal de webhoster One jouw domeinnaam en webruimte in orde brengen en alle accountgegevens via mail doorsturen, die je nodig hebt om bestanden te plaatsen op jouw webruimte die gekoppeld is aan jouw domeinnaam Als je nu naar je domeinnaam surft zal je de standaard pagina van One.com zien Carl Maegerman 10/70

11 5 FTP client FileZilla downloaden en installeren Download FileZilla op deze website Installeer dit programma op je PC Start het programma op en ga naar het menu Bestand Sitebeheer Klik op de knop Nieuwe site Vul nu een verwijzingsnaam in voor je site en vul de juiste inloggegevens in Klik nu op Verbinden en je ziet een nieuw venster met links de bestanden op jouw PC en rechts de bestanden op je webruimte LET OP!!! Bewerken Instellingen Overdrachten Bestandstypes Zet dit op Binair Carl Maegerman 11/70

12 6 Joomla installatie 6.1 Joomla downloaden en uitpakken op je PC Download Joomla Full Package (.zip bestand) op Pak de bestanden uit in een map op je PC Deze map heeft als naam iets in de aard van Joomla_3.x.x-Stable-Full_Package Het.zip bestand kan je nadien verwijderen 6.2 Joomla installatiebestanden op je webruimte zetten In je hoofddomein - dit doe je normaal, als je nog geen website hebt (bvb. Je krijgt dan je Joomla website te zien als je surft naar je hoofddomein (bvb. Kopieer de inhoud van de map Joomla_3.x.x-Stable-Full_Package met FileZilla naar de root directory van je domein Maak, indien nodig, op je webhoster een MySQL database aan (bij one.com is er standaard maar één voorzien en die heeft al een naam waarin je jouw domeinnaam herkent, bvb. bij het domein webke.be is dat dan webke_be) Surf via je browser naar je domein (bvb. Er opent automatisch een installatiewizard waar je alle gegevens invult In een subdomein van je hoofddomein - dit doe je als je reeds een website hebt en je wilt eens experimenteren met Joomla. De Joomla site staat dan gewoon in een subdomein (bvb. Je krijgt dan je Joomla website te zien als je surft naar je subdomein (bvb. Maak met FileZilla in de root directory van je domein een submap aan met als naam JOOMLA Kopieer de inhoud van de map Joomla_3.x.x-Stable-Full_Package met FileZilla naar de submap JOOMLA in de root directory van je domein Maak, indien nodige, op je webhoster een MySQL database aan (bij one.com is er standaard maar één voorzien en die heeft al een naam waarin je jouw domeinnaam herkent, bvb. bij het domein webke.be is dat dan webke_be) Surf via je browser naar je subdomein (bvb. Er opent automatisch een installatiewizard waar je alle gegevens invult. Carl Maegerman 12/70

13 7 Joomla op je webruimte installeren Surf via de browser naar je domein (bvb. ) of naar je subdomein (bvb. ), afhankelijk van waar je je Joomla installatiebestanden gezet hebt. Er opent automatisch een installatiewizard waar je alle gegevens invult. 7.1 Configuratie Carl Maegerman 13/70

14 7.2 Database Carl Maegerman 14/70

15 7.3 Samenvatting Carl Maegerman 15/70

16 7.4 Verwijderen installatiemap Na het verwijderen van de installatiemap kan je de Joomla website gaan bekijken en beheren. Dit wordt besproken in het volgende hoofdstuk. Carl Maegerman 16/70

17 8 De Joomla website bekijken en beheren (Front-end en Back-end) Je opent je browser en opent best twee tabbladen. Op het eerste tabblad surf je naar het Front-end (de Joomla website bekijken) Op het tweede tabblad surf je naar het Back-end (de Joomla website beheren) 8.1 Front-end eerste tabblad Ga naar je eerste tabblad en surf naar je domein (bvb. of subdomein (bvb. afhankelijk van waar je de site gezet hebt. Je ziet het resultaat (dus je website) Front-end 8.2 Back-end tweede tabblad Ga naar je tweede tabblad en surf naar je domein (subdomein) + administrator (bvb. of en dan krijg je een inlogscherm De hoofdgebruiker heeft als user name admin Het paswoord koos je bij de installatie Je ziet het beheergedeelte van je website Back-end LET OP: om de nieuwste toestand te zien van je website zal je je browservenster dikwijls moeten refreshen. Als je dus iets wijzigt in de Back-end, dan moet je in de Front-end het venster refreshen met F5 Carl Maegerman 17/70

18 9 Joomla interface op Nederlands instellen Ga je naar de Back-end waar je terechtkomt op het Control Panel. Je kan snel naar het Control Panel door op het knopje links boven te klikken Kies Language Manager Klik op de knop Install Language Selecteer Dutch (Nederlands) Klik op de knop Install Keer terug naar de Language Manager Activeer het sterretje van de gewenste taal bij: o Installed Site o Installed Administrator Vanaf nu kan je Joomla in het Nederlands gebruiken. Het Control Panel noemt nu Controlepaneel en alle menu s staan u ook in het Nederlands Carl Maegerman 18/70

19 10 Hoe ziet een Joomla webpagina eruit Je kan dus een webpagina in Joomla vergelijken met een muur. Op die muur heb je een aantal prikborden ( = Moduleposities). En op ieder prikbord kan je plakbriefjes ( = Modules) prikken. De namen van de Moduleposities kunnen verschillen!!! Voor de eenvoud neem ik hier Positie #. Template Positie 1 Positie 2 Positie 3 Positie 4 Positie 5 Positie 6 Module X Module Y Module Z Positie 7 Carl Maegerman 19/70

20 11 Moduleposities weergeven als voorbeeld 11.1 Welke stappen moet je doen om dit te kunnen tonen Wil je de Moduleposities van een Template weergeven in je browser dan kan je dit als volgt doen: Ga naar Templatebeheer Klik op de knop Opties Ga naar het tabblad Templates Zet Voorbeeld module posities op Ingeschakeld Klik op Opslaan & sluiten Ga nu in het Templatebeheer naar het tabblad Templates Klik op Voorbeeld naast de afbeelding van de gewenste Template De browser opent nu een bijkomend tabblad met daarin een visuele weergave van de Moduleposities Overzicht module posities van het template Beez3 Carl Maegerman 20/70

21 12 Enkele aan te raden Extensies 12.1 JCE editor installeren als standaard tekstverwerker Als we later Artikels (dit is de inhoud van je webpagina s) schrijven in Joomla dan is de standaard editor nogal minimaal. Een beter alternatief is JCE, dit staat voor Joomla Content Editor. Invoegen van afbeeldingen of links naar interne artikelen zal ook veel gemakkelijker gebeuren. JCE is wat men noemt een Component, dit is een soort subprogramma van Joomla!!! JCE downloaden Deze gratis extensie in de vorm van een ZIP bestand kan je downloaden op JCE installeren Ga naar het Controlepaneel Installeer extensies Upload het ZIP bestand dat je zonet gedownload hebt Downloaden JCE Nederlands taalbestand Deze uitbreiding van JCE kan je downloaden in de vorm van een ZIP bestand op Installeren JCE Nederlands taalbestand Ga in het Controlepaneel naar het menu Componenten JCE Editor Klik op de tab Install Add-ons Upload het ZIP bestand dat je zonet gedownload hebt JCE activeren als standaard tekstverwerker Ga naar Controlepaneel Algemene instellingen Ga naar het tabblad Website Kies als Standaard tekstverwerker: Editor JCE Vergeet niet op de knop Opslaan en sluiten te klikken!!! Carl Maegerman 21/70

22 12.2 Gantry framework installeren Het Gantry framework is ontworpen door de mensen van Rocket Theme die op hun beurt Templates maken die draaien op dit framework. Het bijzondere aan dit framework is dat het op een eenvoudige manier toelaat om de moduleposities zelf in een vrij flexibele manier aan te passen. Dit is niet mogelijk in andere templates, waar de moduleposities vast zijn en men om deze te wijzigen in de code moet duiken Gantry bundle downloaden Dit gratis framework en basistemplate kan je downloaden in de vorm van een bundle (ZIP bestand) op Dit bestand bevat het Gantry Framework + Standaard Gantry template for J2.5 and J3.0 + Geassocieerde Plugins Gantry bundle installeren Ga naar het Controlepaneel Installeer extensies Upload het ZIP bestand dat je zonet gedownload hebt Gantry Template instellen als standaard template Ga naar het Templatebeheer Stel dit template als standaard template in voor je website Op de volgende bladzijde zie je een schematische weergave van de Moduleposities van het standaard Gantry Template. We zullen later meer uitleg geven over de flexibiliteit van deze posities. Carl Maegerman 22/70

23 Overzicht module posities van het template Gantry - Voorbeeld Het valt direct op dat hier veel meer posities voorzien zijn. Op de volgende bladzijde zie je een schematisch overzicht van deze posities (héél handig bij het later positioneren van de verschillende modules van de webpagina Carl Maegerman 23/70

24 Overzicht module posities van het template Gantry - schematisch mb Carl Maegerman 24/70

25 13 Backup maken via de Joomla extensie AKEEBA BACKUP Ongelukken gebeuren! Je site draait niet meer na een wijziging, je hebt bepaalde bestanden verwijdert en je kan ze niet meer terug halen, enz Vergeet dus zeker niet op regelmatige basis een backup te maken van je Joomla site. Video s i.v.m. deze extensie / software vindt je op U vindt deze extensie op Het nederlandse taalpakket vindt u op Na deze installatie vindt u Akeeba Backup terug bij het menu Componenten Akeeba backup De eerste keer dat u deze component start bent u best van even de Configuratiewizard uit te voeren. Daarna kunt u uw eerste automatische backup uitvoeren. U vindt het backup bestand op de volgende plaats Hoofdmap van je Joomla site Dit is de Root directory indien je de site in je hoofddomein geplaatst hebt. Map met het backup bestand LET OP: Wijzig de bestandsnaam van dit bestand in een iets duidelijker naam voor jou en kopieer het bestand naar uw lokale PC met FileZilla!!! Verwijder daarna het online bestand!!! Carl Maegerman 25/70

26 14 AKEEBA Kickstart Deze bestanden gaan we later nodig hebben om onze backup gemaakt met AKEEBA terug te zetten U vindt deze bestanden op Deze map komt in ZIP formaat binnen en moet u eerst uitpakken op uw PC Je kan in de map alle.ini files van talen die u niet interesseren verwijderen. U houdt dan de volgende files over: LET OP: Zorg dat je ten allen tijde bestanden met FileZilla upload in Binary Transfer Mode. In FileZilla ga je hiervoor naar: Bewerken Instellingen Overdrachten Bestandstypes Keuzerondje Binair Nu moet je de overblijvende bestanden van deze map uploaden (met bvb. FileZilla) naar de map waarin je site stond (bij One.com is dit de root directory in geval dat u de site in het hoofddomein geplaatst heeft. Upload nu je backup bestand (dit is het bestand dat je met Akeeba Backup gemaakt hebt) naar de zelfde plaats. Nu kan je Akeeba Kickstart opstarten door naar het kickstart.php bestand te surfen Bij Webke.be is dit bvb. Je krijgt nu een boodschap die je toch best even naleest Carl Maegerman 26/70

27 Druk op ESC als je aan alle voorwaarden voldaan hebt Daarna vindt Akeeba Kickstart automatisch de aanwezige backup bestanden in de root directory van je Joomla site en toont hij het volgende venster 15 Stappenplan AKEEBA backup maken en terugzetten 15.1 Het maken van de backup Maak een backup met AKEEBA backup 15.2 Extra stappen om de backup veilig te stellen Geef het backup bestand een meer duidelijke naam Kopieer het backupbestand naar je lokale PC Verwijder het backup bestand van je webruimte Kopieer het backupbestand van je lokale PC naar de root directory van je Joomla site 15.3 Terug zetten backup Start AKEEBA Kickstart op Selecteer de juiste backup Volg alle stappen van de wizard Op het einde niet vergeten van de installatiemap op te ruimen Carl Maegerman 27/70

28 16 De stappen om een Joomla website te maken 16.1 Template Kies een template gratis of betalend die het best aanleunt qua structuur en opmaak bij de website die jij wilt maken Schema tekenen Teken op papier een schema waarin je volgende zaken vermeld Welke teksten ga ik gebruiken Welke afbeeldingen (logo, banner, andere foto s) ga ik gebruiken Welke Artikels ga ik aanmaken Ga ik de Artikels organiseren in Categorieën en welke Hoe zal mijn navigatiemenu eruit zien en met welke Artikels of categorieën ga ik de menuitems koppelen Welke extraatjes heb ik nodig onder de vorm van Extensies (Contactformulier, Google mapje, fotogalerij, videogalerij, enz ) De benodigde informatie kan je best organiseren op voorhand in een mappenstructuur zoals hierna weergegeven: 16.3 Categorieën Maak je geplande categorieën aan 16.4 Artikels Maak je geplande Artikels aan en steek ze in de juiste Categorieën 16.5 Navigatiemenu Maak de juiste menuitmes aan in het hoofdmenu 16.6 Extraatjes Voeg alle extraatjes toe die je wilt zien op je webpagina s Carl Maegerman 28/70

29 17 Conclusie Joomla vs Dreamweaver Met Joomla maak je dus een website op een héél andere manier dan met een WYSIWYG-editor zoals Dreamweaver. Met Dreamweaver maak je webpagina s, die je vervolgens op het internet plaatst. Met Joomla maak je verschillende blokjes gegevens die je in een databank opslaat en waarmee Joomla een webpagina samenstelt. Zo n blok kan van alles zijn. Een tekst, een menu, een foto, een module, enz. Je kan een blok op één of meerdere pagina s weergeven. Carl Maegerman 29/70

30 18 Klassikaal voorbeeld website We maken klassikaal een kleine website aan en gaan op het einde een backup maken en die ook eens terugzetten Ontwerp Het Navigatiemenu van de website zal de volgende Menuitems bevatten: Welkom Over Ons Nieuwtjes Opleidingen Contact Men heeft 3 Categorieën: Opleidingen Nieuwtjes Contact Men heeft de volgende Artikels: Artikel Welkom Over Ons Informatica Talen Bouw Nieuwtje 1 Nieuwtje 2 Nieuwtje 3 Adres Openingsuren Telefoon Fax Mail Categorie Uncategorised Uncategorised Opleidingen Opleidingen Opleidingen Nieuwtjes Nieuwtjes Nieuwtjes Contact Contact Contact Contact Contact Carl Maegerman 30/70

31 Links van het Navigatiemenu: Menuitem Sub-menuitem Link naar Welkom Artikel Welkom Over Ons Artikel Over Ons Opleidingen Informatica Artikel Informatica Talen Artikel Talen Bouw Artikel Bouw Nieuwtjes Categorieblog Categorie Nieuwtjes Contact Categorieblog Categorie Contact 18.2 De Categorie Opleidingen maken 1. Ga naar het Backend 2. In het Controlepaneel kies je voor Categoriebeheer 3. Klik op de knop Nieuw 4. Typ als Titel voor de Categorie, Opleidingen in 5. Klik op de knop Opslaan en sluiten Doe dit nogmaals voor de volgende Categorieën: Nieuwtjes Contact 18.3 Het Artikel Informatica maken en in de categorie Opleidingen steken 1. Ga naar het Backend 2. In het Controlepaneel kies je voor Artikelbeheer 3. Klik op de knop Nieuw 4. Typ als Titel van het Artikel, Informatica in 5. Kies als Categorie, Opleidingen 6. Typ als tekst Dit is een omschrijving van onze opleiding Informatica. 7. Klik op de knop Opslaan en sluiten Doe dit ook voor alle andere Artikels voorzien in het ontwerp, kies zelf een kleine tekst die verwijst naar het menuitem Het Navigatiemenu maken Een Menuitem maken die geen Sub-menuitems bevat met link naar een Artikel (Welkom) Ga naar het Backend In het Controlepaneel kies je voor Menubeheer In ons geval hebben wij reeds een voorgedefinieerd Main menu, we kiezen dit dus Klik op het menuitem Home Zet Menu-itemtype op Artikelen - Individueel Artikel Carl Maegerman 31/70

32 Bij Selecteer Artikel kiest u het gewenste artikel, in ons geval Welkom Verander de Titel in Welkom Extra bij dit Menuitem Omdat dit het start item is zal je op het tabblad Paginaweergave bij Toon paginakop moeten kiezen voor Nee (bekijk zelf maar eens wat het in- en uitschakelen van dit item betekent) Klik op de knop Opslaan en sluiten Maak nu zelf het Menuitem Over Ons Een Menuitem maken die Sub-menuitems bevat die geen link bevat (Opleidingen) Ga naar het Backend In het Controlepaneel kies je voor Menubeheer In ons geval hebben wij reeds een voorgedefinieerd Main menu, we kiezen dit dus Klik nu op de knop Nieuw Zet Menu-itemtype op Systeemlinks - Externe URL Typ bij Link het # teken Verander de Titel in Opleidingen Klik op de knop Opslaan en sluiten Een Sub-menuitem maken met link naar een Artikel (Informatica) Ga naar het Backend In het Controlepaneel kies je voor Menubeheer In ons geval hebben wij reeds een voorgedefinieerd Main menu, we kiezen dit dus Klik nu op de knop Nieuw Zet Menu-itemtype op Individueel Artikel Bij Selecteer Artikel kiest u het gewenste artikel, in ons geval Informatica Verander de Titel in Informatica Kies bij Hoofditem het Menu item waaronder dit Sub-menu item moet zitten (in dit geval Opleidingen) Klik op de knop Opslaan en sluiten Maak nu zelf de Sub-menu items Talen en Bouw Een Menu item maken met link naar een Categorieblog (Nieuwtjes) Ga naar het Backend In het Controlepaneel kies je voor Menubeheer In ons geval hebben wij reeds een voorgedefinieerd Main menu, we kiezen dit dus Klik nu op de knop Nieuw Zet Menu-item type op Artikelen - Categorieblog Carl Maegerman 32/70

33 Bij Kies een categorie kiest u de gewenste categorie, in ons geval Nieuwtjes Verander de Titel in Nieuwtjes Als extraatje kies je bij het tabblad Blogweergave: bij Kolommen voor 1 bij Volgorde artikelen voor Meest recente eerst Klik op de knop Opslaan en sluiten Maak nu zelf het Menu item Contact, maar kies nu bij Blogweergave opties: bij Hoofdartikelen voor 0 (zorgt ervoor dat het eerste artikel niet apart bovenaan staat) bij Intro-artikelen voor 5 (zorgt ervoor dat alle 5 de artikelen getoond worden) bij Kolommen voor 2 (zorgt voor een blog in twee kolommen) bij Volgorde meerdere kolommen voor Links naar rechts bij Volgorde artikelen voor Artikelbeheer volgorde (zorg wel voor de goede volgorde dan in het Artikelbeheer, zie volgend puntje!!!) 18.5 Volgorde artikelen in artikel blog De volgorde van de artikelen zelf bepalen, doe je als volgt: Ga naar Artikelbeheer Klik nu in de lijst van de artikelen op de kolomtitel Volgorde Je kan nu de artikelen in de juiste volgorde slepen met het volgende knopje Zet de volgorde als volgt: o Adres o Openingsuren o Telefoon o Fax o Mail 18.6 Ongewenste vermeldingen bij Artikels verbergen Nu zal je opmerken dat er bij de Artikels boven de zelf ingetypte tekst nog vermeldingen staan. Deze kan men om te beginnen best bij Artikelbeheer Opties uitzetten. Dit doe je als volgt: 1. Ga naar het Backend 2. In het Controlepaneel kies je voor Artikelbeheer 3. Klik op de knop Opties 4. Ga naar het tabblad Artikelen 5. Verberg de zaken die je niet wilt zien bij het Artikel 6. Verberg bvb. eens alles behalve de Titel en kies Opslaan en sluiten 7. Kijk nu nog eens op het Frontend Carl Maegerman 33/70

34 18.7 De module Breadcrumbs activeren Breadcrumbs tonen je op een eenvoudige manier aan waar je je ergens bevindt in de website. Ga naar het Backend In het Controlepaneel kies je voor Modulebeheer Klik op de module Breadcrumbs Bij Toon titel kies je voor Verberg Kies bij Positie voor Kruimelpad (breadcrumb) (in het Gantry template staat het dan direct op de juiste plaats) Tekst voor de startpagina voor Welkom Toon start voor Ja Klik op de knop Opslaan en sluiten 18.8 Startpagina instellen Bij het Menubeheer moeten we ook nog het Menu-item Welkom als Startpagina instellen. Dit doe je in Menubeheer door op het Menu Main menu te klikken en daar ter hoogte van Welkom het sterretje aan te klikken voor Startpagina Kiezen of verwijderen van het logo in de Top Banner Ga naar de Backend Ga naar het Templatebeheer Onze standaard template voor onze website is hier Gantry - Default, we klikken deze aan We kiezen voor het tabblad Style Om nu je eigen logo te gebruiken doe je de volgende stappen: o Zorg er eerst voor dat je via Controlepaneel Mediabeheer je eigen logo geupload hebt naar de juiste plaats (bij voorkeur een mapje aanmaken met de naam van de website) o Klik bij Logo op de schuiflijst Type en kies daar Custom o Klik bij Custom Logo op de knop Select en kies je eigen logobestand o Klik op de knop Save Carl Maegerman 34/70

35 18.10 Een banner plaatsen bovenaan de pagina Soms wil men in plaats van een logo eenvoudigweg een banner op de pagina waarin het logo verwerkt is. Onderneem eerst de volgende stappen om het logo te verwijderen: Ga naar de Backend Ga naar het Templatebeheer Onze standaard template voor onze website is hier Gantry - Default, we klikken deze aan We kiezen voor het tabblad Style Zet bij Logo de schuifknop Show op OFF Klik op de knop Save Plaats nu je banner bovenaan de website: Ga naar de Backend Ga naar het Modulebeheer Klik op de knop Nieuw Kies bij Type module voor Aangepaste HTML Kies bij Titel voor Banner Kies bij Toon titel voor Verberg Kies bij Positie voor top-a Voeg in het editorvenster via de knop Invoegen/bewerken afbeelding je eigen banner in Klik op Opslaan en sluiten Uittesten Eigenlijk moet je tijdens alle voorgaande stappen telkens de veranderingen checken in het Front-end. Bekijk dit eindresultaat dus aandachtig en werk bij waar nodig Backup maken Maak een backup met AKEEBA backup Geef het backup bestand een meer duidelijke naam Kopieer het backupbestand naar je lokale PC Verwijder het backup bestand van je webruimte Backup uittesten Kopieer het backupbestand van je lokale PC naar de root directory van je Joomla site Start AKEEBA Kickstart op Selecteer de juiste backup Volg alle stappen van de wizard Op het einde niet vergeten van de installatiemap op te ruimen Carl Maegerman 35/70