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
