Courbois Software WebDesignEditor WYSIWYG-Editor 2006-2012 Courbois Software Beuningen Fazantlaan 63, 6641 XW Beuningen. www.courboissoftware.com & www.cs-webdesign.nl 024 677 25 46 - info@cs-webdesign.nl
WYSIWYG Editor Dit is een kleine tekstverwerker waarmee u pagina s voor uw site kunt ontwerpen. De breedte van de edit scherm is precies even groot als het gedeelte van uw site waar u teksten in kunt zetten. U krijgt dus precies te zien hoe het er uit komt te zien als u het intikt. De editor heeft, net als b.v. Windows Word een aantal knoppen om functies uit te voeren. Die knoppen voeren hun functie uit op de geselecteerde tekst (selecteer de tekst met de muis). Een aantal hebben betrekking op een hele regen, b.v. centreren, omdat dat niet anders kan. Maar voor de meeste moet u iets selecteren. Hiernaast ziet u alle knoppen. Een korte beschrijving van al die knoppen, een paar met een extra plaatje. Bold Tekst De geselecteerde tekst word bold (vet, dik). Nog een keer en het veranderd terug. Schuine Tekst De geselecteerde tekst wordt in schuinschrift afgedrukt. Nog een keer keert het weer om. Onderlijnde Tekst De geselecteerde tekst word onderlijnt. Nog een keer keert het weer om. Doorstrepen Tekst De geselecteerde tekst krijgt een streep door de tekst. Ook hier is nog een keer weer terug zetten. Tekst Kleur Hier kunt u de geselecteerde tekst een kleur geven. Kies de kleur met de muis in het venster dat opent. U kunt ook aan de bovenkant de kleur in HEX intikken voor als u een afwijkende kleur wilt hebben. Achtergrond Kleur Ook hier krijgt u hetzelfde venster. Alleen kiest u nu de kleur ACHTER de tekst. Tekst Uitlijnen Dit heeft betrekking op een alinea tekst. De tekst wordt aan beide kanten uitgelijnd en er worden extra spaties tussengevoegd om dat te bereiken. Lees meer over zachte en harde ENTER na de beschrijving van de knoppen. Tekst Links Dit heeft betrekking op een alinea tekst. De tekst komt links aan te liggen. Zoals het er b.v. ook in een boek uit zien. Voor en na dit gedeelte moet een HARDE ENTER staan. 2006-2010 CS-WebDesign & Courbois Software 2
Tekst Centreren Dit heeft betrekking op een alinea tekst. De tekst komt in het midden van de pagina te staan. Voor en na dit gedeelte moet een HARDE ENTER staan. Tekst Rechts Dit heeft betrekking op een alinea tekst. De tekst wordt nu aan de rechter kant uitgelijnd. Voor en na dit gedeelte moet een HARDE ENTER staan. Punt Lijsten Punt lijsten zijn teksten onder elkaar, elk met een puntje ervoor. Xxxxx Xxxxx Xxxxx Zoals hierboven. Deze lijst trekt automatisch de eerste letter van elke regel onder elkaar zolang u door tikt of ZACHTE ENTER geeft. Met HARDE ENTER gaat de tekst naar de volgende punt. Het is belangrijk dat u de lijst begint met een HARDE ENTER en eindigt. Doet u dat niet dan wordt meer dan u wilt opgenomen in de lijst. Cijfer Lijsten Net als Punt Lijsten, maar nu cijfers i.p.v. de punten. Zoals: 1. Xxxxx 2. Xxxxx 3. Xxxxx Inspringen Dit is een kleine inspringing in de tekst maken. Zoals op de volgende regel: Deze tekst start niet helemaal vooraan, maar er staat geen punt en ook geen cijfer voor. Het geeft alleen een extra dimensie aan de tekst. Ook dit is een alinea opdracht en moet omsloten zijn met de HARDE ENTER. Terugspringen Het omgekeerde, de tekst gaat een klein stukje naar voren. En denk aan de HARDE ENTER. Subscript Tekst Dit is tekst die iets ONDER de regel staat. Zoals dit. Te gebruiken in b.v. de chemische formule van water: H2O - H 2 O. Superscript Tekst Net andersom als Subscript. De tekst gaat iets omhoog. Dit wordt gebruikt in b.v. 1 e en E=MC 2. Knippen De geselecteerde tekst wordt weggehaald. Dit is het zelfde als de tekst selecteren en op de Deletetoets drukken. Kopiëren De tekst die geselecteerd is wordt opgeslagen in het geheugen. Dit is gelijk aan de CTRL-C toetsencombinatie. Toevoegen Of Plakken, voegt de tekst die u gekopieerd heeft toe op de plaats van de cursor. Dit is gelijk aan CTRL-V. 2006-2010 CS-WebDesign & Courbois Software 3
Word Correctie Dit is een functie die u waarschijnlijk nooit gebruikt. Als u een stuk tekst uit Windows Word kopieert dan zet Windows allerlei controletaken in de tekst. Deze knop wist al die tekens. Maar verschillende opdrachten, zoals b.v. Centreren, gebruiken ook die codes. Dus u verliest de gehele formattering van uw tekst. Herstel De laatste opdracht van de editor wordt ongedaan gemaakt. Een Oeps knop. On-Herstel Ofwel Redo. De laatste herstel opdracht ongedaan maken. Tabel invoeren. Hiermee voegt u een tabel in. Zie het als een stukje Excel pagina. U krijgt het venster van hiernaast te zien waar het een en ander opgegeven moet worden. Rijen en kolommen geven het aantal rijen en kolommen aan. Padding geeft de lege ruimte in pixels aan rondom de rand van de tabel. Omranding dikte geeft de totale omranding aan. 0 Is geen omranding. Omranding stijl laat u kiezen uit verschillende soorten omrandingen. Breedte geeft de breedte van de totale tabel aan. De hoogte past zich automatisch aan de karakterset maat aan. Uitlijning geeft aan waar de tabel moet staan, Links, Rechts, Midden Achtergrond kleur is de kleur waarmee de vakken worden gevuld. Als u op kies tikt komt er een klein kleurvenster om te kiezen. Omranding kleur is de kleur van de randen. Ook hier kunt u kiezen. Samenvallende randen maakt de tabel iets compacter. De tabel hierboven is het resultaat van de gegevens in het voorbeeld scherm. Plaatje Invoegen Hiermee kunt u een plaatje invoegen op de plaats van de cursor. U moet echter PRECIES weten waar het plaatje staat op de site. Om dat makkelijk te bepalen hebben we de Upload functie (Zie hoofdstuk over UPLOAD). Door een plaatje met dat gedeelte van de editor naar de site te sturen staat het plaatje altijd op de zelfde plaats. Stel u gebruikt de Upload editor om het file Plaatje.jpg naar de site te sturen. Het file komt dan in de OPSLAG-directory van de site. 2006-2010 CS-WebDesign & Courbois Software 4
Tikt u op deze knop dan verschijnt het volgende schermpje: U ziet dat ik de URL van het plaatje heb opgegeven als OPSLAG/Plaatje.jpg. Verdere opties zijn: Breedte, de breedte van het plaatje in puntjes. PAS OP het zichtbare deel van de site is 639 puntjes. Dus als een plaatje heel groot is geef dan een waarden van 630 op. Of vul niets in. Hoogte, de hoogte van het plaatje in puntjes. Als u slechts 1 van Breedte en Hoogte opgeeft blijft de verhouding van het plaatje gelijk. Anders vervormt het. In het algemeen geeft u alleen de breedte op om een plaatje in te passen. Omranding geeft aan hoe dik de (zwarte) rand om het plaatje moet worden. 0=geen rand. Uitlijning geeft aan waar het plaatje moet komen te staan, Links, Rechts. Midden. Horizontale en Verticale Spatie geeft aan hoeveel puntjes om de foto leeg moet blijven. Dit is handig om tekst naast een plaatje iets van het plaatje af te laten staan, zoals bij de plaatjes in deze tekst waar de waarde 5 is. Tekst is tenslotte nog een tekst die even zichtbaar wordt als de muis over het plaatje gaat. B.v. geschikt voor Copyright berichtjes. Belangrijk is altijd de OPSLAG/ (met hoofdletters) voor de naam van het plaatje! Link Invoegen Een link is een hyperlink, verwijzing naar een andere pagina of een andere site. Ook een e-mail-adres is zo n link. In het voorbeeld is de link naar een andere site: http://www.leukesite.nl Bij Target geeft u het doel venster op. Geen wil zeggen in het venster van uw site, maar _blank is een meer logische keus. Deze opent een nieuw venster. Als u een pagina op uw site wilt openen, haal dan http:// weg (dit staat er automatisch) en voer de pagina naam in zonder site vermelding. (zie een stukje terug aan het eind van het hoofdstuk over de Pagina Editor). Zoals ik al vertelde is mail (E-Mail) ook een soort van hyperlink maar met een speciaal voorvoegsel. Als u een mail-adres wilt laten zien dan maakt u een link met de volgende URL: mailto:mailadres b.v. mailto:info@cs-webdesign.nl Als u nu op de site op die link tikt start het mailprogramma. 2006-2010 CS-WebDesign & Courbois Software 5
Alle andere regels hoeven niet te worden ingevuld. Voorbeeld Scherm Dit opent een venster precies even groot als het middenstuk van uw site en laat het resultaat zien. U krijgt ALLEEN de tekst (en foto s) te zien zonder de rest van uw site. Deze functie is te gebruiken zonder dat u eerst op de Invoeren -knop heeft gedrukt, wat wel nodig is als u een test pagina wilt bekijken. HTML Dit laat de HTML-code van de pagina zien, als u daar in geïnteresseerd bent. Nog een keer op die knop drukken en u gaat weer terug naar de tekst. Nu rest alleen de al eerder genoemde HARDE en ZACHTE ENTER Dit zijn eigenlijk ENTER en SHIFT-ENTER. Door op de ENTER-toets te drukken gaat de tekst naar de volgende regel. Er wordt een regeleinde ingevoerd en de cursor gaat naar de eerste positie van de volgende regel. Zoals u dat normaal doet bij het tikken van een tekst. Een aantal functies heeft echter betrekking op een alinea. Door nu een SHIFT-ENTER voor de alinea te geven weet de editor dat de alinea begint. Een volgende SHIFT-ENTER geeft het einde van de alinea aan. Op het scherm van de editor krijgt u een wat grotere afstand tussen de regels om aan te geven dat het een HARDE ENTER is. Deze afstand is gelijk aan 2 maal de normale ENTER. Het verschil is echter dat u de cursor NIET op deze lege regel kunt zetten. De uiteindelijke pagina uitvoer ziet geen verschil tussen die twee vormen. Voor internet zijn ze gelijk. De extra lege regel in de editor is NIET TE ZIEN op de site. En nu maar experimenteren. 2006-2010 CS-WebDesign & Courbois Software 6