Tekst en media
Teksten komen standaard op elke pagina voor. Hier zie je verschillende voorbeelden van opmaak en tekst mogelijkheden die op een pagina gebruikt kunnen worden. Hieronder zie je een aantal voorbeelden van de mogelijkheden van onze teksteditor. Gevolgd door een aantal instructies.
Stijl - koppen [H2]
Op een pagina maak je gebruik van een koppenstructuur. Dit is nodig voor onder andere digitale toegankelijkheid. Hierboven zie je een voorbeeld van een H2 kop deze is standaard voor een alinea. Hieronder zie je voorbeelden van kop 3 en 4. De titel van de pagina is altijd H1.
Kop 3 [H3]
Deze gebruik je als subkop binnen een alinea.
Kop 4 [H4]
Deze kun je gebruiken als een subkop binnen een H3 alinea valt.
Stijl - tekst
Hieronder zie je een aantal standaard tekst stijl voorbeelden.
Tekst met nadruk [strong]
Tekst gelezen met nadruk [em]
Een genummerde opsomming/ geordende lijst:
- een
- twee
- drie
Een ongenummerde opsomming/ ongeordende lijst:
- item
- item
- item
Een hyperlink naar een interne pagina instellen, hiermee link je naar interne content.
Een hyperlink naar een externe pagina instellen, hiermee link je naar externe content.
Stijl - Blockquote
Ik wist niet dat werken in de projectontwikkeling bij de gemeente zó leuk was.
Voornaam Achternaam - gebiedsmanager
Stijl - buttons / call to actions
Hier zie je voorbeelden van call to action (CTA) buttons.
Van boven naar beneden zie je de primaire, secundaire en gewone CTA button. Alle kleuren zijn mogelijk, maar let op, het contrast tussen de tekst en achtergrond moet minimaal 4.3. zijn. Via een hulpmiddel controleer je dit.
Instructie Tekst en Media
Nadat een webpagina is aangemaakt ga je deze vullen met elementen. Alle elementen hebben een eigen functie.
Het element "tekst en media" is de basis van iedere pagina. Je kunt op een pagina dit element afwisselen met andere elementen zoals cards, inhoudsopgaves, accordeons enz. Instructies hierover vind je op deze website onder Content elementen en Functionaliteiten. Dan zie je een voorbeeld en beschrijving ineen. Als een element niet beschreven is dan wordt deze niet gebruikt voor de website. (?)
We beschrijven de velden van boven naar onder en van links naar rechts. Als we het over een specifiek veld hebben gebruiken we een bullit. Velden die niet in deze instructie staan worden niet gebruikt.
Deze instructie werkt het beste als je deze op een ander tabblad naast Typ03 open zet. Heb je vragen over het gebruik van Typo3? Bespreek het met je collega's of neem contact op met de contentmanagers.
Tabblad algemeen
De velden onder "inhoudselement"
- Type; hier zie je in welk element je zit.
- Kolom; dit gebruik je alleen als .....
De velden onder "Koppen"
- Kop; hier vul je de titel van deze alinea;
- Type; hier kies je de opmaak van de titel. Dit is bijna altijd H2 omdat voorleessoftware gebruikt maakt van deze alinea titels. Als je geen kop nodig hebt kies je verborgen.
De velden onder "Tekst"
De tekst editor heeft een eigen instructie omdat deze op diverse pekken terugkomt. Zie de accordeons "Werken met de editor".
Tabblad Media
Dit gebruik je alleen je een afbeelding wilt toevoegen. Een afbeelding mag maximaal 1 MB zijn maar liever nog kleiner. We sturen onze website niet naar de drukker dus dat kan wel. Hoe het werkt lees je op de pagina afbeeldingen. (Nog maken met Marco)
Tabblad Weergave
Dit tabblad vul je als je een ...., accordeon, .... en .... wilt maken. Kijk voor de juiste instructie bij het betreffende element. Daar zie je of je hier iets moet wijzigen. Voor een normaal tekst en media element wijzig je hier niets.
Tabblad Taal
Als het gehele element in een andere taal geschreven is pas dan hier de taal aan. Als je alleen een zin in een andere taal zet regel je dat via de tekst-editor (taal instellen button).
Onder "Tekst" en boven de editor zie je een aantal buttons. Deze werkt net als Word. alleen bijzondere buttons leggen we uit.
- Stijl; Hier kies je tekstuitlijning. Dit gebruik je om van een link een CTA button te maken.
- Link invoegen; Er opent een nieuw scherm Link Browser. De uitleg vind je in de uitklapper hieronder.
- Intern link; Er opent een nieuw scherm Link Browser. De uitleg vind je in de uitklapper hieronder
Hier volgt een beschrijving van het scherm Link Browser dat verschijnt nadat je op "link invoegen/wijzigen" hebt geklikt, hiermee maak je diverse linkjes. Intern, extern en een link naar een mailaders.
Werkafspraak: Maak betekenisvolle teksten. Dus geen links als "klik hier" om subsidie aan te vragen maar "subsidie Amateurkunst aanvragen". Gebruik niet meer dan 60 tekens en gebruik als linktekst geen volledige webadressen die starten met https.
Soort doorverwijzing: (Gebruik de tabbladen, onderstaande opsomming zijn de verschillende tabbladen)
- Pagina; Hiermee kun je een interne link maken. Zoek de pagina waar je naar toe wilt doorverwijzen. Gebruik altijd deze boom, dan gaan de linkjes niet stuk als er iets veranderd.
- Bestand; Link hiermee naar een pdf of ander bestand. Let op als je het bestand nog niet hebt toegevoegd kun je die hier niet selecteren. Zet in de link ook welk formaat en hoe groot het document is. Bijv (pdf, xx kB of xx MB)
- Externe URL; Vul in het veld URL de volledige link in waar je naar wilt verwijzen
- E-mail; Vul in het veld Email het volledige emailadres waar je naar wilt verwijzen. Zodat duidelijk is dat het om mailen gaat.
- Het veld doel gebruik je eventueel om aan te geven dat de link in een nieuw venster geopend moet worden. Als je het leeg laat dan is standaard ingesteld openen in hetzelfde tabblad. Gebruikersonderzoek laat zien dat bezoekers dit het fijnst vinden.
Nog bedenken wat we hiermee willen. In de huidige instructie kwam ik dit nog tegen...
- Link (onder koppen); hiermee kun je de kop laten hyperlinken naar een andere pagina. Gebruiken we niet.
- Het veld 'titel' (bij het maken van linkjes in de link browser) gebruiken we NIET omdat:
• Het is bijna altijd dubbele informatie t.o.v. je linktekst
• Niet bruikbaar op touchscreens
• De tooltip (met de muis stilstaan op de link) is moeilijk te gebruiken voor mensen met minder goede digitale vaardigheden