Zurück
Weiter

24. Tipps zur Kursraum- und Textgestaltung

24.10. Farbig unterlegte Textfelder erstellen


Beschreibung

Voreingestellt ist im HAW-Moodle der Atto-Texteditor als Standard-Editor (What you see is what you get - WYSIWYG). Der alternative Texteditor TinyMCE bietet mehr Funktionen, kann aber anfangs durch seinen Funktionsumfang und fehlendes WYSIWYG auch verwirren.

Der TinyMCE-Editor eignet sich neben der Bearbeitung des HTML-Codes der Texte insbesondere für die Anlage und Gestaltung von Tabellen.

Dies ist eine Tabelle mit einer einzelnen, gerahmten und farbig unterlegten Tabellenzelle.
(Rahmen 1 px, Zellenabstand Innen 20 px, hellblauer Hintergrund)

Aufgaben, wichtige Informationen und Warnungen, Quellen oder Fußnoten können so visuell im Textfluss hervorgehoben werden.

Achtung: Achten Sie für die Lesbarkeit auf einen ausreichenden Kontrast zwischen Hintergrundfarbe und Schriftfarbe!


Der HTML-Code für die obige Tabellenzelle lautet:

 <table style="border-collapse: collapse; width: 100%; border-width: 1px; background-color: #bbe9ff; border-color: #000000;" border="1"><colgroup><col style="width: 100%;"></colgroup><tbody><tr><td style="border-width: 1px; padding: 10px; border-color: rgb(0, 0, 0);">

<p>Dies ist eine Tabelle mit einer einzelnen, gerahmten und farbig unterlegten Tabellenzelle</p>

</td></tr></tbody></table>


Anleitung

So schalten Sie auf den TinyMCE-Texteditor um
Öffnen Sie über das User-Menü die "Einstellungen" (erscheint nach Klick auf Ihre Initialien bzw. Ihr Profilbild rechts oben in der blauen Kopfzeile). Dort wählen Sie über "Texteditor wählen" die Option "Editor TinyMCE". Anschließen steht Ihnen in jedem Textfeld der alternative Editor zur Verfügung.

Tabellenzellen anlegen im TinyMCE-Texteditor

  1. Klicken Sie in Ihrem Text an die Stelle, an der Sie ein Tabellenfeld einfügen möchten.
  2. Wählen Sie in der Texteditor-Menüleiste Einfügen -> Tabelle aus und definieren Sie über das Raster gleich die Größe Ihrer Tabelle. In unserem Fall reicht eine 1x1-Tabelle.
  3. Über dem neu angelegten Tabellenfeld erscheint nun eine Menüleiste; diese können Sie später mit Linksklick auf Ihre Tabelle immer wieder aufrufen.
    Hier wählen Sie das linke Menüicon "Tabelleneigenschaften" aus.
  4. Legen Sie im Menüfenster "Tabelleneigenschaften" unter "können Sie unter "Zellenabstand Innen" den Abstand zwischen Text und Tabellenrahmen fest, stellen Sie hier z.B. 20 ein.
    Unter "Erweitert" (linker Index) können Sie die "Rahmenfarbe" und "Hintergrundfarbe" Ihres Tabellenfeldes festlegen.
  5. Sie können nun nach Klick in Ihre Tabellenzelle Ihren Text eintragen oder einkopieren.

Weitere externe Ressourcen

Vorformatierte Tabellen definieren über HTML-Code bzw. bootstrap-Bibliothek (bootstrapword.de):
https://www.bootstrapworld.de/tabelle-tutorial.html

Zurück
Weiter