Gebruik van de editor

Geavanceerde editor-opties.

Een link invoegen

Linken naar andere webpagina, intern of extern, is een typische internet-functie.
Activeer een woord of woordgroep: de icoontjes voor link toevoegen en link verbreken worden actief.
jce-unlink jce-link
Klik "Insert/Edit link".
Nu opent een popup venster met een link-browser en andere opties.

jce-linkbrowser

circle-red Link
Je kunt een standaardlink of een email-link invoegen: jce-linktype
Voor een externe link voer je de URL in van de pagina waarnaar gelinkt moet worden
Voor een interne link kan je de Link Browser gebruiken, waarmee alle menu-items te vinden zijn
Voor een email-link klik je het rechter icoontje naast het URL-veld aan en voer je de gegevens in in het popup-venster.

Vervolgens moeten de link-attributen opgegeven worden:
circle-red Target
"open in this window": er wordt geen nieuw browservenster geopend; meestal gebruikt voor een interne link; wanneer deze instelling gebruikt wordt voor een externe link wordt de site van waaruit gelinkt wordt verlaten.
"open in new window": er wordt een nieuw browservenster geopend; veelal voor een externe link; de eigen site wordt niet verlaten.
circle-red Title
De hier opgegeven tekst verschijnt als toelichting wanneer de muis over de link bewogen wordt

Ook een afbeelding kan van een link voorzien worden: activeer de afbeelding door 1x klikken en volg verder de werkwijze voor een standaard link.

Een lijst invoegen

Er zijn 2 opties:
genummerde lijst ("Ordered list") jce-ol of ongenummerde lijst ("Unordered list") jce-ul

  • Voer de inhoud in die in een lijst opgemaakt moet worden.
  • Selecteer alles wat tot de lijst behoort.
  • Klik op het icoontje van het gewenste lijsttype; een nieuwe paragraaf in de tekst wordt een nieuw item in de lijst
    • - Een sublijst wordt gemaakt door in de lijst eerst de items van de sublijst in te voeren, daarna "Indent" aan te klikken.
    • - Een deel van de lijst kan zo ook teruggezet worden in gewone opmaak: klik"Outdent"
  • Selecteer de gehele lijst om het lijsttype te veranderen

Een tabel invoegen

Klik op "Insert a new table" jce-table
In een popup venster kan je de gewenste eigenschappen van de tabel opgeven:

Instelling van tabeleigenschappen
Cols aantal kolommen
Rows aantal rijen
Cellpadding ruimte tussen celinhoud en celrand
Cellspacing ruimte tussen de cellen
Alignment inhoud linksgelijnd, rechts of gecentreerd
Border randopmaak, uitgedrukt in pixels (px)
Width breedte van de tabel (pixels)
Height hoogte (pixels)
Class wanneer er in het stijlblad van de site opmaak is klaargezet voor tabellen kan je hier een keuze maken
Table caption de ruimte waarin de beschrijving van de tabel staat

 

Een afbeelding invoegen

circle-red Locatie
Afbeeldingen worden opgeslagen in aparte mappen van de site, beheerd in de back-end via de Mediabeheer.
Via de front-end kan je de daar opgeslagen afbeeldingen selecteren, nieuwe afbeeldingen naar mappen uploaden, en ook nieuwe mappen aanmaken.
circle-red Formaat
De afbeelding moet een webformaat hebben; een hogere resolutie dan 72 dpi is niet nodig.
Veelal wordt een .jpg-bestand gebruikt. De grootte ligt gewoonlijk tussen 5Kb en 50Kb. Grotere bestanden maken de pagina traag.
Het beste resultaat geeft voorbewerking van een afbeelding in een fotobewerkingsprogramma: resolutie aanpassen, op juiste afmeting snijden enz.
In sommige toepassingen, zoals nieuwsberichten in blog-stijl, kan een vast intro-formaat gebruikt worden, b.v. 300x200 pixels.
De maximale breedte van een afbeelding is afhanelijk van de template: de breedte van de publicatieruimte van content.
circle-red Invoegopties
Er zijn 2 opties voor toepassingen van afbeeldingen:
- Onder het editor-venster is de knop "Image" te vinden; aanklikken geeft toegang tot de afbeeldingsmappen. Men kan hier een voorhanden afbeeldingen selecteren en plaatsen en ook eigen afbeeldingen uploaden.
Open een map en upload een aangepaste afbeelding vanaf je computer.
De mogelijkheden voor positionering zijn hier echter beperkt.
- De editor bevat nog een image-manager, met uitgebreidere opties voor positionering en opmaak: "Insert/Edit image"; gebruik bij voorkeur deze functie.
circle-red Instellingen van de image-editor
Plaats de cursor in de tekst op de plaats waar een afbeelding ingevoegd moet worden en klik op het icoontje "Insert/Edit image".
In een popup venster verschijnt de uitgebreide Image Manager. We bespreken alleen de basisinstellingen in het tabblad "Image".
jce-imgbrowser
Onder "Folders" wordt de mappenstructuur voor de site-afbeeldingen weergegeven; selecteer de juiste map.
In het middenveld wordt de lijst afbeeldingen getoond die de map bevat; je kan hier een afbeelding aanklikken.
Onder "Details" worden de specificaties van de afbeelding weergegeven: Dimensions/Size/Modified.
Rechts boven dit venster staan knoppen "New Folder", "Upload" en "Help".
Via de knop "Upload" kom je in een popup venster waarmee je in je computer kunt browsen en de voorbewerkte afbeelding kunt selecteren. Na aanklikken van "Upload" verschijnt de afbeelding in de lijst in het middenvenster.
Door aanklikken van de afbeelding wordt deze geselecteerd in het topgedeelte van de Image Manager.
Daar kunnen eigenschappen nader worden ingesteld:
URL: het pad naar de afbeelding, dat door de manager al is ingevoerd
Alternate text: de tekst die verschijnt wanneer door browserinstelling geen afbeeldingen worden weergegeven.
Dimensions: de afmetingen in pixels; deze kunnen eventueel proportioneel aangepast worden; de afbeelding kan zelfs vervormd worden door niet-proportionele verandering van de dimensies.
Alignment: de opties zijn: top, middle, bottom, left, right. Rechts zie je een Preview van de gekozen instelling.
Clear: wanneer "left" of "right" is geselecteerd verschijnt nog de mogelijkheid tot instelling van de eigenschap "Clear".
Wanneer je b.v een rij afbeeldingen plaatst, dwingt de eigenschap "clear: left" die afbeelding naar een volgende regel, daar de afbeelding aan de linker kant geen ander element duldt.
Het effect van de volgende instellingen wordt ook in de preview weergegeven.
Margin: de ruimte rond een afbeelding; deze maat kan voor alle kanten gelijk ingesteld worden ("Equal Values"), of apart.
In dat geval verwijder je het vinkje bij "Equal Values" en geef je aparte maten op (pixels).
Border: de eigenschappen van randen; wanneer je deze eigenschap aanvinkt kan je meerdere attributen opgeven:

  • width: dikte van de rand (pixels)
  • style: solid (ononderbroken lijn), dotted (stippellijn), dashed (onderbroken lijn) enz.
  • color: kleur; standaard is zwart, hier kan je een andere kleur kiezen via verschillende hulpvensters.
  • Met de "Picker" worden kleuren gekozen en benoemd in het zogenaamde hexadecimale systeem.
  • Je ziet de uitdrukking #3dc250 voor een soort groen; de gebruikte cijfers en letter gaan van 0-9 en a-f.

Klik ten slotte op "Insert" om de afbeelding met de opgegeven eigenschappen in te voegen.
circle-red Eigenschappen van een afbeelding veranderen
Door 1x klikken op een afbeelding in de tekst opent de Image Manager weer. Alle eigenschappen kunnen nu gewijzigd worden, of er kan een andere afbeelding geselecteerd worden.

Typografie

Een aantal opties voor typografie zijn gelijk aan de Word-editor: vet, cursief, uitlijning, tekstkleur, lettergrootte enz. Onder de knop "Edit CSS Style" vind je uitgebreide extra mogelijkheden voor het toevoegen van stijlen.
jce-css

CSS is een initiaalwoord dat staat voor Cascading Style Sheet. In combinatie met HTML (HyperText Markup Language) vormt deze taal de basisopmaak van een webpagina.
HTML codeert de structuur van de pagina; CSS wordt gebruikt voor typografie.
Met deze CSS-knop kan een geselecteerd deel van de tekst voorzien worden van een min of meer uitvoerige CSS-opmaak, die de standaard opmaakelementen van de template overschrijft. Daartoe is het nodig dat de stijlregels kunnen aangrijpen op een geselecteerd deel van de gehele HTML-code.

circle-red Selecteren (algemeen)
Het voert te ver om hier HTML-code te behandelen. Het volstaat te weten dat elk element van de pagina een aparte "tag" kan krijgen, waarop de CSS-regels kunnen aangrijpen.
Wanneer bijvoorbeeld een "unordered list" gebruikt is, wordt dat in de HTML van de pagina gecodeerd met de tag <ul>.....lijst.....</ul>
Wanneer nu in de lijst wordt geklikt wordt de knop "Edit CSS Style" actief: aanklikken van de knop geeft het popup-venster met de uitgebreide instellingsmogelijkheden. Alle stijlregels worden toegepast op deze specifieke-tag ("inline style" genoemd). Het vergt enige basiskennis van HTML en CSS, oefening en ervaring om alle opties die hier ter beschikking staan goed te kunnen gebruiken, maar basis-instellingen spreken voor zich.
circle-red Selectie van een paragraaf
De editor kan zo ingesteld zijn dat er niet automatisch paragrafen (in HTML-opmaak <p>.....</p>) worden gegenereerd bij gebruik van de Enter-toets, maar een zogenaamde "zachte return" (in HTML <br />: een nieuwe regel, geen nieuwe alinea). Wanneer je in een tekst klikt en de CSS-knop wordt niet actief dan is dat laatste het geval. Voor opmaak van een geselecteerd tekst-gedeelte dien je dan eerst dit gedeelte tot paragraaf te maken:
- selecteer het tekstgedeelte
- klik in het selectievenster boven in de editor op "Paragraaf".
Nu kan je de tekst aanklikken en wordt de CSS-knop actief.
circle-red Andere selecties
Een afbeelding wordt ook gecodeerd met een aparte tag: <img>, en biedt daarmee voor de CSS stijlregels een aangrijpingspunt. Verder zijn elementen als een tabel (<tabel>.....</tabel>), laag (<div>.....</div>), ordered list (<ol>.....</ol>) nader te voorzien van een verzameling CSS-regels.