Werken met de editor in het beheerpaneel

Transcriptie

1 Werken met de editor in het beheerpaneel In het beheerpaneel van i-reserve wordt op een aantal schermen gewerkt met een editor. Bijvoorbeeld bij de e- mail en factuur templates, maar ook in het product-detailscherm. Bereikbaar via het menu OBJECTEN BEHEER OBJECTEN En klik op icoontje in kolom Kenmerken van betreffend object): In sommige gevallen treft u eveneens een editor aan op het detailscherm van reserveringen en/of in het detailscherm van klanten. Dit betreft doorgaans interne opmerkingen velden. Of u deze velden in genoemde schermen aantreft, hangt af van de wijze waarop in uw geval de configuratie van het beheerpaneel is ingesteld. In onderstaande paragrafen gebruiken we als voorbeeld de editor in het product-detailscherm. Overigens wordt in alle genoemde schermen dezelfde editor gebruikt, dus u kunt de werkwijze overal toepassen. Teqa Webdiensten Pagina 1

2 1. Tekst invoeren en stijlen in de editor De editor bevat een invoervak voor de tekst met daarboven een werkbalk. De werkbalk bevat diverse knoppen die u kunt gebruiken bij het invoeren en stijlen van uw teksten. Wanneer u met uw muiswijzer op zo n knop gaat staan, verschijnt een tooltip die aangeeft waarvoor de knop dient: In feite voert u tekst in en maakt u tekst op zoals u ook doet in een tekstverwerkingsprogramma als MS Word. Net als in een tekstverwerkingsprogramma kunt u gebruik maken van tabellen, opsomlijsten, u kunt afbeeldingen invoegen etc. Het resultaat is direct zichtbaar op uw website zodra in op de knop Wijzigingen opslaan heeft geklikt. Wij adviseren om altijd het scherm (frontend) waar uw tekst zal verschijnen in een tweede browsertab of in een tweede browservenster geopend te hebben. U kunt dan altijd direct het resultaat van uw invoer en/of aanpassingen op de frontend controleren. Het kan zien dat u even het browserscherm moet verversen door op ctrl+f5 te klikken. 1.1 Lettertype, grootte en kleur In een tekstprogramma als MS Word bent u gewend zelf het lettertype, grootte en kleur te kiezen. In de editor moet u dit in het algemeen gesteld niet doen omdat de lay-out op de frontend d.m.v. stylingssettings (css) door Teqa Webdiensten reeds is ingesteld. Hierdoor verschijnt de inhoud die u in de editor typt in eenzelfde opmaak als de rest van de i-reserve schermen. Bovenstaande betekent dat u in feite de tekst zo kaal mogelijk invoert. U gebruikt alleen de stylingsmogelijkheden als vet, cursief of onderstreept waar u tekst wilt accentueren. Daarnaast kunt u natuurlijk toch bijvoorbeeld de lettergrootte of kleur aanpassen op die plaatsen waar u bewust een afwijkende stijl wilt toepassen, bijvoorbeeld de woorden attentie in het rood of het gebruik van subkopjes. Indien u een afwijkende grootte of kleur gaat toepassen, kunt u het beste eerst de tekst kaal invoeren. Selecteer het tekstdeel wat gestijld moet worden en klik op de gewenste knop: Teqa Webdiensten Pagina 2

3 Voor het gebruik van afwijkende lettergroottes beschikt de editor over een aantal vooraf gedefinieerde opmaakmogelijkheden: Standaard is als opmaak normaal ingesteld. Dit betekent dat de tekst in alinea s en in de zelfde grootte verschijnt als de standaard teksten in de i-reserve schermen. 1.2 Alinea s en regeleinden In de editor wordt de tekst die u invoert standaard binnen de codes voor een alinea geplaatst (tenzij u tekst in een opsomlijst invoert). Zodra u op de enter-toets drukt, wordt een nieuwe alinea aangemaakt. U kunt dit zelf zie door op het knopje Code te klikken, u krijgt dan de achterliggende html-code te zien. Door nogmaals op het code knopje te klikken, keert u terug naar de normale bewerkingsmodus. In html wordt een alinea altijd omsloten door <p>. </p> Wilt u geen nieuwe alinea beginnen maar wilt u wel dat de tekst op een nieuwe regel begint? Gebruik dan de Shift+enter toetsen, u maakt dan een zogenaamde break. In html code kun je aan de tag <br /> of <br> zien waar de tekst wordt afgebroken en op een nieuwe regel zal beginnen. Teqa Webdiensten Pagina 3

4 1.3 Opsomlijsten Het maken van een opsomming (geordend, met nummers, of ongeordend met bullets) is makkelijk. Zet de cursor op de plaats waar de opsomming moet beginnen en klik op het gewenste opsommingsknopje: De cursor springt in en toont het gekozen opsommingsteken. Type de tekst waarbij u een nieuw opsommingsteken toevoegt door op enter te drukken. Druk na de laatste regel van de opsomming nogmaals op enter en vervolgens op het ingedrukte opsommings knopje. De opsommingslijst is hiermee gesloten en u bent een nieuwe alinea begonnen. 1.4 Tabellen Om een tabel in te voegen zet u de cursor op de gewenste plek en klikt op het knopje tabel invoegen/wijzigen: Er verschijnt een popup venster waarin u een aantal instellingen kunt opgeven: Teqa Webdiensten Pagina 4

5 Rijen: hier geeft u op uit hoeveel rijen (regels) de tabel moet bestaan Kolommen: hier geeft u op uit hoeveel kolommen de tabel moet bestaan Breedte: vul hier in hoe breed de tabel moet zijn (in pixels of als percentage Hoogte: laat dit leeg omdat de hoogte automatisch ingesteld zal worden Headers: hier kunt u opgeven of de eerste rij en/of kolom titels bevat Breedte rand: hier geeft u aan of er al dan geen randen om de tabelcellen moeten worden geplaatst (0 betekent geen rand) Afstand tussen de cellen: hier geeft u aan in pixels wat de afstand tussen de cellen onderling moet zijn Afstand vanaf rand cel: hier geeft u op hoe groot de marge moet zijn van de tekst tov de randen van de cel Uitlijning: hier bepaalt u of de tabel links, rechts of gecentreerd moet worden weergegeven Naam: hier kunt u een naam voor de tabel opgeven, u mag dit zonder bezwaar leeg laten Samenvatting: hier kunt u een korte beschrijving van de tabel opnemen, ook dit veld mag u leeg laten Klik op OK en de tabel verschijnt in de editor, u kunt nu de cellen gaan vullen met inhoud. 1.5 Een link toevoegen In dit voorbeeld gaan we een link toevoegen die verwijst naar een afbeelding op de server. Zodra een sitebezoeker op de link klikt, verschijnt de afbeelding in een nieuw venster. Natuurlijk kunt u ook een link toevoegen die verwijst naar een andersoortig document of een link die verwijst naar een andere website. Volg de onderstaande stappen om naar een afbeelding te linken: 1. Sla de gewenste afbeelding met een herkenbare naam op je eigen pc op 2. In het tekstvak van de editor type je eerst het kopje en de tekst die straks de link gaat worden. Zet de cursor direct achter de tekst: Teqa Webdiensten Pagina 5

6 3. Selecteer in de tekst het woordje hier : 4. Klik op het knopje Link invoegen/wijzigen: 5. In het popup scherm Link klik je op de tab Upload. Vervolgens blader je naar de afbeelding op je eigen pc en klik je op de naam van het bestand (en eventueel op Openen). Klik vervolgens op de knop Naar de server sturen. Teqa Webdiensten Pagina 6

7 6. Er verschijnt een melding dat de upload succesvol was: 7. Klik op Ok, je springt automatisch naar de tab Linkomschrijving waar je het volgende zal zien: Let op: indien je linkt naar een andere site dan hoef je alleen maar de url van die andere site hier handmatig in te vullen en vervolgens het doel op te geven (stap 9) 8. Klik op de tab Doel en selecteer Nieuw venster (_blank) Teqa Webdiensten Pagina 7

8 9. Resultaat: 10. Klik op OK 11. Klik onderin je scherm op de knop Wijzigingen opslaan: 12. Controleer op de website door op hier te klikken of de afbeelding correct in een nieuw venster opent. 2. Inhoud vanuit MS Word in de editor plakken In paragraaf 1 wordt beschreven hoe u tekst invoegt in de editor zelf. Het is echter goed mogelijk dat u de teksten al hebt klaarliggen in de vorm van Word documenten. U kunt de inhoud van een Word document rechtstreeks in de editor plakken door de volgende stappen te volgen: 1. Open het betreffende Word document en selecteer alle tekst. Bestaande opsomlijsten, tabellen kunt u ook selecteren, afbeeldingen echter niet! 2. Rechtsklik op de geselecteerde tekst en kies in het popupmenu voor Kopieren (of druk op ctrl+c) Teqa Webdiensten Pagina 8

9 3. Plaats de cursor in het tekstvak van de editor op de plek waar u de tekst vanuit Word wilt toevoegen 4. Klik op de knop Plakken als Word -gegevens 5. Het volgende popup scherm verschijnt: 6. Zorg dat het selectievakje Negeer Font Face - definities onderaan is aangevinkt en dat Verwijder Style -definitief is uitgevinkt 7. Plak de tekst in het vak zoals staat uitgelegd. Druk vervolgens op OK 8. De tekst is nu toegevoegd in de editor en waar mogelijk ontdaan van conflicterende styling elementen. Dit betekent tegelijk dat u de geplakte tekst in de editor nog moet doorlopen en bij stijlen waar nodig: a. Als eerste selecteert u (één voor één) elke alinea en wijzigt de opmaak van Normaal (DIV) in Normaal. Hierdoor wordt een alinea daadwerkelijk een alinea (gelegen tussen <p> </p>) zoals uitgelegd onderaan pagina 2. Het kan zijn dat er lege alinea s worden toegevoegd, u kunt deze gewoon verwijderen door aan het begin van een gevulde alinea te gaan staan en op Backspace te drukken. b. Het kan zijn dat een geplakte tabel aangepast moet worden. Hiervoor selecteert u de gehele tabel en klikt u op het knopje Tabel invoegen/wijzigen (zie paragraaf 1.4 op pagina 4) c. Opsomlijsten worden niet correct weergegeven in de zin dat ze in de editor niet worden gezien als opsommingen (ondanks dat er bullets of nummers zichtbaar zijn!). Dit kunt u makkelijk corrigeren door de cursor aan het begin van de eerste regel van een opsomming te plaatsen, dus Teqa Webdiensten Pagina 9

10 voor het opsomteken. Druk op Delete tot u bij het eerste woord bent. Klik nu op het knopje Opsomming: Zet de cursor nu direct na het laatste woord van de eerste opsomregel en klik net zolang op Delete totdat het 1 e woord van de tweede opsomregel aan uw cursor grenst. Druk vervolgens op enter zodat de tweede opsomregel aan de opsomming is toegevoegd: Herhaal dit voor alle regels in de opsomming. d. De in Word aangemaakte koppen zult u waarschijnlijk ook in de editor moeten bijstijlen. Hiervoor zijn geen eenduidige regels aan te geven. Gewoon even proberen (en controleren op de frontend!) wat het beste resultaat oplevert Teqa Webdiensten Pagina 10