Abschnitt: Formatvorlagen mit Bildern | Moodle: Designvorlagen + Anleitungen | Rhein-Gymnasium Köln

Kursübersicht

  • Allgemein

    CSS-Vorlagen

    für eure Moodle-Räume

Absatzlayouts mit Boxen

Formatvorlagen mit Bildern

  • Formatvorlagen mit Bildern

    • Verwendung mit dem Absatz < p >; mehrzeilig

    • Aufgabe

      Hier wird die Aufgabe per class="aufgabe" definiert. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

    • Diagramm2

      Hier wird die Information per class="diagramm2" definiert. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

    • Alphabet

      Hier wird die Information per class="alphabet" definiert. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

    • Email
    • Idee

      Hier wird die Information per class="idee" definiert. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

    • Taschenrechner

      Hier wird die Information per class="taschenrechner" definiert. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

    • Musik

      Hier wird die Information per class="musik" definiert. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

    • Plus

      Hier wird die Information per class="plus" definiert. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

    • Uhr

      Hier wird die Information per class="uhr" definiert. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

    • Information

      Hier wird die Information per class="information" definiert. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

    • Ti Inspire CX

      Hier wird die Information per class="ti" definiert. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

    • Zahlen

      Hier wird die Information per class="null" definiert. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

      Hier wird die Information per class="eins" definiert. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

      Hier wird die Information per class="zwei" definiert. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

      Weiter geht es mit

      drei vier fuenf sechs sieben acht neun zehn

    • Zahlen

      Hier wird die Information per class="null_s" definiert. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

      Hier wird die Information per class="eins_s" definiert. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

      Hier wird die Information per class="zwei_s" definiert. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

      Weiter geht es mit

      drei_s vier_s fuenf_s sechs_s sieben_s acht_s neun_s

    • Verwendung mit Überschriften; einzeilig

    • Verwendung mit Überschrift 1

      Verwendung mit Überschrift 2

      Verwendung mit Überschrift 3

      Eine Verwendung mit kleineren Überschriften ist graphisch nicht zu empfehlen. Ebensowenig sollten Überschriften über zwei Zeilen verlaufen, denn dann sind die Abstände nicht ansprechend.

    • Box mit weißem Hintergrund in gelb, defininert im Absatz per class="box_gelb".

      Box mit weißem Hintergrund in rot, defininert im Absatz per class="box_rot".

      Box mit weißem Hintergrund in blau, defininert im Absatz per class="box_blau".

      Box mit weißem Hintergrund in grün, defininert im Absatz per class="box_gruen".

    • Box in gelb mit hellgelbem Hintergrund, defininert im Absatz per class="box_gelb_f".

      Box in rot mit hellrotem Hintergrund, defininert im Absatz per class="box_rot_f".

      Box in blau mit hellblauem Hintergrund, defininert im Absatz per class="box_blau_f".

      Box in grün mit hellgrünem Hintergrund, defininert im Absatz per class="box_gruen_f".

    • Absatzlinie links in gelb, defininert im Absatz per class="linie_gelb".

      Absatzlinie links in rot, defininert im Absatz per class="linie_rot".

      Absatzlinie links in blau, defininert im Absatz per class="linie_blau".

      Absatzlinie links in grün, defininert im Absatz per class="linie_gruen".

    • Überschrift 3 mit farbiger Unterlegung

      Überschrift 4 mit farbiger Unterlegung

      Überschrift 5 mit farbiger Unterlegung

      Ein Absatz mit einfarbigem Hintergrund. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

      Erzeugt wird der Effekt per class = "blau".

      Im Folgenden wird der Effekt nur mit Überschrift 4 und dem Absatz gezeigt.

    • Überschrift 4 mit class="grau".

      Ein Absatz mit einfarbigem Hintergrund. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

      Überschrift 4 mit class="gelb".

      Ein Absatz mit einfarbigem Hintergrund. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

      Überschrift 4 mit class="gruen".

      Ein Absatz mit einfarbigem Hintergrund. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

      Überschrift 4 mit class="rot".

      Ein Absatz mit einfarbigem Hintergrund. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

      Überschrift 4 mit class="orange".

      Ein Absatz mit einfarbigem Hintergrund. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

    • Überschrift 4 mit Textur class="bark".

      Überschrift 4 mit Textur class="earth".

      Überschrift 4 mit Textur class="stormy".

      Ein Absatz mit Texturhintergrund. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

      Überschrift 4 mit Textur class="mushroom".

      Überschrift 4 mit Textur class="sea".

      Überschrift 4 mit Textur class="limestone".

      Überschrift 4 mit Textur class="sand".

      Überschrift 4 mit Textur class="fern".

      Überschrift 4 mit Textur class="olive".

      Überschrift 4 mit Textur class="fawn".

      Überschrift 4 mit Textur class="sedona".

      Ein Absatz mit Texturhintergrund. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

      Überschrift 4 mit Textur class="sedona".

      Ein Absatz mit Texturhintergrund. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

    • Trenner "Zusatzmaterial (Plus)"

      Hier wird der Trenner mit class="plus_linie" erzeugt. Die Schrift ist auf fett eingestellt.

    • Grundprinzip

      Die externen Elemente oder Webseiten werden eingebettet. Dazu braucht ihr ein wenig HTML-Code, der euch aber nicht überfordern dürfte.

    • Fremdsprachenunterricht: Lernkarteikarten Quizlets

      Beschreibung der Anwendung

    • Icon Textseite
      Quizlet Vokabeln Textseite

    • Erdkunde: Kartenmaterial Google Maps

    • Icon Textseite
      Beispielkarte Köln-Mülheim Textseite

    • Alle Fächer: Learning-Apps (Tests etc.)

      Homepage der Learning-Apps

    • Icon Textseite
      Funktion und Stammfunktion zuordnen Textseite
    • Icon Lernpaket
      Test Quadratische Funktionen – Grundwissen Lernpaket

      Die Learnin-Apps lassen sich auch als Scrom-Paket einlesen. Damit wird gewähleistet, dass die Auswertung des Test in Moodle gesammelt wird.

    • Alle Fächer: Prezi-Vorträge

    • Icon Textseite
      Prezi-Beispiel Textseite

    • https://de.padlet.com/

Absatzlayouts mit Boxen