Decker Workshop

Folienerstellung - Folienlayout

Sebastian Lukas Hauer

Lehrstuhl für Computergraphik, TU Dortmund

🚀 by Decker

Folienpositionierung

Je nach verwendetem Ressourcen-Paket werden die Folien unterschiedlich auf der Webseite positioniert ausgerichtet.

Man kann diese Voreinstellung überschreiben, indem man die yaml-Konfigurationsoption reveal.center anpasst:

reveal:
  center: true
yaml-Konfiguration zum zentrieren aller Folien

Wird diese Option auf true gesetzt werden alle Folieninhalte zentriert positioniert.

Wird diese Option auf false gesetzt werden alle Folieninhalte linksbündig in der oberen linken Ecke des Folienzeichenfläche platziert.

Übliches Layout

Folieninhalte werden üblicherweise untereinander angeordnet. Zwei Inhalte werden dabei im Quelltext von mindestens einer leeren Zeile voneinander getrennt.

Erster Textparagraph.
Dieser Text gehört mit zum ersten Paragraphen.

Zweiter Textparagraph.
Dieser Text gehört mit zum zweiten Paragraphen.
Markdownquelltext für zwei untereinander angeordnete Textinhalte

Beispiel: Übliches Layout

Erster Textparagraph.
Dieser Text gehört mit zum ersten Paragraphen.

Zweiter Textparagraph.
Dieser Text gehört mit zum zweiten Paragraphen.
Beispielquelltext. Bemerken Sie, dass obwohl ein Zeilenumbruch im Quelltext vorhanden ist die beiden Zeilen trotzdem zum selben Paragraphen gehören und daher im Resultat nicht umgebrochen werden.

Erster Textparagraph. Dieser Text gehört mit zum ersten Paragraphen.

Zweiter Textparagraph. Dieser Text gehört mit zum zweiten Paragraphen.

Zeilenumbrüche

Möchten Sie innerhalb eines Paragraphen einen Zeilenumbruch erzwingen, so müssen Sie die Zeile mit zwei aufeinanderfolgenden Leerzeichen beenden:


Dies ist ein Paragraph mit Zeilenumbruch.  
Die vorherige Zeile endet mit zwei Leerzeichen.

Resultat

Dies ist ein Paragraph mit Zeilenumbruch.
Die vorherige Zeile endet mit zwei Leerzeichen.

Spaltenlayout

Möchten Sie zwei Inhalte auf den Folien nebeneinander ausrichten, so müssen Sie einen Bereich mit der Klasse columns- deklarieren. Hinter dem Bindestrich der columns--Klasse können Sie das Größenverhältnis der Spalten zueinander bestimmen. Zum Beispiel haben zwei gleich große Spalten haben ein Verhältnis von 1-1.

::: columns-1-1

Erster Inhalt

Zweiter Inhalt

:::
Beispielquelltext für ein einfaches Spaltenlayout. Das Resultat ist unten zu sehen und wurde farblich hervorgehoben, um die Aufteilung des Platzes zu verdeutlichen.

Erster Inhalt

Zweiter Inhalt

Spaltenlayout mit unterschiedlichen Größen

Drei Spalten, von denen die mittlere um ein Drittel größer ist als die anderen wären im Verhältnis 2-3-2. Sie können beliebig viele Zahlen - mit Bindestrichen getrennt - notieren, um entsprechend viele Spalten im Bereich zu erzeugen.

::: columns-2-3-2

Erster Inhalt

Zweiter Inhalt

Dritter Inhalt

:::
Beispielquelltext für ein einfaches Spaltenlayout. Das Resultat ist unten zu sehen und wurde farblich hervorgehoben, um die Aufteilung des Platzes zu verdeutlichen.

Erster Inhalt mit längerem Text

Zweiter Inhalt mit längerem Text

Dritter Inhalt mit längerem Text

Spalteninhalte Gruppieren

Wenn Sie mehrere Inhalte in der selben Spalte platzieren möchten gibt es dazu zwei Möglichkeiten. Entweder Sie Gruppieren die Elemente einer Spalte in einem eigenen Bereich oder Sie beschreiben die Inhalte des Spaltenlayouts alternierend. Sobald Sie mehr Inhalte als Spalten angeben wird der überschüssige Inhalt wieder von der ersten Spalte ausgehend platziert.

Innere Bereiche, die Spalten gruppieren müssen einen beliebigen Namen bzw. eine beliebige CSS-Klasse zugewiesen bekommen, da die drei Doppelpunkte , die den inneren Bereich öffnen sollen, ansonsten als Ende des Spaltenlayouts interpretiert werden. Sie können auch leere geschweifte Klammern verwenden, um die drei Doppelpunkte eindeutig als Anfang eines inneren Bereichs zu kennzeichnen.

Beispiel: Spaltengruppierung durch Bereiche

::: columns-1-1

::: ersteSpalte

Dieser Text ist zusammen mit dem folgenden Text in einer Spalte.

Ich bin zusammen mit dem ersten Paragraphen in einer Spalte.

:::

::: {}

Dieser Text ist zusammen mit einem anderen Text in einer Spalte.

Ich bin zusammen mit dem dritten Paragraphen in einer Spalte.

:::

:::
Navigieren Sie nach unten, um das Ergebnis dieses Beispielquelltextes zu sehen.

Ergebnis: Spaltengruppierung durch Bereiche

Dieser Text ist zusammen mit dem folgenden Text in einer Spalte.

Ich bin zusammen mit dem ersten Paragraphen in einer Spalte.

Dieser Text ist zusammen mit einem anderen Text in einer Spalte.

Ich bin zusammen mit dem dritten Paragraphen in einer Spalte.

Spaltengruppierung durch Alternierung

::: columns-1-1

Dies ist in der linken Spalte.

Dies ist in der rechten Spalte.

Dies ist erneut in der linken Spalte.

Dies ist erneut in der rechten Spalte.

:::
Navigieren Sie nach unten, um das Ergebnis dieses Beispielquelltextes zu sehen.

Ergebnis: Spaltengruppierung durch Alternierung

Dies ist in der linken Spalte.

Dies ist in der rechten Spalte.

Dies ist erneut in der linken Spalte.

Dies ist erneut in der rechten Spalte.

Spaltenlayout in verschachtelten Bereichen

Col A

Col B

Spaltengrößen

Spaltengrößen können ausschließlich in Ganzzahlen angegeben werden. Möchten Sie also z.B. ein Verhältnis von 1 zu 1.5 angeben, so müssen Sie die Verhältnisse als 2-3 angeben.