Anleitung zum Umgang mit Twine
- Öffne die Twine-Website: https://twinery.org/.
- Klicke auf Use in your browser.
- Klicke auf Twine – Preferences – Language und wähle Deutsch.
- Klicke auf Geschichte – +Neu. Gib den Namen des Textadventures ein. Klicke auf Erstellen.
- Klicke auf Geschichte – Details. Wähle das Geschichtsformat Harlowe 1.2.4.
- Bearbeite einen Textabschnitt mit einem Doppelklick auf das Kästchen. (Alternative: Klicke auf Abschnitt – Bearbeiten).
- Um weitere Textabschnitte zu erstellen, setze Hyperlinks. Schreibe dazu die Wörter, die als Link dienen, in jeweils zwei eckige Klammern: [[Das ist ein Link]]. Das Programm generiert automatisch eine neue Passage mit dem Titel Das ist ein Link.
- Wenn Du die Geschichte geschrieben hast, kannst Du das Layout gestalten. In den Tabellen findest Du Codes für Textformatierungen und das Einfügen von Medien.
- Klicke auf Build – Als Datei veröffentlichen, um das Ergebnis lokal auf Deinem Tablet zu speichern.
Zu Punkt 8: Codes
| Textformatierungen | |
| Schriftfarbe des Texts (hier: rot) | <span style=“color: red;“>Beispiel</span> => Beispiel |
| Fett | **Beispiel** => Beispiel |
| Kursiv | *Beispiel* => Beispiel |
| Überschrift (groß) Überschrift (mittel) Überschrift (klein) | #Überschrift ##Überschrift ###Überschrift |
| Unterstrichen | <u>Text</u> |
| Text verkleinern | ^^Beispiel^^ => Beispiel |
Wenn du das Layout bei allen Passagen ändern möchtest, klicke auf Geschichte – Stylesheet.
| Hintergrundfarbe (hier: gelb) | Body {background-color: yellow;} |
| Linkfarbe (hier: schwarz) | tw-link {color: black;} |
| Textfarbe (hier: blau) | tw-passage {color: blue;} |
| Schriftgröße | Body, tw-story {fontsize: 14px} |
| Medien einfügen | |
| Bild (mit Angabe von Breite und Höhe) | <img src=“URL des Bildes“ width=“500″ height=“300″> |
| Bild als Hintergrund für eine Passage einfügen | <div style=“background-image: url(„URL des Bildes“); background-size: cover; background-repeat: no-repeat; background-position: center; padding: 100px;“> Text </div> |
TIPPS:
- Nutze für die Bildersuche diese Seite: https://pixabay.com/de/. Hier findest Du kostenlose und lizenzfreie Medien.
- Nutze die Tastenkombinationen für das Kopieren (Strg c) und Einfügen (Strg v) für längere Texte, Codes und URLs.
- Wenn Du eine größere Auswahl an Farben benötigst, gehe auf diese Seite: https://www.rapidtables.org/de/web/color/html-color-codes.html. Statt des Namens gibst Du den Hex-Code (#RRGGBB) ein.
Zum Beispiel: Body {background-color: #FFFFE0;} Damit hättest Du einen hellgelben Hintergrund in der gesamten Geschichte.