2011. Handleiding WYSIWYG HTML editor: CKEditor

Handleiding

WYSIWYG HTML editor: CKEditor

Opdrachtgever: Avpec1910 Auteur: Avalon Systems Versie: 1.0 Datum: 12/01/2011

Handleiding WYSIWYG editor: CKEditor - Avalon Systems

Inhoud 1

Inleiding ............................................................................................................... 3

2

WYSIWYG editor ................................................................................................. 4 2.1

Iconen toegelicht............................................................................................ 5

2.2

Maximaliseren................................................................................................ 6

2.3

HTML Code ................................................................................................... 6

2.4

Plakken .......................................................................................................... 6

2.5

Zoeken & Vervangen ..................................................................................... 7

2.6

Opmaak ......................................................................................................... 8

2.7

Links .............................................................................................................. 9

2.7.1

URL link................................................................................................... 9

2.7.2

E-mail link.............................................................................................. 13

2.7.3

Bestand link........................................................................................... 15

2.7.4

Link verwijderen .................................................................................... 17

2.8

Afbeeldingen ................................................................................................ 18

2.9

Tabellen ....................................................................................................... 22

2.10

Stijlen ........................................................................................................ 23

2.11

Overige tips .............................................................................................. 24

2


1 Inleiding Deze handleiding geeft uitleg over het gebruik van de html editor welke is geïntegreerd in het het web administratie systeem behorend bij uw website: http://www.avpec1910.nl Mocht u na het lezen van deze handleiding nog vragen hebben, dan kunt u altijd contact met ons opnemen.

3


2 WYSIWYG editor Om de inhoud van uw webpagina’s te bewerken wordt gebruik gemaakt van een zogenaamde WYSIWYG (What You See Is What You Get) editor. Deze editor zorgt ervoor dat u content op een gebruikersvriendelijke manier kunt aanmaken zoals u dit bijvoorbeeld ook in MS Word doet. Uiteindelijk wordt de benodigde HTML (Hyper Text Markup Language) gegenereerd die nodig is voor een website, zonder dat u hier verstand van dient te hebben. De editor die hier gebruikt wordt is maakt deel uit van een open-source project genaamd CK Editor. Deze software is vanwege het open-source karakter voor iedereen vrij te gebruiken en de broncode hiervan dient bovendien ook altijd meegeleverd te worden aan derden indien het onderdeel uitmaakt van andere software. Alle bestanden die u vrij mag gebruiken en die onder de open-source licentie (specifiek een combinatie van GPL, GNU en MPL licenties) vallen bevinden zich binnen de map ”ckeditor” in binnen de directory “include” (het volledige pad voor uw website is www.avpec1910.nl/include/ckeditor). De broncode van CK Editor is terug te vinden in uw website bestanden en is bovendien ook apart overgedragen bij de oplevering van uw website. Mocht u echter graag nog een kopie ontvangen dan kunt u dit altijd melden door een e-mail te sturen aan [email protected].

Afbeelding 1 WYSIWYG editor

4


2.1 Iconen toegelicht In onderstaand overzicht wordt van alle functionaliteiten door middel van de corresponderende knop aangegeven wat ermee gedaan kan worden. Van enkele geavanceerdere functionaliteiten zoals het uploaden van afbeeldingen en het gebruiken van links wordt verderop in dit hoofdstuk in meer detail uitleg gegeven. Icoon

Uitleg Maximaliseren van de WYSIWYG editor Bekijk HTML code Ongedaan maken / Opnieuw uitvoeren Printen Plakken / Plakken zonder opmaak / Plakken uit Word Zoeken / Vervangen Alles selecteren Opmaak wissen Link toevoegen / Link verwijderen Afbeelding toevoegen Tabel toevoegen Horizontale lijn toevoegen Speciaal symbool toevoegen Vet / Cursief / Onderstrepen / Doorhalen / Subscript / Superscript Links uitlijnen / Gecentreerd / Rechts uitlijnen / Uitgevuld Nummering / Opsomming / Inspringing verkleinen / Inspringing vergroten Tekstkleur aanpassen / Markering aanpassen Opmaak kiezen Lettergrootte kiezen Speciale stijl kiezen Tabel 1 WYSIWYG iconen

5


2.2 Maximaliseren Wanneer u op de maximalisatie knop klikt dan wordt het gehele browser venster gereserveerd voor de editor. Klik hierop voor een beter overzicht van de pagina tekst. Indien u weer terug wilt keren naar de normale grootte van de editor dient u nogmaals op de maximalisatie knop te klikken.

2.3 HTML Code Met deze knop kan gewisseld worden tussen de WYSYWIG (What You See Is What You Get) mode voor normale gebruikers en HTML mode voor geavanceerde gebruikers. In HTML mode wordt de HTML code getoond die voor de opmaak zorgt en kan naar wens aangepast worden. Deze mode is alleen aan te raden voor geavanceerde gebruikers met kennis van HTML en CSS.

2.4 Plakken Plakken van klembord gegevens. De eerste knop is met behoud van opmaak en de tweede knop is zonder behoud van opmaak als platte tekst. De derde knop plakt klembord gegevens wanneer deze uit MS Word zijn geselecteerd en gekopieerd. De opmaak wordt hierdoor behouden en de MS HTML code wordt aangepast aan de editor. Let op: het wordt niet aangeraden om gegevens vanuit Word in de editor te plakken omdat dit onvoorspelbare resultaten kan opleveren. Plak de MS Word gegevens bij voorkeur als platte tekst en pas daarna de opmaak weer aan. Wanneer het opnieuw opmaken van de tekst echter geen optie is kan deze mogelijkheid worden uitgeprobeerd. Wanneer er op een van deze drie knoppen wordt geklikt, wordt onderstaand scherm getoond. Plak de gegevens met CTRL-V in het witte vlak en klik op OK om de tekst in de editor te plaatsen.

Afbeelding 2 Plakken

6


2.5 Zoeken & Vervangen Met de knoppen zoeken en vervangen kunt u woorden zoeken en/of vervangen. Klik op het corresponderende tabblad voor de gewilde actie. Onderstaand scherm is een voorbeeld van het zoekscherm.

Afbeelding 3 Zoeken & vervangen

7


2.6 Opmaak Bij opmaak kunt u kiezen uit een standaard aantal voorgedefinieerde opmaken zoals: Kop1, Kop2, etc. vergelijkbaar met de keuzelijst uit MS Word. Gebruik deze bijvoorbeeld om pagina titels op te maken. De opmaak 'normaal' geeft de standaard opmaak aan voor tekst in uw website.

Afbeelding 4 Opmaak

8


2.7 Links In uw webpagina kunt u ook links invoegen. Dit kunnen een aantal verschillende type links omvatten, te weten een URL (Unified Resource Locater) link, een e-mail link of een link naar een bestand op de server. De URL link is de meest voorkomende en verwijst naar een pagina op het Internet bijvoorbeeld http://www.avalon-systems.nl. De e-mail link zorgt ervoor dat de email client (b.v. Outlook) word opgestart met een aantal vooraf ingevulde parameters wanneer een bezoeker van de website hierop klikt. Zo kan bijvoorbeeld het “AAN” e-mailadres worden opgegeven, maar ook het onderwerp en de tekst van de e-mail. Een link naar een bestand op de server kunt u gebruiken om bezoekers een bestand ter download of inzage aan te bieden. NB.: De link die in de editor wordt getoond heeft een andere opmaak dan de standaard stijl voor links zoals deze in uw webpagina worden getoond. Op deze manier wordt een duidelijk onderscheid gemaakt tijdens het opmaken van de pagina tussen normale tekst en de links. Indien u uw pagina opslaat en vervolgens bekijkt in uw browser dan is de link wel aangepast aan de huisstijl.

2.7.1 URL link Stap1: Type de tekst 'Website Avalon Systems', zoals hieronder.

Afbeelding 5 Link toevoegen (1)

9


Stap 2: Selecteer de tekst en klik op link invoegen.


Stap 3: In het scherm dat verschijnt kies linktype URL en vul in URL veld 'www.avalonsystems.nl'


10


Stap 4: Ga naar het tabblad 'Doel'. Gebruik 'nieuw venster', zodat de gebruiker naar een nieuw venster gaat en de huidige pagina (waar de link op staat) ook open blijft. Er zijn meerdere opties, bv. Kies 'Hele venster' zodat de huidige pagina vervangen wordt door de pagina waar de link naartoe wijst.


Stap 5: Ga naar het tabblad 'geavanceerd' en vul bij 'Aanbevolen titel' de titel in voor de link. De website gebruiker ziet deze als hij met de muis over de link beweegt. Klik hierna op OK.


11


Stap 6: Het pop-up scherm verdwijnt en de link is geplaatst.


12


2.7.2 E-mail link Stap 1: Type eerst de tekst die naar de email gaat verwijzen.

Afbeelding 11 E-mail toevoegen (1)

Stap 2: Selecteer de tekst en klik op 'link invoegen'.

Afbeelding 12 Email toevoegen (2)

Stap 3: In het pop-up scherm dat verschijnt, kies linktype e-mail en vul bij e-mailadres het e-mailadres in. De andere velden zijn optioneel, deze worden indien mogelijk ingevuld bij het e-mail programma.

13



Stap 4: Nadat er op OK geklikt is, is de e-mail link is toegevoegd in de webpagina.


14


2.7.3 Bestand link Stap 1: Type een tekst die het bestand beschrijft (bv. bestandsnaam)

Afbeelding 15 Bestand toevoegen (1)

Stap 2: Selecteer de tekst en klik op 'link invoegen'.


Stap 3: Ga naar het tabblad 'Upload'. Klik op 'Bladeren' om op uw computer naar het bestand te zoeken. Als het veld upload gevuld is, klik dan op 'Naar server verzenden' om het bestand te uploaden.

15



Stap 4: U gaat weer naar het eerste tabblad en ziet de download ingevuld bij URL veld. Klik op OK om te bevestigen.


16


2.7.4 Link verwijderen Stap 1: Als eerste moet er een pagina zijn die een link bevat. Of er kan een nieuwe link worden aangemaakt.

Afbeelding 19 Link verwijderen (1)

Stap 2: Selecteer de tekst van de link en klik op 'link verwijderen'. Hierna is de link verwijderd.

Afbeelding 20 Link verwijderen (2)

17


2.8 Afbeeldingen Om afbeeldingen in uw website weer te geven kunt u gebruik maken van de afbeelding upload functionaliteit van de editor. U kunt hiervan gebruik maken door op de afbeelding knop te klikken . Volg onderstaand stappenplan om een afbeelding aan uw website toe te voegen. Stap 1: Als eerste verschijnt dit pop-up scherm. Indien de URL van de afbeelding reeds bekend is, kan deze ingevuld worden bij URL. Ga dan direct naar stap 5. In de meeste gevallen zult u een nieuwe afbeelding willen toevoegen, klik hiervoor op het tabblad 'Upload'.

Afbeelding 21 Afbeelding toevoegen (1)

18


Stap 2: In het upload tabblad is het mogelijk om op de computer te zoeken naar een afbeelding en deze te uploaden naar de website. Klik op de knop 'Bladeren...'.


Stap 3: U ziet een verkenner waarmee u naar de afbeelding kunt zoeken. Zoek de afbeelding en klik op openen.


Stap 4: Klik daarna op de knop 'Naar server verzenden'.

19



Stap 5: U gaat nu weer naar het startscherm. In het voorbeeld ziet u de afbeelding verschijnen. Meestal is deze erg groot. Pas de breedte of hoogte aan (verhouding blijft gelijk) zodat het beter in de website past. Klik op OK als u klaar bent met de informatie in te vullen.


Stap 6: Nadat u op OK heeft geklikt gaat u terug naar de editor en de afbeelding wordt in de webpagina weergegeven.

20



Een afbeelding kan ook aangepast of verwijderd worden. Klik hiervoor met de rechter muisknop op de afbeelding en kies de gewenste optie.

21


2.9 Tabellen U kunt tabellen in uw pagina opnemen. Deze kunnen dienen om een tabel weer te geven met tabulaire data. U kunt tabellen ook gebruiken om teksten en/of afbeeldingen beter uit te lijnen. Indien u voor het laatste kiest, kies dan voor breedte rand van 0, zodat de randen niet zichtbaar zijn. Als er op de knop tabel toevoegen geklikt wordt, verschijnt het volgende pop-up scherm. Kies alle opties en klik op OK om de tabel toe te voegen aan de pagina.

Afbeelding 27 Tabel toevoegen

22


2.10 Stijlen Om de teksten die u aanmaakt aan te passen aan de algemene stijl van uw website zijn er een aantal stijl definities beschikbaar die u kunt toepassen. U kunt deze stijl definities gebruiken door te kiezen voor een optie in de keuze lijst met als titel: “Stijl”. U kunt de stijl toepassen door eerst de stijl te selecteren in de editor en vervolgens in de keuze lijst een optie te kiezen. U kunt deze stijl weer ongedaan maken door wederom de tekst te selecteren en nogmaals te kiezen voor de gekozen stijl definitie. Op deze manier wordt de toegepaste stijl weer ongedaan gemaakt.

Afbeelding 28 Stijlen

23


2.11 Overige tips Om optimaal gebruik te kunnen maken van de editor geven wij hieronder nog enkele handige tips voor de omgang met de editor. Sessie tijd Omdat u altijd online bezig bent met het opmaken van uw webpagina’s in het CMS systeem kan het zijn dat uw sessie tijd verloopt. Een sessie op Internet is een periode waarin gebruikers acties uitvoeren op een of meerdere webpagina’s. Binnen deze sessies worden tijdelijk gegevens onthouden die nodig zijn voor het uitvoeren van deze acties. Deze sessie tijden zijn met name van belang wanneer u inlogt in een omgeving zoals het CMS systeem. Wanneer een sessie verloopt en u wilt net de inhoud van uw nieuwe of gewijzigde webpagina opslaan dan kunnen deze gegevens verloren gaan en dient u de wijzigingen opnieuw door te voeren. Doorgaans is een sessie lang genoeg om uw wijzigingen in door te voeren (ongeveer 30 minuten), maar om te voorkomen dat u de gegevens opnieuw moet invoeren en opmaken is het verstandig om de gegevens van te voren op te slaan. Het opslaan van gegevens kunt u op verschillende manieren doen, maar twee handige manier zijn de volgenden: 1. Selecteer voordat u op ‘opslaan’ klikt alle inhoud door ofwel de toetscombinatie Ctrl+a in te geven ofwel door op de knop ‘alles’ selecteren’ te klikken (zie ook paragraaf 6.1 voor de afbeelding hiervan). Geef vervolgens de toetscombinatie Ctrl+c in. Alle gegevens zijn nu naar het klembord gekopieerd. Indien u de pagina opnieuw moet invoeren dan kunt u de gegevens weer in de editor plakken door de cursor bovenaan in het witte vlak te plaatsen en vervolgens de toetscombinatie CTRL+v (plakken) in te geven 2. Sla de inhoud met kleine tussenpozen op door op de knop ‘opslaan’ te klikken. Wanneer u dit bijvoorbeeld elke tien minuten doet dan bent u ervan verzekerd dat u de gegevens die u reeds heeft ingevoerd niet meer kwijt zult raken. Het nadeel is dat de wijzigingen meteen zichtbaar zullen zijn op de website. Dit is echter geen significant probleem. Meestal is binnen afzienbare tijd de gehele webpagina al aangepast. Shift+enter en enter voor regeleinden Er zijn twee manieren om met een nieuwe regel tekst te beginnen in de editor. Wanneer u een enter ingeeft na een regel ingevoerde tekst dan wordt er met een nieuwe alinea begonnen. Hierbij is boven en onder de nieuwe tekst een bepaalde witruimte gereserveerd (zoals normaal bij een alinea). Indien u een regel wilt afbreken en direct op de volgende regel wilt verder gaan met het invoeren van tekst dient u niet de enter toets te gebruiken maar de toetscombinatie shift+enter. Tabellen gebruiken voor uitlijnen Het precies uitlijnen van bepaalde inhoud kan soms nogal bewerkelijk zijn. Als u bijvoorbeeld 2 kolommen tekst naast elkaar wilt krijgen dan kunt u dit met de normale uitlijning mogelijkheden voor tekst niet voor elkaar krijgen. Om dit toch te kunnen bewerkstelligen is het gebruik van tabellen aan te raden. Om bovenstaand voorbeeld te kunnen uitvoeren dient u bijvoorbeeld een tabel van 1 rij met 2 kolommen in te voegen en voor de breedte van de rand 0 te kiezen zodat de tabel randen niet zichtbaar zijn in de webpagina. U kunt vervolgens door rechts te klikken op de kolommen en te kiezen voor “cel eigenschappen cel” de precieze breedte van een cel opgeven waardoor u ook precies kunt bepalen hoeveel ruimte er tussen de 2 tekstkolommen zit. Tabellen kunnen ook voor andere uitlijning doeleinden een uitkomst bieden.

24


Ongedaan maken opmaak Het komt vaker voor dat u een eerder toegepaste opmaak weer van inhoud ongedaan wilt maken. Hiervoor zijn een aantal mogelijkheden: 1. Indien u de opmaak als laatste actie heeft toegepast kunt u de toetscombinatie Ctrl+z ingeven (ongedaan maken). Hierdoor wordt de laatste actie die u heeft uitgevoerd ongedaan gemaakt en dus de opmaak actie als dit uw laatste actie betrof. 2. Selecteer de tekst met opmaak en klik vervolgens op de “opmaak verwijderen” knop rechtsboven in de editor (gum afbeelding). 3. Wanneer u een stijl of lettergrootte of ander opmaak heeft toegepast via de keuzelijsten dan dient de tekst nogmaals te selecteren en wederom voor dezelfde opmaak te kiezen. De opmaak zal dan weer ongedaan gemaakt worden. Met andere woorden: door twee maal dezelfde opmaak te kiezen middels een keuzelijst wordt de opmaak weer verwijderd. 4. Wanneer u een link wilt verwijderen die gekoppeld is aan tekst dient u de knop “verwijderen link” te gebruiken. Invoegen afbeeldingen, links en tabellen Wanneer u componenten als afbeeldingen, links of tabellen invoegt dan is het aan te raden om pas achteraf deze componenten in te voegen op de juiste locatie. Wanneer u bijvoorbeeld een afbeelding of tabel tussen twee blokken tekst wilt invoegen zou u eerst de twee blokken tekst moeten invoeren en daarna de cursor tussen de blokken in plaatsen en vervolgens de afbeelding of tabel invoegen. Wanneer u de afbeelding of tabel meteen invoegt kan het daarna namelijk moeilijk zijn om de cursor onder de afbeelding of tabel te plaatsen om verder te gaan met het invoeren van de inhoud. Door op deze manier te werk te gaan heeft u al tekst staan na de locatie van de afbeelding en kunt u eenvoudig na het invoegen van de afbeelding deze tekst selecteren om verder te gaan. Wanneer u een link wilt maken van een zinsnede raden wij aan om eerst de volledige zin in te voeren (en eventueel een enter ingeven als het om het laatste woord van een zin gaat). Daarna moet u pas de tekst selecteren en de link invoegen. Wanneer u dit niet doet en meteen een link aan de laatste tekst in de editor koppelt kan het zijn dat elke volgend karakter dat u ingeeft onderdeel van deze link gaat uitmaken en u moeite heeft met het ve

25

2011. Handleiding WYSIWYG HTML editor: CKEditor

Recommend Documents