CKEditor handleiding

0
Inhoud
1.
Inleiding ............................................................................................ 2
2.
Algemeen .......................................................................................... 3
3.
Uitgebreide uitleg ................................................................................ 6
4.
3.1.
Bekijk HTML code ...................................................................... 6
3.2.
Knippen .................................................................................. 6
3.3.
Kopieren ................................................................................. 6
3.4.
Plakken .................................................................................. 6
3.5.
Spellingscontrole ....................................................................... 7
3.6.
Ongedaan maken / Opnieuw uitvoeren ............................................ 7
3.7.
Zoeken en Vervangen ................................................................. 7
3.8.
Alles selecteren ........................................................................ 9
3.9.
Opmaak verwijderen .................................................................. 9
3.10.
Afbeelding invoegen .................................................................. 9
3.11.
Flash object invoegen ............................................................... 11
3.12.
Tabel invoegen ........................................................................ 12
3.13.
Horizontale lijn invoegen ........................................................... 12
3.14.
Smiley invoegen....................................................................... 13
3.15.
Speciaal teken invoegen ............................................................ 13
3.16.
IFrame invoegen ...................................................................... 13
3.17.
Tekst vetdrukken / cursiveren / onderstrepen / doorhalen .................. 15
3.18.
Subscript / Superscript .............................................................. 15
3.19.
Nummering / Opsomming ........................................................... 15
3.20.
Inspringing verkleinen / vergroten ................................................ 15
3.21.
Citaatblok .............................................................................. 16
3.22.
Tekst links uitlijnen / centreren / rechts uitlijnen / uitvullen............... 16
3.23.
Links invoegen en verwijderen .................................................... 17
3.24.
Interne link ............................................................................ 20
3.25.
Invoegen 'teaser break' .............................................................. 21
3.26.
Opmaak van de tekst selecteren .................................................. 21
3.27.
Tekst- en achtergrondkleur ........................................................ 22
3.28.
Maximaliseren van de editor ....................................................... 23
3.29.
Toon blokken .......................................................................... 23
Een paar handige tips om mee af te sluiten ................................................ 24
1
Inleiding
Deze handleiding geeft uitleg over de HTML editor van uw website. Er zal een overzicht
gegeven worden van de verschillende knoppen om u wegwijs te maken met deze editor en
om ervoor te zorgen dat u het binnen een handomdraai beheerst.
Mocht u nog vragen hebben na het lezen van deze handleiding horen wij het graag. U kunt
dan contact met ons opnemen via de website, een email sturen naar [email protected]
of bellen naar 040-2180599.
2
1. Algemeen
De algemene lay-out van CKEditor ziet u hieronder. Het is een kader met daarbinnen een
tekstvak met allerlei icoontjes erboven. Deze icoontjes zult u (bijna) allemaal nodig
hebben bij het maken van een mooie online tekst. Op de volgende pagina vindt u een
overzicht van de betekenis van deze icoontjes. Allereerst, om verwarring te voorkomen,
stelt u de editor in op Full HTML om dezelfde weergave van icoontjes te hebben als in deze
handleiding. Dit doet u door onder de editor op de aangegeven knop te drukken. Dit
springt weer terug op 'Filtered HTML' iedere keer wanneer u de editor opnieuw opent.
Houd hier dus rekening mee.
3
Icoon
Uitleg
Bekijk HTML code
Knippen
Kopiëren
Plakken / Plakken zonder opmaak / Plakken uit Word
Spellingscontrole / Spellingscontrole tijdens typen
Ongedaan maken / Opnieuw uitvoeren
Zoeken
Vervangen
Alles selecteren
Opmaak verwijderen
Afbeelding invoegen
Flash object invoegen
Tabel toevoegen
Horizontale lijn invoegen
Smiley invoegen
Speciaal symbool toevoegen
IFrame invoegen
Vet / Cursief / Onderstrepen / Doorhalen
Subscript / Superscript
Nummering / Opsomming
Inspringing verkleinen / Inspringing vergroten
Citaatblok
Links uitlijnen / Gecentreerd / Rechts uitlijnen /
Uitgevuld
Schrijfrichting
4
Link invoegen / Link verwijderen
Interne link
Invoegen 'teaser break'
Opmaak selecteren (zelfde: lettertype, lettergrootte)
Tekstkleur / Achtergrondkleur
Maximaliseren van de editor
Toon blokken
5
2. Uitgebreide uitleg
2.1. Bekijk HTML code
Met deze knop kunt u wisselen tussen de 'what you see is what you get' modus en
de HTML modus. Deze HTML modus hoeft u waarschijnlijk zelf niet te gebruiken
omdat het een modus is voor ervaren gebruikers met kennis van HTML en CSS.
2.2. Knippen
Wanneer u een stuk tekst geselecteerd hebt en op dit schaartje klikt, dan knipt u
als het ware de tekst tussen de rest uit. Dit kun u overigens ook met de sneltoets
Ctrl+x doen.
2.3. Kopiëren
Naast knippen (waarbij de geselecteerde tekst helemaal verdwijnt) kunt u de
tekst ook kopiëren. Hierbij blijft de originele tekst staan maar wordt er een
duplicaat gemaakt dat u ergens anders ook neer kunt zetten (plakken). Voor het
kopiëren bestaat eveneens een sneltoets, namelijk Ctrl+c.
2.4. Plakken
Voor het plakken zijn er meerdere knopjes. Wanneer u namelijk tekst vanuit een
andere tekstverwerker (zoals Microsoft Word) wil plakken, kunt u kiezen om die
opmaak te behouden of de tekst als 'platte tekst', dus zonder opmaak, te plakken.
De derde optie die zichtbaar is, is het plakken van tekst vanuit Microsoft Word.
Het is echter niet aan te raden om tekst
met een al bestaande opmaak te
kopiëren en die opmaak te behouden
in de teksteditor van uw website. De
kans is dan groot dat er woorden
verspringen en/of dat de opmaak
verschilt met de rest van de tekst. Om
dit te voorkomen kunt u dus altijd het
beste
'platte
tekst'
gebruiken.
Wanneer u op een van deze drie
knoppen drukt komt er een klein
venster naar voren waar u de tekst in
plakt
door
middel
van
de
toetscombinatie Ctrl+v of door op de
rechtermuisknop te klikken en te
klikken op 'plakken'.
6
2.5. Spellingscontrole
Met het linkerknopje kunt u uw tekst laten controleren wanneer deze al
geschreven is (zie afbeelding) Met het rechterknopje kunt u bij laten houden of u
fouten maakt terwijl u typt. Onder een fout geschreven woord zal dan een rood
lijntje verschijnen.
2.6. Ongedaan maken / Opnieuw uitvoeren
Als u iets getypt of verwijderd heeft, of een opmaak veranderd heeft en deze toch
weer wilt wijzigen, kunt u op het pijltje naar links klikken. Deze zal uw laatste
handeling ongedaan maken. Met het rechterpijltje kunt u een ongedaan gemaakte
actie weer opnieuw laten uitvoeren.
2.7. Zoeken en Vervangen
Als u wilt zoeken op een bepaalde term in uw tekst, kunt u dit eenvoudig doen
door op de zoekknop te drukken en het betreffende woord of zinsdeel in te voeren.
Er verschijnt een venster (zie afbeelding), waar u niet alleen een woord kunt
zoeken, maar dit ook direct kunt laten vervangen door een ander woord. Wanneer
7
u bijvoorbeeld overal in een tekst een woord met een hoofdletter schrijft kunt u
dit met één druk op de knop aanpassen. In de afbeelding ziet u ook dat er twee
tabbladen staan, dus ze hadden hier net zo goed één knop van kunnen maken in
plaats van twee; u kunt via de tabbladen eenvoudig schakelen tussen de twee
functies.
8
2.8. Alles selecteren
Met deze knop kunt u alle tekst tegelijk selecteren. Dit is vooral handig bij een
hele lange tekst die u niet zo gemakkelijk met de muis kunt selecteren.
2.9. Opmaak verwijderen
Zoals bij 'plakken' ook omschreven is kan het zijn dat u tekst gekopieerd heeft en
dat deze niet dezelfde opmaak heeft als de rest van de tekst. Het kan dan
makkelijk zijn om alle opmaak van de tekst te wissen. Dat doet u met deze knop.
2.10. Afbeelding invoegen
Wanneer u een afbeelding op uw website wilt plaatsen kunt u gebruik maken van
deze functionaliteit. Omdat dit toch wel even aandacht vergt, laten we u dit stap
voor stap zien. Zorg dat uw editor op 'Full HTML' staat omdat u anders geen
afbeeldingen vanaf uw computer in kunt voegen. Wanneer u nu op de knop
'Afbeelding invoegen' klikt, krijgt u het volgende venster te zien.
9
Er zijn twee manieren om een afbeelding toe te voegen ofwel twee “bronnen” voor
een afbeelding:
1. U gebruikt een afbeelding met al een bestaand webadres ofwel URL. Vul dan
deze URL in, in het daarvoor bestemde vakje (kopieer de link uit de balk
bovenin uw internetpagina met Ctrl+c of via het menu wanneer u op de
rechtermuisknop drukt en plak deze in de balk door of Ctrl+v of weer via de
rechtermuisknop).
2. U gebruikt een afbeelding vanuit een eigen bestand, uit de “bibliotheek”. In
de meeste gevallen wilt u echter een afbeelding vanuit uw eigen bestanden
uploaden dus zal het nodig zijn de volgende stappen te volgen. Klik op
'Bladeren op server'.
Nu opent zich een scherm (een soort bibliotheek) waar al uw geüploade
afbeeldingen te zien zijn. U kunt ook een afbeelding gebruiken die reeds in deze
bibliotheek staat door deze aan te klikken en op 'Bestand toevoegen' (4) te
klikken.
10
Nu verder met de uitleg voor het uploaden:
1. Druk allereerst op de knop 'Uploaden'. Er verschijnt nu een nieuw
venstertje (zie afbeelding).
2. Druk op 'Bestand kiezen' en selecteer in een map op uw computer de juiste
afbeelding
3. Druk wederom op 'Uploaden'. Uw afbeelding komt nu in de 'bibliotheek' te
staan.
4. Klik op 'Bestand toevoegen' om de afbeelding daadwerkelijk aan uw
website toe te voegen.
U komt weer op het startscherm terecht en de afbeelding is zichtbaar. Als deze te
groot is kunt u de verhoudingen aanpassen door de getallen te veranderen bij
'Breedte' en 'Hoogte'. U kunt hiermee spelen en kijken of u het juiste formaat
gekozen heeft door op 'OK' te drukken. U kunt het nog altijd aanpassen door een
rechter muisklik op de afbeelding en dan de optie 'Eigenschappen afbeelding' aan
te klikken. Het kleine blauwe slotje naast het voorbeeld kunt u gebruiken om de
hoogte-breedte verhouding van de afbeelding vast te zetten. Is het slotje “dicht”
dan blijft die verhouding dezelfde, ook al maakt u de afbeelding kleiner. Is het
slotje “open” dan kunt u bijvoorbeeld alleen de hoogte of breedte aanpassen. De
afbeelding wordt dan smaller/breder/hoger/lager dan het origineel.
2.11. Flash object invoegen
Hiermee kunt u een animatie, oftewel een 'Flash object' invoegen. Dit kan
bijvoorbeeld een bewegende afbeelding of video zijn. Het venster lijkt op het
venster dat u ziet wanneer u een afbeelding in wil voegen. U komt weer in de
bibliotheek terecht en volgt dezelfde stappen als voor het invoegen van een
afbeelding (zie 3.10).
11
2.12. Tabel invoegen
Voor het invoegen van een tabel kunt u deze optie gebruiken. Het invoegen van
een tabel wijst voor zich: u voert het aantal gewenste rijen en kolommen in en de
tabel is klaar. U kunt bij 'Naam' een titel toevoegen voor uw tabel; deze zal boven
uw tabel verschijnen. De breedte en hoogte van de tabel kunt u ingeven als aantal
“pixels” (aantal puntjes op het scherm, in onderstaand voorbeeld “500”) of als
percentage van de grootte van de pagina waar de tabel getoond moet worden.
Kiest u bijvoorbeeld voor “90%”, dan zal de tabel iets kleiner zijn dan de breedte
van die pagina (die 100% is).
2.13. Horizontale lijn invoegen
Wanneer u een tekst visueel wilt scheiden in twee aparte delen, kunt u dit doen
door een lijn tussen de twee delen in te voegen. Dit kan met deze knop.
12
2.14. Smiley invoegen
Met deze optie kunt u een van de volgende smileys toevoegen aan uw bericht:
2.15. Speciaal teken invoegen
Soms kan het nodig zijn om een teken in te voegen, dat zich niet op uw
toetsenbord bevindt (of waarvan u de sneltoetsen niet kent). U kunt met deze
knop kiezen uit een aantal tekens (zie afbeelding).
2.16. IFrame invoegen
Een IFrame is een soort minipagina in een pagina. Dit kan bijvoorbeeld een filmpje
van YouTube zijn of een Google Maps kader. De inhoud van dit IFrame komt dus
van een andere webpagina, een andere URL. Omdat juist deze inhoud zou kunnen
veranderen, gebruiken we vaak deze IFrame oplossing. De tekst eromheen
13
verandert meestal niet, de inhoud van het IFrame zou door de aanbieder kunnen
veranderen. Hieronder is een voorbeeld van een IFrame weergegeven: een Google
Maps kader op de contactpagina van Getting Social.
Omdat het IFrame een pagina in een pagina is, moet er een URL ingevuld worden.
Dit doet u door de URL van de betreffende pagina te kopiëren in uw webbrowser
en te plakken in de URL-regel. Ook hier kunt u de hoogte en breedte van het
IFrame zelf aanpassen.
14
2.17. Tekst vetdrukken / cursiveren / onderstrepen / doorhalen
Om tekst te benadrukken kunt u gebruik maken van deze functies. Het hoeft
overigens niet met deze knoppen, u kunt het ook doen met knoppen op het
toetsenbord net als in de tekstverwerker Microsoft Word. Met Ctrl+b maakt u een
tekst vet (bold), met Ctrl+i kunt u de tekst schuindrukken (italics) en met Ctrl+u
kunt u het woord onderstrepen (underlined). Daarnaast kunt u een woord of zin
ook doorstrepen. Dit doet u met de laatste knop.
2.18. Subscript / Superscript
Het komt wel eens voor dat u een bepaald teken zoals m2, km3, 1e of 2e, nodig
hebt in uw tekst. Hier kunt u deze knoppen voor gebruiken. U drukt op de knop
voordat u het super- of subscript toevoegt en om weer 'gewoon' te typen drukt u
nogmaals op dezelfde knop.
2.19. Nummering / opsomming
Deze opties kunt u gebruiken voor het maken van genummerde rijtjes en
opsommingen. Het tekentje (opsommingsteken of nummer) kunt u aanpassen door
met een rechtermuisklik op het teken te klikken en te klikken op 'Eigenschappen'.
2.20. Inspringing verkleinen / vergroten
Wat u in bijvoorbeeld Microsoft Word doet met de 'tab'-knop op uw toetsenbord,
doet u nu met deze knop omdat de toetsenbord-tab niet werkt in CKEditor.
15
2.21. Citaatblok
Hiermee kunt u een stuk tekst uitlichten, zoals een citaat of een soort
samenvatting van uw tekst geven. Selecteer een stuk getypte tekst en klik op de
citaat-knop. U zult nu zien dat uw tekst inspringt. In de typ-modus ziet u dus niet
het blok zelf maar alleen de tekst die erin staat. Wanneer u een voorbeeldweergave van de tekst maakt, ziet u hoe het blok eruit komt te zien.
2.22. Tekst links uitlijnen / centreren / rechts uitlijnen / uitvullen
U kunt uw tekst vormgeven door uw tekst op verschillende manieren uit te lijnen.
Hieronder een voorbeeld van de mogelijkheden:
16
2.23. Links invoegen en verwijderen
In een webpagina is het handig om door te linken naar andere pagina's binnen of
buiten uw website. Dit kan een URL betreffen, een e-maillink of een link naar een
bestand op de server. Met de URL kun je een woord of zinsdeel linken aan een
webpagina. De link naar de pagina wordt als het ware verborgen achter het
geselecteerde woord en het woord wordt klikbaar.
Er verschijnt een venstertje waar u de link in kunt voeren om zo naar de betreffende
pagina te linken.
17
U kunt bij het tabblad 'Doelvenster' bepalen hoe de pagina geopend gaat worden
wanneer er op de link wordt geklikt. Een overzichtje van de mogelijkheden vindt u
hieronder. U kunt een nieuw venster tevoorschijn laten komen omdat anders de
originele pagina waar de lezer zich bevond, verdwijnt en alleen de nieuwe pagina
geopend wordt. Bij andere gevallen waarbij de beginpagina niet meer nodig is, kan het
weer handig zijn om de pagina in hetzelfde venster te openen.
Bij het tabblad 'Geavanceerd' kunt u ook nog een titel invoeren van de pagina zodat
mensen, wanneer ze met hun cursor over het gelinkte woord of zinsdeel bewegen, al
een idee hebben van wat eronder zou zitten. In het onderstaande voorbeeld ziet u
eenmaal een link zonder ingevoerde titel (bovenste zin) en eenmaal met ingevoerde
titel (onderste regel).
18
U kunt ook linken naar een e-mailadres. Dan moet u in het venster in het menu waar
URL staat, naar 'E-mail'. U vult het betreffende e-mailadres in en uw link is klaar. Zodra
een gebruiker op het gelinkte woord klikt, wordt het emailprogramma geopend en
staat een nieuw mailbericht klaar om ingevuld te worden.
Wanneer u een link naar een bestand wil aanbieden aan uw lezer, kun u dit doen door
in het reeds gebruikte venster te klikken op 'bladeren op server'. U krijgt dan, net als
wanneer u een afbeelding vanuit uw eigen bestanden toe wilt voegen, een pop-up
venster van een 'bibliotheek' te zien.
19
Voor het gemak is hier nogmaals een overzicht van de stappen die u moet doorlopen
voor het uploaden van een afbeelding en/of bestand. Het is een vergrootte uitsnede
van het onderste deel van bovenstaande afbeelding.
2.24. Interne link
Wanneer u een langere tekst plaatst kan het handig zijn om binnen de tekst naar
verschillende referentiepunten te linken. U plaatst uw cursor vóór het te linken
woord en u klikt op het vlaggetje (icoontje voor interne link). Hier voert u een
naam in voor de interne link. Als u bijvoorbeeld wilt switchen tussen hoofdstukken
of secties in een verhaal, geeft u dit bijvoorbeeld de naam 'Hoofdstuk 1'.
Wanneer u hiernaar wil linken klikt u weer op het icoontje voor link
invoegen/wijzigen. Hier selecteert u in het venstertje van linktype 'Interne link in
pagina' en kiest u het punt dat u gemarkeerd heeft met het vlaggetje.
20
2.25. Invoegen 'teaser break'
Met een teaser break kunt een stuk tekst op een webpagina op een zelf te kiezen
plek “breken”. Hiermee kunt u met het eerste deel van de tekst uw lezers
nieuwsgierig maken waarna ze d.m.v. de teaser break kunnen klikken op het
vervolg van de tekst. Het eerste deel is dus zichtbaar, het tweede deel van de
tekst pas na doorklikken; bijvoorbeeld “lees meer hierover…”. Dit is bijvoorbeeld
voor een blogpost erg leuk omdat te de lezer prikkelt om verder te klikken. Ook
voor langere stukken tekst op een webpagina kan de teaser break interessant zijn;
hiermee maak je het eerste deel wat korter en kan de lezer verder lezen door op
de link te klikken.
2.26. Opmaak van de tekst selecteren
Om de tekst in de gewenste stijl te zetten kunt u gebruik maken van deze knop. U
kunt kiezen tussen verschillende koppen en stijlen, en met de twee knoppen
ernaast kunt u het lettertype en de lettergrootte aanpassen. Door het aangeven
van koppen in een editor bepaalt u het belang van de tekst. Dit is voor
zoekmachineoptimalisatie (SEO) belangrijk. Google ziet Kop1 (H1) als belangrijker
dan Kop2 (H2), Kop 2 belangrijker dan Kop 3 (H3), enzovoorts.
21
2.27. Tekst- en achtergrondkleur
Indien u uw tekst een kleur wilt geven, kunt u dat met deze knop doen. Hier kunt
u uit een geselecteerd aantal kleuren kiezen maar u kunt ook klikken op 'Meer
kleuren' om uit een groter palet te kiezen. Mocht u een specifieke kleur zoeken
kunt u ook op kleurcode zoeken. Voor deze codes kunt u een website als
http://HTML-color-codes.info/ bezoeken of gewoon even Googlen op 'kleurcodes
HTML'.
22
2.28. Maximaliseren van de editor
Mocht u het fijner vinden om in een groter vak te kunnen typen om zo meer
overzicht te hebben kunt u deze knop gebruiken. De editor wordt dan
weergegeven als een volledige webpagina zoals u hieronder kunt zien. Om de
editor weer te verkleinen drukt u nogmaals op dezelfde knop (dus niet op het
kruisje rechts bovenin de hoek want dan is uw verhaal weg!).
2.29. Toon blokken
Soms is het lastig om te zien hoeveel ruimte er tussen de alinea's of zinnen staat.
U ziet dit pas echt goed wanneer u het stuk tekst op de website plaatst. U kunt dit
altijd achteraf aanpassen maar om alvast te kunnen zien wat de afstand is tussen
uw teksten kunt u deze knop gebruiken. De blokken die in de afbeelding getoond
worden zijn 'virtueel'; ze verschijnen alleen in de editor en niet in de geplaatste
tekst.
23
3. Een paar handige tips om mee af te sluiten
Na een uitleg van de knoppen hebben wij ook nog een aantal tips voor het gebruiken van
de editor.

Het is verstandig om uw tekst tussendoor op te slaan om te voorkomen dat er iets
misgaat en uw tekst verloren gaat. Computers blijven namelijk altijd nét op verkeerde
momenten hangen. U kunt uw tekst opslaan zonder deze al te publiceren. Dus ook als
u nog iemand anders naar uw tekst wil laten kijken kan dit zonder dat de tekst al
online staat.

Kolommen maken gaat met deze editor niet zoals bijvoorbeeld in Microsoft Word. U
kunt wel een tabel invoegen om zo tabellen te creëren. U zet dan gewoon de breedte
van de rand op 0 zodat deze onzichtbaar zijn. U creëert op deze manier kolommen op
een eenvoudige manier.

Voor het invoegen van tabellen en afbeeldingen is het goed om te weten dat het lastig
is om voor of na een tabel of afbeelding nog tekst te typen. U kunt de cursor vaak
namelijk niet meer na de afbeelding of tabel plaatsen. Wanneer u dus eerst een stukje
tekst typt en daarna tussen uw getypte alinea's de afbeelding of tabel plaats, kunt u
hierna gewoon verder typen.
24

Download Report