De Teksteditor Hoe werkt het? 19-4-2013 Sanne Wijgergangs | Drie-O Automatisering B.V.
Inhoud 1.
Werken met de teksteditor ..................................................................................................... 3 1.1
De teksteditor................................................................................................................. 3
1.2 Afbeeldingbeheer................................................................................................................. 5 1.3 Hyperlink beheer ................................................................................................................. 7
1.3.1 De optie ‘Verwijzing’...................................................................................................... 8 1.3.2 De optie ‘E-mail’ ........................................................................................................... 8
2
1. Werken met de teksteditor Onderstaand worden alle functionaliteiten van de teksteditor toegelicht. 1.1 De teksteditor Er zijn een heleboel knoppen en mogelijkheden in de teksteditor. Deze worden hier stuk voor stuk behandeld:
1: Spellingchecker: Als u klaar bent met typen kunt u hierop klikken om uw tekst te laten controleren. 2: Zoeken: Hiermee kunt u uw tekst doorzoeken op hetgeen wat u hierin invult. Ook kunt u deze knop gebruiken om delen tekst te vervangen. 3: Knippen: U kunt hiermee geselecteerde content wegknippen. De Windows sneltoets Ctrl+x werkt ook. 4: Kopiëren: Hiermee kunt u geselecteerde content kopiëren in de teksteditor. De sneltoets Ctrl+c werkt ook. 5: Plakken: Via deze knop wordt er content geplakt met opmaak en eventuele plaatjes. Hiervoor kan eveneens de sneltoets Ctrl+v gebruikt worden. 6: Standaard tekst plakken: Deze optie is het beste te gebruiken wanneer u teksten uit Word bestanden of van internet kopieert. Door de vele opmaak is door de bomen het bos niet meer te zien. Deze manier zorgt ervoor dat achteraf aanpassen eenvoudiger is. 7: Plak opties: Als u hierop klikt zie je een uitklap menu. Hier kunt u verschillende manieren van plakken terugvinden. 8: Ongedaan maken: Vorige stap van uw wijzingen. De Windows sneltoets Ctrl+z werkt ook. 9: Opnieuw doen: Volgende stap van uw wijzingen. Mocht u te vaak op ‘ongedaan maken’ geklikt hebben, dan kunt u weer een stap vooruit doen met deze knop. De Windows sneltoets Ctrl+Y werkt ook. 10: Afbeeldingbeheer: Klik op deze knop als u nieuwe afbeeldingen wilt toevoegen binnen de tekst. Deze knop opent een scherm waarin u instellingen kunt maken voordat u uw afbeelding invoegt in de teksteditor. Dit scherm wordt later in deze handleiding uitgelegd. 11: Absolute positie instellen: U dient een afbeelding te selecteren voordat u deze functie kunt gebruiken. Deze functie zorgt ervoor dat u vrij van restricties de afbeelding een plek kunt geven in het teksteditor kader. Nadeel is dat de afbeelding over de tekst heen staat. Dit is dan ook niet vaak bruikbaar i.c.m. tekst. Wij raden het dan ook af om deze functie te gebruiken. 12: Documentenbeheer: Hierin kunt u uw documenten beheren waar u naartoe kunt linken in uw teksten. Het scherm documentenbeheer zal later uitgelicht worden. 13: Koppeling (Hyperlink) beheer: Deze functie gebruikt u wanneer u van een woord, of zinsdeel, een link wilt maken. Het schermpje wat tevoorschijn komt zal later uitgelegd worden. 14: Link verwijderen: Klik op een hyperlink die aangemaakt is en vervolgens op de deze knop. Op deze manier is het handig om hyperlinks weer te verwijderen. 15: Superscript: Geselecteerde tekst zal in Superscript (Superscript) verschijnen. 16: Subscript: Geselecteerde tekst zal in Subscript (subscript) verschijnen. 17: Nieuwe paraaf: Deze knop zal ervoor zorgen dat een nieuwe alinea gestart zal worden. 18: Groepsvak invoegen: Wanneer u op deze knop klikt zal de teksteditor een tekstvak maken. Hier kunt u een titel aangeven en tekst in een vak typen. Ideaal om bijvoorbeeld een aandachtspunt in te plaatsen. 19: Scheidingslijn invoeren: Hiermee kunt u een lijn over heel de breedte van de teksteditor invoegen. Op deze manier kunt u naar wens tekst in een soort vakken delen om het een en ander overzichtelijk weer te geven. 20: Datum invoegen: Als u hierop klikt zal de datum van de dag van klikken ingevoerd worden.
3
21: Tijd invoegen: Zowel de datum van de dag als de tijd wordt op het moment van klikken ingevoerd. 22: Paragraaf stijl dropdown box: Hiermee kunt u delen tekst al van een vooraf gedefinieerde stijl voorzien. Zo is het raadzaam bij hoofdstukken gebruik te maken van heading 2 of 3. Heading 1 wordt al gebruikt voor de hoofdtitel van de pagina. Naast een automatische stijl is dit voor de zoekmachine weer relevant. 23: Lettertype dropdown box: Hiermee kunt u kiezen welk lettertype er gebruikt dient te worden. 24: Echte tekengrootte dropdown box: Wordt gebruikt om aan te geven hoe groot de letters in beeld komen. 25: Alles selecteren knop: Zorgt ervoor, zoals al doet vermoeden, dat alle content in de teksteditor geselecteerd wordt. 26: Vet: Zorgt ervoor dat de geselecteerde tekst vet gedrukt wordt. Windows sneltoets Ctrl+B werkt hier ook. Druk nogmaals op deze knop om weer met normale dikte te kunnen typen. 27: Cursief: Is dezelfde soort knop als Vet(26), alleen in dit geval zal de tekst cursief getoond worden. Windows sneltoets Ctrl+I zal ook werken. 28: Onderstreept: Doet ook hetzelfde als knop Vet(26) en Cursief(27) maar dan zal deze knop de tekst met een streep eronder presenteren. Windows sneltoets Ctrl+U heeft dezelfde functie. 29: Doorstrepen, doet hetzelfde als knop Vet(26), Cursief(27) en Onderstreept(28) maar dan zal deze knop de tekst met een streep erdoor presenteren. 30: Links uitlijnen: Zal de tekst links uitlijnen. 31: Centreren: Zal de tekst centreren. 32: Rechts uitlijnen: Zal de tekst rechts uitlijnen. 33: Uitvullen: Zal ervoor zorgen dat de tekst over heel de breedte verdeeld wordt. 34: Uitlijning verwijderen: Zal de tekst laten terugkeren naar ‘default’ uitlijning. 35: Inspringen: Stukjes tekst laten inspringen. 36: Uitspringen: Tekst een plekje naar links laten beginnen. 37: Nummering: Deze knop zorgt ervoor dat u een lijst kunt maken wat begint met nummers. Als u een stuk tekst selecteert en dan op deze knop klikt, zal dit stuk tekst veranderen in een lijst met nummers. 38: Opsommingtekens: Knop zorgt ervoor dat de volgende tekst in een opsomminglijst verschijnt. Als u een stuk tekst selecteert en dan op deze knop klikt, zal dit stuk tekst veranderen in een opsomminglijst. 39: Rand aan/uit knop: Hiermee kunt u kiezen of u een ruimte om een tekst/afbeelding wilt weergeven of de tekst/afbeelding direct aan de rand van de teksteditor wilt weergegeven. Deze knop kan handig zijn als u van een afbeelding een link maakt. Omdat veel browsers er dan automatisch een rand omheen zetten kan dat met deze knop ongedaan gemaakt worden. 40: Voorgrondskleur, oftwel, tekstkleur: U kunt een kleur kiezen en met deze kleur verder typen. Ook kunt u een stuk tekst selecteren en deze van kleur veranderen va deze knop. 41: Achtergrondskleur: Met deze knop kunt u de kleur achter een tekstregel veranderen. 42: Alle opmaak verwijderen: Met deze knop wordt alle onderliggende HTML opmaak verwijderd. 43: Symbool, dropdown box: Om de meest voorkomende NIET TEKST symbolen te plaatsen in de tekst. Bijvoorbeeld: €, ©, ™, ≈ enz. 44: Tabel invoegen: Met deze knop kunt u een tabel plaatsen in de teksteditor. Selecteer de corresponderende aantal vakjes (rijen en kolommen) die u nodig heeft. Naast het creëren van een tabel kan de uitklap functie van deze knop u helpen om uw tabel bij te houden, op te maken of rijen en kolommen te verwijderen. 45: Formulier element invoegen: Formulieren worden elders in de website georganiseerd en zijn hier overbodig geworden. Deze knop kunt u het beste negeren. 46: Converteren naar kleine letters: Zal hoofdletters als kleine letters laten zien. Als deze knop ingedrukt is, kunt u hierna met kleine letters typen of u kunt een deel tekst selecteren en vervolgens op deze knop klikken om de geselecteerde tekst in kleine letters te laten zien. 47: Converteren naar grote letters: Deze knop doet hetzelfde als de kleine letters knop (46) alleen zal deze knop van alle kleine letters hoofdletters maken. 48: Zoom: Deze dropdown vergroot de tekst voor u zonder dat het achteraf terug te zien is aan de voorkant. Dit kan soms makkelijk zijn als u een wat kleine lettergrootte heeft, dan kunt u het voor
4
uzelf eenvoudig maken om de tekst aan de achterkant als het ware ‘in te zoomen’. Ook kunt u ‘uitzoomen’ om grote tekst overzichtelijker weer te geven. 1.2 Afbeeldingbeheer Als u een afbeelding in de tekst wilt invoegen dan doet u dit via ‘Afbeeldingbeheer’. In dit hoofdstuk wordt het scherm behandeld.
Knopjes van links naar rechts en van boven naar beneden: - Terug knop: Ga een map terug. - Volgende knop: Ga naar de volgende map. - Vernieuwen knop: Als u een afbeelding heeft toegevoegd maar deze verschijnt niet in de lijst kunt u proberen te vernieuwen met deze knop. - Nieuwe map: Met deze knop kunt u een nieuwe map toevoegen in de mappenstructuur van de afbeeldingen. Dit om het een en ander overzichtelijker te maken voor uzelf. - Verwijderen: Met deze functie kunt u het geselecteerde item verwijderen. - Uploaden knop: Hiermee kunt u nieuwe afbeeldingen beschikbaar maken voor de content editor. - Afbeelding-editor: Kunt u gebruiken om de geselecteerde afbeelding te bewerken. - Best Fit: Zorgt ervoor dat de foto past in het voorbeeld venster. - Actual Size: Laat de afbeelding zien op ware grootte. - Zoom in knop: Zorgt ervoor dat u kunt inzoomen op de afbeelding. - Zoom uit knop: Zorgt ervoor dat je de afbeelding steeds kleiner ziet. Deze knop valt deels buitenbeeld. Wanneer de gewenste afbeelding is geselecteerd worden de 2 opties, ‘Voorbeeld’ en ‘Eigenschappen’, klikbaar. De optie ‘Voorbeeld’ staat standaard geselecteerd. Nu wordt de optie ‘Eigenschappen’ behandeld:
5
Van boven naar beneden: - Breedte: De breedte van de foto zoals deze weergegeven gaat worden aan de voorkant en in de teksteditor. - Hoogte: De hoogte van de foto zoals deze weergegeven gaat worden aan de voorkant en in de teksteditor. - Kettinkje die de velden ‘breedte’ en ‘hoogte’ verbindt: Wanneer u hierop klikt wordt de verhouding van de afbeelding automatisch in stand gehouden. Door het kettinkje aan te zetten hoeft alleen de hoogte of breedte van de afbeelding aangepast te worden. - Rand kleur: Kies de kleur van de rand om de foto. Beter niet te gebruiken in verband met een ontwerp of automatische stijlen van uw website. - Tekst Afbeelding: Gebruikt u om een hint mee te geven met de foto, bijvoorbeeld:
-
Lange omschrijving: Mogelijkheid om meer keywords die betrekking hebben op de afbeelding/pagina te verwerken. In dit voorbeeld bijvoorbeeld: ‘Pierce Brosnan een Ierse acteur, filmproducent en milieuactivist.’ Afbeelding uitlijning: Knop zorgt ervoor dat u beter kunt bepalen waar de afbeelding in de tekst komt te staan. Zoals links, rechts of in het midden.
6
-
Margin top, rechts, onder en links: U kunt hier een getal ingeven die de ruimte om de foto bepaald. Als u 10 invult bij ‘top’ dan zal de afbeelding altijd, met een afstand van 10 pixels, onder de content, die boven de afbeelding staat, geplaatst worden. CSS klasse: Omdat stijl door de website wordt geregeld is deze functie overbodig.
1.3 Hyperlink beheer
Als u een link wilt maken in de tekst dan kan dit met het scherm ‘Hyperlink beheer’. Als eerste hebben we de optie ‘Hyperlink’. De opties ‘Verwijzing’ en ‘E-mail’ worden hierna behandeld. -
URL: Vul hier het adres in van de website waar u naartoe wilt linken. Link tekst: Welke tekst moet een link worden? Bijvoorbeeld ‘Klik hier’. Als u content geselecteerd heeft, en mocht dit tekst zijn, dan zal dit vak al ingevuld zijn. Doel: Maak hier een selectie wat van toepassing is voor uw link. Vaak wordt voor een link naar een andere site gekozen voor een ‘Nieuw venster’. Bestaande ver.: Betekent ‘Bestaande verwijzing’. Hier kunt u een verwijzing kiezen. Het aanmaken van een ‘Verwijzing’ wordt verderop nader uitgelegd. Hint: Zal voor een tekst ballonnetje zorgen als men met de muis over de link staat zonder te klikken.
Tip! Plaatst u links die naar pagina’s binnen uw eigen website verwijzen? Doet dit dan als volgt: - Plaats in ‘Hyperlink beheer’ achter URL alleen alles achter de /. Dus wilt u een directe link naar de contact pagina dan moet hier ingevuld worden /contact.aspx. De domeinnaam kan weggelaten worden. - Mocht de domeinnaam ooit veranderen, dan blijven de links werken. - Geldt alleen voor links op eigen website!
7
1.3.1 De optie ‘Verwijzing’
-
Hier kunt u een verwijzing aanmaken. Een verwijzing zorgt ervoor dat men sneller door content heen kan springen. U kunt hier bijvoorbeeld ‘TOP’ intypen. Bij de vorige stap is uitgelegd hoe u een hyperlink kan maken naar een verwijzing. Als u dus als voorbeeld een verwijzing aanmaakt bij de eerste regel van uw tekst en u noemt deze verwijzing TOP. Dan kunt u later in de tekst een link maken naar deze verwijzing en zodoende met een tekst als: ‘Naar boven’ uw lezer weer terug naar boven sturen.
1.3.2 De optie ‘E-mail’
-
Adres is het mailadres waar u naartoe wilt mailen. Link tekst: Welke tekst moet er een e-mail link worden? Bijvoorbeeld: Mail ons. Als u content geselecteerd heeft, en mocht dit tekst zijn, dan zal dit vak al ingevuld zijn. Onderwerp: Zal getoond worden in het mail onderwerp als, diegene waar de mail aan gericht, is zijn mail bekijkt. Bijvoorbeeld: Contact via de website. CSS Klasse: Is voor meer geavanceerde opties voor ons eigen gebruik.
8
