Handleiding TYPO3 4.2.x voor het beheren van uw website februari 2009
1
Inhoudsopgave Inloggen in de beheeromgeving ............................................................................................ 3 Algemene informatie ............................................................................................................... 4 De paginastructuur................................................................................................................. 4 Iconen en paginanamen ........................................................................................................ 4 Het bestandsbeheer in TYPO3 ............................................................................................... 6 Een map toevoegen aan de mappenstructuur....................................................................... 6 Een bestand of afbeelding toevoegen ................................................................................... 7 Aan de slag............................................................................................................................... 8 Een nieuwe pagina aanmaken............................................................................................... 8 Een pagina (of wijzigingen) opslaan .................................................................................... 12 Een pagina hernoemen........................................................................................................ 12 Een pagina verplaatsen in de menustructuur ...................................................................... 12 De inhoud van een pagina bewerken .................................................................................. 13 Het plaatsen van inhoudselementen.................................................................................... 13 De meest voorkomende inhoudselementen ........................................................................ 14 1. Regulier tekst element ................................................................................................. 14 - Hyperlink maken........................................................................................................... 16 - Invoegen afbeelding ..................................................................................................... 17 - Tabel aanmaken........................................................................................................... 18 - Switchen naar de html code ......................................................................................... 19 2. Tekst met afbeelding ................................................................................................... 20 3. Alleen afbeeldingen ..................................................................................................... 21 4. Links naar bestanden .................................................................................................. 22 5. Emailformulier.............................................................................................................. 23 Tekst kopiëren uit MS Word................................................................................................. 27 Inhoudselementen onzichtbaar maken ................................................................................ 28 Het kopiëren en verplaatsen van inhoudselementen........................................................... 29 Het kopiëren van inhoudselementen ............................................................................... 29 Het verplaatsen van inhoudselementen .......................................................................... 30 Optionele extensies in TYPO3.............................................................................................. 31 1. De TYPO3 Nieuwsmodule ............................................................................................... 32 2. De TYPO3 SmoothGallery............................................................................................... 35 3. De TYPO3 Evenementenkalender .................................................................................. 37 4. De TYPO3 Recycler......................................................................................................... 40 5. De TYPO3 Lightbox ......................................................................................................... 41 Aantekeningen ....................................................................................................................... 42
2
Inloggen in de beheeromgeving
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 inlognaam 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:
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. 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
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.
Tip: Het werkt vaak het prettigst als u eerst alle 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 vóór de maptitel waaronder u een nieuwe map wilt aanmaken. Een helpmenu klapt uit:
Kies voor ‘Nieuw’. U krijgt nu de mogelijkheid om een nieuwe map aan te maken.
6
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. Klik vervolgens op het upload-icoon U krijgt het volgende scherm:
(‘uploaden bestanden’) bovenaan de pagina.
Eerst geeft u aan hoeveel bestanden u wilt toevoegen aan de map. Daarna kunt u aangeven of bestanden met dezelfde naam moeten worden overschreven. (hiervoor zet u een vinkje) Klik op ‘Browse…’ om de bestanden van uw eigen pc te selecteren. Hebt u alle documenten geselecteerd, kies dan voor ‘Upload bestanden’. Uw bestanden worden dan 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. 7
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 klikt u op het icoontje vóór de pagina waaronder, waarna of waarvóór u de nieuwe pagina wilt plaatsen. Het helpmenu klapt uit. Kies voor ‘Nieuw’. U krijgt dan het volgende scherm:
U ziet als eerste optie staan: ‘Pagina (in)’. Klik op de tekst ‘Klik hier voor de assistent!’ U gaat nu aangeven waar u de nieuwe pagina wilt plaatsen:
U ziet dat er pijltjes staan aangeven 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. 8
Tabblad ‘Algemeen’
Type: Bovenaan kiest u in een dropdown menu welk paginatype u gaat aanmaken. De meest voorkomende paginatypes op een rij: 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.. 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? Klik op het nieuw verschenen tabje ‘Snelkoppeling’.
9
Onder het kopje ‘Snelkoppeling naar pagina’ klikt u op het mapicoontje naast het veld. U krijgt nu een pop-up met daarin de boomstructuur van de website. Klik op de titel van de pagina waarnaar u een snelkoppeling wilt maken. Bij ‘Snelkoppelingsmodus’ kunt u kiezen voor ‘eerste subpagina’ als u wilt dat de snelkoppeling gemaakt wordt naar de eerste subpagina onder de pagina die je nu hebt geselecteerd. U hoeft in dit geval geen pagina te selecteren in het veld ‘snelkoppeling naar pagina’ omdat je 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 gaat u de pagina een titel geven die wordt getoond in het menu op de website. Geef de pagina een titel in het veld ‘Paginatitel’. 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.
Tag: 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! Navigatietitel: Gebruik dit veld alleen als u de pagina op de website een andere titel wilt geven dan de titel die u bij het veld ‘Paginatitel’ heeft ingevuld.<br />
<br />
10<br />
<br />
Tabblad ‘Metadata’<br />
<br />
Trefwoorden: Het veld onder het kopje ‘Trefwoorden’ 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) • 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. Omschrijving: Het veld ‘Omschrijving’ 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.<br />
<br />
11<br />
<br />
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 vier opties.<br />
<br />
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 3 = opslaan en preview van de pagina tonen in uw internet browser (let op pop-up blockers) 4 = opslaan en het werkveld afsluiten<br />
<br />
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 ‘pagina eigenschappen’, 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 klikt u op de button ‘pagina eigenschappen’. Pas de paginatitel aan en sla de pagina op.<br />
<br />
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. U krijgt een klein uitklapmenu waarin u gevraagd wordt of u de pagina hier naartoe wilt kopiëren of verplaatsen.<br />
<br />
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 rij met buttons. Één van die buttons 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.<br />
<br />
12<br />
<br />
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 we in TYPO3 inhoudselementen. De inhoud van een pagina is opgedeeld in 1 of meerdere inhoudselementen, afhankelijk van wat u op een pagina wilt tonen.<br />
<br />
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:<br />
<br />
Klik op de button ‘Maak pagina-inhoud’. U krijgt nu het scherm ‘nieuw inhoudselement’ waarin u gaat aangeven welke type inhoud (content) u wilt plaatsen op de betreffende pagina:<br />
<br />
13<br />
<br />
De meest voorkomende inhoudselementen Hieronder volgt een uitleg van de meest gebruikte inhoudselementen: 1. Regulier tekst element 2. Tekst met afbeelding 3. Alleen afbeeldingen 4. Links naar bestanden 5. Emailformulier 6. Nieuwsberichten<br />
<br />
1. Regulier tekst element Kies voor ‘regulier tekst element’. Het volgende scherm verschijnt:<br />
<br />
U ziet dat het scherm is verdeeld in tabbladen. In het tabblad ‘Algemeen’ vult u informatie in bij: ‘Kop’ - om een titel te plaatsen boven de tekst die u nu gaat toevoegen. 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 valmenuutje ‘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’.<br />
<br />
14<br />
<br />
Het tabblad ‘Tekst’<br />
<br />
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:<br />
<br />
15<br />
<br />
- Hyperlink maken Selecteer de tekst waar u een hyperlink van wilt maken. Klik vervolgens op het icoontje ‘Hyperlink invoegen’. De volgende pop-up verschijnt:<br />
<br />
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.<br />
<br />
16<br />
<br />
- 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.<br />
<br />
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 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.<br />
<br />
17<br />
<br />
- Tabel aanmaken Om met tabellen te werken in een tekstelement klikt u op dit icoontje: U krijgt vervolgens een pop-up.<br />
<br />
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. Kies daarom uit deze dropdown voor ‘Geen kopcellen’.<br />
<br />
Klik op ‘OK’. Nu wordt de tabel aangemaakt. 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.<br />
<br />
18<br />
<br />
- 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:<br />
<br />
19<br />
<br />
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 een extra optie, nl. het positioneren van de afbeeldingen die u in het inhoudselement wilt tonen. U ziet dit doordat er nu een derde tabblad is toegevoegd, nl. ‘Media’. Klik op dit tabblad. U krijgt het volgende scherm:<br />
<br />
20<br />
<br />
Onder het kopje ‘Afbeeldingen’ 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. Onder ‘Positie’ geeft u aan waar de afbeeldingen moeten komen t.o.v. de tekst uit het inhoudselement. Bij ‘Kolommen’ geeft u aan in hoeveel kolommen de foto’s getoond moeten worden. Als u foto’s naast elkaar wilt plaatsen, maakt u hier bijvoorbeeld gebruikt van. Wilt u alle geselecteerde foto’s onder elkaar plaatsen, dan kunt u het aantal kolommen op 1 laten staan. 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. Zet een vinkje bij ‘Klik-vergroten’ als u wilt dat de foto in het originele grote formaat wordt getoond als er 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). Zet een vinkje bij ‘SmoothGallery aktiveren’ als u wilt dat de foto in een fotogalerij weergave wordt getoond. Meer over de SmoothGallery leest u verderop in deze handleiding.<br />
<br />
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 ‘Kop’ 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 ze getoond moeten worden en in hoeveel kolommen de foto’s getoond moeten worden.<br />
<br />
21<br />
<br />
4. Links naar bestanden Dit inhoudselement gebruikt u om op een snelle en eenduidige manier bestanden ter download aan te bieden op uw website. U vult bij ‘Kop’ een titel in die boven het inhoudselement geplaatst moet worden. Dit is echter niet verplicht! U scrollt iets naar beneden en onder het kopje ‘Bestanden’ gaat u via het mapicoontje de bestanden selecteren die u ter download wilt aanbieden:<br />
<br />
U kunt nog aangeven of u wilt dat de bestandsgrootte wordt getoond op de website. Ook kunt u een omschrijving meegeven aan de bestanden. Biedt u meerdere bestanden ter download aan, dan is elke afzonderlijke regel een beschrijving van een bestand in de lijst.<br />
<br />
Op de website worden de geselecteerde bestanden onder elkaar getoond. De opmaak hiervan hangt af van het ontwerp van uw website.<br />
<br />
22<br />
<br />
5. Emailformulier 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:<br />
<br />
Let op: Wat u nu moet doen – en dat wijkt af van de bewerking van andere inhoudselementen – is eerst de pagina opslaan! Waarom is dit? Als u kijkt naar het kopje ‘Configuraties’ dan staan daar de velden die u kunt gaan beheren in het formulier. In deze weergave is dat echter wat ingewikkeld. Daarom is er in TYPO3 een eenvoudiger formulierenassistent voor het beheren van deze velden beschikbaar, maar die wordt pas geactiveerd nadat u het inhoudselement een keer heeft opgeslagen.<br />
<br />
23<br />
<br />
Bij het aanmaken van een formulier loopt u de volgende stappen door: U geeft bij ‘Kop’ de titel in die boven het formulier verschijnt. 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. Bij ‘Spring naar pagina’ geeft u aan welke pagina er getoond wordt aan de bezoekers 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.<br />
<br />
Uiteraard heeft deze pagina het kenmerk ‘onzichtbaar in menu’. Bij ‘Emailadres ontvanger’ geeft u aan naar welk e-mailadres het ingevulde formulier gestuurd moet worden. Als laatste gaat u de velden aangeven die u in het formulier wilt gebruiken. Klik hiervoor op dit icoontje onder het kopje ‘Configuraties’:<br />
<br />
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. De formulierassistent ziet er als volgt uit:<br />
<br />
24<br />
<br />
Naast het kiezen van de velden kunt u per veld aangeven welke invulmogelijkheden de bezoeker heeft.<br />
<br />
25<br />
<br />
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 bij Titel (dit is een type ‘Radioknoppen’), daar moet de bezoeker kiezen tussen ‘De heer’ en ‘Mevrouw’. Deze keuzes geeft u aan in de rechter kolom van de formulierassistent. U krijgt niet direct de mogelijkheid om de waarden voor de keuzes in te vullen. Het systeem registreert pas dat u een invulmogelijkheid met meerdere opties heeft aangemaakt nadat u het formulier heeft opgeslagen. U kunt dus het best na het aanmaken van elk veld het formulier even opslaan met de functie ‘Opslaan’ (zonder pagina te sluiten). Let op: Voor een correcte verzending van het formulier moet de veldnaam bij invoertype ‘email’ altijd email zijn. Alleen in dit geval pakt het systeem automatisch het hier ingevulde mailadres als afzender van het formulier.<br />
<br />
Onderaan de formulierassistent staan een aantal belangrijke invulvelden:<br />
<br />
Bij ‘Verstuurknop label’ geeft u de tekst aan die in de verzendbutton onderaan het formulier wordt getoond. 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’ heeft u al ingevuld in het eerste scherm van het inhoudselement Emailformulier en staat hier slechts ter controle.<br />
<br />
26<br />
<br />
Tekst kopiëren uit MS Word Geen enkel CMS kan goed overweg met teksten die rechtstreeks worden gekopieerd. Word houdt namelijk hardnekkig de opmaak 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: e<br />
<br />
1 (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. Het haalt alle opmaak uit uw tekst. Tekst die u plaatst in Notepad en daarna kopieert naar TYPO3 is altijd opmaakvrij! In TYPO3 kunt u de gewenste opmaak geven aan uw tekst (vet, schuin, hyperlink, opsommingstekens, heading) 2e manier: De tekst uit Word rechtstreeks in uw TYPO3 teksteditor plakken en vervolgens de tekst ‘schoonmaken’. TYPO3 heeft hiervoor een interne oplossing. (opmaak verwijderen). In uw teksteditor vindt u het volgende icoontje: Als u hier op klikt krijgt u een pop-up met de volgende keuzes:<br />
<br />
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 vn 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 of de opmaak zo correct is!<br />
<br />
27<br />
<br />
Inhoudselementen onzichtbaar maken Als u een inhoudselement op een pagina niet meer wilt tonen, kunt u dit inhoudselement verwijderen met het<br />
<br />
icoontje. Dan wordt dit inhoudselement verwijderd uit uw website.<br />
<br />
U kunt een inhoudselement echt 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 met verbodsbordje te klikken:<br />
<br />
(Verbergen).<br />
<br />
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 is dan nog steeds onzichtbaar!<br />
<br />
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.<br />
<br />
28<br />
<br />
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: Klik op het ID-icoontje voor een inhoudselement. Dit icoontje is per type element anders, het staat echter wel altijd op dezelfde locatie, namelijk voor de taalvlag. Als u op het icoontje klikt, ziet u het volgende uitklapmenu verschijnen:<br />
<br />
Kies hier voor ‘Kopiëren’. Vervolgens kijkt u naar de boomstructuur van de website. Klik op het pagina-icoon van de pagina waar u het element naar wilt kopiëren. U krijgt ook nu weer een uitklapmenu:<br />
<br />
29<br />
<br />
Kies hier voor ‘Plakken in’ Er volgt nu een kleine pop-up die u vraagt of u zeker weet het element te willen kopiëren. Klik op ‘OK’ en u ziet dat het geselecteerde inhoudselement is gekopieerd naar de nieuwe pagina:<br />
<br />
Het verplaatsen van inhoudselementen U kunt een specifiek inhoudselement verplaatsen naar een andere pagina. Hiervoor volgt u dezelfde stappen als hierboven beschreven, echter kiest u in het uitklapmenu niet voor ‘Kopiëren’ maar voor ‘Knippen’. In het volgende uitklapmenu kiest u gewoon weer voor ‘Plakken in’ en het element wordt verplaatst naar de geselecteerde pagina.<br />
<br />
30<br />
<br />
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. Fotogalerij (SmoothGallery) 3. Evenementenkalender 4. Recycler 5. LightBox<br />
<br />
31<br />
<br />
1. De TYPO3 Nieuwsmodule 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.<br />
<br />
Klik op ‘Nieuws’ en de volgende pagina verschijnt:<br />
<br />
Kijk naar de items die staan opgesomd onder de kop ‘Nieuws’. U ziet dat er op dit moment 1 nieuwsitems op de site staan, nl: “Nieuwsitem 1’. Bij dit artikel staan een aantal iconen.<br />
<br />
32<br />
<br />
= Klik hierop en u gaat een nieuw nieuwsbericht toevoegen. (U kunt ook onderaan de pagina kiezen voor ‘Maak nieuw record’) = Helpmenu. Klik hierop en u krijgt de opties voor het nieuwselement te zien. = Bewerk. Hiermee kunt u de inhoud van het nieuwsartikel bewerken. De pagina voor het bewerken van een nieuwsartikel ziet er als volgt uit:<br />
<br />
33<br />
<br />
De informatie uit een nieuwsbericht is opgedeeld in twee tabbladen die u bovenaan het nieuwsbericht kunt zien, te weten: Algemeen Relations Onder ‘Algemeen’ plaatst u: • De titel van het bericht • De datum van het bericht (wordt automatisch gevuld) • De datum waarop het bericht naar het archief verplaatst • De tekst voor de inleiding (onder subkop) • De volledige tekst van het artikel. Onder ‘Relations’ selecteert u de gewenste afbeeldingen bij het nieuwsbericht.<br />
<br />
Een artikel naar het archief verplaatsen U kunt desgewenst een artikel naar het nieuwsarchief verplaatsen. De datum waarop een nieuwsbericht naar het archief moet verhuizen geeft u aan onder het kopje ‘Datum/Tijd’ en dan onder ‘Archiveringsdatum’. BELANGRIJK: 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. Let op: Meestal is het artikel dan nog niet direct zichtbaar op de site. De pagina waarop de nieuwsextensie wordt aangeroepen 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:<br />
<br />
34<br />
<br />
2. De TYPO3 SmoothGallery Voor het maken van een fotogalerij Stap 1 Kies bij het aanmaken van een nieuw inhoudselement voor 'Smooth Gallery'. Deze staat onderaan de lijst bij 'Plugins'.<br />
<br />
Stap 2 U komt nu in de plugin 'Smooth Gallery'. Deze plugin bestaat uit 2 tabbladen.<br />
<br />
In de tab ‘Algemeen’ geeft u onder ‘Kop’ een titel op. Dit is echter niet verplicht! De titel die u hier ingeeft wordt boven de fotogalerij getoond. Wilt u hier geen tekst boven plaatsen, dan kunt u dit veld leeg laten. Stap 3 In de tab ‘Plugin’ geeft u twee dingen op.<br />
<br />
35<br />
<br />
1: Welke foto's er getoond moeten worden. Dit houdt in dat u een map uit uw bestandenlijst moet opgeven waar foto's inzitten die u hier wilt tonen. U kunt foto’s uit maar 1 map tonen in 1 SmoothGallery. U kunt niet enkele foto's tonen uit deze map, automatisch worden alle foto's uit de geselecteerde map getoond. U kijkt in de bestandenlijst van TYPO3 wat de exacte locatie is van de map, en die locatie voert u in bij ‘Pad naar de folder’. Let op: begin altijd met fileadmin/ 2: U moet opgeven hoe breed en hoe hoog de SmoothGallery op de site getoond moet worden. Dit is vaak een kwestie van uitproberen en aanpassen totdat u er tevreden over bent.<br />
<br />
36<br />
<br />
3. De TYPO3 Evenementenkalender Voor het plaatsen van evenementen in de TYPO3 kalender. Klik in de linker navigatiekolom van TYPO3 op ‘Lijst’.<br />
<br />
Klik daarna in de boomstructuur van de site op de grijze systeemmap ‘Kalender’. U krijgt nu de inhoud van de evenementenmap te zien:<br />
<br />
Onder ‘Calendar category’ maakt u de categorieën aan die u wilt gebruiken in de kalender. Onder ‘Calendar date’ plaatst u alle evenementen. 1. Het aanmaken van een nieuwe categorie U gaat aan het werk onder ‘Calendar Category’ Klik op het icoontje met het groene plusje om een nieuwe categorie aan te maken. 37<br />
<br />
Er opent zich een nieuw scherm:<br />
<br />
In het veld ‘Category title’ geeft u de nieuwe categorie een naam. Sla op en de nieuwe categorie is beschikbaar in de lijst. 2. Het aanmaken van een nieuw evenement in de kalender. Onder ‘Calendar date’ gaat u aan het werk. Klik op het icoontje met het groene plusje om een nieuw evenement aan te maken. Er opent zich een nieuw scherm (zie afbeelding volgende pagina): U kunt hier de volgende velden invullen: • Start date (and time): De begindatum en -tijd van het evenement. • End date (and time): De einddatum en -tijd van het evenement. • Show time?: Hier zet u een vinkje als u wilt dat de tijden van het evenement getoond worden op de website. • Title: Hier geeft u de titel op voor het evenement. • Category: Kies een categorie voor het evenement. • Place: Vul hier de plaats of locatie in waar het evenement plaatsvindt. • Bodytext: Hier kunt u alle informatie plaatsen over het evenement. • Infolink: Als u wilt verwijzen naar een pagina met meer informatie, dan kunt u dit hier opgeven. • Text for infolink: Als u wilt dat de link naar deze pagina bestaat uit een specifieke tekst, dan kunt u deze hier opgeven.<br />
<br />
38<br />
<br />
39<br />
<br />
4. De TYPO3 Recycler Voor het terugzetten van de website naar een oude situatie De mogelijkheid bestaat om terug te keren naar een oude situatie in TYPO3. Stel u hebt per ongeluk een belangrijke pagina of een bestand verwijderd, dan kunt u deze terugzetten met behulp van de ‘KJ TYPO3 Recycler’. Deze ‘Recycler’ vindt u in de linkerkolom van TYPO3 onder ‘Help’:<br />
<br />
Klik op ‘Recycler’ en u krijgt een overzicht van alle pagina’s, inhoudselementen, gebruikers en nieuwsberichten die ooit verwijderd zijn van de website. Hier kunt u eenvoudig aangeven welke documenten u wilt terugzetten. U ziet bijvoorbeeld dit:<br />
<br />
40<br />
<br />
5. De TYPO3 Lightbox 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 ‘Afbeeldingen’-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 hier een vinkje bij zowel ‘Klik-vergroten’ als ‘Lightbox’.<br />
<br />
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. Let op: U activeert de Lightbox op de website door te klikken op een afbeelding.<br />
<br />
41<br />
<br />
Aantekeningen<br />
<br />
42<br />
<br />
Aantekeningen<br />
<br />
43<br />
<br />
Aantekeningen<br />
<br />
44<br />
<br /> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form role="form" method="post" action="https://adoc.pub/report/handleiding-typo3-42x" style="border: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Report "Handleiding TYPO3 4.2.x"</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Your name</label>
<input type="text" name="name" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Reason</label>
<select name="reason" required="required" class="form-control">
<option value="">-Select Reason-</option>
<option value="pornographic" selected="selected">Pornographic</option>
<option value="defamatory">Defamatory</option>
<option value="illegal">Illegal/Unlawful</option>
<option value="spam">Spam</option>
<option value="others">Other Terms Of Service Violation</option>
<option value="copyright">File a copyright complaint</option>
</select>
</div>
<div class="form-group">
<label>Description</label>
<textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea>
</div>
<div class="form-group">
<div style="display: inline-block;">
<div class="g-recaptcha" data-sitekey="6LcEnMcZAAAAAFHzKKgaE-Qh57XzUTzpfRElD4dP"></div>
</div>
</div>
<script src='https://www.google.com/recaptcha/api.js'></script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function () {
var inner_height = $(window).innerHeight() - 250;
$('#pdfviewer').css({"height": inner_height + "px"});
});
</script>
<footer class="footer" style="margin-top: 60px;">
<div class="container-fluid">
Copyright © 2024 ADOC.PUB. All rights reserved.
<div class="pull-right">
<span><a href="https://adoc.pub/about">About Us</a></span> |
<span><a href="https://adoc.pub/privacy">Privacy Policy</a></span> |
<span><a href="https://adoc.pub/term">Terms of Service</a></span> |
<span><a href="https://adoc.pub/copyright">Copyright</a></span> |
<span><a href="https://adoc.pub/contact">Contact Us</a></span> |
<span><a href="https://adoc.pub/cookie_policy">Cookie Policy</a></span>
</div>
</div>
</footer>
<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="add-note-label">Sign In</h4>
</div>
<div class="modal-body">
<form action="https://adoc.pub/login" method="post">
<div class="form-group">
<label class="sr-only" for="email">Email</label>
<input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" />
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<div class="form-group">
<div class="checkbox">
<label class="form-checkbox">
<input type="checkbox" name="remember" value="1" />
<i class="form-icon"></i> Remember me
</label>
<label class="pull-right"><a href="https://adoc.pub/forgot">Forgot password?</a></label>
</div>
</div>
<button class="btn btn-primary btn-block" type="submit">Sign In</button>
</form>
</div>
</div>
</div>
</div>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-177279549-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-177279549-1');
</script>
<script src="https://adoc.pub/assets/js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://adoc.pub/assets/css/jquery-ui.css">
<script>
$(function () {
$("#document_search").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://adoc.pub/suggest",
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response(data);
}
});
},
autoFill: true,
select: function( event, ui ) {
$(this).val(ui.item.value);
$(this).parents("form").submit();
}
});
});
</script>
<!-- cookie policy -->
<div id="ADOCPUB_cookie_box" style="z-index:99999; border-top: 1px solid #fefefe; background: #FFC107; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;">
Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://adoc.pub/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_ADOCPUB_cookie_box();return false;">Agree & close</a>
</div>
<script>
function accept_ADOCPUB_cookie_box() {
document.cookie = "ADOCPUB_cookie_box_viewed=1;max-age=15768000;path=/";
hide_ADOCPUB_cookie_box();
}
function hide_ADOCPUB_cookie_box() {
var cb = document.getElementById('ADOCPUB_cookie_box');
if (cb) {
cb.parentElement.removeChild(cb);
}
}
(function () {
var ADOCPUB_cookie_box_viewed = (function (name) {
var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
return matches ? decodeURIComponent(matches[1]) : undefined;
})('ADOCPUB_cookie_box_viewed');
if (ADOCPUB_cookie_box_viewed) {
hide_ADOCPUB_cookie_box();
}
})();
</script>
<!-- end cookie policy -->
</body>
</html>
