Der WYSIWYG-Editor im CMS

Transkript

1 1/9 Für Inhalte, die länger als 255 Zeichen sein können, steht im CMS ein sog. WYSIWYG-Editor ("what you see is what you get") zur Verfügung. Die mittels der Symbole angebotenen Funktionen repräsentieren HTML-Kodierungen und sind nicht mit Formatierungen in Word oder anderen Textverarbeitungsprogrammen zu vergleichen. Der Editor Nicht alle Funktionen des Editors werden beim Bearbeiten von Inhalten im HeBIS-CMS benötigt. Viele Formatierungsmöglichkeiten sind überflüssig, da sie durch die Vorlage, in der die Objekte dargestellt werden, bereits definiert sind. Tipp: Alle Symbole sind mit einem Alternativtext versehen, den man lesen kann, wenn man mit der Maus zu dem Symbol fährt! Nicht benutzt werden sollen: Schriftname und Schriftgröße Schriftstil (außer "Überschrift 3") Vorder- und Hintergrundfarbe Schriftformatierungen F = Fettdruck K = Kursiv U = unterstrichen (bitte möglichst nicht benutzen)

2 A 2 = tiefgestellt A 2 = hochgestellt A = durchgestrichen 2/9 Textausrichtung linksbündig zentriert rechtsbündig Blocksatz (funktioniert in HTML eingeschränkt) Listen, Nummerierungen, Textein- und -ausrückungen Unnummerierte Liste Mit diesem Symbol erstellt man Listen wie diese: Zum Beenden einer Liste genügt, wie in Word, das zweifache Betätigen der Return-Taste, um wieder auf der normalen Textebene weiterzuschreiben. Zur weiteren Untergliederung einer unnummerierten Liste benutzt man den Button "Einrücken": Ergebnis: texttexttext texttexttext (Für tiefere Gliederungen den Button "Einrücken" mehrfach benutzen!) Um eine Gliederungstiefe wieder zu entfernen, den Eintrag also auf eine höhere Gliederungstiefe zu stellen, verwendet man den Button "Ausrücken": Tipp: Am besten schreibt man zuerst die Zeilen, die Aufzählungszeichen bekommen sollen, untereinander weg (mit Return-Taste am Ende eines Listeneintrags) und benutzt anschließend die Listen-Symbole.

3 3/9 Nummerierte Listen Die Funktionsweise ist dieselbe, das Ergebnis sieht hierbei so aus: 1. texttexttext 2. texttexttext 3. texttexttext Nach Einrückungen (tieferen Untergliederung) sieht eine nummerierte Liste so aus: 1. texttexttext 1. texttexttext 2. texttexttext 2. texttexttext 3. texttexttext Links und Grafiken einfügen Hyperlink einfügen/korrigieren Nachdem man einen Text markiert hat, benutzt man das Symbol, um einen Internet-Link einzufügen. Auch zum Korrigieren bestehender Links verwendet man dieses Symbol. Es erscheint folgender Bildschirm:

4 4/9 Externer Link: URL eintragen, i. d. R. Link zu einem anderen Server (mit dem Button "Auswählen" erhält man den eigenen Server angezeigt und kann Dateien auswählen, die nicht Bestandteil des CMS sind. Diese Dokumente sind im Dateimanager durch schwarze Schrift gekennzeichnet, CMS-interne Dokumente sind blau.) Anker: Link zu einer vorher definierten Sprungmarke (definiert mit ) setzen Interner Link: Über den Button "Auswählen" erhält man im Dateimanager alle Dokumente des CMS angezeigt. Hier wird die -Adresse eingetragen. Beim Klick auf den Link wird automatisch eine neue erzeugt. Objekt: Über den Button "Auswählen" kann man ein Objekt der gleichen Klasse verlinken (z. B. in einem Cocktailartikel auf einen anderen verweisen). An dieser Stelle kann nicht zu Objekten anderer Klassen verlinkt werden (z. B. in einem Cocktailartikel auf ein Handbuch-Kapitel). Will man auf ein Objekt aus einer anderen Klasse verweisen, muss man den "Externen Link" benutzen. Dazu sucht man sich im Internetangebot das Objekt aus, markiert mit Strg+C die URL in der Adresszeile des Browsers, geht in das Hyperlink-Fenster und trägt den URL mit Strg+V in die entsprechende Zeile ein. Den Ausdruck " bzw. " (der Schrägstrich nach de muss unbedingt stehenbleiben!!) wird entfernt. CSS Style: Wird nicht verwendet Linkziel: Wird nicht benötigt Hyperlink löschen Man markiert den Text, der den Hyperlink enthält und klickt anschließend auf diesen Button. Danach ist der Hyperlink entfernt. Anker einfügen Diese Funktion dient dazu, in langen Texten sog. Sprungmarken einzufügen (z. B. zum Erstellen eines Inhaltsverzeichnisses für den nachfolgenden Text). Man platziert den Cursor im Editor an eine Stelle vor dem Text, zu dem man springen möchte und klickt dann auf das Symbol. Es erscheint der folgende Bildschirm: Hier gibt man den Namen der Sprungmarke ein, auf den später mit dem Symbol verlinkt wird. Im Hyperlink-Bildschirm taucht der hier eingegebene Name der Sprungmarke dann im Pulldown- Menü hinter "Anker" auf und kann ausgewählt werden.

5 5/9 Grafik einfügen Im Textfeld können auch Bilder eingefügt werden. Nach dem Klick auf das Grafik-Symbol erscheint dieser Bildschirm: Im Allgemeinen sollte eine webedition-interne Grafik verwendet werden, die man durch den Button "Auswählen" aus dem Dokumentenverzeichnis "images" 1 heraussucht. Der Bild-URL hinter "webedition-externe Grafik" sollte möglichst nicht verwendet werden (urheberrechtliche Gründe). Die Felder Breite, Höhe, Horizontaler Abstand, Vertikaler Abstand brauchen nicht ausgefüllt werden. Trägt man bestimmte Pixelzahlen für Breite oder Höhe ein, kann es sein, dass die Grafik verzerrt wiedergegeben wird. Deshalb sollte in diese Felder nichts eingetragen werden. So wird gewährleistet, dass die Grafik in ihrer originalen Größe angezeigt wird. Rand: mit 0 besetzen Name: nicht erforderlich Ausrichtung: keine Umstellung nötig (Default = linksbündig) Alternativer Text: Eintragen, was die Grafik darstellen soll (bitte kurzer Text!) Horizontale Linie einfügen Bitte nicht verwenden! 1 Wie man Grafiken ins CMS importiert, damit man sie als "interne Grafiken" verlinken kann, steht im Kapitel 3.4 des webedition-handbuchs.

6 6/9 Horizontale Linien werden gelegentlich zum Gliedern von Texten verwendet. Im HeBIS- Internetangebot werden sie nicht eingesetzt. Tabellen Neue Tabelle einfügen Nach Klick auf das Symbol erscheint ein neuer Bildschirm: Zeilen: Anzahl der benötigten Zeilen eintragen (später können Zeilen hinzugefügt oder entfernt werden) Spalten: Anzahl der benötigten Spalten eintragen (können später ebenfalls hinzugefügt oder entfernt werden) Rand: 1 bei Tabellen mit Rand 0 bei Tabellen ohne Rand (z. B. statt Tabulatoren einzusetzen) Innenabstand: 3 eintragen, damit der Text nicht zu dicht am Rand klebt Zellabstand: 0 eintragen, beeinflusst die Rahmenstärke Hintergrundfarbe: wird nicht verwendet Breite: Prozentzahl zwischen 0 und 100 eintragen, je nach dem, ob die Tabelle die gesamte Breite des Textes einnehmen soll oder nicht. Höhe: kann unbesetzt bleiben Ausrichtung: braucht nicht verändert werden (Default = linksbündig) CSS Style: keine verwendet für Tabellen Tabelleneigenschaften bearbeiten Mit dem Klick auf das Symbol erhält man obigen Bildschirm erneut, wobei die eingestellten Eigenschaften der markierten Tabelle angezeigt werden und angepasst werden können.

7 7/9 Eigenschaften einer Zelle bearbeiten Damit sich eine Tabelle wie gewünscht verhält, kann man hier detailliert für eine Zelle festlegen, welche Eigenschaften sie haben soll. Dazu die Zelle mit der Maus anklicken. Nach dem Klick auf das Symbol erhält man folgenden Bildschirm: Breite: bestimmt die Breite einer Zelle und sollte in jeder Spalte für je eine Zelle in Prozent festgelegt werden, so dass sich die Prozente auf 100 summieren. Damit beeinflusst man die Spaltenbreite in der Tabelle. Höhe: falls eine bestimmte Zeilenhöhe gewünscht ist (meist nicht erforderlich) Spannweite: hier trägt man die Anzahl der Spalten ein, über die sich eine Zelle erstrecken soll (Zusammenfügen von Zellen) horizontale Ausrichtung: legt fest, ob der Zelleninhalt, linksbündig, rechtsbündig, zentriert angezeigt werden soll vertikale Ausrichtung: legt fest, ob Zelleninhalte oben bündig, unten bündig oder zentriert angezeigt werden sollen Hintergrundfarbe: Beim Klick auf die Zeile erscheint ein Farbwähler. In die Zeile darunter trägt man die RGB-Farbnummer ein. Folgende Farben sind erlaubt: dunkelstes Gelb: FFE59A mittleres Gelb: FFFACD hellstes Gelb: FFFFF0 CSS Style: greift nicht auf die HeBIS-eigenen Styles für Tabellenzellen zu und wird deshalb nicht verwendet Spalten einfügen (rechts) (links) Vor dem Klicken auf diese Symbole muss eine Zelle markiert sein, dann wird die Spalte entsprechend links oder rechts davon eingefügt. Zeilen einfügen (oberhalb) (unterhalb) Auch diese Funktionen werden ab Cursorposition in der Tabelle ausgeführt.

8 8/9 Spaltenspannweite erhöhen Ab Cursorposition wird die Zeile rechts daneben mit der markierten Zelle verbunden. Diese Funktion kann über mehrere Spalten hinweg verwendet werden. (Word: Funktion "Zellen verbinden") Im Bildschirm "Zelleigenschaften" steht dann "Spannweite: x" (je nach Anzahl der Spalten, über die sich die zusammengeführte Zelle erstreckt). Spaltenspannweite erniedrigen Verbundene Zellen können mit dieser Funktion wieder geteilt werden. (Word: Funktion "Zellen teilen") RTF-Import Bei bereits vorhandenen Texten kann man sich die Schreibarbeit sparen, indem man die Funktion RTF-Import benutzt. Dateien im RTF- und im TXT-Format können verwendet werden. Tipp: Man kann DOC-Texte als RTF abspeichern, damit man sie verwenden kann. Im folgenden Bildschirm kann man die Datei von der eigenen Festplatte auswählen, die importiert werden soll. Bitte die Checkboxen unterhalb der Dateiauswahl nicht ankreuzen. Schriftarten, Schriftgrößen und Schriftfarben werden durch die CMS-Templates bestimmt. Als nächstes erscheint eine Vorschau, die allerdings wenig nützt, weil sie im HTML-Code wiedergegeben ist. Nach dem Bestätigen des Imports wird der Text im WYSIWYG-Editor angezeigt und kann ggf. weiter bearbeitet werden. Grafiken und Tabellen werden aus den importierten RTF- oder TXT-Dateien nicht übernommen! Editor im Fullscreen-Modus öffnen Bei umfangreichen Texten bietet es sich an, im Vollbild-Modus zu arbeiten. Dann nimmt der Editor den gesamten Bildschirm ein und ein größeres Edit-Fenster steht zur Verfügung.

9 9/9 Kopieren, Ausschneiden, Einfügen Diese Funktionen sind hinlänglich bekannt und erfüllen auch hier keinen anderen Zweck. Rückgängig, Wiederherstellen Mit der Funktion "Rückgängig" können mehrere Schritte wieder aufgehoben werden. Mit "Wiederherstellen" stellt man rückgängig gemachte Aktionen wieder her. "Rückgängig" und "Wiederherstellen" funktionieren nicht, wenn man zwischenzeitlich in einen anderen Ansichtsmodus (z. B. Vollbild) gewechselt hat. Versteckte Ränder Funktion unbekannt Umschalter "Quellcode bearbeiten"/"wysiwyg-editor" Mit dem Klick auf den Bleistift schaltet man in den Quellcode-Modus um. Hier können die HTML- Tags direkt bearbeitet werden. In der HTML-Ansicht erscheint anstelle des Bleistifts als Symbol das Auge, mit dem man zurück in den WYSIWYG-Modus wechselt.