Editie Handleiding Tiny MCE. Tiny MCE Uitgebreide handleiding Sanmax bvba Mieënbroekstraat Genk T E

Editie 2010

Handleiding Tiny MCE

Tiny MCE Uitgebreide handleiding Sanmax bvba Mieënbroekstraat 33 3600 Genk T 070.250.236 | E [email protected]

Sanmax Tiny MCE handleiding

Tiny MCE Inhoudsopgave Deel 1: Inleiding ....................................................................................................................................... 3 Deel 2: icoontjes met betekenis .............................................................................................................. 4 Opmaken van teksten ......................................................................................................................... 4 Uitlijnen van teksten ........................................................................................................................... 5 Icoontjes om sneller te werken ........................................................................................................... 6 Lijsten .................................................................................................................................................. 6 Tekstopmaak tricks.............................................................................................................................. 6 Sneltoetsen.......................................................................................................................................... 7 Links en afbeeldingen in teksten plaatsen. ......................................................................................... 8 Pop-up tab algemeen ...................................................................................................................... 8 Pop-up: een pop-up maken ............................................................................................................. 9 Gebeurtenissen ............................................................................................................................... 9 Geavanceerd.................................................................................................................................... 9 Naar PDF linken ............................................................................................................................ 10 Datum en tijd invoegen ..................................................................................................................... 12 Tekstopmaak kleuren ........................................................................................................................ 12 Invoegen van symbolen, media of lijnen........................................................................................... 12 Tabel invoegen en aanpassen ........................................................................................................... 13 Subscript en Superscript.................................................................................................................... 13 Lettertype en grootte ........................................................................................................................ 14 Extra toepassingen ............................................................................................................................ 15

2


Tiny MCE

Deel 1: Inleiding Dit is de handleiding over Tiny MCE. Dit is een what-you-see-is-what-you-get tekst editor. Door teksten via Tiny MCE in te geven zijn deze ook makkelijk op te maken. Je kan Tiny MCE vergelijken met een programma zoals Word. Tiny MCE schrijft eigenlijk jouw teksten automatisch in HTML. Daarom is het zo makkelijk om teksten op te maken. In deze handleiding gaan zowat alle puntjes aan bod komen die je in het SxCMS van Sanmax kan tegenkomen.

3


Tiny MCE

Deel 2: icoontjes met betekenis Ik ga alle symbooltjes opsommen met de betekenis ervan.

Opmaken van teksten Je kan teksten voornamelijk opmaken door het gebruik van onderstaande icoontjes. Dit is echter nog veel uitgebreider, maar dit zijn de voornaamste. De rest komt in een andere rubriek aan bod.  Html: Dit icoontje staat voor HTML code. Als je tekst hebt getypt en je klikt op dit icoontje dan komt er een pop-up met de HTML van de getypte tekst.  Bold: Met dit icoontje kan je woorden in het vet zetten. Dit doe je door eerst het icoontje aan te klikken en dan de tekst te typen of door een woord te selecteren en dan op het icoontje te klikken.  Italic: Dit icoontje zorgt er voor dat tekst schuin gedrukt is. Dit doe je door het icoontje aan te klikken en dan de tekst te typen of door de tekst te selecteren en dan op het icoontje te klikken.  Onderlijnen: Met dit icoontje kan je tekst onderlijnen. Dit doe je door de tekst eerst te typen, dan te selecteren en op het icoontje te klikken of door eerst op het icoontje te klikken en dan de tekst te typen.  Doorhalen: Tekst kan je ook doorhalen. Dit doe je door op dit icoontje te klikken. Je kan het op 2 manieren, eerst de tekst te typen, selecteren en dan op het icoontje klikken of eerst op het icoontje klikken en dan de tekst te typen.

4


Tiny MCE Uitlijnen van teksten Je kan teksten makkelijk uitlijnen door het gebruik van onderstaande icoontjes.  Links uitlijnen: Door op dit icoontje te klikken ga je een tekst links uitlijnen. Je kan tekst op verschillende manieren uitlijnen. Als je geen tekst selecteert en dan op het icoontje klikt, dan gaat hij enkel 1 paragraaf uitlijnen. Dit is de regel waar de cursor op dat moment in staat. Je kan ook meerdere paragrafen selecteren en ze dan uitlijnen of je kan ook eerst uitlijnen en dan je tekst typen.  Centreren: Door dit icoontje te gebruiken ga je tekst in het midden uitlijnen. De paragraaf wordt dan exact in het midden uitgelijnd. Je doet dit op dezelfde manier zoals in het bij “links uitlijnen” is vermeld.  Rechts uitlijnen: Dit icoontje zorgt ervoor dat je teksten rechts kan uitlijnen. Je doet dit op dezelfde manier zoals vermeld is bij “links uitlijnen”.  Uitvullen: Dit is een speciaal icoontje. Op deze manier ga je ervoor zorgen dat alle regels van een paragraaf dezelfde breedte hebben. Deze functie lijnt de teksten automatisch links uit. Je gebruikt deze functie best nadat je tekst hebt getypt door hem te selecteren en dan op het icoontje te klikken. Maar je kan natuurlijk ook eerst het icoontje aanklikken en dan je teksten typen.

5


Tiny MCE Icoontjes om sneller te werken Teksten typen kan veel tijd in beslag nemen. Daarom zijn er hiervoor enkele handige icoontjes.  Met dit icoontje zou je normaal kunnen knippen. Dit doe je door tekst te selecteren en dan op het icoontje te klikken. Dit werkt echter niet in firefox wel in IE, daarom kan je wel de tekst selecteren en de sneltoets Ctrl+X gebruiken in firefox.  Dit icoontje zou tekst moeten kopiëren, helaas werkt dit ook niet in firefox. Je kan wel altijd kopiëren door tekst te selecteren en dan de sneltoets Ctrl+C te gebruiken (in firefox).  Dit icoontje staat voor het plakken van de geknipt of gekopieerde tekst. Helaas werkt ook dit niet in firefox , maar je kan altijd plakken door de sneltoets Ctrl+V te gebruiken.  Dit icoontje staat voor het plakken als platte tekst. Als je voordat je tekst plakt (door Ctrl+v te gebruiken) dan plak je alle tekst als paragraaf.  Plakken uit word. Als je eerst teksten in Word hebt geschreven kan je deze altijd gebruiken. Dit doe je door op het icoontje te klikken. Dan verschijnt er een pop-up waar je de tekst kan plakken. Dan moet je enkel nog op invoegen klikken. Zo behoud je koppen en alinea’s in je teksten. Maar eigenlijk plak je best niets uit word, word behoud altijd wel iets van zijn eigen opmaak. Je plakt beter alles als platte tekst.

Lijsten Door de onderstaande icoontjes te gebruiken kan je lijsten creëren in je teksten.  Ongeordende lijst: Op deze manier lijst je bepaalde items op, zonder deze te nummeren. Je doet dit door eerst op het icoontje te klikken en dan het eerste item te typen. Om een 2de item aan te maken druk je 1x op “enter” om automatisch te stoppen met het gebruiken van opsommingtekens druk je 2x op “enter”.  geordende lijst: Dit is eigenlijk hetzelfde als het vorige icoontje maar in plaats van telkens een opsommingteken te krijgen krijg je nu een getalletje te beginnen met 1. Je gebruikt dit op dezelfde manier als beschreven is mij een ongeordende lijst.

Tekstopmaak tricks Je kan je teksten of bepaalde stukken van je tekst altijd extra opmaken door 1 van de volgende simpele toepassingen te gebruiken.  Met dit icoontje verklein je de inspring van teksten. Je doet dit door een stuk tekst te selecteren en dan op het icoontje te klikken. Let wel op: je kan dit enkel toepassen als de tekst al ingesprongen was.

6


Tiny MCE  Met dit icoontje vergroot je de inspring van teksten. Je doet dit door een stuk tekst te selecteren en dan op het icoontje te klikken. Zo kan je bv de eerste paragraaf van een tekst wat laten inspringen om deze meer in het oog te laten springen.  Citaat: Als je tekst wil laten opvallen kan je hem tussen haakjes zetten. Met deze functie springt de tekst een beetje in op een speciale manier.

Sneltoetsen Er zitten in Tiny MCE enkele sneltoetsen. 2 van hen zijn de volgende.  Als je een aanpassing hebt gedaan in je tekst en deze is niet goed dan kan je makkelijk een stapje terug gaan door op dit icoontje te klikken. Dit betekent een stapje terug gaan. Je kan dit meerdere keren doen, dus je kan ook enkele stappen terug gaan. Er bestaat ook een sneltoets voor, deze is Ctrl+Z.  Als je dan een stapje te ver bent terug gegaan kan je altijd gebruik maken van dit icoontje. Hiermee kan je terug een stapje voorruit gaan. Ook hier is een sneltoets voor, namelijk Ctrl+Y.

7


Tiny MCE Links en afbeeldingen in teksten plaatsen. Één van de nuttigere dingen om te weten als je met Tiny MCE werkt is hoe je links in teksten maakt of afbeeldingen toevoegt.  Door op dit symbooltje te klikken kan je woorden in een tekst linken aan pagina’s. Dit doe je door eerst tekst te selecteren en dan op het icoontje te klikken. Dan opent er zich een pop-up waar je enkele eigenschappen kan aanklikken. Je vult best enkel de algemene eigenschappen in. Pop-up tab algemeen In het eerste tabblad van de pop-up kan je de URL ingeven, dit is de pagina waar je naar wil linken. Dit kan een interne link zijn of een externe link. Een externe link is bv http://www.google.be anderzijds is een interne link iets als /nl/producten/lijst, om je het makkelijk te maken kan je best als je intern wil linken klikken op “selecteer een interne pagina”, dan moet je gewoon op die link klikken. Het vakje Ankers kan enkel gebruikt worden indien je ankerpunten gebruikt hebt in je tekst. Mocht je dit gebruiken dan kan je binnen een zelfde tekst linken naar dat anker en dan spring je daar dadelijk naar toe. Het doel is eigenlijk afhankelijk van wat je gebruikt. Voor een interne pagina gebruik je best “In dit venster / frame openen”, voor een externe pagina gebruik je best “(target _blank)”. De titel zie je als je met je muis over de link gaat. Je kan hier bv enkele belangrijke keywords in plaatsen. Klasse laat je best op standaard staan.

8


Tiny MCE Pop-up: een pop-up maken Deze eigenschap gebruik je best zo min mogelijk. Je kan hier wel vele dingen mee doen, zoals een foto uploaden en wanneer men dan op de link klikt verschijnt de foto in een ander venster. Maar deze methode is niet gebruiksvriendelijk voor de gebruiker, vandaar dat ik hem afraad om te gebruiken. Deze toepassing uitleggen is daarom ook heel moeilijk omdat je er oneindig veel kanten mee uit kan. Gebeurtenissen Deze toepassing kan je alleen gebruiken als je kan programmeren met javascript. En zelfs dan is dit een toepassing in Tiny MCE die zeer complex is en slecht werkt, het gebruik van dit soort zaken komt nog zelden voor en is onvriendelijk voor zoekrobots. Waardoor je minder goed kan scoren in google. Geavanceerd Deze opties zijn niet van toepassing voor gewoon links te leggen. Je vult hier ook best niets in voor het beste resultaat te behouden.

Als je klaar bent met je link in te stellen klik je op de knop “Invoegen”.

9


Tiny MCE

Naar PDF linken Je kan ook naar PDF bestanden linken. Hoe je moet linken lees je ook hier boven, dit is een uitbreiding hierop. Je geeft de URL in van het PDF bestand (die ergens op het internet staat) of je klikt op het symbool

Dat achter URL staat. Daarna opent er zich een pop-up waar je eerst een PDF moet uploaden.

Hier druk je eerst op “upload” en doorloopt de stapjes om de PDF te uploaden, nadien dubbelklik je op de PDF. Je hebt nu een link naar een PDF, je stelt ook best in op target _blank. Als je klaar bent met je link in te stellen klik je op de knop “Invoegen”.

 Als je een link wilt verwijderen selecteer je de tekst en klik je op dit icoontje. De link is dan verwijdert.  Een ankerpunt, dit maak je door een woord te selecteren en dan op het icoontje te klikken. Je kan nadien dan een link op dezelfde pagina leggen naar dit ankerpunt. Ankerpunten worden de laatste jaren wel minder en minder gebruikt.

10


Tiny MCE  Afbeeldingen in tekst invoegen. Dit is met Tiny MCE allemaal mogelijk. Als je cursor ergens in de tekst of na de tekst staat kan je klikken op dit icoontje om een afbeelding toe te voegen. Als je dat hebt gedaan opent er zich weer een pop-up waar je enkele instellingen moet doen. Je moet het bestand kiezen dat je wil invoegen, dat doe je door recht op het icoontje te klikken achter “Bestand/URL” . Er opent zich een nieuwe pop-up waarin allemaal afbeeldingen staan die al op de server staan. Als je afbeelding er nog niet tussen staat klik je helemaal rechtsboven in de popup op “uploaden”. Nu kan je een bestand van op jouw computer uploaden naar de server en het nadien aanklikken in de lijst. Als je dit gedaan hebt kom je terug in het eerst pop-up venster. Hier geef je een beschrijving op. Doe dit! Dit is goed voor blinde mensen die op het internet surfen en ook voor zoekrobots, deze zijn immers ook blind (Zo weten zij ook over wat de afbeelding gaat). Dan kan je nog kiezen waar je de afbeelding wilt uitlijnen in de tekst . Ook kan je nog de afmetingen instellen van de afbeelding en je kan de afbeelding ook een rand geven. Denk er aan dat al deze afmetingen in Pixels zijn. Verticale en horizontale ruimte zijn velden waar je ook een getal in kan geven. Als je daar bv 50 ingeeft blijft de afbeelding altijd 50px van alle andere objecten af (Zoals tekst of de rand). Nadien moet je enkel nog op “Invoegen” klikken en de afbeelding is toegevoegd.

 Als je een afbeelding hebt toegevoegd kan je best ook eens op dit icoontje klikken, dan ruimt Tiny MCE automatisch de HTML code een beetje op, zodat alles mooi van structuur blijft.

11


Tiny MCE Datum en tijd invoegen Soms is het handig als je bovenaan of onderaan in de tekst de datum of tijd invoegt van het moment waarop je de teksten schrijft. Hiervoor zitten in Tiny MCe 2 handige functies.  Door op dit icoontje te klikken voeg je de datum van vandaag in, dit gebeurt op de plaats waar je cursor op dat moment staat.  Door op dit icoontje te klikken voeg je de tijd in, dit gebeurt op de plaats waar je cursor op dat moment staat.

Tekstopmaak kleuren Je kan je tekst verschillende kleuren geven. Maak hier niet te veel gebruik van, anders gaan je teksten op een circus lijken.  Als je hier op klikt kan je een tekstkleur kiezen, je kan dit op 2 manieren. Eerst je tekst typen, deze dan selecteren en dan op het icoontje klikken om een kleur toe te kennen ofwel door eerst een kleur te kiezen en dan te typen.  Je kan bepaalde stukken van tekst ook markeren, dit geeft aan dat dit belangrijke stukken zijn. Markeringen vallen op in teksten maar worden minder en minder gebruikt. Markeringen aanbrengen doe je door stukken tekst te selecteren en dan op het icoontje te klikken. Dan kan je ook nog de gewenste kleur kiezen.

Invoegen van symbolen, media of lijnen Buiten afbeeldingen kan je ook symbolen of filmpjes en lijnen toevoegen.  Door op dit icoontje te klikken kan je een symbool invoegen. Je krijgt een pop-up waar alle beschikbare symbolen instaan. Je kiest er eentje uit de lijst , deze komt dan automatisch te staan op de plaats waar je cursor stond.  Door op dit icoontje te klikken ga je een lijn invoegen, je krijgt een pop-up waar je enkele instellingen moet invullen zoals hoe lang de lijn moet zijn en hoe hoog. Nadien klik je enkel op toevoegen en de lijn komt automatisch in de tekst op de plaats waar je cursor stond.  Invoegen van media, onder media verstaan wij filmpjes of kleine flashanimaties. Het invoegen van media gaat ongeveer op dezelfde manier als bij afbeeldingen, alleen zijn de mogelijkheden hier is minder uitgebreid. Als je op het icoontje klikt gaat er weer een pop-up open waar je gegevens moet invullen, eerst kies je het type van media dat je wil gaan toevoegen (Bv: een swf bestand  flash). Je kan een bestand niet uploaden met de uploader die tevoorschijn komt als je op “upload” klikt, je kan wel via een externe FTP-controller een bestand uploaden naar de server. Maar wat misschien nog beter is, is dat je filmpjes van Youtube kan importeren door de link van het youtube bestand er in te plakken bv: http://www.youtube.com/v/Rz1yHmUW05Y&hl=nl_NL&fs=1

12


Tiny MCE Verder kan je ook nog de afmetingen aanpassen en onder het tabblad “geavanceerd” kan je het ook nog uitlijnen. Verder moet je enkel nog op bijwerken klikken.

Tabel invoegen en aanpassen Ook kan je in teksten tabellen invoegen en bewerken. Dit is ongeveer zoals het in word ook is.  Als je op dit icoontje klikt kan je een tabel invoegen op de plaats waar je cursor in de tekst staat. Je kan verschillende eigenschappen instellen zoals hoeveel kolommen je wil en welke achtergrondkleur deze moeten hebben. Nadien kan je met de andere icoontjes de tabel nog steeds bewerken door in de tekst op de tabel te klikken. Je kan elke cel of elke rij in een tabel aanpassen. Dit kan je allemaal met de onderstaande items die allemaal beschikbaar zijn als je een bestaande tabel aanklikt. De betekenis van deze knopjes wijzen hun eigen uit aan de hand van de uitleg die ze zelf geven als je er met je cursor gaat opstaan.

Ik leg bewust deze icoontjes niet uit, omdat je hier alle kanten mee uitkan. Om het juiste resultaat hiermee te bekomen zal je toch wat moeten spelen met deze icoontjes… Het enige wat misschien handig om te weten is, is dat je door het 2de icoontje van links te gebruiken oneven en even rijen een andere kleur kan geven. En met de uiterst rechtse icoontjes kan je rijen en cellen samenvoegen. Selecteer dan best even deze cellen en klik dan op het icoontje.

Subscript en Superscript Dit zijn 2 termen die je waarschijnlijk onbekend klinken. Maar je komt ze wel vaak tegen.  Subscript: door dit icoontje te gebruiken zet je een woordje of een stukje tekst iets lager dan normaal. Bv Dit is subscript. Zoals je kan zien is het woordje subscript wat lager geplaatst. Je kan dit doen door het woord te selecteren en dan op het icoontje te klikken.  Superscript: Dit is het omgekeerde van Subscript, je gebruikt het op dezelfde manier maar je woord komt iets hoger te staan. Bv: Dit is superscript.

13


Tiny MCE Lettertype en grootte Het belangrijkste onderdeel van de Tiny MCE is dit puntje. Het kiezen van een lettertype en de lettergrootte en kleur. Je hebt in de editor een hele balk met functies.

De belangrijkste eigenschappen hiervan zijn Alinea ( of opmaak), lettertype en tekengrootte. Aline of opmaak: Hier heb je de mogelijkheid om te kiezen of een regel een titel, tussentitel of gewoon een alinea is. Wat doet Tiny MCE? Als je voor een kop 1 kiest, dan plaatst hij de tekst tussen
, zo geeft hij aan dat dit een kop is. Voor een alinea is dit tussen de tags
. Als admin zie jij dit niet rechtstreeks maar wel als je op het HTML-icoontje klikt. Als je titels en tussentitels geeft, denk dan even aan het SEO gedeelte van in de handleiding “SxCMS”. Letterype: Probeer voor je website 1 lettertype te kiezen, maak er ook de gewoonte van om dit telkens opnieuw te gebruiken. In de teksteditor heb je de mogelijkheid om te kiezen uit verschillende lettertypes, je kiest er daar eentje uit dat je wil gebruiken. Tip: Veel gebruikte lettertypes zijn: Arial, Verdana, Helvetica, Trebuchet, Times new roman. Absolute afraders zijn: Comic Sans MS, webdings, wingdings. Tekengrootte: Het is logisch dat je koppen groter zijn dan je alinea. Je kan het formaat zelf bepalen maar ik geef je alvast een richtlijn mee. Probeer logisch na te denken: je kop 1 moet groter zijn dan je alinea’s. Probeer je kop 1 dus bv een grootte mee te geven van 14 of 16pt. Je andere koppen mogen even groot zijn of kleiner. Voor tekst gebruik je best een grootte van 10 of 12pt. Dan heb je het beste resultaat.

14


Tiny MCE Extra toepassingen Er zitten ook nog wat extra (weinig gebruikte) toepassingen in Tiny MCE. Hieronder volgt over deze zaken een korte samenvatting.  Met dit icoontje kan je een citaat aan tekst toevoegen, als je tekst selecteert kan je op dit icoontje klikken. Dan komt er een pop-up. Je kan dan een titel meegeven. Als je dan met je muiscursor op de tekst gaat staan komt de titel te voorschijn en het woord of de zin is ook onderstreept.  Als je lange woorden gebruikt, maar je wil je tekst kort houden dan kan je een afkorting gebruiken. Maar als je het volledige woord wilt meegeven naar de gebruikers toe, dan moet je de afkorting selecteren en of dit icoontje klikken. Je moet enkel bij titel dan het volledige woord ingeven en opslaan. De gebruiker krijgt dan naast zijn muiscursor een vraagtekentje met het volledige woord als hij op de afkorting gaat staan.  Dit is hetzelfde als het vorige puntje maar dan voor synoniemen.  Als je een tekst aanpast en je wilt een stukje tekst doorstrepen kan je de tekst selecteren en daarna op dit icoontje klikken, de tekst wordt dan rood en is doorstreept.  Als je tekst hebt doorstreept dan kan je er ook op een propere en duidelijke manier een correctie naast zetten. Dit doe je door op dit icoontje te klikken en dan de verbetering te typen. Eerst krijg je ook wel een pop-up waar je de datum van de verbetering kan intypen enz… Dit is niet verplicht in te vullen.  Dit moet je niet bekijken, dit heeft geen betekenis.

15

Editie Handleiding Tiny MCE. Tiny MCE Uitgebreide handleiding Sanmax bvba Mieënbroekstraat Genk T E

Recommend Documents