Handleiding TYPO3 versie 4.5.x

Handleiding TYPO3 versie 4.5.x voor het beheren van uw website januari 2013

1

Inhoudsopgave Inloggen in TYPO3 .................................................................................................................................. 3 Algemene informatie ............................................................................................................................. 4 De paginastructuur ............................................................................................................................. 4 Iconen en paginanamen...................................................................................................................... 4 Het bestandsbeheer in TYPO3 ............................................................................................................... 7 Een map toevoegen aan de mappenstructuur ................................................................................... 7 Een bestand of afbeelding toevoegen ................................................................................................ 8 Aan de slag............................................................................................................................................ 10 Een nieuwe pagina aanmaken .......................................................................................................... 10 Een pagina (of wijzigingen) opslaan.................................................................................................. 14 Een pagina hernoemen ..................................................................................................................... 14 Een pagina verplaatsen in de menustructuur ................................................................................... 15 De inhoud van een pagina bewerken .................................................................................................. 16 Het plaatsen van inhoudselementen ................................................................................................ 16 De meest voorkomende inhoudselementen .................................................................................... 17 1. Regulier tekst element .............................................................................................................. 18 2. Tekst met afbeelding................................................................................................................. 23 3. Alleen afbeeldingen .................................................................................................................. 24 4. Links naar bestanden ................................................................................................................ 24 5. Emailformulier .......................................................................................................................... 26 Tekst kopiëren uit MS Word ............................................................................................................. 31 Inhoudselementen verwijderen en onzichtbaar maken................................................................... 32 Het kopiëren en verplaatsen van inhoudselementen ...................................................................... 33 SEO onderdelen binnen TYPO3 ............................................................................................................ 34 Optionele extensies in TYPO3 .............................................................................................................. 36 1. De TYPO3 Nieuwsmodule ............................................................................................................. 37 Nieuwsbericht zichtbaar maken op de website............................................................................ 39 2. De TYPO3 Lightbox ........................................................................................................................ 40 Aantekeningen ..................................................................................................................................... 42

2

Inloggen in TYPO3 Voeg achter de domeinnaam van uw website “/ typo3” in. (bijv. www.exxtra.nl/typo3 ) U krijgt nu het inlogscherm voor TYPO3 te zien.

Typ hier uw gebruikersnaam en wachtwoord in.

Tip: Controleer of cookies worden geaccepteerd door uw internet browser. Als u de acceptatie van cookies niet toelaat, kunt u niet inloggen!

U ziet nu het volgende welkomstscherm:

Links ziet u de menustructuur van TYPO3 – onderverdeeld in WEB / BESTAND . Daarnaast ziet u een kolom met de pagina’s van de website in een uitklapbare boomstructuur. Rechts ziet u nu een ‘tip’. Zodra u een pagina aanklikt in de boomstructuur – verschijnt hier de inhoud van die desbetreffende pagina. 3

Algemene informatie De paginastructuur Om een overzicht van alle pagina’s binnen de site te bekijken kiest u in de linker kolom onder het kopje ‘Web’ voor het menupunt ‘Pagina’. Als redacteur bewerkt u de pagina’s van uw website vanuit dit menupunt. Nadat u bent ingelogd komt u hier automatisch al terecht. U krijgt het volgende overzicht:

Dit zijn alle pagina’s binnen de website. De structuur van deze pagina’s komt exact overeen met de navigatiestructuur op de website zelf.

Let op: De witte pagina-iconen geven aan dat het reguliere pagina’s zijn, de grijze mappen zijn systeemmappen met daarin extensies of speciale bewerkingen.

Iconen en paginanamen Een belangrijk punt om te weten over de structuur van TYPO3 is dat u zowel het pagina-icoon als de paginatitel kunt aanklikken - en dat dit een verschillend effect heeft! 1. Klikken op het icoontje Als u klikt op het icoontje vóór de paginatitel, zult u zien dat er een helpmenu uitklapt met opties voor die betreffende pagina:

4

2. Klikken op de paginatitel Als u op de paginatitel klikt, zult u zien dat de desbetreffende inhoud van die pagina in het rechter venster getoond wordt:

5

Aan de voorkant van de site (frontend) – oftewel de daadwerkelijke pagina op uw website - ziet u dat als volgt terug:

6

Het bestandsbeheer in TYPO3 Onder menupunt ‘Bestand’ - ‘Bestandenlijst’ gaat u alle documenten en afbeeldingen plaatsen die u wilt gebruiken op de website. Dit is als het ware uw archief. Wat u in uw bestandenlijst plaatst staat hier veilig. Hiermee staat een afbeelding of document nog niet online op de website – dit gebeurt pas zodra u een afbeelding toont op een bepaalde pagina of bijvoorbeeld een link aanmaakt naar een document.

Tip: Het werkt vaak het prettigst als u eerst alle afbeeldingen en bestanden in het systeem plaatst voordat u de pagina’s van uw website gaat aanmaken en bewerken.

Een map toevoegen aan de mappenstructuur Om een structuur aan te brengen in de bestanden en afbeeldingen die u in uw bestandlijst bewaart gaat u een mappenstructuur aanbrengen. Dit gaat als volgt: Klik op het mapicoontje bij de maptitel waaronder u een nieuwe map wilt aanmaken. Een helpmenu klapt uit:

7

Kies voor ‘Nieuw’. U krijgt nu de mogelijkheid om een nieuwe map aan te maken.

U kunt overigens meerdere mappen tegelijkertijd aanmaken (max.10). Geef het gewenste aantal mappen in, geef ze een naam en klik op ‘Maak mappen’ Let op: als u meerdere mappen in 1 keer aanmaakt, dan worden ze allemaal aangemaakt op hetzelfde niveau, oftewel onder de mapnaam die u nu heeft geselecteerd.

Een bestand of afbeelding toevoegen Klik op de titel van de map waarin u een afbeelding of bestand wilt toevoegen.

8

(‘uploaden bestanden’) bovenaan de pagina. Klik vervolgens op het upload-icoon U krijgt nu de mogelijkheid om bestanden te uploaden:

Eerst geeft u aan hoeveel bestanden u wilt uploaden. Vervolgens kunt u aangeven of reeds geuploade bestanden met dezelfde naam moeten worden overschreven. (hiervoor zet u een vinkje) Klik dan op ‘Choose File’ om de bestand de bestanden van uw eigen pc te selecteren. Uw bestanden worden direct toegevoegd aan de desbetreffende map.

Let op: Als u de bestanden en afbeeldingen in een bepaalde map heeft staan en u gaat ze verplaatsen naar een andere map, dan klopt op de website de link naar dat bestand niet meer! Omdat het bestand nu een nieuwe locatie heeft, en dus een ander pad vanaf de website, moet u het opnieuw op de pagina’s waar u het gebruikt selecteren. Doet u dit niet, dan wordt er een ‘broken link’ weergegeven.

9

Aan de slag Vanaf dit hoofdstuk wordt uitgelegd hoe u de pagina’s binnen de website (te vinden onder het menupunt ‘Pagina’) kunt aanmaken en bewerken.

Een nieuwe pagina aanmaken Om een nieuwe pagina aan te maken kunt u op het icoontje klikken vóór de pagina waaronder, waarna of waarvóór u de nieuwe pagina wilt plaatsen. Het helpmenu klapt uit. Kies voor ‘Page Actions’ en ‘Nieuw’.

10

U krijgt dan het volgende scherm:

U ziet dat er pijltjes staan aangegeven in de menustructuur. Kies een positie voor de nieuwe pagina door op het pijltje te klikken dat naar de gewenste positie wijst. Vervolgens komt u in de pagina-eigenschappen voor de nieuwe pagina. De informatie die u hier kunt plaatsen is verdeeld over een aantal tabbladen. Gaat u een standaard pagina aanmaken, dan hoeft u alleen de informatie in de tabbladen ‘Algemeen’ en ‘Metadata’ in te vullen.

-icoontje Om direct een pagina aan te maken klikt u op het ‘Maak een nieuwe pagina’ linksboven aan de boomstructuur. Er onder worden nu een aantal nieuwe inconen zichtbaar. Om een nieuwe pagina aan te maken kan het ‘Standaard’ icoontje’ vervolgens gesleept worden naar de gewenste positie in de boomstructuur. Wanneer de pagina is aangemaakt kan de naam aangepast worden. Via de rechtermuisknop kunt u weer naar de pagina-eigenschappen om de tabbladen ‘Algemeen’ en ‘Metadata’ in te vullen.

11

Tabblad ‘Algemeen’

Type: Bovenaan kiest u in een dropdown menu welk paginatype u gaat aanmaken. De twee meest voorkomende paginatypes zijn: 1. Standaard: Dit is het meest gebruikte type pagina binnen TYPO3. Hiermee krijgt u alle velden om een pagina aan te maken inclusief velden ter optimalisatie voor zoekmachines.. 2. Snelkoppeling: Hiermee maakt u een snelkoppeling (link) naar een andere pagina binnen uw website. Dit kunt u gebruiken als u een pagina in de menustructuur wilt tonen die direct doorschiet naar een andere pagina binnen de site. De pagina die als snelkoppeling fungeert heeft zelf geen inhoud. > Hoe maakt u een snelkoppeling naar een andere pagina? Kies onder ‘Type’ voor ‘Snelkoppeling’ en klik op het nieuw verschenen tabje ‘Snelkoppeling’.

12

Onder het kopje ‘Shortcut Target’ klikt u op het mapicoontje naast het veld. U krijgt nu een pop-up met daarin de boomstructuur van de website. Klik op het pijltje naast de pagina waarnaar u een snelkoppeling wilt maken. Bij ‘Shortcut Mode’ kunt u kiezen voor ‘eerste subpagina’ als u wilt dat de snelkoppeling gemaakt wordt naar de eerste subpagina onder de pagina die u nu hebt geselecteerd. U hoeft in dit geval geen pagina te selecteren in het veld ‘snelkoppeling naar pagina’ omdat u de huidige pagina als uitgangspunt neemt.

Verberg pagina: U ziet dat er een vinkje staat in het vakje ‘Verberg pagina’. Dit houdt in dat alle pagina’s die u aanmaakt in eerste instantie verborgen zijn (dus niet zichtbaar op de website). Dit stelt u in staat om eerst de pagina te vullen met inhoud. Op het moment dat u klaar bent met de pagina zet u hier het vinkje uit! In de boomstructuur van de website kunt u verborgen pagina’s herkennen aan het rode verbodsbordje dat aan het icoontje voor de pagina gekoppeld is. Verberg in menu: Onder het kopje ‘Verberg in menu’ kunt u een vinkje zetten. Als u dit doet maakt u van deze pagina een pagina die niet getoond wordt in de menustructuur van de site. Dit komt vaak voor als u al vrij diep in de structuur zit en de bezoeker niet wilt verwarren door hem / haar nog een niveau dieper te laten navigeren. Ook wordt dit altijd toegepast voor een ‘bedankt’-pagina die een bezoeker te zien krijgt na het invullen van een webformulier. Paginatitel: Hier vult u een geoptimaliseerde paginatitel (voor zoekmachines) in van max. 65 tekens.

Let op: Er staat een geel blokje met een uitroepteken voor dit veld. Dit geeft aan dat u verplicht bent dit veld in te vullen. 13

Navigatietitel: Hier gaat u de pagina een titel geven die wordt getoond in het menu op de website. Let op: Indien u géén geoptimaliseerde paginatitel voor zoekmachines kunt of wilt ingeven – dan vult u in het veld ‘Paginatitel’ de titel van de pagina in – en kunt u het veld ‘Navigatietitel’ leeg laten.

Een pagina (of wijzigingen) opslaan Sla de pagina op door op één van de ‘opslaan’ iconen te klikken die u altijd bovenaan en onderaan de pagina ziet staan. U heeft bij het opslaan van de pagina’s in TYPO3 een aantal opties.

Dat zijn van links naar rechts: 1 = afsluiten (de pagina/wijzigingen worden nu niet opgeslagen!) 2 = opslaan en het werkveld open laten voor verdere bewerking (dus tussentijds opslaan) 3 = opslaan en preview van de pagina tonen in uw internet browser (let op pop-up blockers) 4 = opslaan en het werkveld afsluiten Daarnaast ziet u een prullenbakicoontje om de pagina mee te verwijderen: En een icoontje om uw laatste wijziging mee ongedaan te maken:

Een pagina hernoemen Wilt u een pagina hernoemen, dan kan dit op twee manieren. 1 = u zoekt de pagina op in de menustructuur en klikt op het icoontje vóór de pagina. Kies uit het helpmenu de optie ‘Bewerken’, pas de paginatitel aan en sla de pagina op. 2 = u zoekt de pagina op in de menustructuur en klikt op de paginatitel. U krijgt nu een pagina met een overzicht van alle content op deze pagina. Bovenaan in de donkere balk klikt u op het icoontje ‘pagina eigenschappen’

. Pas de paginatitel aan en sla de pagina op.

14

Een pagina verplaatsen in de menustructuur Ook dit kan op twee manieren. 1 = sleep (met uw linkermuisknop ingedrukt) het icoontje voor de pagina die u wilt verplaatsen naar de gewenste locatie.

2 = klik op de paginatitel van de pagina die u wilt verplaatsen. U krijgt nu de inhoud van deze pagina te zien. Daarboven vindt u een donkere balk met een rij iconen. Één van die iconen is ‘Verplaats pagina’

, daar klikt u op. U kunt nu een keuze maken voor de nieuwe locatie van de pagina.

Klik op het pijltje dat de gewenste locatie aangeeft en u ziet dat de pagina is verplaatst in de menustructuur.

15

De inhoud van een pagina bewerken Op een pagina binnen een website is vaak diverse soorten content te vinden, zoals afbeeldingen, teksten, tabellen enz. Dit noemen ze in TYPO3 inhoudselementen. De inhoud van een pagina is opgedeeld in 1 of meerdere inhoudselementen, afhankelijk van wat u op een pagina wilt tonen.

Het plaatsen van inhoudselementen Het plaatsen van inhoudselementen op een pagina gaat als volgt: Klik in de boomstructuur van uw website op de titel van de pagina die u wilt bewerken. U krijgt nu de inhoud van de pagina te zien. Een lege pagina ziet er als volgt uit:

U ziet dat TYPO3 een pagina verdeelt in 4 kolommen. Welke kolommen u kunt gebruiken voor het plaatsen van content hangt af van het ontwerp van uw website. Echter is het altijd zo dat de tekst van uw pagina in de kolom ‘Normaal’ ingevoerd wordt. Om content te plaatsen klikt u op het - icoontje in de topbalk van deze kolom. U krijgt nu het scherm ‘nieuw inhoudselement’ waarin u gaat aangeven welke type inhoud (content) u wilt plaatsen op de betreffende pagina:

16

De meest voorkomende inhoudselementen Hieronder volgt een uitleg van de meest gebruikte inhoudselementen: 1. 2. 3. 4. 5. 6.

Regulier tekst element Tekst met afbeelding Alleen afbeeldingen Links naar bestanden Emailformulier Nieuwsberichten

17

1. Regulier tekst element Kies voor ‘regulier tekst element’. Het volgende scherm verschijnt:

U ziet dat het scherm is verdeeld in 2 tabbladen. In het tabblad ‘Algemeen’ vult u informatie in bij: ‘Header’ - om een titel te plaatsen boven de tekst die u nu gaat toevoegen.

18

Is dit het eerste inhoudselement dat u plaatst op de pagina? Dan zal de tekst hier hoogstwaarschijnlijk de titel bovenaan de pagina worden. Selecteer in dat geval in het selectiemenuutje ‘Type’ voor Layout 1 (zoals in dit voorbeeld het geval is). Dit zorgt ervoor dat de tekst ingevuld bij ‘Kop’ de opmaak meekrijgt van een paginatitel. Plaatst u hier tekst voor boven een nieuwe alinea, oftewel een alineakop? Dan kiest u bij ‘Type’ voor Layout 2. De opmaak voor een alineakop wordt dan meegegeven aan de ‘Kop’. In het tabblad ´Access´ kunt u het content element onzichtbaar maken door een vinkje te zetten in het hokje onder ´Disable´. U kunt dit vinkje aan / uitzetten op het moment dat u het nodig heeft.

Het ´Text´ vlak Hier heeft u een scherm tot uw beschikking waarin u tekst kunt plaatsen en bewerken. U zult hier veel bewerkingsiconen herkennen uit Microsoft Word. Een aantal iconen gelden specifiek voor het bewerken van websites, dat zijn:

- Hyperlink maken Selecteer de tekst waar u een hyperlink van wilt maken. Klik vervolgens op het icoontje ‘Hyperlink invoegen’. De volgende pop-up verschijnt:

19

Kijk naar de tabbladen. U ziet hier dat u een link kunt aanmaken naar: Een pagina binnen de website Een bestand (bijvoorbeeld PDF of Word-document) Een externe url (bijvoorbeeld www.exxtra.nl) Een e-mailadres Tip: linkt u naar een externe website? Kies dan in het veld ‘Doel’ voor ‘nieuw venster’, zodat de nieuwe website in een apart venster wordt getoond en uw eigen website zichtbaar blijft.

- Invoegen afbeelding TYPO3 toont een pop-up waarmee u direct naar uw bestandenlijst wordt geleid. Hier kiest u de foto die u op de pagina wilt plaatsen door de foto op te zoeken in de mappenstructuur en deze aan te klikken.

U ziet dat in deze pop-up automatisch het tabje ‘nieuwe magische afbeelding’ is geselecteerd. Dit mag u zo laten staan. De afbeelding wordt vervolgens geplaatst in het tekstveld. U ziet dat de afbeelding op originele grootte wordt geplaatst zonder positionering. Om dit aan te passen klikt u de afbeelding aan (selecteren) en klikt u nogmaals op het icoontje Invoegen/aanpassen afbeelding. Hier kunt u een positie aangeven voor de afbeelding en ook de afmetingen aanpassen. Tip: er is een mooie en betere manier om afbeeldingen te plaatsen in een tekstelement. Gebruik hiervoor het inhoudselement ‘Tekst met afbeeldingen’. Een uitleg hiervoor vindt u verderop in deze handleiding (pag. 23).

20

- Tabel aanmaken Om met tabellen te werken in een tekstelement klikt u op dit icoontje: U krijgt vervolgens een pop-up.

In deze pop-up kunt u een aantal dingen opgeven. De ‘Titel’ en de ‘Samenvatting’ van de tabel. Deze velden mag u leeg laten. Vervolgens geeft u op hoeveel rijen en kolommen u nodig hebt. U ziet een uitklapmenu bij ‘Koppen’. Deze staat standaard op ‘Kopcellen boven’. Dit houdt in dat het systeem automatisch aan de eerste rij een andere opmaak meegeeft. In de praktijk komt het maar weinig voor dat u dit wilt toepassen. Is dat in uw geval ook zo, kies dan uit deze dropdown voor ‘Geen kopcellen’:

Klik op ‘OK’. Nu wordt de tabel aangemaakt.

21

In de tabel die u nu heeft aangemaakt kunt u de cellen opmaken zoals dat bij normale tekst ook kan, dus vet, schuin, onderstreept. U kunt dus ook een hyperlink toevoegen en afbeeldingen plaatsen in de tabel.

Wilt u een extra rij of kolom erbij? Of juist een kolom verwijderen? In uw iconenbalk verschijnen diverse nieuwe bewerkingsiconen op het moment dat u met uw tabel aan het werk bent.

- Switchen naar de html code Werkt u graag in html? Dan kunt u dit icoontje gebruiken om de html code te bekijken en erin te werken. U krijgt dan een weergave zoals bijvoorbeeld deze:

22

2. Tekst met afbeelding Dit inhoudselement gebruikt u als u tekst met afbeeldingen wilt plaatsen op een pagina. Het plaatsen van tekst in dit inhoudselement is exact gelijk aan het ‘regulier tekst element’. U hebt in dit inhoudselement echter wel 2 extra opties. Afbeeldingen kunnen worden toegevoegd via de tab ‘Images’. Het positioneren van de afbeeldingen die u in het inhoudselement wilt tonen kan via het derde tabblad dat is toegevoegd, namelijk ‘Appearance’. Klik op ‘Images’. U krijgt het volgende scherm:

Onder het kopje ‘Images and Captions’ kunt u de afbeeldingen uit uw bestandenlijst selecteren die u op de pagina wilt tonen. Klik op het map-icoontje (rechts naast het veld) en u komt rechtstreeks uit in uw bestandenmap. Hier kunt u een afbeelding kiezen. Klik op de titel van de afbeelding om deze toe te voegen aan uw tekstelement. Herhaal deze actie om zo meerdere foto’s toe te voegen. Let op: Gebruik alleen afbeeldingen uit uw bestandenlijst in TYPO3, gebruik hier niet de optie ‘Browse…’ om op uw eigen pc naar een afbeelding te zoeken. De beschrijving die onder ‘Captions’ wordt ingevoerd wordt onder de afbeelding getoond. Wanneer er meerdere afbeeldingen worden geselecteerd kunnen er ook meerder onderschriften worden ingevoerd. De 2e regel in het Captions vlak wordt geplaatst onder de 2e afbeelding enz. Zet een vinkje bij ‘Behavior’ als u wilt dat de foto in het originele grote formaat wordt getoond als er

23

op de foto geklikt wordt. (Dit heeft natuurlijk alleen het gewenste effect als u de foto op de pagina in een kleiner formaat toont dan het origineel).

Klik op ‘Appearance’. U krijgt het volgende scherm:

Onder ‘Position and Alignment’ geeft u aan waar de afbeeldingen moeten komen t.o.v. de tekst uit het inhoudselement. Bij ‘Number of Columns’ geeft u aan in hoeveel kolommen de foto’s getoond moeten worden. Als u foto’s naast elkaar wilt plaatsen, maakt u hier bijvoorbeeld gebruik van. Wilt u alle geselecteerde foto’s onder elkaar plaatsen, dan kunt u het aantal kolommen op 1 laten staan.

3. Alleen afbeeldingen Dit inhoudselement gebruikt u als u alleen afbeeldingen wilt plaatsen. Het plaatsen van de afbeeldingen vergt slechts een aantal handelingen: U vult bij ‘Header’ een titel in die boven het inhoudselement geplaatst moet worden. Dit is echter niet verplicht! U geeft, net als bij een inhoudselement ‘Tekst met afbeelding’, aan welke foto’s u wilt tonen, welke positie de foto’s moeten krijgen, hoe groot en in hoeveel kolommen de foto’s getoond moeten worden.

4. Links naar bestanden Dit inhoudselement gebruikt u om op een snelle en eenduidige manier bestanden ter download aan te bieden op uw website. 24

U vult bij ‘Header’ een titel in die boven het inhoudselement geplaatst moet worden. Dit is echter niet verplicht! Onder het kopje ‘Bestanden’ via het mapicoontje kunt u de bestanden selecteren die u ter download wilt aanbieden. Onder ‘File Descriptions’ kunt u een beschrijving meegeven aan de bestanden. Biedt u meerdere bestanden ter download aan, dan is elke afzonderlijke regel een beschrijving van een bestand in de lijst. Op de website worden de geselecteerde bestanden onder elkaar getoond. De opmaak hiervan hangt af van het ontwerp van uw website. In de tabblad ‘Appearance’ kunt u daarnaast nog aangeven of u wilt dat de bestandsgrootte wordt getoond op de website. In het tabblad ´Access´ kunt u het content element weer onzichtbaar maken.

25

5. E-mailformulier Een emailformulier kunt u geheel op maat samenstellen. Dit doet u in het inhoudselement ‘Emailformulier’. Kies voor dit inhoudelement en u krijgt het volgende scherm:

Bij het aanmaken van een formulier loopt u de volgende stappen door: U geeft bij ‘Header’ de titel in die boven het formulier moet verschijnen. U kunt direct daaronder in het valmenuutje ‘Type’ aangeven of deze tekst de opmaak van een paginatitel (Layout 1) of van een alineakop (Layout 2) moet krijgen. In het veld ‘Form Structure’ zien we de standaard waardes voor een formulier terug.

26

In het tabblad ‘Behaviour’ kunt u via ‘Spring naar pagina’ aangeven welke pagina er getoond moet worden aan de bezoeker nadat hij / zij het formulier heeft ingevuld. Doorgaans is dit een ‘bedankt’pagina. Een pagina met daarin een tekst waarin de bezoekers wordt bedankt voor het invullen van het formulier en waarin wordt aangegeven wat de vervolgstappen zijn (u neemt contact op / de invuller krijgt een bevestiging etc.) Klik op het mapicoontje en blader in de menustructuur naar de pagina waarnaar u wilt linken. Ter voorbeeld hier een afbeelding van de positie van een ‘bedankt’-pagina. Uiteraard heeft deze pagina in de pagina-eigenschappen het kenmerk ‘onzichtbaar in menu’.

Bij ‘Recipient Email’ geeft u aan naar welk e-mailadres het ingevulde formulier gestuurd moet worden. Let op: Wat u nu moet doen – en dat wijkt af van de bewerking van andere inhoudselementen – is eerst het inhoudselement opslaan door bovenaan in het scherm op het

-icoontje te klikken.

Waarom is dit? Als u kijkt naar het kopje ‘Configuraties’ dan staan daar in code de velden die u kunt gaan beheren in het formulier. In deze code-weergave is dat echter wat ingewikkeld. Daarom is er in TYPO3 een eenvoudiger ‘Formulierassistent’ voor het beheren van deze velden beschikbaar, maar deze wordt pas geactiveerd nadat u het inhoudselement een keer heeft opgeslagen.

27

U gaat vervolgens de velden aangeven die u in het formulier wilt gebruiken. Klik hiervoor op het ‘Configuraties’ icoontje rechts naast het ‘Form Structure’ veld:

U komt dan in de formulierassistent. Hier kunt u de velden aanmaken die u nodig heeft in het betreffende formulier. U kunt de veldnamen zelf benoemen en verplaatsen. U kunt bovendien per veld aangeven of het invullen hiervan verplicht is. TYPO3 maakt altijd een aantal standaard velden voor u aan, om u een beetje op weg te helpen. Deze kunt u overigens eenvoudig aanpassen of verwijderen. De formulierassistent ziet er als volgt uit:

U ziet een aantal kolommen. U gaat aan de slag in de kolommen ‘Element type’ en ‘Gedetailleerde configuratie’.

Met de actieknoppen helemaal links kunt u velden toevoegen, verplaatsen of verwijderen. 28

In de kolom ‘Element type’ gaat u het veld in uw formulier een naam geven. Daarnaast gaat u aangeven welke invulmogelijkheden de bezoeker heeft. U kunt kiezen uit:












Invulveld Tekstveld Selectbox Checkbox Radioknoppen Wachtwoordveld Bestandsupload Verborgen waarde Submit knop Eigenschap Label

Bij sommige invulmogelijkheden moet de bezoeker een keuze maken uit meerdere opties. Bijvoorbeeld als u een veld aanmaakt waarbij de bezoeker aangeeft of hij/zij een man of vrouw is. Dan is het gebruikelijk te kiezen voor het veldtype ‘Radioknoppen’. In de kolom ‘Gedetailleerde configuratie’ gaat u dan opgeven dat de bezoeker moet kiezen tussen ‘Heer’ en ‘Mevrouw’:

Indien u een nieuw veld aanmaakt krijgt u bij de keuze van het elementtype direct de bijbehorende opties voor gedetailleerde configuratie in beeld. Past u een bestaand veld aan (naar een ander elementtype)? Dan krijgt u niet direct de mogelijkheid om de gedetailleerde configuratie in te vullen. TYPO3 registreert pas dat u geswitched bent naar een ander veldtype nadat u het formulier een keer tussentijds opslaat. Belangrijk: Voor een correcte verzending van het formulier moet het volgende in orde zijn: Bij het invulveld waar je de bezoeker om een e-mailadres vraagt, moet er bij ‘Veld’ (in de kolom ‘Gedetailleerde configuratie’) áltijd email staan. In deze exactie schrijfwijze! Alleen in dit geval pakt het systeem automatisch het hier ingevulde mailadres als afzender van het e-mailformulier. Zie onderstaande afbeelding:

Onderaan de formulierassistent staan een aantal belangrijke invulvelden:

29

Bij ‘Verstuurknop label’ geeft u de tekst aan die in de verzendbutton onderaan het formulier wordt getoond. Bijvoorbeeld: Verzenden / Versturen / Vraag nu aan. Zorg er wel voor dat de tekst die u hier opgeeft ook daadwerkelijk past binnen de vormgegeven verzendbutton. Zorg ervoor dat er altijd een vinkje staat bij ‘HTML-Modus geactiveerd’. Bij ‘Betreft” kunt u het onderwerp van het formulier ingeven. Dit onderwerp wordt getoond in de email die u ontvangt met de ingevulde waarden van het formulier. Tip: Kies hier een onderwerp waaraan u in uw mailbox direct kunt herkennen om welk formulier het gaat, zodat u dit snel kunt doorsturen naar degene die het formulier gaat afhandelen. Het veld ‘Emailadres ontvanger’ kunt u hier invullen, maar heeft u waarschijnlijk al ingevuld in het tabje ‘Form’. In dat laatste geval staat het hier slechts ter controle.

30

Tekst kopiëren uit MS Word Geen enkel CMS kan goed overweg met teksten die rechtstreeks worden gekopieerd. Microsoft Word houdt namelijk opmaakelementen vast die u aan uw tekst heeft gegeven (zoals lettertype, regelafstand, tekstkleur, headingopmaak). Deze opmaakbepaling kan zorgen voor een onjuiste opmaak van uw pagina binnen uw website. In TYPO3 wilt u schone teksten plaatsen. Om dit te doen heeft u twee opties: 1e (en meest effectieve) manier: U kopieert uw tekst eerst naar Notepad (Kladbok) en kopieert het daarna naar uw TYPO3 teksteditor. Notepad is een plain text programmaatje dat alle opmaak uit uw tekst haalt. Tekst die u plaatst in Notepad en daarna kopieert naar TYPO3 is dus opmaakvrij! In TYPO3 kunt u de gewenste opmaak geven aan uw tekst (vet, schuin, hyperlink, heading). 2e manier: De tekst uit Word rechtstreeks in uw TYPO3 teksteditor plakken en vervolgens de tekst ‘schoonmaken’. TYPO3 heeft hiervoor een interne oplossing. In uw teksteditor vindt u het volgende icoontje:

(opmaak verwijderen). Als u hier op klikt krijgt u een pop-up met de volgende keuzes:

Kies hier welk deel van uw tekst u wilt opschonen en geef aan welke opmaak er verwijderd moet worden. • •

Kies voor ‘HTML opmaak’ als u tekst kopieert van een andere website. Kies voor ‘MS Word opmaak’ als u tekst kopieert uit Word.

Klik daarna op ‘OK’. Het geselecteerde tekstgebied wordt nu opgeschoond. Controleer altijd goed op de website zelf of de opmaak zo correct is! 31

Inhoudselementen verwijderen en onzichtbaar maken Inhoudselementen verwijderen Als u een inhoudselement op een pagina niet meer wilt tonen, kunt u dit inhoudselement verwijderen met het

icoontje. Dan wordt dit inhoudselement direct verwijderd uit uw website.

Inhoudselementen onzichtbaar maken U kunt een inhoudselement ook ONZICHTBAAR maken. Zodoende blijft het bestaan in uw website en kunt u het later eventueel nog weer gebruiken. Op de site wordt het niet meer getoond, maar het element blijft wel beschikbaar in TYPO3. U kunt een inhoudselement op een snelle manier onzichtbaar maken door bij het element op het icoontje van het gloeilampje te klikken: (Verbergen).

U ziet dat het element nu verdwijnt op de pagina. Als u onderaan de pagina een vinkje zet bij ‘Toon verborgen content elementen’ dan ziet u het verborgen item weer in uw overzicht staan. Let op: het element is op de site dan nog steeds onzichtbaar!

U ziet dat het icoontje van het gloeilampje is gewijzigd. Als u nu op dit icoontje klikt (Verbergen opheffen) wordt het inhoudselement weer getoond op de pagina. 32

Het kopiëren en verplaatsen van inhoudselementen Het kopiëren van inhoudselementen U kunt een specifiek inhoudselement kopiëren naar een andere pagina. Dat gaat als volgt: ga naar de pagina waar het element gebruikt wordt en schakel over van de ‘Pagina’ naar de ‘Lijst’ weergave. U ziet onder ‘Pagina-inhoud’ een lijst overzicht van de elementen gebruikt op de pagina:

In het voorbeeld hierboven gaat het om het element ‘Formulier’. We kunnen dit element kopiëren door op het -icoontje te klikken. Er verschijnt nu een groen pijltje in beeld. Door hier op te klikken wordt het element op dezelfde pagina gekopieerd. Op een vergelijkbare manier kan een element ook naar een overige pagina gekopieerd worden. Na het klikken op het kopieer-icoontje vinden we de groene pijltjes namelijk ook op overige pagina’s onder ‘Pagina-inhoud’ terug. Wanneer er meerdere elemenenten op een pagina staan moet nog wel even de gewenste positie gekozen worden. Er volgt nu een kleine pop-up die u vraagt of u het element wilt kopiëren. Klik op ‘OK’ en u ziet dat het geselecteerde inhoudselement is gekopieerd in dezelfde of in de nieuwe pagina.

Het verplaatsen van inhoudselementen U kunt een specifiek inhoudselement ook verplaatsen naar een andere pagina. Hiervoor volgt u dezelfde stappen als hierboven beschreven, echter kiest u niet voor ‘Kopiëren’ maar voor ‘Knippen’ middels het

-icoontje.

33

SEO onderdelen binnen TYPO3 Voor zoekmachine-optimalisatie kunt u als redacteur zelf de meta data voor elke pagina ingeven. Om dit te doen gaat u naar de pagina-eigenschappen van een pagina. U moet hier een aantal velden invullen: Velden in tabblad ‘Algemeen’ Paginatitel: Hier vult u de geoptimaliseerde paginatitel (voor zoekmachines) in. Deze tekst wordt weergegeven in de zoekresultaten van zoekmachines en bovenin uw browservenster. Om de paginatitel goed leesbaar en binnen de grenzen van uw browservenster te houden, kunt u gebruik maken van maximaal 65 tekens. Let op het gebruik van keywords in deze titel! Velden in tabblad ‘Metadata’

Keywords: Het veld onder het kopje ‘Keywords’ gebruikt u om een aantal keywords in te vullen voor die betreffende pagina. De keywords scheidt u van elkaar met een komma. Keywords zijn zoekwoorden die mensen uit uw doelgroep gebruiken om in zoekmachines te zoeken naar de informatie die u aanbiedt op uw website. Op deze woorden wilt u dat uw website naar voren komt in zoekmachines. Deze woorden gebruikt u:  In alle reguliere tekst op pagina’s  In uw geoptimaliseerde paginatitels (title tags) 34

    

In uw h1 / h2 / h3 (paginatitel en alineakoppen) In uw omschrijvingen (description tags) In afbeeldingen (bestandsnaam en alt tag) In hyperlinks (anchor text – dus tekst die is geselecteerd als hyperlink) In urls (paginatitels die getoond worden in de adresbalk)

In het veld ‘Keywords’ kunt u een aantal van deze woorden plaatsen ter ondersteuning van de keywords die u al gebruikt in de betreffende pagina van uw website.

Description: Het veld ‘Description’ plaatst u een samenvatting van de inhoud van de betreffende pagina. Gebruik ook hier weer relevante keywords voor de betreffende pagina. Houd uw omschrijving bij voorkeur binnen 150 tekens (inclusief spaties). Tip: Deze omschrijving ziet u terug in de zoekresultaten van zoekmachines, het is dus belangrijk dat u goed nadenkt over de tekst die hier komt te staan. De tekst moet de zoeker als het ware verleiden om uw website te bezoeken. Gebruik ook voldoende keywords in uw tekst.

35

Optionele extensies in TYPO3 De volgende extensies zitten niet in de standaard installatie van TYPO3. We beschrijven ze hier wel, omdat ze toch veelvuldig worden gebruikt. 1. Nieuwsmodule 2. LightBox

36

1. De TYPO3 Nieuwsmodule (optioneel onderdeel) Voor het plaatsen van nieuwsberichten Dit kan nog wel eens voor verwarring zorgen. Er is namelijk een verschil tussen de locatie van de nieuwspagina in de menustructuur en de locatie in TYPO3 waar u de nieuwsitems aanmaakt en beheert. Om het eenvoudig te houden; nieuwsitems maakt u aan in het grijze mapje ‘Nieuws’ onderaan in de boomstructuur. Voordat u naar deze map Nieuws gaat, gaat u eerst in de menukolom van TYPO3 van ‘Pagina’ naar ‘Lijst’. Dit vereenvoudigt de weergave van het nieuws in de nieuwsmodule.

Klik hierna op de grijze map ‘Nieuws’ en de inhoud van de map wordt u getoond:

Zorg dat er een vinkje staat bij ‘Uitgebreid overzicht’. Werkt u in een meertalige website? Zet dan ook een vinkje bij ‘Localisatie’. U ziet dat er op dit moment 3 nieuwsitems op de site staan. Bij deze artikelen staan een aantal iconen. Hieronder de belangrijkste: = Helpmenu. Klik hierop en u krijgt alle opties voor het nieuwsbericht te zien. 37

= Bewerk. Hiermee kunt u de inhoud van het nieuwsartikel bewerken. = Klik hierop en u gaat een nieuw nieuwsbericht toevoegen. Bewerk een nieuwsartikel via het

-icoontje en u ziet het volgende overzicht:

38

De informatie uit een nieuwsbericht is opgedeeld in vier tabbladen die u bovenaan het nieuwsbericht kunt zien: ‘Algemeen’, ‘Special’, ‘Media’ en ‘Access’. Onder ‘Algemeen’ plaatst u: • • • •

De titel van het nieuwsbericht De datum van het bericht (wordt automatisch gevuld, maar kunt u desgewenst aanpassen) De datum waarop het bericht naar het archief verplaatst (moet u zelf aangeven) De tekst voor de inleiding (onder subkop).

Let op: De tekst voor de inleiding wordt automatisch bóven de volledige tekst van uw artikel geplaatst. U hoeft deze dus niet nogmaals te herhalen in uw volledige bericht! •

De volledige tekst van het artikel.

Onder ‘Special’ kunt u een datum / tijd aan een artikel toevoegen. U kunt hier desgewenst ook een artikel naar het nieuwsarchief verplaatsen.De datum waarop een nieuwsbericht naar het archief moet verhuizen geeft u aan onder het kopje ‘Archiveringsdatum’. Onder ‘Media’ selecteert u de gewenste afbeeldingen bij het nieuwsbericht.

Via ‘Access’ kan een gewenste begin- en einddatum aan een nieuwsbericht gekoppeld worden.

Nieuwsbericht zichtbaar maken op de website Bent u klaar met het aanmaken of bewerken van het nieuwsbericht? Kies dan voor opslaan. Het nieuwsbericht wordt nu automatisch toegevoegd aan de lijst met nieuwsitems in TYPO3. Het artikel is dan nog niet direct zichtbaar op de site. De pagina waarop het nieuws wordt getoond moet ‘weten’ dat er nieuw nieuws is. Hiervoor moet u de cache van de pagina leegmaken. Dit gaat heel eenvoudig. U klikt rechts bovenaan de pagina op het volgende icoontje: Dit geldt voor álle pagina’s waarop nieuwsberichten worden getoond. Dus; toont u nieuws op de homepage? Ook hier moet u dan even de cache leegmaken van de pagina!

39

2. De TYPO3 Lightbox (optioneel onderdeel) Voor de weergave van een afbeeldingen slideshow op een website TYPO3 heeft een aantal mooie extensies ontwikkeld voor het weergeven van een slideshow op de website. Één daarvan is de Lightbox. De Lightbox is niet een inhoudselement dat u kunt selecteren bij het aanmaken van content op een pagina. Lightbox is een kenmerk dat u meegeeft aan een foto of een groep foto’s zodra u ze gaat plaatsen op de website. Bijvoorbeeld in een ‘Images’-inhoudselement. Hier plaatst u alle afbeeldingen zoals u dat normaal ook zou doen. Onderaan de fotoselectie ziet u de optievelden van de betreffende foto. Zet onder ‘Behavior’ een vinkje bij ‘Enlarge on Click’.

De Lightbox-weergave is nu geactiveerd voor alle foto’s binnen dit inhoudselement. Als u op de website nu één van deze foto’s aanklikt, dan zal deze openen in een slideshow in een semi-transparante laag over de website. Let op: U activeert de Lightbox op de website door te klikken op een afbeelding.

40

41

Aantekeningen

42

Aantekeningen

43

Aantekeningen

44