Editor (Inhalte oder Infobox (rechts links))+Rahmen
Inhaltsübersicht
Die folgenden Punkte erläutern das Spektrum des Editors
- Auswahlmöglichkeiten zur Formatierung vor dem Öffnen des Editors
- Der Editor
- Formatieren im Editor
- Inhalte aus Word kopieren und einfügen
- Aufzählungen und Listengestaltung
- Tabellengestaltung
- Hyperlinks vergeben
- Anker setzen
- Einbindung von Bildern über das MAM
- Verknüpfen eines PDF Dokumentes aus dem MAM
- Im "Quellcode" auf den Quelltext zuzugreifen
Auswahlmöglichkeiten zur Formatierung vor dem Öffnen des Editors
Eine Erweiterung des Editors erlaubt eine grundsätzliche Formatierung des eingegebenen Textes. Die Formatierungen, die unter dem Auswahlfenster "Formatvorlage" vor dem Editor bieten eine Auswahl an Optionen.
- keine
- kleinere Schriftgröße
Optionen zu grauen Rahmen
- graue Rahmen
- graue Rahmen + kleinere Schriftgröße
- graue Rahmen mit runden Ecken
- graue Rahmen mit runden Ecken und kleinerer Schriftgröße
Optionen zu roten Rahmen
- rote Rahmen
- rote Rahmen + kleinere Schriftgröße
- rote Rahmen mit runden Ecken
- rote Rahmen mit runden Ecken und kleinerer Schriftgröße
Optionen zu grauem Hintergrund
- grauer Hintergrund
- grauer Hintergrund + kleinere Schriftgröße
- grauer Hintergrund mit runden Ecken
- grauer Hintergrund mit runden Ecken und kleinerer Schriftgröße
Optionen zur Infobox rechts
- Infobox rechts: Breite 30%, runde graue Rahmen
- Infobox rechts: Breite 30%, runde rote Rahmen
- Infobox rechts: Breite 40%, runde graue Rahmen
- Infobox rechts: Breite 40%, runde rote Rahmen
- Infobox rechts: Breite 30%, ohne Rahmen
- Infobox rechts: Breite 30% ohne Rahmen + kleinere Schriftgröße
Beipiele:
Beispiel 1:
Graue Rahmen
Beispiel 2:
Roter Rahmen mit runden Ecken und kleinerer Schriftgröße
Beispiel 3
Grauer Hintergrund mit runden Ecken
Beispiel 4
Infobox rechts: Breite 30%, runde rote Rahmen
Der Editor
In einem gesonderten Fenster wird der Editor geöffnet. Hinter dem Editor verbirgt sich ein mächtiges Element indem sich nahezu alle für das Web gewünschten Darstellungen realisieren lassen, solange in den vorgegebenen bzw. festgelegten Formatierungen gearbeitet wird. Es lässt sich z. B. keine lila blinkende Schrift oder eigene Schriftformate erzeugen. Nur so können wir ein einheitliches Layout und grundlegende Maßnahmen zur Barrierefreiheit im FernUni Web gewährleisten.
Der Editor funktioniert ähnlich wie ein "abgespecktes" Textverarbeitungsprogramm.

Formatieren mit dem Editor
Der Editor bietet zahlreiche Möglichkeiten zur Gestaltung von Texten. So beinhaltet er alle Standardformatierungen bzgl. Schriftformen (fett (B), kursiv I, unterstreichen (U). Diese sollten allerdings nicht zur strukturellen Formatierungen wie z.B. Überschriften verwendet werden.
Alle Formatierungen basieren auf der CSS Datei, die für das Erscheinungsbild der einzelnen Formatierungen zuständig ist. Das Ergebnis sehen Sie unter der Vorschau oder auf der veröffentlicheten Webseite.
Sie sollten über das Auswahlfeld Format
vergeben werden. Sie beinhalten Formatierungen, wie Überschriftentypen (von <H2> bis <H4>) und normalen Text.
Überschrift 2
Überschrift 3
Überschrift 4
Fließtext (Normal),
aber auch spezielle, wie formatiertund Adresse vergeben.
in dem daneben liegenden Fenster folgen Textauszeichnungen wie fett, kursiv, unterstrichen, durchgesrichen, tiefgestellt, hochgestellt.
Inhalte aus Word kopieren und einfügen
Sollten Sie den Text nicht direkt eingeben, sondern aus externen Anwendungen z.B. Word kopieren, können Sie über die Einfügeicons
mit "Strg V" den Text direkt dort einfügen. So werden direkt vom eingefügten Text unnötige Formatierungen entfernen.
Was wird genau bei einkopierten Texten aus Word entfernt?
Strukturelle Informationen wie Überschriften, Tabellen bleiben bestehen. Jedoch bleiben nicht die Schrifttypen, die in Word vergeben wurden und alles Überflüssige, was nicht im HTML Code dienlich ist gelöscht. Die Formatierungen werden im Editor auf die "css des FernUniwebs" angepasst.
Aufzählungen und Listengestaltung
Neben den Formatierungsfentern folgen ein Fenster Aufzählungs- und Listenicons, die sie benutzen sollten sobald Sie ein Textpassage mehrere Sachverhalte aufzeigt. Zur Gestaltung gibt es mehrere Möglichkeiten.
Über den Icon "nummerierte Liste" lassen sich Aufzählungen formatieren.
Quellcode: <ol><li>Punkt 1</li> <li>Punkt 2</li> <li>Punkt 3</li></ol>
- Punkt 1
- Punkt 2
- Punkt 3
Listen
Über den Icon "Liste" lassen sich Listen formatieren
Quellcode: <ul> <li>Punkt 1</li> <li>Punkt 2</li> <li>Punkt 3</li> </ul>
- Punkt 1
- Punkt 2
- Punkt 3
Sollten sie eine andere Darstellung als die o.g. Standardeinstellung vornehmen können Sie dies im Editor über den Quellcode mit Vergabe der entprechenden Class z. b. <ul class="pfeil"> erreichen.
Quellcode: <ul class="pfeil"> <li>Punkt 1</li> <li>Punkt 2</li> <li>Punkt 3</li> </ul>
- Punkt 1
- Punkt 2
- Punkt 3
Über das daneben liegende Icon können Sie die markierten Listenpunkte einrücken.
Quellcode: <ul> <li>Listenpunkt <ul> <li>Listenpunkt</li> <li>Listenpunk</li> </ul> </li> </ul>
Beispiel:
- Listenpunkt
- Listenpunkt
- Listenpunk
Zitat und Zitatblock befinden sich noch in der Testphase
Tabellengestaltung
Hinweis zur Tabellengestaltung:
Für eine komfortable Gestaltung von Tabellen eignet sich herforragend die Flexmodule Tabellen 2, 3, 4, 5 Spalten.
Über den im Editor zur Verfügung stehend Icon
"Tabelle einfügen/editieren" lassen sich Tabellen mit Standardeinstellungen schnell erstellen.
- Im Tabellen Eigenschaften Fenster erst die Grundeinstellungen vornehmen
- Über OK bestätigen
- Dann in der angezeigten Tabelle den Text eingeben
Tabellenbeispiele
Mit Hilfe von Classangaben können Sie die Tabellen unterschiedlic gestalten. Im Folgenden finden Sie einige Beispiele.
Standardtabelle
Die Standardtabelle entsteht ohne Anwendung von Class-Angaben. Die Tabellengröße wird durch die Angabe der Textmengen automatisch bestimmt.
| Spalte 1 (th) | Spalte 2 (th) |
|---|---|
| Eintrag 1 (td) | Eintrag 2 (td) |
| Eintrag 1 (td) | Eintrag 2 (td) |
| Eintrag 1 (td) | Eintrag 2 (td) |
Standardtabelle - th links
| Spalte (th) | Zelle (td) |
|---|---|
| Spalte (th) | Zelle (td) |
| Spalte (th) | Zelle (td) |
Der dazugehörige Quelltext würde folgendermaßen aussehen:
<h3>Standardtabelle - th links</h3>
<table>
<tbody>
<tr>
<th>Spalte (th)</th>
<td>Zelle (td)</td>
</tr>
<tr>
<th>Spalte (th)</th>
<td>Zelle (td)</td>
</tr>
<tr>
<th>Spalte (th)</th>
<td>Zelle (td)</td>
</tr>
</tbody>
</table>
Einfügen von Class-Angaben:
Das Aussehen der folgenden Tabellenbeispiele kann im Quelltext durch Angabe der Class bestimmt werden.
Beispiel Quelltext: class="tabelle-grau100"
<table class="tabelle-grau100"> <thead> <tr> <th>Spalte 1 (th)</th> <th>Spalte 2 (th)</th> </tr> </thead> <tbody> <tr> <td>Eintrag 1 (td)</td> <td>Eintrag 2 (td)</td> </tr> <tr> <td>Eintrag 1 (td)</td> <td>Eintrag 2 (td)</td> </tr> <tr> <td>Eintrag 1 (td)</td> <td>Eintrag 2 (td)</td> </tr> </tbody> </table>
Ergebnis:
class="tabelle-grau100"
| Spalte 1 (th) | Spalte 2 (th) |
|---|---|
| Eintrag 1 (td) | Eintrag 2 (td) |
| Eintrag 1 (td) | Eintrag 2 (td) |
| Eintrag 1 (td) | Eintrag 2 (td) |
Weitere Beispiele:
class="tabelle-grau"
| Spalte 1 (th) | Spalte 2 (th) |
|---|---|
| Eintrag 1 (td) | Eintrag 2 (td) |
| Eintrag 1 (td) | Eintrag 2 (td) |
| Eintrag 1 (td) | Eintrag 2 (td) |
class="tabelle100"
| Spalte 1 (th) | Spalte 2 (th) |
|---|---|
| Eintrag 1 (td) | Eintrag 2 (td) |
| Eintrag 1 (td) | Eintrag 2 (td) |
| Eintrag 1 (td) | Eintrag 2 (td) |
class="tabelle-weiss"
| Spalte 1 (th) | Spalte 2 (th) |
|---|---|
| Eintrag 1 (td) | Eintrag 2 (td) |
| Eintrag 1 (td) | Eintrag 2 (td) |
| Eintrag 1 (td) | Eintrag 2 (td) |
class="tabelle-weiss100"
| Spalte 1 (th) | Spalte 2 (th) |
|---|---|
| Eintrag 1 (td) | Eintrag 2 (td) |
| Eintrag 1 (td) | Eintrag 2 (td) |
| Eintrag 1 (td) | Eintrag 2 (td) |
class="ohne-rahmen"
| Spalte 1 (th) | Spalte 2 (th) |
|---|---|
| Eintrag 1 (td) | Eintrag 2 (td) |
| Eintrag 1 (td) | Eintrag 2 (td) |
| Eintrag 1 (td) | Eintrag 2 (td) |
class="ohne-rahmen100"
| Spalte 1 (th) | Spalte 2 (th) |
|---|---|
| Eintrag 1 (td) | Eintrag 2 (td) |
| Eintrag 1 (td) | Eintrag 2 (td) |
| Eintrag 1 (td) | Eintrag 2 (td) |
Formatierung für Tabellenzellen:
class= "rechtsbuendig" (Text rechtsbündig) class= "linkssbuendig" (Text rechtsbündig) class= "zentriert" (Text zentriert) class= "grau" (grauer Hintergrund)
Die Tabellengestaltung ist wohl eines der schwierigsten Kapitel - nicht nur in Imperia.
Neben der Möglichkeit über das Icon "Tabelle einfügen/editieren" ist es hier für Fortgeschrittene mit HTML Kenntnissen ratsam sich den Quelltext genauer anzuschauen und die Eingaben ggf. dort vorzunehmen. So ist z. B. das Löschen einer nicht mehr benötigeten Tabelle im Quelltext der schnellste Weg.
Ein weiterer Weg wäre, die Tabelle in einem Textverarbeitungsprogramm zu gestalten um sie dann im Editorfeld einzukopieren. Die Spalten- und Zeilendarstellung wird übernommen. Ansonsten stehen für eine komfortable Gestaltung von Tabellen die Flexmodule Tabellen 2, 3, 4, 5 Spalten zur Verfügung.
Hinweis zur Barrierefreiheit von Tabellen:
Bitte Beachten Sie wofür Sie die Tabelle benötigen. Ist die inhaltliche Umsetzung als Tabelle sinnvoll. D.h. sind die Informationen im Zusammenhang mit Spalten und Zeilen zu lesen und zu verstehen? Dann ist dieTabelle angebracht. Tabellen die zur Positionierung oder rein zur Layoutgestaltung dienen sollten vermieden werden, da Sie eine Barriere für darstellen.So wird der Inhalt wird mit der gesamten Zeilen und Spaltenangebevon einem Screenreader vorgelesen.
Hyperlinks vergeben
Durch Anklicken dieses Icons lassen sich Hyperlinks einfügen. Mit den danebenstehenden Icon lassen sich bereitserstellte wieder löschen.

Durch das aufklappende Fenster lassen sich Hyperlinks, Emails und Anker setzen. Über <anderes> lassen sich auch relative Links oder auch Einsprungmarken vergeben.
Ebenso bestehen im Protokoll unterschiedliche Wahlmöglichkeiten.
Anker setzen und verknüpfen
Über das Symbol
Anker markieren oder setzen Sie den Bereich zu dem hingesprungen werden soll und vergeben dort einen Namen. Dann gehen Sie zurück zu dem Punkt in dem verknüpft werden soll. Mit dem Verknüpfungselement
können Sie nun unter "Anker in dieser Seite" den Namen verknüpfen.
Hinweis!
Sollte sich die anzuspringende Textmarke in einem anderen Flexmodul befinden wird dies über Link nicht angezeigt. In diesem Fall merken oder kopieren Sie sich bitte den Ankernamen "z. B. Seitenanfang" und geben Sie direkt in die
Verknüpfung #Seitenanfang.
So kann auch die Textmarke aus dem anderen Flexmodul angesprungen werden.
Einbindung von Bildern über das MAM:
Durch Anklicken des Bildicons kommen Sie in das Media Asset Management, welches Bilder (images) und Dokumente (content) verwaltet. Dort sind Verzeichnisse speziell für Ihr Gebiet eingerichtet. Von dem entsprechenden Verzeichnis können Sie bereits vorhandene Medien direkt verwenden, oder in das von Ihnen gewünschte Bild, im entsprechenden Verzeichnis hochladen. Bilder sind im Verzeichnis images und dort auch beim Hochladen abzulegen.

Hinweis!
Um lange Ladezeiten zu vermeiden optomieren Sie bitte die Bilder im Vorfeld mit einem geeignten Bildbearbeitungsprogramm.
Um eine Formatierung des Bildes vorzunehmen, können Sie dies beim ersten Laden unter dem Reiter "Erweitert" eine Class vergeben. Danach ist die Classvergabe nur noch im Quelltext möglich.
Verwendung von Classangaben bei Bildern
Um die Größe von Bildern im Editor besser zu steuern können Sie im Quelltext Classangaben verwenden.
Hinweis zur Barrierefreiheit von Bildern:
- Um das Bild mit wichtigem Inhalt für Screenreader zugänglich zu machen müssen sie mit einem Alternativtext versehen werden. Dies können Sie im Fenster beim Importieren des Bildes eingeben (Reiter: Bildinfo - Alternativer Text). Später ist dies nur noch im Quelltext möglich.
- Bilder die Textabschnitte darstellen sind nicht barrierefrei. Text sollte als immer Text eingebunden werden.
- Grafische Schaubilder müssen erläutert werden
mehr Infos dazu im Barrierefrei Web
Verknüpfen eines PDF Dokumentes aus dem MAM
-
Um PDF Dokumente aus dem MAM zu verknüpfen gehen Sie wie folgt vor.
- Sie markieren den Text der verknüpft werden soll
- Beispiel Imperia Quickreferenz (pdf)
- Dann haben Sie durch Anklicken des Hyperlinkicons
die Möglichkeit durch das aufgehende Fenster "MAM durchsuchen" anzusteuern. - Alle Textdokumente werden unter "Content" in Ihrem entsprechenden fachspezifischen Unterordner "+" abgelegt.
- Ist das Dokumente noch nicht in der MAM können Sie es (wie ein Bild) über die MAM unter im Ordner "Content" im entsprechenden Unterordner hochladen.
Wichtiger Hinweis zur Vergabe von Dateinamen!
Für alle Dateiarten gilt:
Achten Sie bitte auf die Konventionen bei der Vergabe von Dateinamen:
Klein schreiben, keine Sonderzeichen oder Umlaute, keine Leerzeichen!
Dies gilt auch für externe Dateien, wie PDF, DOC und alle Bilddateien!
Im "Quellcode" auf den Quelltext zuzugreifen
Dies sollte nur denen vorbehalten sein, die mit dieser Materie absolut vertraut sind. Zudem sollte er nicht missbräuchlich zur Entstehung von "eigenen Kreationen" verwandt werden.
"HTML Kenner" können hier kompliziertere Formatierungen direkt im Quelltext eingeben. (Eigene "Befehlskreationen" sind häufig nicht realisierbar, da sie z.B. aus Barrierefreiheitsgründen gefiltert werden).
Er eignet sich inbesondere dazu den Quelltext mit den Class- oder ID-Angaben zu ergänzen umso Formatierugen umzusetzen.
Weitere Informationen
- Flexmodule:
- Überschrift
- Abstand/Zeilenumbruch
- Bild/Foto/Unterschrift
- Block 1: Überschrift/Bild/Texteditor
- Block 2: Hintergrund/Rahmen mit kleinem Bild (eingerückt)
- E-Mail (Spamschutz)
- Editor (Inhalt oder Infobox (rechts/links))+Rahmen
- Inhalt in zwei Spalten
- Kalender Tool
- Möglichkeiten zur Listengestaltung
- Liste/Linkliste (Zusatztext mit dem Editor)
- Liste/Linkliste oder E-Mail
- Liste über Editor erstellen
- Mathematische Formeln im Editor
- Publikationsliste mit Einzug
- Möglichkeiten zur Tabellengestaltung
- Tabelle - 2, 3, 4, 5 Spalten
- Tabelle im Editor
- Tabs
- Text ohne Editor
- Textblock mit Rahmen/Bild/Editor
- Textblock:Hintergrund oder Rahmen/Bild/Editor
- Textfeld (aufklappen)
- Trennlinie
