Editor (Inhalte oder Infobox (rechts links))+Rahmen


Auswahlmöglichkeiten zur Formatierung vor dem Öffnen des Editors

Auswahl vor Editor ​​

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.

[mehr erfahren]

  • 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.

I9 Editor

 

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.

I9 Format Editor

Überschrift 2

Überschrift 3

Überschrift 4

Fließtext (Normal),

 aber auch spezielle, wie formatiert 
und 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 Icons Text einfügen 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.

[mehr erfahren]

Ü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>
  1. Punkt 1
  2. Punkt 2
  3. 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 I9 Icon Tabelle "Tabelle einfügen/editieren" lassen sich Tabellen mit Standardeinstellungen schnell erstellen.

I9 Tabelle ​​

  • 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.

[mehr erfahren]

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

I9 Icon Hyperlink Durch Anklicken dieses Icons lassen sich Hyperlinks einfügen. Mit den danebenstehenden Icon lassen sich bereitserstellte wieder löschen.

I9 Hyperlinkfenster1

I9 Hyperlinkfenster2 ​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 ​I9 Icon AnkerAnker 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 I9 Icon Hyperlink 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 I9 Icon Hyperlink Verknüpfung #Seitenanfang.
So kann auch die Textmarke aus dem anderen Flexmodul angesprungen werden.

 

Einbindung von Bildern über das MAM:

I9 Iconbild

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.

I9 Editor MAM Fenster

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

[mehr erfahren]

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 ​I9 Icon Hyperlink 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.

I9 Editor Quelltext

Webberatung | 10.05.2024