Training voor Redacteuren

Training voor Redacteuren Bewerkt door Ing. Hans A. Olthoff,

Meer informatie: Ing. Hans A. Olthoff alterNET Internet B.V. Langesteijn 124 3342 LG Hendrik-Ido-Ambacht T (078) 635 1200 F (078) 635 2010 www.alternet.nl

Dit document wordt gepubliceerd onder de voorwaarden van Open Content License, beschikbaar op http://www.opencontent.org/opl.shtml

De inhoud van dit document heeft betrekking op TYPO3 - een GNU/GPL CMS/Framework beschikbaar op www.typo3.com

TYPO3 Training voor Redacteuren -

Training voor Redacteuren

Inhoudsopgave Training voor Redacteuren....................1 Over de auteur.............................................................3 Introductie......................................................................4 Wat is Typo3?..................................................................4 Met dank aan:.................................................................5 Algemene beginselen...................................................6 Backend en frontend.....................................................6 Algemene Backend Structuur......................................8 Paginaboom ....................................................................8 Speciale pagina's............................................................13 Pagina content ..............................................................21 Bewerk en creëer pagina's en content ..................25 Pagina's en content bewerken....................................25 Nieuwe pagina ..............................................................27 Pagina's verplaatsen of kopiëren...............................39

Zichtbaarheidsinstellingen - pagina's verbergen, de tijd van publicatie bepalen, etc...................................41 Rich Text Editing: Vet, Schuin, Bullet lijsten, Plaatjes invoegen ........................................................................45 Linkjes maken...............................................................45 De file module of: afbeeldingenarchief...................59 Bestandsbeheer in TYPO3..........................................59 Het uploaden van afbeeldingen naar het archief ..62 Verschillende Cases om te oefenen........................64 Case 1: het tekst element...........................................64 Case 2: links in een tekst element............................65 Case 3: tekst met afbeelding.....................................66 Case 4: de bestandslink...............................................67 Case 5: een inhoudsopgave maken met het sitemap element..........................................................................68 Nawoord.......................................................................69

2


Over de auteur

Over de auteur Ing. Hans A. Olthoff is directeur van alterNET Internet B.V. Hij is werkzaam als internet consultant voor verschillende bedrijven en overheidsinstellingen en wordt daarnaast regelmatig gevraagd als docent voor TYPO3 trainingen bij een groot aantal opleidingsinstituten in Nederland.

Regelmatig publiceert hij artikelen over TYPO3 en er zijn enkele Nederlandstalige handleidingen van hem verschenen op de wereldwijde website voor ontwikkelaars: www.typo3.org.

AlterNET is een full-service internet bureau, met een compleet aanbod van internet marketing, design en achterliggende technieken, welke veelal gebaseerd zijn op TYPO3. AlterNET heeft een eigen hosting service waarop een groot aantal eigen klanten hun TYPO3 hosting pakket hebben draaien, alsmede een twintigtal resellers die zelf websites ontwikkelen in TYPO3, maar de hosting liever overlaten aan een gespecialiseerde partner als alterNET.

AlterNET is lid van de in Zwitserland gevestigde TYPO3 Association en heeft zich met enkele partners verenigd in TYPOTYCOON, een internationaal opererend TYPO3 partner netwerk.

3


Introductie

Introductie Wat is Typo3? TYPO3 is een onderhoudssysteem voor websites, ook wel een content management systeem of cms genoemd. Door een strikte scheiding van inhoud (content), grafische vormgeving en onderliggende techniek (PHP programmeertaal en MySQL database) wordt het onderhouden van een of meer websites sterk vereenvoudigd. In deze training leer je de basis principes van TYPO3. De training is hands-on en je gaat direct beginnen met een oefenwebsite in TYPO3. Na het volgen van deze training heb je een idee van de mogelijkheden van TYPO3 en de daaraan ten grondslag liggende concepten. Voor deze training heb je nodig: het adres van de oefenwebsite van alterNET en een inlogcode om jezelf toegang te verschaffen. De docent zal je deze informatie verstrekken. De creatie van templates en het ontwikkelen van websites in TYPO3 komen in deze cursus niet aan de orde! Deze onderwerpen worden behandeld in de vervolgcursus TYPO3 Training voor Ontwikkelaars.

Dit document vormt een introductie tot de basisprincipes van TYPO3. Je kunt meteen aan de slag met je eigen – eerste - TYPO3 oefenwebsite die in deze introductie wordt gebruikt. Na deze training heb je een idee over de mogelijkheden van TYPO3, zijn algemene structuur en de extensie mogelijkheden. Dit document bevat geen informatie over het professioneel ontwerpen van templates of de ontwikkeling met TYPO3 in het algemeen. 4


Introductie

Met dank aan: Dankbaar heb ik uitgebreid gebruik gemaakt van de volgende brondocumenten:

•

Getting Started, Engelstalige handleiding, oorpsornkelijk geschreven door Kasper Skårhøj

•

Handbuch für Redakteure, Duitstalige handleiding geschreven door Werner Altmann

•

MTB/1, Engelstalige handleiding geschreven door Kasper Skårhøj

Deze documenten zijn gepubliceerd onder de voorwaarden van de Open Content License. Meer informatie hierover is te vinden op http://www.opencontent.org/opl.shtml De inhoud van deze training is gerelateerd aan TYPO3, een GNU/GPL gelicenseerd CMS/Framework, beschikbaar gesteld op www.typo3.com

De hoofdstukken uit de brondocumenten zijn vertaald en opnieuw gerangschikt, zodat ze beter aansluiten bij de opleidingsbehoeften van mensen die aan de slag willen met TYPO3. Op basis van de brondocumenten is door AlterNET een drietal Nederlandstalige TYPO3 Trainingen beschikbaar gesteld om de kennis op het gebied van TYPO3 te vergroten. Dit zijn: •

TYPO3 Training voor Redacteuren (dit document)

•

TYPO3 Training voor Webmasters

•

TYPO3 Training voor Ontwikkelaars

Veel leesplezier!

Ing. Hans A. Olthoff [email protected]

5


Algemene beginselen

Algemene beginselen Backend en frontend TYPO3 is verdeeld in twee gedeeltes - de backend en de frontend. De frontend hiervan is bedoeld voor iedereen die op het web surft - het is de website die TYPO3 produceert. Maar alléén jij hebt toegang tot de backend - daar waar de website wordt onderhouden. Hiervoor is altijd een gebruikersnaam en een wachtwoord nodig. Later zul je leren hoe je anderen – zoals redacteuren en mede-administrators – toegang kunt verlenen. Om naar de frontend te gaan, type "http://www.jouw-voorbeeld-website.org/" in de adresbalk. Maar eerst gaan we verder met de backend. Om naar de backend van je nieuwe website te gaan open je de browser en type je "http://www.jouwvoorbeeld-website.org/typo3/". Je krijgt dan een login pagina die er zo uitziet:

Vul de gebruikersnaam "admin" in en het wachtwoord dat je van de docent hebt gekregen. 6


Algemene beginselen

Nadat je op de login knop hebt geklikt, wordt de TYPO3 backend geopend. Je komt dan op de overzichtspagina terecht.

Aan de linkerkant staan de TYPO3 hoofd modules – het hoofdmenu van de backend. Klik nu op "Page" om naar de paginamodule te gaan.

7


Algemene beginselen

Algemene Backend Structuur Aan de linkerkant heb je nog altijd het moduleoverzicht. In het midden vind je de paginaboom en rechts staat de ruimte voor de content.

Paginaboom De paginaboom geeft de hiërarchische structuur van je website weer. Meestal komt dit precies overeen met de navigatiestructuur van je website. De paginaboom klap je uit door op de kleine pijltjes links van de items te klikken.

Let op De paginaboom werd compleet herschreven voor TYPO3 4.5 LTS. Het werkt nu heel anders dan de oude versie. Als je een oudere versie van TYPO3 gebruikt, ga dan naar een oudere versie van dit document: http://typo3.org/documentation/documentlibrary/tutorials/doc_tut_quickstart_nl1

Kijk nu naar je paginaboom:

8


Algemene beginselen

Kijk tegelijkertijd naar de navigatie in de frontend als je op "About TYPO3" klikt.

9


Algemene beginselen

Je ziet hoe het hoofdmenu van jouw website correspondeert met de pagina's van het eerste niveau in de paginaboom, en hoe het submenu correspondeert met de pagina's onder "About TYPO3" in de paginaboom. Voor alle modules in de categorie “Web” wordt een paginaboom getoond. Dit betekent dat al die modules per pagina werken. Als je op de paginatitel klikt, opent die pagina zich in de ruimte voor de content aan de rechterkant. Als je met je muis over het icoontje van een pagina beweegt, wordt de interne id van die pagina getoond. Deze id wordt ook gebruikt om de pagina in de frontend te tonen. Als je op het icoontje klikt, wordt het context menu geopend.

Het context menu Je kunt het context menu van een pagina gebruiken om snel de meest gebruikte – paginagerelateerde functies te openen. Deze opties doen het volgende: ‒ Show: opent de geselecteerde pagina in de frontend ‒ Edit: stelt je in staat de pagina-eigenschappen te bewerken ‒ Disable: zet de pagina uit (je kunt de pagina dus niet meer vanuit de frontend benaderen) ‒ Info: laat informatie over de pagina zien ‒ History/Undo: laat de wijzigingengeschiedenis van de pagina zien (wie veranderde wat en wanneer) 10


Algemene beginselen

‒ Page Actions: acties die betrekking hebben op de geselecteerde pagina ∘ New: stelt je in staat een nieuwe pagina te maken of nieuwe content te plaatsen ∘ Cut: knipt de pagina ∘ Copy: kopieert de pagina ∘ Delete: verwijdert de pagina ‒ Branch Actions: acties die betrekking hebben op de hele tak ∘ Mount as treeroot: maakt van de geselecteerde pagina tijdelijk een rootpagina ∘ Expand Branch: is hetzelfde als op een pijltje 'sluiten' klikken ∘ Collapse Branch: is hetzelfde als op een pijltje 'openen' klikken ∘ Export to .t3d: opent de export tool en selecteert de desbetreffende pagina ∘ Import from .t3d: opent de import tool en selecteert de desbetreffende pagina Afhankelijk van de context kunnen meer of minder functies beschikbaar zijn.

Gebruik nu het context menu om de pagina "Welcome to TYPO3" in de frontend te tonen. Het blauwe balletje met het nummer (1) toont dat het laatste deel van de titel in de adresbalk correspondeert met de paginatitel in de paginaboom. Nummer (2) toont dat de 'id' van deze pagina '6' is. Als je teruggaat naar je paginaboom en je beweegt je muis over het icoontje van deze pagina, dan zie je opnieuw 'id=6':

11


Algemene beginselen

Nummer (3) vind je misschien wat verwarrend. Volgens de paginaboom en de titelbalk heet de pagina "Welcome to TYPO3", maar in de menustructuur van de website heet de pagina ineens "Get Started". Hoe kan dat? Klik eens op "Edit" in het context menu van die pagina en kijk eens naar de rechter contentruimte:

Je ziet daar dat de paginatitel (1) "Welcome to TYPO3" is. Maar je ziet ook "Get Started" bij (2) staan. Dit heet "Alternative Navigation Title" en dat betekent dat die titel wordt getoond in elk navigatie element (menu's, broodkruimelpaden, sitemaps...). Als het veld "Alternative Navigation Title" leeg is, wordt de paginatitel gebruikt.

12


Algemene beginselen

Speciale pagina's

Als je nog eens in de paginaboom kijkt zie je dat er verschillende symbolen voor verschillende typen pagina's worden gebruikt. De pagina's die in het menu op je website verschijnen zijn normale pagina's. Dat is gebruikelijk. Daarnaast zijn er nog de pagina's met een gestippelde rand rondom het icoontje. Dat zijn de pagina's die verborgen blijven in de menu's.

Niet zichtbaar in het menu Pagina's die niet zichtbaar zijn in de menustructuur zijn in wezen niet anders dan normale pagina's, ze verschijnen alleen niet in de menustructuur. Dat is handig als je een pagina hebt waarnaar je alleen wilt linken, maar die niet zichtbaar mag worden in de menustructuur. Bewerk de pagina-eigenschappen van de pagina "Search" (gebruik het context menu). Selecteer de tab “Access”: Je ziet dat "Hide" is aangevinkt onder “Visibility” – “In Menus”:

13


Algemene beginselen

14


Algemene beginselen

Mappen Als je naar de paginaboom kijkt, zie je dat sommige pagina's een map-icoontje hebben. Binnen TYPO3 bevatten standaardpagina's normaliter webpagina content. Ze verschijnen in het menu en kunnen een titel hebben. 95% van de pagina's wordt zo gebruikt. Maar pagina's kunnen ook dienen als eenvoudige containers van database-elementen. Van die pagina's is het niet de bedoeling is dat ze als content zichtbaar zijn op een webpagina. Daar zijn die mappen voor. Gebruik ze zoals je ook mappen zou gebruiken op je eigen computer: om verschillende bestanden op een ordelijke manier op te slaan. Binnen TYPO3 kunnen database elementen netjes worden georganiseerd in mappen. Denk hierbij aan frontend gebruikers, frontend groepen of nieuwsberichten. Je kunt een map maken door daarvoor te kiezen in het uitklapmenu "Type" bij de paginaeigenschappen:

Shortcuts Een shortcut kan gebruikt worden om een lege pagina te maken die, bijvoorbeeld, fungeert als bovenliggende pagina voor andere pagina's. Stel je voor dat je een product verkoopt, en dat je op je website de volgende navigatiestructuur hebt: - About us - My Product - Imprint - Contact Nu wil je een aantal subpagina's onder de "My Product" pagina hebben om informatie over je product te geven: - About us - My Product - Overview - Technical Details - Pricing and Shipping - Imprint - Contact 15


Algemene beginselen

Je hebt niet echt content voor de pagina 'My Product', je wilt alleen dat die pagina in het menu verschijnt. Op dit punt kun je een shortcut gebruiken die de pagina "My Product" doorlinkt naar de pagina "Overview". Het gevolg is dan dat je, iedere keer dat je in het hoofdmenu "My Product" aanklikt, direct wordt doorgeleid naar de pagina "Overview". De menustructuur ziet eruit zoals je wilde, terwijl je geen eigen content hebt voor de pagina "My Product". In het Introduction Package vind je ook een shortcut: de "Home" pagina. Het symbool voor een shortcut is het kleine pijltje rechtsonder. De "Home" pagina is ook de root van je website en heeft daarom zijn eigen domein - vandaar het wereld-icoontje. Je maakt een shortcut zoals je ook een map maakt: door "shortcut" te selecteren in het uitklapmenu als je de paginaeigenschappen bewerkt.

Link naar een externe URL Externe links worden gebruikt om een link te maken naar een externe pagina die in jouw menu verschijnt. Laten we dit eens proberen. Stel je voor dat je in jouw menu een link wilt maken naar http://typo3.org. Klik allereerst op het icoontje 'nieuw' links bovenaan de paginaboom:

16


Algemene beginselen

Het menu dat zich dan opent bevat verschillende symbolen voor verschillende soorten pagina's. Beweeg je muis over deze symbolen om de namen ervan te zien. Sleep nu het “Link to External URL” icoon naar de “Feedback” pagina:

Je ziet nu een uitgeschakelde pagina met de titel “[Default Titel]”. Dubbelklik op de titel: 17


Algemene beginselen

Je kunt nu gewoon de naam intypen. Laten we dit menu item "TYPO3 – Enterprise Open Source CMS" noemen. Druk op ENTER om de naam te bewaren.

18


Algemene beginselen

Open nu het context menu met de rechtermuisknop en kies 'bewerken'.

Als het goed is zie je nu het dialoogvenster "Bewerk pagina eigenschappen" dat je al kent:

Het ziet er een beetje anders uit omdat het de huidige context heeft overgenomen - een link naar een externe URL. Zie je het oranje uitroepteken op de tab “General”en in het "URL" veld? Dat betekent dat nog iets moet gebeuren. Dit is natuurlijk het belangrijkste gedeelte - de externe URL waarnaar we willen linken. Type de URL in (1) en selecteer het juiste protocol (2). Als je (2) niet wilt gebruiken, kun je het op “Auto” zetten en de gehele URL in (1) typen.

19


Algemene beginselen

Het juiste type kiezen Let op de "Type" keuzebox! Selecteer hier het correcte protocol of zet het op “Auto” als je URLs wilt invoeren die al een protocol bevatten (zoals 'http://typo3.org' in plaats van 'typo3.org').

Sla nu je wijzigingen op. Je kunt ze opslaan met een van de knoppen in de header bovenaan het document:

Doorgaans kun je zien wat een knop doet door er met je muis overheen te gaan en even te wachten op de tooltip uitleg.

Tooltips Als je wilt weten wat een bepaald element in TYPO3 precies doet, ga dan met je muis over het label of het icoontje heen. Je krijgt dan een korte uitleg. Als je op de uitleg klikt, krijg je een meer uitgebreide uitleg.

De zichtbare tussenruimte (Visual Menu Separator) Je kunt nog een ander paginatype in de paginaboom ontdekken:

20


Algemene beginselen

Dit type wordt zichtbare tussenruimte (visual menu separator) genoemd. In principe doet deze pagina helemaal niets in een standaard TYPO3 installatie. Je gebruikt een zichtbare tussenruimte om de paginaboom in kleinere stukken te verdelen zodat je makkelijker overzicht houdt.

Pagina content Inmiddels hebben we gezien hoe de website is opgebouwd via de paginaboom en wat de verschillende paginatypes doen. Het is nu tijd om eens naar de content te kijken. Laten we eerst eens kijken hoe de content op een pagina is georganiseerd. ‒ Open de pagina "editor Features" > "Text and Images" in je browser ‒ Open in een tweede browservenster de TYPO3 backend ‒ Kies de pagina module en selecteer "editor Features" > "Text and images" in je paginaboom ‒ Vergelijk de beide pagina's

21


Algemene beginselen

Frontend:

22


Algemene beginselen

Backend:

Zoals je kunt zien is de volgorde van de content elementen op de website hetzelfde als de volgorde van de elementen in de backend. De content elementen zijn ook nog eens in kolommen gesorteerd: content dat in de backend in de rechter kolom staat, staat op de webpagina ook in de rechter kolom. Elk content element op je website kan van een verschillend type zijn (zoals tekst, of tekst met een plaatje). Je kunt dus heel flexibel pagina's maken.

23


Algemene beginselen

Laten we eens kijken wat er gebeurt als we een content element verplaatsen. ‒ Beweeg je muis over de grijze balk van een content element op de pagina:

Je ziet een paar editor-icoontjes verschijnen op dat element. Gebruik de pijltjes rechts om het content element naar boven of naar beneden te verplaatsen. Kijk eens naar de frontend van je website nadat je een element hebt verschoven. Als het goed is, zie je dat de volgorde van de tekst in de website (frontend) overeenkomstig is verplaatst. De andere icoontjes in de kop van het element verwijzen naar verschillende bewerkingen die je op dit element kunt uitvoeren:

24


Bewerk en creëer pagina's en content

Bewerk en creëer pagina's en content We weten nu dat pagina's hun inhoud opslaan in content elementen. Als je dus de inhoud van een pagina wilt bewerken moet je de content elementen op die pagina bewerken!

Pagina's en content bewerken In TYPO3 is het erg gemakkelijk om de content van een pagina te bewerken. Selecteer gewoon de Pagina module (1), klik op de paginatitel of de pagina die je wilt bewerken (2) en in het "Columns" overzicht (3) klik je op het bewerk icoon (4) van het content element dat je wilt veranderen:

25



Vervolgens verschijnt dit edit formulier:

Allereerst het veld "Type": (1) dit veld vertelt je van welk type het content element is. In dit geval is dat "tekst en plaatjes". Het zou ook alleen "tekst" kunnen zijn (zoals je al eerder hebt gezien), alleen "plaatjes" of "tabel". Elk content element heeft zijn eigen set velden en door verschillende elementen te kiezen, kun je een heel afwisselende website bouwen. Het "header" veld (2) bevat de koptekst van het content element. Je voegt de koptekst in door deze in te vullen in het tekstveld (2). De verschillende elementen hebben verschillende mogelijkheden. Speel er eens mee en kijk wat je kunt doen met de verschillende tabs. Wees ervan bewust dat elke verandering van het elementtype wordt bewaard.

QuickEdit - bespaar je een muisklik... Als je snel toegang wilt hebben tot je content elementen, dan kun je de Pagina module view van "Columns" wijzigen in "QuickEdit" - het eerste content element van een pagina wordt dan meteen getoond:

26



Nieuwe pagina We hebben inmiddels al een manier gezien om een nieuwe pagina te maken, toen we de "Externe URL" pagina maakten. In TYPO3 zijn er echter meerdere manieren om dingen te doen. Hier volgt een andere manier om een pagina te maken:

27



Klik op de + knop in de header; dat is de donkergrijze balk bovenaan het scherm. In de volgende stap krijg je de mogelijkheid om de plaats van je nieuwe pagina te bepalen:

Maak nu een nieuwe pagina met de naam "My Content Test" na (NIET in) de pagina "Text And images" en kijk daarna eens naar je website. Je vind de pagina in het menu naast de pagina "Text and images".

28



De pagina is nog steeds leeg - we moeten dus wat content elementen op de pagina maken!

29



Pagina content elementen maken In de Pagina module klik je op de paginatitel "My Content Test" in de paginaboom. Vervolgens klik je op het icoontje met het content element en de kleine groene plus in de header "Create new content element":

Je ziet meteen een formulier zoals hieronder. Hierin kun je een type content element selecteren (1) zoals eerder gezegd, de diverse typen content element creëren verschillende soorten content op de webpagina. Ook kies je de positie (2) van het element. We kiezen hier voor "Text & Images":

30



Er verschijnt een formulier. Vul in het tabblad "General" een koptekst in bij (1) en wat willekeurige tekst bij twee (2).

Selecteer daarna de tab "Media". Kies daarna een willekeurig plaatje van je harddisk (1). Aanvullend kun je een linkje invullen voor je plaatje.

31



Selecteer daarna de tab "Appearance". Als je een groot plaatje hebt gekozen, kun je de grootte aanpassen door (1) in te vullen. Bij (2) kun je de positie van je plaatje ten opzichte van de tekst bepalen.

32



Klik vervolgens op de "Save document" knop. Het plaatje is nu geüpload naar de server en in het nieuwe pagina content element geplaatst. Als alles goed is gegaan ziet het er als volgt uit op de webpagina:

33



Een ander content element invoegen Als je weer in de Pagina module kijkt, zie je het nieuwe content element meteen terug. Laten we nog een nieuw content element maken. Met de kleine content element icoontjes (met het plusje) in de header balken van de content kolommen kun je nieuwe content maken in die kolom. Gebruik het icoontje bij (3) in de rechter kolom om daar content toe te voegen.

34



We gaan nu een speciaal element maken: een "Sitemap".

Met het Sitemap element kun je allerlei overzichten van pagina linkjes invoegen, zoals een echte Sitemap, of een menu van subpagina's. We willen een lijst opnemen waarin gelinkt wordt naar bepaalde pagina's, die we handmatig geselecteerd hebben. Daarom kiezen we "Menu of these pages":

35



Selecteer de pagina's waarnaar je wilt linken. Er zijn twee manieren om dit te doen. De eerste manier om dit te doen is door op het kleine map-icoontje te klikken (1) en de pagina's te selecteren uit de popup die dan verschijnt. De tweede manier om dit te doen is de "auto-suggest search" (2) te gebruiken. Je vult dan in het tekstveld de pagina titel in:

Hier hebben we wat sub-pagina's van "About TYPO3" toegevoegd:

36



De pagina heeft nu twee content elementen, een van het type "Text & Images" in de normale kolom, en een van het type "Sitemap" in de rechter kolom:

37



In de Pagina Module ziet dat er zo uit:

38



Pagina's verplaatsen of kopiëren Pagina's verplaatsen is echt makkelijk. Sleep de pagina in de paginaboom gewoon naar zijn nieuwe plaats. Een dun lijntje toont aan wat de nieuwe plaats is.

Plaats een pagina op een titel om het in die pagina in te voegen.

Je kunt pagina's op dezelfde manier kopiëren: door je CTRL-toets ingedrukt te houden, zoals je ook op je desktop kunt doen.

Om terug te keren naar de 'verplaats modus', druk je nogmaals CTRL in.

39



Knippen en plakken & kopiëren en plakken

Je kunt ook 'knippen & plakken' of 'kopiëren & plakken' gebruiken. Selecteer "Page Actions: Copy" uit het context menu van de pagina die je wilt kopiëren: Of kies "Page Actions: Paste after" (of "Page Actions: Paste into", afhankelijk van wat je wilt) uit het context menu van de pagina van bestemming:

Let op - consistente concepten aan boord! Het principe van 'knippen / kopiëren & plakken' kan niet alleen op pagina's worden toegepast, maar ook op pagina content elementen - eigenlijk kan dit principe binnen TYPO3 op elk database element of bestand toegepast worden! Dit is een goed voorbeeld van hoe TYPO3 dezelfde concepten consistent en door het gehele systeem gebruikt. Dus als je eenmaal een eigenschap van TYPO3 hebt leren gebruiken zul je merken dat andere eigenschappen heel herkenbaar zijn! Als je er open voor staat zul je zien dat dingen zijn ontworpen om samen te werken.

40



Zichtbaarheidsinstellingen - pagina's verbergen, de tijd van publicatie bepalen, etc. Een mogelijkheid die je bij veel elementen tegen zult komen - in het bijzonder bij pagina's en content elementen - zijn de publicatie controlevelden of zichtbaarheidsinstellingen. Bij pagina's zien die er zo uit:

Het instellen van de zichtbaarheid gaat bij content elementen op dezelfde wijze.

41



Een pagina uitschakelen Vink het vakje "Page: Disable" aan:

Sla de pagina op en kijk er eens naar in de paginaboom. Als de paginaboom niet opnieuw ingeladen is, klik dan op de groene pijltjes bovenaan om de boom te vernieuwen (1). De uitgeschakelde pagina heeft een icoontje gekregen waarmee wordt aangegeven dat het uitgeschakeld is (2).

42



Een uitgeschakelde pagina kan niet vanaf de frontend bekeken worden. Vanuit de backend kun je nog altijd wel een preview van de uitgeschakelde pagina krijgen. Kies daarvoor "Show" van het context menu van de uitgeschakelde pagina:

Je ziet in de frontend de uitgeschakelde pagina met de aantekening "preview". Deze aantekening betekent dat een gewone bezoeker de pagina niet kan zien:

43



Pagina's en content elementen worden heel vaak uitgeschakeld. Het gebeurt zelfs zo vaak dat deze zichtbaarheidsinstelling een eigen plek heeft gekregen in de context menu's:

Publicatiedatum van pagina's en content elementen bepalen Je kunt zelf bepalen wanneer (op welke datum) een pagina online zichtbaar zal zijn. Type bijvoorbeeld eens de code "d+10" in in het "Publish Date" veld:

= De publicatiedatum wordt automatisch bepaald op 10 dagen na deze dag! Als je de pagina opslaat en de muis in de paginaboom over deze pagina beweegt, dan zie je dat deze instelling wordt weergegeven:

Je kunt natuurlijk ook rechtstreeks een datum intypen, of via de agenda een datum prikken (zie het icoontje naast het datumveld). 44



Zo makkelijk is het om met starttijd de publicatie van informatie te bepalen. Hetzelfde geldt natuurlijk ook voor het "Expiration Date" veld; en voor pagina content elementen, nieuws elementen, gastenboek elementen - noem maar op.

Rich Text Editing: Vet, Schuin, Bullet lijsten, Plaatjes invoegen Wanneer je aan de teksten van je pagina's werkt kun je dezelfde format opties gebruiken in je tekstverwerkingsprogramma. Je kunt gebruik maken van de Rich Text Editor (RTE) voor het bodytekst veld. "Rich Text" betekent dat je de tekst niet alleen kunt schrijven, maar ook accentueren.

Zoals je kunt zien kun je lijsten maken, teksten vet maken of schuin plaatsen, je kunt zelfs tabellen invoegen. Deze editor kan volledig aangepast worden aan al jouw behoeften. Die configuratie is geen onderdeel van deze handleiding. Je vindt een beschrijving in de rtehtmlarea manual.

Linkjes maken Sommigen zeggen dat hyperlinks het internet aan elkaar lijmen. In TYPO3 worden linkjes al automatisch voor je aangemaakt zodra je een pagina binnen de hiërarchie van de paginaboom aanmaakt. Maar je wilt misschien ook nog in een tekst een link maken naar een andere pagina, een bestandje, een andere website of een e-mailadres. Dat is heel eenvoudig met de Rich Text Editor. Markeer gewoon de tekst en klik op het "Insert Link" icoontje: 45



Een pop-up opent en daarin kun je het type link kiezen dat je wilt maken. In dit geval kies je de tab "Page" en klik je op "About TYPO3" in de paginaboom om een link te leggen naar de "About TYPO3" pagina.

46



De pop-up sluit zichzelf en je ziet dat de gemarkeerde tekst een link is geworden:

Om de link te bewerken zet je de muis op de link, klik je de rechter muisknopen kies je de link-optie uit het context menu (of plaats je de cursor ergens in de linktekst en klik je opnieuw op het link icoontje).

In de frontend zie je dit terug als een link - zoals verwacht. Klik er eens op en je wordt doorgeleid naar de pagina "About TYPO3". Als je problemen hebt met de editor kun je ook in de broncode kijken en zien wat er aan code is geproduceerd:

47



Het is gewoon HTML. Let op: de RTE analyseert de code en verwijdert alles dat hij niet kent of dat hij niet mag toestaan. Je kunt dus niet zomaar je eigen HTML code invoegen.

Andere soorten linkjes? Je kunt links maken naar locale bestanden en naar externe websites - zelfs links naar een specifiek content element op een pagina of naar een e-mail adres. We hebben al gezien hoe je kunt linken naar een interne pagina. De volgende screenshots laten zien hoe je de verschillende link-types kunt maken. Naar een bepaald content element linken

48



Naar een bestand linken

49



Naar een externe URL linken

50



Naar een e-mailadres linken

51



Content element types Zoals je weet zijn er verschillende types content elementen beschikbaar. Door de content element types te combineren kun je heel veel verschillende webpagina's maken zodat niet elke pagina er hetzelfde uitziet!

De verschillende types zijn per categorie gegroepeerd. De meest gebruikte items zijn "Text" and "Text & Images".

52



Wizards Bij sommige elementen wordt gebruik gemaakt van een wizard. Bewerk bijvoorbeeld eens een van de content elementen op de pagina "Tables" (die je in de "Examples" tak kunt vinden):

53



Je kunt de content van de tabel rechtstreeks in de tekst bewerken (1), of je kunt de wizard openen (2).

De tabel wordt opgebouwd door elke regel in het tekstveld te interpreteren als een tabel regel. Het verticale lijntje, | , wordt gebruikt om de kolommen van elkaar te scheiden. Dit is de "low level" manier waarop het werkt en het kan handmatig worden onderhouden.

54



Maar de meeste mensen zullen de "Table wizard" kiezen. De wizard roept een veld met de celverdeling op en daarbij knoppen voor het toevoegen, verwijderen en verplaatsen van tabel content:

Bijkomende opties - "Paletten" Vanaf het prille begin heeft TYPO3 gewerkt met het concept van primaire en secundaire formuliervelden. De bewerkingsformulieren in TYPO3 bevatten veel velden en kunnen zelfs met nog meer velden worden uitgebreid. Maar voor de gemiddelde gebruiker is het erg lastig om overzicht te houden in een scherm waarop veel velden worden getoond. Zeker als je een beginnend gebruiker bent en al veel nieuwe dingen moet onthouden. Het concept van primaire en secundaire velden houdt in dat je normaal gesproken alleen de meest belangrijke en vaakst gebruikte formuliervelden te zien krijgt (de primaire velden). Meer gedetailleerde opties zijn verborgen in de secundaire velden; ze worden getoond als je erom vraagt. De meeste content elementen en pagina's hebben geen secundaire velden, maar veel extensies gebruiken nog wel dit concept. Ga naar de pagina "Tables" in de paginaboom en bewerk het tweede content element. Je ziet alleen wat essentiële velden. Klik nu op de knop rechts van het "Type" uitklapmenu:

Je ziet nu het zogeheten 'palet met secundaire opties':

55



Complexe zaken zijn dus verborgen achter deze knop waardoor de normale interface schoner wordt en gemakkelijker te begrijpen. Je bent echter altijd maar 'een klik verwijderd' van de geavanceerde opties. De keerzijde is dat het, als je een van deze secundaire opties echt nodig hebt en je je niet meer kunt herinneren "onder welk icoon" het zit, zelfs lastig kan zijn om de secondaire opties te vinden. Het kan ook zo zijn dat je het secundaire veld vaak gebruikt. Je kunt er daarom voor kiezen om de optie "Show secondary options" onderaan alle bewerkingsformulieren aan te klikken:

Nadat je deze optie hebt aangevinkt worden de secundaire opties voor alle elementen standaard getoond.

56



Frames Een van de velden van de secundaire opties die in het Introduction Package wordt gebruikt is het "Frame". Navigeer naar de "Frames" pagina in de frontend:

Daar staan standaard enkele frames waarmee je verticale streepjes kunt invoegen of de tekst kunt laten inspringen.

57



Ga nu naar dezelfde pagina in de backend en bewerk het "Ruler before" content element:

Je ziet dat het frame "Ruler before" wordt geselecteerd in "Indentation and Frames” op het “Appearance” Tab . Dit creëert de horizontale lijn voor het element. Wat het frame element eigenlijk doet, is dat het het content element inpakt in een html element of css class. Dit kan dan op zijn beurt weer worden gebruikt in je eigen stylesheet. Daarmee kun je dan weer elementen maken die er anders uitzien.

58


De file module of: afbeeldingenarchief

De file module of: afbeeldingenarchief Bestandsbeheer in TYPO3 Laten we een andere interessante module bekijken - de Bestand module (File module):

Deze module werkt volgens hetzelfde principe als de Lijst module voor database elementen: het heeft een mappenboom en een overzicht van bestanden in de mappen. De standaard map die verschijnt (voor "admin" gebruikers) is de "fileadmin/" map die zich in het verlengde van het "quickstart/" pad bevindt, onder de root map van de web server directory . Er is hier al een klein afbeeldingenarchief. Deze bestanden worden niet direct op de website gebruikt. Als we dat wel willen, kunnen we hetzij linken naar de bestanden van content elementen, hetzij de bestanden kiezen terwijl we bestanden kiezen voor content elementen.

Bestanden uit het archief gebruiken in je content elementen De tweede benadering is het meest gebruikelijk. Probeer een image element op de voorpagina van de "History" site te plaatsen:

59



In plaats van afbeeldingen één voor één te uploaden met de "Browse" knop, kun je meerdere bestanden die al op de server staan selecteren!

Nadat je de bestanden hebt opgeslagen, zijn ze gekoppeld aan het record. Let op! In tegenstelling tot wat je misschien denkt, zijn de bestanden nu verplaatst naar uploads/pics/ map. TYPO3 slaat hier afbeeldingen op die gekoppeld zijn aan content elementen.

60



En op de voorpagina heb je een stel leuke afbeeldingen:

Realiseer je dat TYPO3 voor afbeeldingen echt heel veel opties heeft. In het “Link” venster (5) kan een link voor de afbeeldingen ingevuld worden, tenzij de "Click-enlarge" optie (6) geselecteerd is. Door optie (6) wordt een link voor alle afbeeldingen geactiveerd. Deze link opent een venster met daarin een grotere versie van de afbeelding! Heel handig voor galerijen! Het "Caption" veld is voor tekst onder de afbeeldingen.

61



Je vindt meer opties in de tab 'Appearance'. De "Border" optie (3) plaatst een zwart kader rond de afbeeldingen. Meestal is dat mooi. Het “Width" veld (4) bepaalt de breedte van het afbeeldingenblok in pixels. De belangrijkste optie is de "Image Alignment” selector (1). Hiermee vertel je TYPO3 waar het afbeeldingenblok moet worden geplaatst (er waren drie afbeeldingen, weet je nog?) in verhouding tot de tekst. Dit is natuurlijk met name van belang wanneer je het "Text w/Image" element type gebruikt. Ten tweede is de "Number of Columns" selector (2) belangrijk, omdat deze zorgt dat afbeeldingen in kolommen worden geplaatst, in dit geval "2". En denk er aan:

Je kunt je muis over alle labels bewegen voor meer informatie! Gebruik deze hulp!

Het uploaden van afbeeldingen naar het archief Eén manier om afbeeldingen in het archief te krijgen is met FTP. Maar je kunt natuurlijk ook direct in de Bestand module uploaden. Je hoeft alleen maar op het map-icoontje te klikken:

Hierdoor verschijnt een Flash-popup formulier waarmee je meerdere bestanden in één keer kunt uploaden:

Als je browser geen flash ondersteunt, kun je deze mogelijkheid uitzetten in je gebruikersinstellingen. Je krijgt dan een eenvoudig upload-formulier. 62



Op dezelfde manier kunnen de naam van bestanden worden gewijzigd, bestanden worden gekopieerd, verwijderd etc. Je kunt van alles doen met de functies in de contextmenu's:

63


Verschillende Cases om te oefenen

Verschillende Cases om te oefenen Case 1: het tekst element Maak in TYPO3 een soortgelijke pagina als hieronder afgebeeld. Gebruik hiervoor de elementen die in TYPO3 beschikbaar zijn. Let op! : Het gaat om de content die in het midden van de pagina staat.

64



Case 2: links in een tekst element Maak in TYPO3 een soortgelijke pagina als hieronder afgebeeld. Gebruik hiervoor de elementen die in TYPO3 beschikbaar zijn. Let op! : Het gaat om de content die in het midden van de pagina staat.

65



Case 3: tekst met afbeelding Maak in TYPO3 een soortgelijke pagina als hieronder afgebeeld. Gebruik hiervoor de elementen die in TYPO3 beschikbaar zijn. Let op! : Het gaat om de content die in het midden van de pagina staat.

66



Case 4: de bestandslink Maak in TYPO3 een soortgelijke pagina als hieronder afgebeeld. Gebruik hiervoor de elementen die in TYPO3 beschikbaar zijn. Let op! : Het gaat om de content die in het midden van de pagina staat.

67



Case 5: een inhoudsopgave maken met het sitemap element Maak in TYPO3 een soortgelijke pagina als hieronder afgebeeld. Gebruik hiervoor de elementen die in TYPO3 beschikbaar zijn. Let op! : Het gaat om de content die in het midden van de pagina staat.

68


Nawoord

Nawoord Ben je na het volgen van deze training geïnteresseerd in andere trainingen in TYPO3, ga dan verder met de twee andere beschikbare trainingen: TYPO3 Training voor Webmasters en TYPO3 Training voor Ontwikkelaars.

Vragen? Neem dan contact op via mijn e-mail adres [email protected] of op het telefoonnummer (078) 635 1200.

Meer informatie is te vinden op www.itrainer.nl en www.typo3academy.nl.

Hartelijk dank voor het volgen van deze training!

Ing. Hans A. Olthoff alterNET Internet B.V.

69

Training voor Redacteuren

Recommend Documents