Seiten

Auf Seiten können Lehr- bzw. Lerninhalte oder organisatorische Inhalte zur Verfügung gestellt.

Durch das Hinzufügen zu einem Kursmodul können Sie Studierenden Seiteninhalte zur Verfügung stellen. Zudem können Sie mit Seiten ein Glossar bauen, ein eigenes Dokumentenarchiv erstellen oder in Verbindung mit anderen Seiten, ein WIKI anlegen.

Allgemein
Tabellen
Einbettungen
Icon Maker
HTML Codes
Wiki & Glossar
Use Cases & Tipps

Wie erstelle ich eine Seite?

Gehen Sie folgendermaßen vor, um eine Seite zu erstellen:

1. Klicken Sie im linken Seitenmenü auf Seiten.
2. Klicken Sie links oben auf Alle Seiten anzeigen.
3. Wählen Sie den Button rechts oben aus.
4. Befüllen Sie die Seite und konfigurieren Sie die Einstellungen der Seite:
  - Legen Sie fest, wer die Seite bearbeiten darf: Lehrende, Lehrende und Studierende, Jeder.
  - Wählen Sie aus, ob die Seite zu den Studierendenaufgaben hinzugefügt werden soll (ToDo-Liste).
  - Wählen Sie aus, ob die Seite erst zu einem späteren Zeitpunkt veröffentlicht werden soll (Veröffentlichen bei). In diesem Fall wird die Seite für Studierende ganz ausgeblendet bis der Freigabezeitpunkt erreicht ist.
  - Wählen Sie aus, ob Benutzer*innen über Änderungen von Inhalten informiert werden sollen.
5. Klicken Sie auf den Button Speichern oder auf Speichern und veröffentlichen.

Die neue Seite wurde erstellt und ist unter Seiten verfügbar. Sie können diese Seite nun zu einem Modul hinzufügen. Vergessen Sie nicht, die Seite zu veröffentlichen, falls dies noch nicht erfolgt ist.

Wie kann ich eine Seite direkt in einem Modul erstellen?

Sie können eine Seite auch direkt über ein Modul erstellen, gehen Sie dazu wie folgt vor:

1. Klicken Sie in der Modulüberschrift auf das Pluszeichen.
2. Wählen Sie über das Dropdown-Feld Seite aus.
3. Klicken Sie auf [Seite erstellen].
4. Tragen Sie einen Namen für die Seite ein und bestätigen Sie die Eingabe mit Objekt hinzufügen.
5. Die Seite wurde als letztes Element dem Modul hinzugefügt. Klicken Sie auf den Titel der Seite, um die Seite zu befüllen und die Einstellungen der Seite noch zu konfigurieren.

Vergessen Sie nicht die Seite zu veröffentlichen. Folgendes Symbol zeigt Ihnen an, dass die Seite veröffentlicht ist.

Wie kann ich Seiteninhalte strukturieren?

Strukturieren Sie Seiteninhalte mit:

- Bildern (1)
- Tabellen (2)
- Horizontalen Linien (3)
- Überschriften und Formatierungen (4)

Klicken Sie unter Format auf Formatierung entfernen (5) oder auf das Icon in der Navigationsleiste, um die Standardeinstellungen einer Formatierung wiederherzustellen.

Wie weise ich eine Seite mit einem definierten Veröffentlichungszeitraum nur bestimmten Personen zu?

Sie können Seiten individuell für Personen oder Abschnitte und über bestimmte Zeiträume veröffentlichen. Gehen Sie dabei wie folgt vor:

HINWEIS: Mit +Hinzufügen können Sie für mehrere Personen oder Abschnitte unterschiedliche Zuweisungszeiträume kreieren.

Sie können diese Funktion nutzen, um bestimmte Informationen nur mit bestimmten Personen über einen bestimmten Zeitraum zu teilen.

Seiten editieren

Wie kann ich eine Seite editieren?

Gehen Sie wie folgt vor, um eine Seite zu editieren:

1. Klicken Sie die Seite an, um sie zu öffnen.
2. Klicken Sie rechts oben auf Ändern und passen Sie die Seiteninhalte nach Belieben an.
3. Klicken Sie rechts unten auf Speichern, um alle Änderungen abzuspeichern.

Die Seite wird nun mit den vorgenommenen Änderungen angezeigt.

Wie kann ich im Editiermodus einer Seite bestimmte Wörter suchen/ersetzen?

Im Editiermodus einer Seite können Sie mit der Tastenkombination STRG + F gleichzeitig nach Wörtern suchen und diese gegebenenfalls durch andere Wörter ersetzen.

Gehen Sie wie folgt vor:

1. Klicken Sie die Seite an, um sie zu öffnen.
2. Klicken Sie rechts oben auf Ändern.
3. Drücken Sie die Tastenkombination STRG + F auf der Tastatur.
4. Geben Sie das Wort ein, nach dem Sie suchen möchten. Das Wort wird Ihnen im Editierbereich der Seite angezeigt.
5. Klicken Sie auf Next um zu der Stelle zu gelangen, an der das Wort noch einmal vorkommt.

Wenn Sie das Wort nach der Suche durch ein anderes Wort ersetzen möchten, gehen Sie wie folgt vor:

1. Geben Sie unter Replace with das Wort ein, welches das Suchwort ersetzen soll.
2. Klicken Sie auf Replace All, wenn Sie alle Wörter auf dieser Seite ersetzen möchten.
3. Klicken Sie auf Replace, wenn Sie nur das angezeigte Wort an dieser Stelle ersetzen möchten.

Sie können diese Schritte mit allen Wörtern wiederholen, nach denen Sie die Seite durchsuchen möchten.

Wie kann ich Änderungen an einer Seite rückgängig machen?

Wenn Sie noch nicht auf Speichern geklickt haben, können Sie die Änderungen an der Seite wie folgt rückgängig machen:

1. Klicken Sie unter Ändern auf Rückgängig machen.
2. Klicken Sie bei Bedarf wiederholt auf Rückgängig machen.

Wird die Seite mit den gewünschten Inhalten angezeigt, können Sie die Seite speichern.

Wie kann ich eine frühere Seitenversion wiederherstellen?

Wenn Sie bereits auf Speichern geklickt haben und eine frühere Version der Seite wiederherstellen möchten, gehen Sie wie folgt vor:

1. Klicken Sie die Seite an, um sie zu öffnen.
2. Klicken Sie rechts oben auf die drei kleinen Punkte und wählen Sie Seitenverlauf anzeigen.
3. Klicken Sie eine frühere Version an und wählen Sie Diese Version wiederherstellen.
4. Bestätigen Sie den Vorgang indem Sie auf Wiederherstellen klicken.

Die frühere Seitenversion wird nun angezeigt.

Wie können Studierende im Kurs eine Seite bearbeiten?

Damit Studierende Seiten im Kurs editieren können, müssen Sie Studierenden erlauben die Seite zu bearbeiten:

1. Öffnen Sie die Seite.
2. Klicken Sie auf Ändern.
3. Gehen Sie zu den Optionen.
4. Wählen Sie beim Dropdown-Feld zu Benutzer*innen dürfen diese Seite bearbeiten Lehrende und Studierende aus, um Studierenden Bearbeitungsrechte zu geben.
5. Speichern Sie Ihre Eingabe ab.

Studierenden ist es nun möglich die Seite im Kurs zu bearbeiten.

ACHTUNG: Bearbeiten Studierende zur gleichen Zeit die Seite im Kurs kann es zu "Überschreibungen" von Seiteninhalten kommen. Bitte vermerken Sie dazu einen Hinweistext auf der Seite, z.B. wie folgt: Achtung, wenn mehrere Personen gleichzeitig an der Seite arbeiten, kann es zu "Überschreibungen" kommen. Kontrollieren Sie daher bitte mit etwas zeitlichem Abstand, ob Ihre Seitenänderung (noch) vorhanden ist.

Wie füge ich eine Tabelle ein?

Sie können das Tabellen-Feature in Canvas WU dafür nutzen Tabellen anzulegen, um dort Textinhalte, Bilder, Links oder Videoeinbettungen in die Felder einzubetten, oder um Studierende zu einem kollaborativen Befüllen der Tabelle einzuladen. Gehen Sie wie folgt vor, um eine Tabelle einzufügen:

1. Navigieren Sie zu der Stelle auf der Seite, an der Sie die Tabelle platzieren möchten.
2. Klicken Sie auf das Tabellen-Icon oder wählen Sie oben im Editor den Tab Tabelle aus.
3. Bestimmen Sie wie viele Reihen und Spalten Ihre Tabelle haben soll. Nach der Auswahl wird die Tabelle direkt an der Cursor-Position hinzugefügt.

Sie können die Tabelle nun bearbeiten.

Wie passe ich eine Tabelle an?

Klicken Sie in die Tabelle, um die Menüfelder für die Konfiguration der Tabellenfelder aufzurufen (siehe Screenshot):

Tabelle_Menüleiste.png

Sie können hier (v.l.n.r.) weitere Konfigurationsoptionen der Gesamttabelle aufrufen, die Tabelle löschen, eine Reihe oberhalb der ausgewählten Reihe einfügen, eine Reihe unterhalb der ausgewählten Reihe einfügen, die ausgewählte Reihe löschen, eine Spalte links von der ausgewählten Spalte einfügen, eine Spalte rechts von der ausgewählten Spalte einfügen und die ausgewählte Spalte löschen.

Zellen verbinden

1. Markieren Sie die Zellen, die Sie verbinden möchten.
2. Klicken Sie auf Tabelle in der Menüleiste des Editors.
3. Wählen Sie Zelle und dann Zellen verbinden.

Zeilen kopieren

1. Markieren Sie die Zeile, die Sie kopieren möchten.
2. Klicken Sie auf Tabelle in der Menüleiste des Editors.
3. Wählen Sie Zeile und Zeile kopieren.
4. Bewegen Sie sich zu der Position in der Tabelle, an der die kopierte Zeile eingefügt werden soll.
5. Klicken Sie auf Tabelle in der Menüleiste des Editors.
6. Wählen Sie Zeile aus.
7. Wählen Sie Zeile danach einfügen oder Zeile davor einfügen.

Spalten kopieren

1. Markieren Sie die Spalte, die Sie kopieren möchten.
2. Klicken Sie in der Menüleiste des Editors auf Tabelle.
3. Wählen Sie Spalte und Copy column.
4. Bewegen Sie sich zu der Position in der Tabelle, an der die kopierte Spalte eingefügt werden soll.
5. Klicken Sie in der Menüleiste des Editors auf Tabelle.
6. Wählen Sie Spalte aus.
7. Wählen Sie Paste column before oder Paste column after.

Kopf- und Fußzeile definieren

1. Klicken Sie in der Menüleiste des Editors auf Tabelle.
2. Wählen Sie Zeile und Zeileneigenschaften.
3. Ändern Sie unter Allgemein den Zeilentyp von Inhalt auf Kopf- oder Fußzeile.
4. Bestätigen Sie mit Speichern.

Wie formatiere ich eine Tabelle?

Sie können das gesamten Aussehen der ganzen Tabelle, die Formatierung einer Zeile oder die Formatierung einer Zelle anpassen:

Tabelle formatieren

Klicken Sie in der Menüleiste des Editors auf Tabelle und wählen Sie Tabelleneigenschaften aus, um das Aussehen der ganzen Tabelle anzupassen. Sie können hier folgende Parameter anpassen:

- Breite und Höhe der Tabelle
- Zellen- und Zelleninnenabstand
- Rahmenbreite, Rahmenstil und Rahmenfarbe
- Anzeige der Beschriftungen: Ja/Nein
- Ausrichtung der Tabelle: links, rechts zentriert
- Hintergrundfarbe der ganzen Tabelle

Zeile formatieren

Markieren Sie die gewünschte Zeile und klicken Sie in der Menüleiste des Editors auf Tabelle. Wählen Sie Zeile und Zeileneigenschaften aus, um für die Zeile folgende Parameter anzupassen:

- Zeilentyp: Inhalt (per Default), Kopf- oder Fußzeile
- Ausrichtung: keine (per Default), linksbündig, zentriert, rechtsbündig
- Höhe in px: 10 px (per Default)
- Rahmenstil, Rahmenfarbe
- Hintergrundfarbe der ganzen Zeile

Zelle formatieren

Markieren Sie die gewünschte Zelle und klicken Sie in der Menüleiste des Editors auf Tabelle. Wählen Sie Zelleneigenschaften aus, um für die einzelne Zelle folgende Parameter anzupassen:

- Breite und Höhe der Zelle
- Zellentyp: Zelle (per Default), Kopfzelle
- Gültigkeitsbereich: Keine (per Default), Zeile, Spalte, Zeilen- oder Spaltengruppe
- Horizontale Ausrichtung des Zelleninhalts (Horizontal align): Keine (per Default), Oben, Mitte, Unten
- Vertikale Ausrichtung des Zelleninhalts (Vertical align): Keine (per Default), Oben, Mitte, Unten
- Rahmenbreite, Rahmenstil und Rahmenfarbe
- Hintergrundfarbe der Zelle

Wie bette ich Bilder ein?

Sie können Bilder per Drag & Drop z.B. auf eine Inhaltsseite ziehen oder Sie gehen wie folgt vor:

1. Klicken Sie in der Menüleiste des Editors auf das Bild-Icon .
2. Wählen Sie:
  - Bild hochladen, wenn Sie ein neues Bild hochladen möchten.
  - Kursbilder, wenn Sie ein bereits hochgeladenes Bild einbetten möchten.
  - Benutzerbilder, wenn Sie auf ein Bild aus Ihren persönlichen Canvas WU Benutzerdateien zugreifen möchten.
3. Treffen Sie weitere Einstellungen in den Bildoptionen ein:
  - Wählen Sie Bild einbetten (default) oder Text-Link anzeigen, falls es sich nicht um ein dekoratives Bild handelt.
  - Alternativer Text: Optional können Sie einen Beschreibungstext eintragen, dieser wird von einem Screen-Reader vorgelesen. Alternativ können Sie Dekoratives Bild anklicken, wenn das Bild nur eine illustrative Funktion hat.
  - Sie können eine Einstellung für die Größe (von Klein zu Extra groß, oder Angepasst) treffen. Die Option Angepasst empfiehlt sich für eine optimale Darstellung des Bildes auf verschiedenen Gerättypen. Bei der Option Angepasst kann die Dimension in Pixeln oder Prozent definiert werden. Sie können dies auch im Rich Content Editor durch Ziehen an den Bildecken anpassen.
4. Bestätigen Sie mit Fertig.

Das Bild wird nun auf der Inhaltsseite angezeigt. Bei Bedarf können Sie die Bildgröße durch Drag & Drop an den Ecken des Bildes anpassen.

Gehen Sie wie folgt vor, um nachträglich die Einstellungen eines Bildes/(Bild-)Links zu ändern:

1. Klicken Sie auf das Bild/(Bild-)Link und wählen Sie Bildoptionen/Link-Optionen aus.
2. Passen Sie die Einstellungen/Anzeigeoptionen an.
3. Bestätigen Sie Ihre Eingabe mit einem Klick auf Fertig.

HINWEIS: Sollte eine Overlay-Darstellung bei einem (Bild-)Link einmal nicht richtig funktionieren, dann klicken Sie im Editiermodus auf Link bearbeiten, schalten Sie nochmals auf Inline-Vorschau um und dann wieder auf Vorschau in Overlay. Bestätigen Sie diese Eingabe mit Fertig.

Wie bette ich Lightboxes aus Planet eStream WU ein?

Gehen Sie wie folgt vor, um Lightboxes in Canvas WU einzubetten:

1. Klicken Sie in Planet eStream WU auf Tools und wählen Sie die Photo Library aus.
2. Klicken Sie auf das Upload-Symbol und wählen Sie das Bild/die Bilder aus, die Sie zu Planet eStream hinzufügen möchten.
3. Wählen Sie Neue Sammlung erstellen und klicken Sie auf Leuchtkasten auswählen. Geben Sie einen Namen für die neue Lightbox ein.
4. Geben Sie dann unter Neuer Kollektionsname einen Titel ein.
5. Füllen Sie bei Bedarf noch weitere Infofelder aus und gehen Sie dann auf Upload starten.
6. Klicken Sie auf die Lupe oben, um alle Inhalte einzusehen. Unter den Sammlungen finden Sie nun die neu erstellte Bilderkollektion. Klicken Sie diese an und gehen Sie anschließend rechts oben auf Galerieansicht öffnen .
7. Wählen Sie eine Galerieansicht (Swipe-Galerie, Verstreute Galerie oder Diashow), konfigurieren Sie die Galerieoptionen und ggf. ein Hintergrundbild und klicken Sie dann Einbetten.
8. Deaktivieren Sie das Ablaufdatum und entscheiden Sie sich für die Größe der Einbettung. Kopieren Sie den Link und betten Sie diesen anschließend über das Einbetten-Symbol ein.

Beispiele von Lightboxes

Beispiel 1 Verstreute Galerie:

Beispiel 2 Galerie mit Übergangseffekten:

Wie bette ich Links ein?

Gehen Sie wie folgt vor, um einen Link einzubetten:

1. Klicken Sie in der Menüleiste des Editors auf das Linksymbol .
2. Wählen Sie:
  - Externer Link, wenn Sie auf eine kurs-externe Ressource verlinken möchten.
  - Link zum Kurs, wenn Sie auf einen Inhalt/eine Kursseite im Canvas WU-Kurs verlinken möchten.

Der Link wird Ihnen nun angezeigt. Die Darstellung des Links kann nachträglich noch formatiert werden. Zudem kann auch die Benennung des Links geändert werden. Klicken Sie dazu im Editiermodus auf den Link und öffnen Sie Link-Optionen. Sie können hier den angezeigten Text oder auch die Linkadresse anpassen.

HINWEIS: Sie können die Namen von Aktivitäten (z.B. Quiz, Inhaltsseiten, Aufgaben) ohne Probleme ändern. Alle (internen) Kurs-Links passen sich im Hintergrund automatisch an.

Wie bette ich Dokumente ein?

Sie können Dokumente per Drag & Drop z.B. auf eine Inhaltsseite ziehen oder gehen Sie wie folgt vor, um ein Dokument einzubetten:

1. Klicken Sie in der Menüleiste des Editors auf Dokumente.
2. Wählen Sie:
  - Dokument hochladen, wenn Sie ein Dokument erstmalig hinzufügen möchten.
  - Kursunterlagen, wenn Sie ein bereits hochgeladenes Dokument einbetten möchten.
  - Meine Dokumente, wenn Sie auf ein Dokument aus Ihren persönlichen Canvas WU Benutzerdateien zugreifen möchten.

Das Dokument wird nun als Link angezeigt.

HINWEIS: Wenn Sie das Dokument neu hochgeladen haben, erscheint es nun auch unter Dateien im Ordner Hochgeladene Medien. Es wird empfohlen, das Dokument in einen geeigneten Ordner zu verschieben, damit die Kursdateien strukturiert bleiben.

Link-Text für Dokument anpassen

Bei Bedarf können Sie die Linkoptionen aufrufen, um den Text anzupassen oder eine andere Anzeigeoption für das Dokument auszuwählen. Klicken Sie dazu auf den Link und wählen Sie Link-Optionen aus:

- Vorschau deaktivieren: beim Anklicken des Links wird das Dokument sofort heruntergeladen.
- Vorschau in Overlay (standardmäßig ausgewählt): das Dokument öffnet sich in einem Fenster, das über der aktuellen Seite angezeigt wird (siehe Link: Lorem ipsum.pdf).
- Inline Vorschau: das Dokument öffnet sich auf derselben Seite (siehe Link: Lorem ipsum.pdf).

Wie bette ich Audio- oder Videoinhalte ein?

Sie können Audio- oder Videos von Drittquellen einbetten bzw. auch eigene Audio- oder Videos einbetten. Gehen Sie wie folgt dafür vor:

1. Option: Medien von Drittquellen (z.B. YouTube, Vimeo-Videos) einbetten

1. Kopieren Sie den Einbettungscode des Audio- oder Videoinhalts von der Drittquelle.
2. Klicken Sie in der Menüleiste des Editors auf das Symbol Einbetten .
3. Fügen Sie den kopierten Einbettungscode ein und bestätigen Sie Ihre Eingabe mit Abgeben.

Der Audio- oder Videoinhalt ist nun eingebettet.

2. Option: Eigene Audio- oder Videoinhalte einbetten

Bitte laden Sie Audio- oder Videodateien NICHT direkt über das Editorsymbol "Bilder" hoch. In Canvas WU stehen Ihnen pro Kurs nur 500 MB Speicherplatz zur Verfügung. Es wird daher dringend empfohlen, für die Bereitstellung von Video- oder Audiodateien das Plugin Planet eStream zu verwenden (siehe: Planet eStream WU Guide).

1. Klicken Sie in der Menüleiste des Editors auf das Planet eStream Symbol .
2. Klicken Sie im geöffneten Pop-up Fenster auf Hochladen.
3. Klicken Sie auf Video- oder Audiodateien hochladen. Alternativ können Sie die Datei per Drag & Drop auf das Feld ziehen.
4. Füllen Sie die Medienoptionen aus und klicken Sie Bestätigen.
5. Klicken Sie auf Upload starten.

Auf der Seite wird so lange ein Platzhalter angezeigt, bis das Video in Planet eStream hochgeladen und verarbeitet wurde. Sie können das Video jederzeit in Planet eStream ansteuern und bei Bedarf noch nachbearbeiten.

Wie bette ich kurze Audio- oder Webcamaufnahmen ein?

Für die Produktion kurzer Medienprodukte können Sie das Record/Upload Media Feature von Canvas WU verwenden. Gehen Sie wie folgt vor, um eine kurze Audio- oder Webcamaufnahme einzubetten:

1. Klicken Sie in der Menüleiste des Editors auf das Symbol für Medien aufzeichnen/hochladen .
2. Wählen Sie Medien aufzeichnen/hochladen aus.
3. Klicken Sie im Tab oben auf Aufnehmen.
4. Entscheiden Sie, ob Sie nur mit dem Mikrofon (Audioaufnahme) aufnehmen möchten oder auch die Webcam laufen lassen wollen (Videoaufnahme). Sie können bei Klick auf Webcam kein Video auswählen.
5. Klicken Sie auf Aufzeichnung starten.
6. Um die Aufnahme zu stoppen, klicken Sie auf Beenden.
7. Tragen Sie einen Dateinamen ein.
8. Klicken Sie Medien speichern.

Die Aufnahme wird nun als Einbettung angezeigt.

HINWEIS: Die Medienaufnahmen werden in den Kursdateien abgelegt und zählen zum Kurskontingent der Dateien hinzu.

Wie bette ich Formeln ein?

Gehen Sie wie folgt vor, um eine Formel hinzuzufügen:

1. Klicken Sie in der Menüleiste des Editors auf Math. Gleichung einfügen .
2. Es öffnet sich der Formeleditor. Geben Sie eine Formel ein und klicken Sie dann auf Fertig.

Weitere Tipps zur Verwendung des Formeleditors finden Sie in der Canvas Community, zum Beispiel hier:

- Canvas Equation Editor Tips: Advanced View
- Canvas Equation Editor: ChemistryLinks to an external site.

Wie bette ich Shiny-Inhalte als iFrame ein?

Shiny ist ein Open-Source-R-Paket, das ein Web-Framework zur Erstellung von Webanwendungen mit R zur Verfügung stellt (siehe: Easy web applications in R). Shiny-Inhalte können via IFrame auf Seiten eingebettet werden. Gehen Sie dafür wie folgt vor:

1. Klicken Sie in der Menüleiste des Editors auf Einbetten .
2. Fügen Sie den Quellcode (z.B. aus LEARN) ein und klicken Sie anschließend auf Abgeben.

Code-Beispiel:

<iframe src="https://learn.wu.ac.at/shiny/prodman/03_con_dist/" style="border: medium none; width: 900px; height: 1000px; transform: scale(0.9);"></iframe>

Alternativ, können Sie den Shiny-Inhalt auch direkt als Element zu einem Modul hinzufügen oder Sie arbeiten stattdessen mit der SCORM-Option (siehe SCORM-Dateien in Canvas WU Advanced).

Wie erstelle ich Buttons mit dem Icon Maker?

Sie können eigene Schaltflächen (Buttons) erstellen, speichern und in Ihren Canvas WU Kursen verwenden. Gehen Sie wie folgt vor, um Buttons mit dem Icon Maker zu erstellen:

1. Wählen Sie in der Menüleiste des Editors Icon Maker-Symbole aus.
2. Wählen Sie Icon Maker Symbol-erstellen aus.
3. Tragen Sie einen Namen für den Button ein, damit Sie diesen später wiederfinden.
4. Wählen Sie die Symbolform und die Symbolgröße aus.
5. Wählen Sie die Symbolfarbe, Umrissgröße und Umrissfarbe aus oder fügen Sie ein Bild hinzu (Bild hinzufügen).
6. Wählen Sie den anzuzeigenden Text, Textgröße, Textfarbe, Texthintergrundfarbe und Textposition.
7. Gehen Sie auf Anwenden, um alle Eingaben zu speichern.

Sie können das Icon als dekoratives Element verwenden oder den Button mit anderen Seiten (Kursinhalten, externen Seiten) verlinken. Klicken Sie dazu in der Menüleiste auf Einfügen - Link - Externer Link oder Link zum Kurs. Mit Klick auf den Button gelangen Studierende dann zu der verlinkten Seite.

HINWEIS: Alle erstellten Icons finden Sie in den auch in den Dateien unter Icon Maker-Symbole wieder.

Wie ändere ich erstellte Icons/Buttons?

Wenn Sie ein Icon/einen Button anpassen möchten, dann gehen Sie wie folgt vor:

1. Klicken Sie auf die Schaltfläche und wählen Sie Symbol für Bearbeiten aus.
2. Nehmen Sie Änderungen an Form, Bild, Farben oder Text vor.
3. Aktivieren Sie die Checkbox Änderungen auf alle Instanzen dieses Icon Maker Symbols im Kurs anwenden, wenn die Änderung auf alle bereits im Kurs eingefügten Schaltflächen angewendet werden soll.

HINWEIS: Wenn Sie die Checkbox nicht angekreuzt haben, legen Sie mit Kopie speichern jetzt ein neues Objekt an.

Ihr Button wird nun angepasst angezeigt.

Wie kann ich erstellte Icons auch in anderen Kursen nutzen?

Icons sind an einen Kurs gebunden und müssen daher in einen anderen Kurs importiert werden, damit sie in der Icon Maker Symbolbibliothek erscheinen. Gehen Sie wie folgt vor, um Icons in andere Kurse zu kopieren:

1. Navigieren Sie zu Dateien.
2. Klicken Sie auf den Ordner Icon Maker-Symbole.
3. Navigieren Sie zum entsprechenden Icon und klicken Sie auf die drei Punkte
4. Wählen Sie Kopieren nach ... aus.
5. Tragen Sie im Suchfeld den Kurs ein.
6. Klicken Sie auf Kopie.

Das Icon scheint im anderen Kurs unter Dateien auf, und kann von Ihnen auf diversen Seiten eingebettet werden. Sie können in gleicher Weise Icons an andere Canvas WU-User*innen senden. Klicken Sie dazu auf Senden an ...

Wie bette ich Tabs ein?

Tabs können Sie nutzen, um Inhalte auf einer Seite nochmals zu untergliedern. Der Canvas WU Guide nutzt solche Tabs.

Anleitung
HTML Code
Tipps

Anleitung

Klicken Sie auf das Symbol </> (rechts unten im Editor), um zur HTML Version der Seite zu gelangen.
Tragen Sie den HTML Code, der im Tab HTML Code steht, ein.

HTML Code

<div class="enhanceable_content tabs">
<ul>
<li><a href="#tab-1">Tab One Title Here</a></li>
<li><a href="#tab-2">Tab Two Title Here</a></li>
<li><a href="#tab-3">Tab Three Title Here</a></li>
</ul>
<div id="tab-1">
<p>ALL your text for the Tab One area goes here</p>
</div>
<div id="tab-2">
<p>All your text for the Tab Two area goes here</p>
</div>
<div id="tab-3">
<p>All your text for the Tab Three area goes here</p>
</div>

Tipps

Speichern Sie die Seite ab bevor Sie damit starten die Inhalte zu editieren. Wenn Sie weniger oder mehr Tabs verwenden möchten, passen Sie den HTML Code an.

Tabs können durch die Verwendung von Farben, Schriftarten und Icons hervorgehoben werden. Sie können den nachfolgenden Code einfügen, um die Formatierung zu übernehmen:

1️⃣ BUTTON
2️⃣ BUTTON
3️⃣ BUTTON

HTML Code:

<div class="enhanceable_content tabs">
<ul>
<li><span style="background-color: #ecf0f1;"><a style="background-color: #ecf0f1;" href="#tab-1"><span style="color: #000000;"><span style="font-family: arial, helvetica, sans-serif;">1️⃣ </span><strong><span style="font-family: arial, helvetica, sans-serif;">BUTTON</span></strong></span></a></span></li>
<li><span style="background-color: #ecf0f1;"><a style="background-color: #ecf0f1;" href="#tab-2"><span style="color: #000000;"><span style="font-family: arial, helvetica, sans-serif;">2️⃣ </span><strong><span style="font-family: arial, helvetica, sans-serif;">BUTTON</span></strong></span></a></span></li>
<li><span style="background-color: #ecf0f1;"><a style="background-color: #ecf0f1;" href="#tab-2"><span style="color: #000000;"><span style="font-family: arial, helvetica, sans-serif;">3️⃣ </span><strong><span style="font-family: arial, helvetica, sans-serif;">BUTTON</span></strong></span></a></span></li>
</ul>
<div id="tab-1">
<p>All your text for the tab one area goes here</p>
</div>
<div id="tab-2">
<p>All your text for the tab two area goes here</p>
</div>
<div id="tab-3">
<p>All your text for the tab three area goes here</p>
</div>
</div>

All your text for the Tab Two area goes here between the tags

All your text for the Tab Three area goes here between the tags

Wie bette ich aus- und einklappbare Menüpunkte (Akkordeon-Elemente) ein?

Sie können auf Inhaltsseiten ein- und ausklappbare Akkordeon-Elemente einbetten. Folgen Sie dazu der angeführten Anleitung unter dem Menüpunkt "Anleitung":

Anleitung

Klicken Sie auf das Symbol </> (rechts unten im Editor), um zur HTML Version zu gelangen.
Tragen Sie den HTML Code, der unter dem Akkordeon HTML Code steht, ein.

HTML Code

<details>
<summary>Titel des Menüpunktes 1</summary>
<p>Eingeklappte Inhalte 1</p>
</details>
<summary>Titel des Menüpunktes 2</summary>
<p>Eingeklappte Inhalte 2</p>
</details>
<summary>Titel des Menüpunktes 3</summary>
<p>Eingeklappte Inhalte 3</p>
</details>

Tipp

Für jeden Menüpunkt jeweils einen solchen Eintrag, ggf. mit einem Trennzeichen:

<details>
<summary>Titel des Menüpunktes</summary>
<p>Eingeklappte Inhalte</p>
</details>

Weitere Beispiele für die Gestaltung von Akkordeon-Elementen:

Thema #1

HTML Code:

<details>
<summary style="border: 2px solid #003057; border-radius: 10px; background-color: #ffffff; color: #003057; font-size: 14pt; padding: 8px; marign: 5px;"><strong>Thema #1</strong></summary>
<p style="padding: 14px;">Inhalte hier.</p>
</details>

Thema #2

HTML Code:

<details>
<summary style="border: 2px solid #003057; border-radius: 10px; background-color: #003057; color: #ffffff; font-size: 14pt; padding: 8px; margin: 5px;"><strong>Thema #2</strong></summary>
<p style="padding: 14px;"Inhalte hier.</p>
</details>

Thema #3

HTML Code:

<details>
<summary style="border-radius: 10px; background-color: #dae1e9; color: #003057; font-size: 14pt; padding: 8px; margin: 5px;"><strong>Thema #3</strong></summary>
<p style="padding: 14px;">Inhalte hier.</p>
</details>

Thema #4

HTML Code:

<details>
<summary style="border: 2px solid #003057; border-radius: 10 px; background-color: #ffffff; color: #003057; font-size: 14pt; padding: 8px; marign 5px;"><strong>Thema #4</strong></summary>
<p style="border: 2px solid #003057; border-radius: 10 px; padding: 8px;">Inhalte hier.</p>
</details>

Thema #5

HTML Code:

<details>
<summary style="border: 2px solid #003057; border-radius: 10px; background-color: #003057; color: #ffffff; font-size: 14pt; padding: 8px; marign: 5 px;"><strong>Thema #5</strong></summary>
<p style="border: 2px solid #003057; border-radius: 10px; padding: 8px;">Inhalte hier.</p>
</details>

Thema #6

HTML Code:

<details>
<summary style="border: 2px solid #003057; border-radius: 10 px; background-color: #dae1e9; color: #003057; font-size: 14pt; padding: 8 px; margin: 5px;"><strong>Thema #6</strong></summary>
<p style="border: 2px solid #003057; border-radius: 10 px; padding: 8 px;">Inhalte hier.</p>
</details>

Wie bette ich Sprungmarken (Anker) in eine Seite ein?

Legen Sie Sprungmarken als Bezugspunkte innerhalb einer Seite an, um zu einer im Text vorhandenen Überschrift zu springen, z.B. um ein Glossar zu bauen. Gehen Sie wie folgt vor, um Sprungmarken (Anker) anzulegen:

1. Gestalten Sie eine Seite mit Überschriften und definieren Sie oberhalb eine Liste mit Schlagwörtern als Ausgangspunkt für die Verknüpfung (siehe Beispiel unten).
2. Öffnen Sie den HTML-Editor, indem Sie auf dieses Symbol </> klicken. Suchen Sie nach der Liste.
3. Fügen Sie bei jedem Schlagwort den folgenden HTML Code hinzu:
  <a href="#Titel_Sprungmarke">Schlagwort</a>. Damit legen Sie den Ausgangspunkt fest.
4. Speichern Sie die Seite und öffnen Sie dann erneut den HTML Editor. Suchen Sie nun nach den Überschriften im Text z.B. <h4>Überschrift</h4>.
5. Fügen Sie bei der Überschrift den gelb markierten HTML Code hinzu:
  <h4 id="Titel_Sprungmarke">Überschrift</h4>. Damit legen Sie fest, wohin gesprungen werden soll.
6. Speichern Sie die Seite.

Sie sollten nun von den oben angeführten Schlagwörten zu den gesetzten Anker in der Seite springen können. Kontrollieren Sie, ob die Sprungmarken (Anker) funktionieren.

Beispiel:

- Ankerpunkt 1
- Ankerpunkt 2

Ankerpunkt 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nisl ex, tincidunt posuere erat vitae, vehicula tempus mauris. Duis scelerisque vehicula nunc. Cras sed leo turpis. Aliquam erat volutpat. Sed facilisis mi laoreet eleifend pretium. Donec sit amet pharetra leo. Phasellus fermentum tincidunt neque a sollicitudin. Aenean sed leo nec massa finibus varius molestie eget augue. Vivamus maximus enim nulla, sit amet consectetur libero aliquam eget. Quisque tellus felis, ornare et libero non, mollis feugiat velit. Integer tincidunt dictum nisi, non sollicitudin massa porttitor at. In vestibulum quam eu ex tincidunt viverra. Proin id est ac sem faucibus scelerisque eget tincidunt elit. Nunc porta commodo ex et vulputate. In consequat faucibus turpis sit amet tempus. Proin vestibulum purus id diam viverra venenatis.

In ultricies diam vitae justo mollis, at mollis ante cursus. Nulla viverra convallis sapien in ultrices. Aliquam convallis metus sed nisl porta, quis rutrum lectus aliquam. Duis sit amet pellentesque tellus. Suspendisse elementum vulputate sagittis. Phasellus interdum libero vel urna viverra consectetur in in lectus. Cras eu tortor eget turpis placerat egestas eget tempus massa. Morbi id volutpat erat. Morbi porttitor viverra massa, a varius ante pretium eu. Etiam dolor justo, ultrices in nunc vitae, pretium posuere erat. Donec gravida, arcu ut hendrerit scelerisque, lectus sapien vehicula leo, at luctus massa nisi quis ipsum. Donec maximus sapien libero, ac rutrum mi faucibus sit amet. Sed vehicula nibh et leo pharetra tincidunt. Suspendisse viverra feugiat imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Vestibulum luctus lorem id tellus aliquet eleifend. Sed at ex ut ante ultricies ultrices vel vitae lorem. Pellentesque sed purus eu felis egestas laoreet ut vel dolor. Donec in libero non eros egestas aliquam. Aliquam erat volutpat. Sed vel efficitur lacus. Integer elementum purus non porta tempus.

Nullam vehicula justo pulvinar metus posuere rhoncus. Phasellus fringilla venenatis odio, quis luctus justo maximus non. Donec varius mattis metus, vitae imperdiet nibh. In sit amet tempus purus, at malesuada ante. In mollis dui nisl, eget rhoncus ligula commodo sit amet. Donec sit amet erat vel augue interdum laoreet sit amet ac ex. Integer diam lorem, vestibulum vitae tincidunt ac, malesuada et est. Praesent viverra orci id velit aliquet rutrum. Nulla facilisis hendrerit orci, et semper ante faucibus non. Fusce eu magna ex. Pellentesque et massa ipsum.

Zurück nach oben

Ankerpunkt 2

Etiam nunc nisl, consectetur eget magna eget, pretium finibus velit. Nulla facilisi. Nam vulputate finibus quam, non ornare diam porta a. Quisque aliquam volutpat magna non tempor. Cras maximus metus ut elit facilisis, imperdiet elementum felis placerat. Integer ornare gravida ultricies. Maecenas eu libero a ante condimentum dapibus at id lacus. Phasellus laoreet imperdiet quam, non pretium mi rutrum vel. Pellentesque rutrum egestas malesuada. Duis id urna tristique, pulvinar massa et, vehicula libero. Nunc tempor ligula augue, non cursus mi pharetra a. Vestibulum sit amet elit laoreet, pharetra eros ac, congue diam. Duis elementum, ex sit amet dapibus cursus, orci arcu cursus metus, ut elementum ex lorem sed est. Etiam euismod ipsum et egestas posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Duis consectetur tellus vel nibh cursus, id venenatis dui sagittis. Sed bibendum ultrices arcu, at rhoncus arcu aliquam vitae. Suspendisse ut nibh sollicitudin, blandit urna nec, sodales purus. Vestibulum vestibulum, mi in aliquet tincidunt, lorem erat fringilla arcu, eget molestie eros neque sit amet libero. Donec id nunc egestas, scelerisque tellus et, facilisis arcu. Suspendisse magna ex, scelerisque a eros ac, volutpat mollis est. Etiam rutrum risus quis sem tempus fringilla. Fusce a sapien massa. Praesent pharetra, nulla id feugiat gravida, arcu ipsum fermentum felis, ut fringilla purus massa eget erat. Sed luctus egestas nulla.

Cras ultricies ex dui, eu aliquet mi venenatis eu. Ut non laoreet urna. Proin scelerisque scelerisque lobortis. In luctus accumsan est, vitae iaculis risus convallis et. Curabitur condimentum risus quis sagittis ornare. Vivamus congue tincidunt sapien at iaculis. Nam aliquam gravida pharetra. Pellentesque sit amet fringilla est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec condimentum, nibh nec efficitur mollis, risus leo accumsan ipsum, blandit imperdiet arcu urna quis nunc. Nullam sagittis pellentesque fringilla.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent luctus purus ac nunc cursus, eget mollis enim vulputate. Nulla facilisi. Maecenas vulputate orci leo, id laoreet arcu rutrum eu. Integer nec erat lacinia, volutpat augue vel, tristique turpis. Curabitur in sodales orci. Suspendisse congue arcu ac pulvinar sodales. Donec sem nulla, laoreet at tincidunt eget, bibendum a arcu. Morbi pretium libero ligula, sed ultrices leo convallis ut. Etiam et congue turpis. Nulla tellus sapien, laoreet a velit eu, malesuada dapibus nisl. Aenean molestie, felis vel blandit condimentum, turpis sem molestie metus, sit amet mattis libero felis ac libero. Praesent fringilla sollicitudin enim, quis luctus augue. Nulla facilisi.

Integer arcu risus, convallis non est posuere, laoreet euismod arcu. Suspendisse semper commodo massa, nec auctor lectus vehicula a. Sed hendrerit quam ut varius ornare. Etiam augue nisi, pretium et lacus id, dictum lacinia tortor. Sed ac nulla et ex luctus euismod. Cras neque nunc, consequat et cursus ac, scelerisque et mi. Curabitur fringilla tortor sed lobortis placerat. Mauris hendrerit, quam quis pulvinar tempus, dui libero eleifend nunc, nec aliquam nisi justo eu ante. Etiam quis rhoncus tortor, at rhoncus augue. Sed commodo, metus sit amet aliquet condimentum, sapien dui rhoncus purus, nec tristique tortor risus id eros. Fusce at ligula diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non tellus ex. Cras ultrices in mauris in congue. Nunc vulputate metus eget dolor pulvinar imperdiet. Duis eu lectus at orci maximus mattis.

Zurück nach oben

Wie kann ich einen Hinweistext farblich hervorheben?

Sie können bestimmte Inhalte zur Vereinheitlichung mit der gleichen Farbe hervorheben. Gehen Sie wie folgt vor, um einen Text farblich hervorzuheben:

1. Öffnen Sie den HTML Editor, indem Sie auf folgendes Symbol </> klicken (rechts unten).
2. Fügen Sie einen der folgenden Codes ein:
  
  Code für Hinweistext in Grün
  
  <p>
  <div class="alert alert-success">
  <strong>Titel:</strong> Lorem ipsum
  </div>
  </p>
  
  Code für Hinweistext in Rot
  
  <p>
  <div class="alert alert-error">
  <strong>Titel:<strong>Lorem ipsum
  </div>
  </p>
  
  Code für Hinweistext in Blau
  
  <p>
  <div class="alert alert-info">
  <strong>Titel:<strong>Lorem ipsum
  </div>
  </p>
3. Verlassen Sie den HTML Editor. Die farbliche Hervorhebung wird jetzt noch nicht angezeigt.
4. Klicken Sie auf Speichern.

Jetzt sehen Sie die farbliche Hervorhebung des Hinweistextes.

Wie ändere ich die Hintergrundfarbe einer Seite/eines Seitenabschnitts?

Sie können den gesamten Hintergrund einer Seite oder einzelne Abschnitte farblich anpassen. Gehen Sie wie folgt vor, um die Hintergrundfarbe zu ändern:

1. Gestalten Sie einen Seiteninhalt.
2. Öffnen Sie den HTML Editor, indem Sie auf folgendes Symbol </> (rechts unten) klicken.
3. Tragen Sie oberhalb des einzufärbenden Seitenabschnittes <div style="background-color:red"> ein. Die Seite wird rot eingefärbt.
4. Tragen Sie unterhalb des einzufärbenden Seitenabschnittes </div> ein.

Der gesamte Inhalt zwischen den beiden HTML Befehlen ist nun mit der angegebenen Farbe hinterlegt. Die Farbe bleibt auch dann im Hintergrund bestehen, wenn Sie noch weitere Inhalte zu diesem Abschnitt hinzufügen, z.B. Textinhalte, Bilder, Tabellen.

HINWEIS: Auf der Website Colormind finden Sie eine Menge weiterer Farben die für Webseiten geeignet sind.

Umsetzungsbeispiel:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Wie gestalte ich eigene Banner?

Sie können ein eigenes Bannerbild auf einer Seite hinzufügen. Gehen Sie wie folgt vor, um ein eigenes Bannerbild hinzuzufügen:

1. Gestalten Sie ein Bild im Verhältnis von circa 10:2, d.h. z.B. 1000x200 Pixel / 1100x313 Pixel.
2. Öffnen Sie eine Seite und klicken Sie auf Einfügen sowie Bild.
3. Laden Sie das Bannerbild mit einem Klick auf den Button Bild hochladen hoch.
4. Achten Sie darauf, dass das Bild als Einbettung mit Prozentsatz 100% angezeigt wird. So werden auch uU kürzere Bilder über die gesamte Fläche aufgespannt.
5. Klicken Sie auf Speichern.

Das hinzugefügte Bannerbild scheint nun auf der Seite auf.

HINWEIS: Sie können Bannerbilder verwenden, um auf zusammengehörige Inhalte hinzuweisen. Verwenden Sie dazu das Banner am Anfang jeder Seite. Außerdem kann ein Bannerbild als Trennelement auf einer Seite verwendet werden, um auf nachfolgende oder wichtige Informationen hinzuweisen.

Beispiele:

banner-important links.png

Wie gestalte ich eingerückte (floating) Objekte (Bilder/Textboxen)?

Floating Images

Sie können Bilder an einem beliebigen Ort auf einer Seite positionieren. Gehen Sie dafür, wie folgt vor:

1. Fügen Sie ein Bild ein: Einfügen - Bild - Bild hochladen.
2. Öffnen Sie den HTML-Editor, indem Sie auf folgendes Symbol </> klicken.
3. Fügen Sie den folgenden HTML Code beim Code des Bildes ein: <div style="float:right;margin-left:25px;margin-bottom:15px;"><img = BILD /></div>
4. Ziehen Sie das Bild gegebenenfalls auf die gewünschte Größe.

HINWEIS: Statt <div style="float: right; wählen Sie einfach <div style="float: left; wenn das Bild oder die Textbox auf der linken Seite der Seite angezeigt werden soll.

Beispiel - Floating Images:

Suspendisse egestas facilisis odio, ac consequat dolor. In eu neque maximus, posuere dolor vitae, dignissim ligula. Aenean tortor augue, convallis vitae velit eu, mattis vestibulum lbero. Morbi sit amet quam sed mi venenatis mollis. Suspendisse facilisis efficitur enim, ac condimentum velit ullamcorper vitae. Pellentesque egestas, nisl a tincidunt rutrum, ante libero varius metus, in egestas ipsum neque at tellus. Cras nec dolor egestas, molestie dui a, tempus libero. Ut volutpat augue vitae est vestibulum condimentum. Donec et dui id quam maximus finibus. Nam varius vehicula nibh id semper. Phasellus in enim turpis. Donec faucibus odio eu purus dictum rhoncus. Mauris a elementum sem. Curabitur gravida euismod ornare. Nunc mattis mi nisi. Nam euismod laoreet urna, vitae semper urna porttitor ut. Nullam id elit efficitur, pulvinar felis ut, luctus metus. Ut augue massa, vehicula nec dolor ornare, maximus accumsan turpis. Nullam elementum orci dictum nulla ullamcorper dictum. Curabitur quam nunc, porttitor et dolor porttitor, elementum eleifend massa. Suspendisse volutpat accumsan feugiat. In hac habitasse platea dictumst. Pellentesque in leo sed velit tempus bibendum.

Textboxen

Statt eines Bildes können auch Textboxen hinzugefügt werden. Hier einige Beispiele:

Beispiel 1

Textbox-Beispiel 1

[Hier können Sie Ihren Text eintragen.]

Sed blandit, libero sit amet mattis viverra, tortor nunc iaculis mauris, non semper nisi nulla sit amet felis. Donec eu elementum nulla, vitae malesuada odio. Ut ornare urna vitae ex pharetra elementum. Ut bibendum risus quis enim elementum interdum. Aenean ultrices erat tellus. Etiam vel dignissim elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec finibus mollis ante id tempor. Fusce vehicula, sem nec efficitur iaculis, libero urna pretium turpis, in condimentum turpis mauris eget odio. Phasellus consequat ullamcorper augue, sed suscipit elit. Maecenas et lacus non libero sollicitudin eleifend. Praesent egestas interdum malesuada. Nunc in fermentum leo. Nam iaculis tellus ligula. Sed id fermentum nulla. Donec iaculis vestibulum ex, a sagittis erat dignissim ac.c eu elementum nulla, vitae malesuada odio. Ut ornare urna vitae ex pharetra elementum. Ut bibendum risus quis enim elementum interdum. Aenean ultrices erat tellus. Etiam vel dignissim elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec finibus mollis ante id tempor. Fusce vehicula, sem nec efficitur iaculis, libero urna pretium turpis, in condimentum turpis mauris eget odio.

HTML Code

<div style="float: right; border: 6px solid #124250; background-color: #fce4b1; padding: 0 16px 8px 16px; margin: 0 0 10px 10px; max-width: 360px;">
<h2 style="color: #cb4b33;"><strong>Textbox<img id="255300" style="float: right;" src="/courses/129/files/255300/preview?verifier=zcMP6KFOqnkR0SVmKoSdhJXQbHhCc00z0lO9gzDG" alt="apple_icon.png" width="46" height="46" /></strong></h2>
<p style="color: #124250;">[TEXT in BOX]</p>
</div>

Beispiel 2

Einheiten

Hier beginnen
Einheit 1 | enter dates
Einheit 2 | enter dates
Einheit 3 | enter dates
Einheit 4 | enter dates
Einheit 5 | enter dates
Einheit 6 | enter dates
Einheit 7 | enter dates
Einheit 8 | enter dates

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

HTML Code

<div style="float: right; border: 2px solid; background-color: #dcdcdc; padding: 0 16px 8px 16px; margin: 0 0 10px 10px; max-width: 340px;">
<h2 style="color: #1f3c7b;"><strong>Einheiten</strong></h2>
    <ul>
        <li>Hier beginnen</li>
        <li>Einheit 1 | enter dates</li>
        <li>Einheit 2 | enter dates</li>
        <li>Einheit 3 | enter dates</li>
        <li>Einheit 4 | enter dates</li>
        <li>Einheit 5 | enter dates</li>
        <li>Einheit 6 | enter dates</li>
        <li>Einheit 7 | enter dates</li>
        <li>Einheit 8 | enter dates</li>
    </ul>
</div>

Beispiel 3

TITEL

In dieser scollbaren Box können Sie wichtige Zusatzinformationen präsentieren.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

HTML Code

<div class="img-rounded" style="float: right; background-color: #fbfbe5; width: 300px; height: 260px; border: 1px solid black; margin: 10px;"> <h4 style="color: #ffffff; background-color: #1e1e1e; text-align: center; margin: 0px; padding: 0px;">TITEL</h4> <div id="cc-homepage-announcements" style="height: 200px; overflow-x: hidden; overflow-y: auto; padding: 6px; text-align: left;">TEXTINHALT</span></div></div>

Wie bette ich eine Textbox mit Schatten ein?

Gehen Sie wie folgt vor, um eine Textbox mit Schatten hinzuzufügen:

1. Wählen Sie an passender Stelle auf einer Seite das Icon Einbetten Symbol in der Menüleiste des Editors.
2. Fügen Sie folgenden Code ein:
  <div style="margin: 50px 15% 50px 15%; background-color: #ccc;">
  <div style="position: relative; top: -20px; left: -20px; padding: 20px; background: #fff; border: 2px solid #ccc;">
  <p>Lorem ipsum</p>
  </div>
  </div>
3. Tragen Sie einen eigenen Text an Stelle des Lorem ipsum Platzhalters ein.

Aus dem oben stehenden Code ergibt sich die folgende Textbox:

Lorem ipsum

Codes für alternative Textboxen:

Textbox mit Schatten in WU blau

<div style="margin: 50px 15% 50px 15%; background-color: #008198;">

<div style="position: relative; top: -20px; left: -20px; padding: 20px; background: #fff; border: 2px solid #008198;">
<p>Lorem ipsum</p>
</div>
</div>

Textbox mit Schatten in altrosa

<div style="margin: 50px 15% 50px 15%; background-color: #e98dac;">
<div style="position: relative; top: -20px; left: -20px; padding: 20px; background: #fff; border: 2px solid #e98dac;">
<p>Lorem ipsum</p>
</div>
</div>

Textbox komplett eingefärbt

<div style="margin: 50px 15% 50px 15%; background-color: #004a67;"> <div style="position: relative; top: -20px; left: -20px; padding: 20px; background:#c2dff0; border: 2px solid #004a67;"> <p>Lorem ipsum</p> </div> </div>

HINWEIS: Hier finden Sie noch weitere HEX Farbcodes: https://htmlcolorcodes.com/

Wie bette ich Buttons ein?

Mit Buttons können Sie interne oder externe Links auf einer Seite hervorheben. Gehen Sie wie folgt vor, um einen Button hinzufügen:

1. Fügen Sie einen Link ein: Einfügen - Link - Externer Link oder Link zum Kurs.
2. Öffnen Sie den HTML-Editor, indem Sie auf folgendes Symbol </> klicken.
3. Suchen Sie dort nach dem Link. Dieser wird als <a title="Titel des Links" href="link" angezeigt.
4. Fügen Sie zwischen <a und title den Button Code ein, z.B. <a class="btn btn-primary" title=...
5. Speichern Sie Ihre Eingabe.

Der Button sollte dann wie folgt angezeigt werden:

Canvas WU Guide

Weitere Farben:

- Grau = class="btn btn-secondary"
- Grün = class="btn btn-success"
- Orange = class="btn btn-warning"
- Schwarz = class="btn btn-info"
- Rot = class="btn btn-danger"

ACHTUNG: In der Canvas WU App werden Buttons als Text angezeigt.

Wie bette ich eine Gitter-Navigation ein?

Bei einer Gitter-Navigation (EN: Grid Navigation) werden verlinkte Inhalte (Buttons, Bilder, Icons oder Text) in einer Tabelle eingefügt. Sie können eine eigene Gitter-Navigation nach Belieben zusammenstellen. Gehen Sie dafür, wie folgt vor:

1. Öffnen Sie den HTML-Editor, indem Sie auf das folgende Symbol </> (rechts unten) klicken.
2. Tragen Sie den Code für die Tabelle ein:
  <table style="border-collapse: collapse; width: 100%; height: 145px; background-color: #ffffff; border-color: #ffffff; border-style: solid;" border="6">
  <tbody>
  </tbody>
  </table>
3. Geben Sie die folgenden Informationen zwischen <tbody> und </tbody> für Zellen und Zeilen ein. Hier das Beispiel von einer Zeile mit vier Zellen:
          <tr style="height: 93px;">
              <td style="width: 25%; height: 93px;">INHALT</td>
              <td style="width: 25%; height: 93px;">INHALT</td>
              <td style="width: 25%; height: 93px;">INHALT</td>
              <td style="width: 25%; height: 93px;">INHALT</td>
          </tr>
4. Wechseln Sie zum Rich-Text-Editor, indem Sie auf das folgende Symbol </> klicken.
5. Tragen Sie Zelleninhalte (z.B. Text, Bild oder Icons) ein.
6. Verlinken Sie die Zelleninhalte: Einfügen - Link - Externer Link oder Link zum Kurs.
7. Speichern Sie alle Eingaben.

Die Gitter-Navigation wird nun in der Seite angezeigt. Testen Sie anschließend, ob die eingefügten Verlinkungen auch zu den gewünschten Seiten führen.

Code für eine Gitter-Navigation mit 3 Zeilen und insgesamt 12 Zellen:

<table style="border-collapse: collapse; width: 100%; height: 145px; background-color: #ffffff; border-color: #ffffff; border-style: solid;" border="6">
    <tbody>
        <tr style="height: 93px;">
            <td style="width: 25%; height: 93px;">INHALT</td>
            <td style="width: 25%; height: 93px;">INHALT</td>
            <td style="width: 25%; height: 93px;">INHALT</td>
            <td style="width: 25%; height: 93px;">INHALT</td>
        </tr>
        <tr style="height: 93px;">
            <td style="width: 25%; height: 93px;">INHALT</td>
            <td style="width: 25%; height: 93px;">INHALT</td>
            <td style="width: 25%; height: 93px;">INHALT</td>
            <td style="width: 25%; height: 93px;">INHALT</td>
        </tr>
        <tr style="height: 93px;">
            <td style="width: 25%; height: 93px;">INHALT</td>
            <td style="width: 25%; height: 93px;">INHALT</td>
            <td style="width: 25%; height: 93px;">INHALT</td>
            <td style="width: 25%; height: 93px;">INHALT</td>
        </tr>
    </tbody>
</table>

Wie bette ich ein Videotranskript neben einem Video ein?

Video Transkript

OER are Open Educational Resources.

These are materials that have had an open license applied to them.

So it could be a full text book, a single unit, a worksheet, an interactive activity. Anything that helps with teaching and learning.

They can be printed out into physical copies for a very low cost and given to the students.

It can also be an online resource as well.

So Open Educational Resources include not only openly licensed materials but also resources that are in the public domain this includes everything from photos from NASA, to reports published by the government, and even things like bills and laws.

OER are different than traditional published resources because they come with the the license to make adaptations to the material kind of baked into the resource from the beginning. Open Educational Resources can be considered as free plus permissions and those permissions are five 'R's. You can Reuse, Remix, Revise, Retain and Redistribute the content.

Reuse means to take a resource and use it in any context you want.

Remix means taking multiple resources and mixing them together and creating a new resource out of it.

Revise means to make a copy of the resource and actually change it and adapt it to the local context.

Retain means to keep and control a copy of the resource for ever.

And finally Redistribute means the right to freely share whatever you've created.

Gehen Sie wie folgt vor, um neben einem Video einen Textbox mit Scrollbalken einzubetten:

1. Öffnen Sie den HTML Editor, indem Sie auf folgendes Symbol </> klicken.
2. Fügen Sie folgenden HTML Code ein:
  <p> </p>
  <div style="width: 70%; height: 100px; float: left; background: white;">
  <div style="width: 100%;">VIDEO</div>
  <p> </p>
  </div>
  <p style="text-align: center;"> </p>
  <p style="text-align: center;"><strong>TITEL</strong></p>
  <hr />
  <div style="margin-left: 70%; height: 100px; float: right; background: white;">
  <div style="overflow-y: scroll; height: 300px; width: 100%;">
  <p><span style="background-color: #fbeeb8;">TEXT<br /></span></p>
  </div>
  </div>
3. Fügen Sie bei den Platzhaltern Video- bzw. Textinhalte ein.
4. Speichern Sie alle Änderungen.

Wie baue ich ein Wiki?

Ein Wiki besteht aus einer Sammlung von Seiten, die flexibel miteinander verknüpft sind. Die User*innen können somit von Seite zu Seite navigieren. Beispiel: Methoden-Box

Ein Wiki kann von Ihnen selbst erstellt und befüllt oder als Arbeitsauftrag an Studierende vergeben werden. Gehen Sie wie folgt vor, um die Grundstruktur eines Wikis aufzubauen:

1. Klicken Sie auf Seiten und legen Sie mit einem Klick auf +Seite so viele Seiten an, wie Sie für das Wiki benötigen (z.B. eine Seite pro Themenblock). Alternativ können Sie Seiten auch erstmal unter einem Modul anlegen und dann aus dem Modul wieder entfernen (das geht uU schneller). Beachten Sie folgendes beim Erstellen der Seiten:
  1. Benennen Sie die Seiten aussagekräftig. Der Titel der Seite wird in der URL und in der Übersicht aller Seiten, sowie unter den Kurslinks aufscheinen.
  2. Sie können beim Anlegen der Seiten definieren, ob nur Lehrende oder auch Studierende die Seite bearbeiten dürfen.
2. Definieren Sie eine Seite als Startseite. Diese Seite sollte einen Überblick über alle weiteren Seiten (Kurslinks) enthalten. Sie können die Wiki-Startseite z.B. in einem Modul einfügen, in einem Button auf der Startseite verlinken oder über die Redirect-Funktion im linken Seitenmenü zugänglich machen (siehe: Wie füge ich neue Menütitel zum linken Seitenmenü hinzu?).
3. Gestalten Sie nun die Inhalte und alle notwendigen Querverbindungen via Kurslinks (Um einen Kurslink einzubetten, klicken Sie in der Menüleiste auf Einfügen - Link zum Kurs).
4. Veröffentlichen Sie alle Seiten des Wikis.

Nachdem Sie alle Seiten veröffentlicht haben, sollten Sie überprüfen, ob Sie zwischen den einzelnen Seiten im erstellten Wiki wie gewünscht navigieren können.

HINWEIS: Im Tab HTML-Codes und Einbettungen finden Sie zahlreiche Tipps zur Gestaltung von WIKI-Inhaltsseiten.

HINWEIS: Falls Studierende das Wiki bearbeiten dürfen, können Sie über Seitenverlauf anzeigen - klicken Sie dazu bei einer Seite auf die drei Punkte rechts - einsehen, wer wann welche Änderungen vorgenommen hat.

Wie baue ich ein Glossar?

Ein Glossar ist ein alphabetisch geordnetes Verzeichnis von Begriffen (meist Fachbegriffen) mit Erklärungen. Beispiel: Methoden-Box Glossar

Sie haben drei Optionen, um ein Glossar zu bauen:

1. Option: Grundstruktur eines Glossar selbst bauen

1. Klicken Sie auf Seiten und legen Sie mit einem Klick auf +Seite eine Seite an.
2. Benennen Sie die Seite mit z.B. Glossar.
3. Gestalten Sie das Glossar mit A-Z. Die Buchstaben können Sie z.B. in einer Tabelle eintragen (Ausgangspunkt).
4. Führen Sie alle Buchstaben als Überschriften sowie die zugehörigen Fachbegriffe auf der Seite an.
5. Verknüpfen Sie nun die obigen Buchstaben mit den unten angeführten Überschriften, indem Sie Sprungmarken (Ankerpunkte) setzen. Wechseln Sie dazu in den HTML Editor (</>).
6. Fügen Sie folgenden Code bei den Ausgangspunkten (den Buchstaben oben) ein:
  <a href="#Titel_Sprungmarke">Buchstabe</a>
7. Fügen Sie den gelbmarkierten Code bei den Positionen (Überschriften) ein, wohin gesprungen werden soll:
  <h4 id="Titel_Sprungmarke">Überschrift</h4>
8. Speichern Sie die Seite.

Kontrollieren Sie, ob die Sprungmarken (Ankerpunkte) richtig funktionieren.

HINWEIS: Ändern Sie die Farbe der Buchstaben, für die (noch) keine Inhalte vorhanden sind, oder setzen Sie hier (noch) keine Sprungmarke (Anker).

2. Option: Vorlage für ein Glossar von den Commons herunterladen

1. Klicken Sie im linken Seitenmenü auf Start.
2. Wählen Sie in der rechten Menüleiste Aus Commons importieren aus.
3. Entfernen Sie die ausgewählten Filter.
4. Tragen Sie im Suchfeld Glossar ein.
5. Wählen Sie Glossar (DE) aus.
6. Klicken Sie auf Import/Herunterladen.
7. Wählen Sie den Kurs aus, in den Sie die Glossar-Vorlage importieren möchten.
8. Klicken Sie auf Importieren.

Die Glossar-Vorlage wird in den ausgewählten Kurs importiert. Navigieren Sie im ausgewählten Kurs zu Seiten und klicken Sie Alle Seiten anzeigen. Hier wird die Glossar-Vorlage angezeigt und Sie können diese Seite bearbeiten.

3. Option: Quellcode für das Glossar auf Deutsch im HTML-Editor einfügen

1. Laden Sie folgende Datei herunter: Quellcode für Glossar Deutsch.docx
2. Öffnen Sie die Datei und markieren Sie den gesamten Inhalt.
3. Klicken Sie in Canvas WU auf Seiten und legen Sie mit Klick auf +Seite eine neue Seite an.
4. Wechseln Sie in den HTML-Editor, indem Sie auf folgendes Symbol </> klicken.
5. Fügen Sie den kopierten HTML-Code ein.
6. Klicken Sie auf Speichern.

Die Glossar Vorlage wird nun auf der Seite angezeigt und kann von Ihnen bearbeitet werden.

Für ausführlichere Beschreibungen von Use Cases & Tipps besuchen Sie bitte das Portal - Online Learning Environment.Links to an external site.
Vorlagen für gestaltete Seiten finden Sie auch in den Canvas Commons.

Wo?	Was?	Wozu?	Wie?
Seiten	Bündelung von Inhalten	Um Kursmodule zu verkürzen	Sie können Inhalte zu einem Thema wie Texte, Dokumente, Bilder, Audios oder Videos auf einer Seite zusammenfassen. Nutzen Sie hierfür Einbettungen, Tabs oder Akkordeon-Elemente, welche es erlauben Inhalte ein und aus zuklappen.
Seiten	Seitenbearbeitung als ToDo definieren	Studierende werden über die Bearbeitung der Seite erinnert	Sie können Studierenden erlauben, Seiten in Kursen zu bearbeiten, um z.B. Abgaben für alle Studierenden des Kurses zugänglich zu machen. Wenn die Seite als ToDo definiert ist, erscheint die Bearbeitung der Seite in der ToDo-Liste der Studierenden. Beachten Sie jedoch, dass es beim gemeinsamen Bearbeiten von Seiten zu "Überschreibungen" kommen kann. Die Studierenden sollten daher zu einem späteren Zeitpunkt überprüfen, ob die von ihnen eingefügten Inhalte noch vorhanden sind.
Seiten	Inhaltsverzeichnis am Beginn eines Moduls	Studierende erhalten einen Überblick über die Inhalte eines Moduls	Fügen Sie am Beginn eines Moduls eine Seite ein. Auf dieser Seite können Sie mit Kurslinks auf die nachfolgenden Inhalte des Moduls oder auf weiterführende Seiten mit zusätzlichen Informationen ("versteckte" Seiten) verweisen. Die nachfolgenden Seiten des Moduls sollten auch einen Zurück-Button zum Inhaltsverzeichnis des Moduls enthalten.
Seiten	"Versteckte" Seiten	Module können dadurch kürzer dargestellt werden	Von der Ausgangsseite des Moduls können Sie mittels Kurslinks auf "versteckte" Seiten verlinken und so eine Seitenhierarchie erstellen. Achten Sie darauf, dass innerhalb der verknüpften Seiten eine Möglichkeit zum Zurücknavigieren besteht. Um Links einzufügen, klicken Sie in der Menüleiste des Editors auf Einfügen - Link - Link zum Kurs.
Seiten	Kontinuierliche Bereitstellung von Seiteninhalten	Studierenden wird kontinuierlich Lernmaterial zur Verfügung gestellt, welches bei Bedarf auf aktuelle Ereignisse oder Diskussionen abgestimmt werden kann	Weisen Sie auf der Inhaltsseite darauf hin, dass diese Seite während des Semesters laufend ergänzt wird. Dadurch werden die Studierenden über die Entwicklung der Inhaltsseite informiert. Zusätzlich können Sie festlegen, dass Personen über Änderungen auf der Seite informiert werden, wenn Ergänzungen vorgenommen wurden. Kursteilnehmer*innen erhalten somit beim Hinzufügen neuer Inhalte (z.B. Einbettungen von Dokumenten, Videos, Kurslinks zu neuen Aufgaben) eine Benachrichtigung.
Seiten	Pool für Lernunterlagen	Austausch von Lernunterlagen - Studierende werden aufgefordert nach passenden Lernunterlagen zu suchen und setzen sich somit mit den Inhaltsthemen auseinander	Sie können eine Seite anlegen, die von den Studierenden bearbeitet werden kann. Auf der Inhaltsseite können Studierende z.B. selbst erstellte Erklärvideos aus Planet eStream WU mit/ohne Quiz, YouTube-Videos zu einem Thema, Links zu Quellen etc. einfügen. Für das Hinzufügen von Inhalten können Mitarbeitspunkte vergeben werden. Mit Hilfe der drei Punkte auf einer Seite ist es möglich, den Verlauf der Seite einzusehen und auf diese Weise festzustellen, wer welche Inhalte hinzugefügt hat. Beachten Sie nur, dass es beim gemeinsamen Bearbeiten von Seiten zu "Überschreibungen" kommen kann. Die Studierenden sollten daher zu einem späteren Zeitpunkt überprüfen, ob die eingefügten Inhalte noch vorhanden sind.
Seiten	Präsentation von Ausarbeitungen	Ausarbeitungen/Abgaben von Studierenden können mit allen Kursteilnehmer*innen geteilt werden	Erstellen Sie eine Seite, die von den Studierenden bearbeitet werden kann. Legen Sie eine vorgegebene Struktur für die Seite fest, damit die Studierenden wissen, wo sie ihre Ausarbeitungen/Abgaben einfügen müssen. Achten Sie nur darauf, dass es beim gemeinsamen Bearbeiten von Seiten zu "Überschreibungen" kommen kann. Die Studierenden sollten daher zu einem späteren Zeitpunkt überprüfen, ob die eingefügten Inhalte noch vorhanden sind. Nach dem Upload können Sie die Editieroption für Studierende wieder entfernen.
Seiten	Dateiablage für Gruppen	Uploads von Gruppen sind für alle Kursteilnehmer*innen sichtbar/zugänglich	Sie können in einem Modul pro Gruppe eine Seite als Dateiablage anlegen. Für die Seiten muss festgelegt werden, dass diese von Studierenden bearbeitet werden können. Zudem können Sie die Seite als ein ToDo definieren. Nach dem Upload von Dateien/Inhalten der Gruppen können Sie den Editiermodus wieder entfernen. Studierende haben Zugang zu allen hochgeladenen Unterlagen von den Gruppen.
Seiten	Bündelung von Lesematerialien	Studierende erhalten einen Gesamtüberblick des Lesestoffs und Module werden kürzer dargestellt, da weniger Elemente auf erster Ebene angezeigt werden	Sie können mehrere Dokumente (Leseunterlagen) auf einer Seite einbetten. Wählen Sie für die Einbettung die einfache Inline-Vorschau aus. Klicken Sie dafür das eingebettete Dokument an, um dies unter Linkoptionen - Anzeigeoptionen einzustellen.
Seiten	Lektüre mit Fortschrittanzeige	Studierende erhalten einen Überblick darüber, mit welchen Inhalten sie sich bereits beschäftigt haben	Betten Sie ein oder mehrere Dokumente auf einer Seite ein und wählen Sie als Anzeigeoption Inline-Vorschau (standardmäßig erweitert) aus. Mit einem Klick auf das eingebettete Dokument können Sie Linkoptionen aufrufen und die Anzeigeoption einstellen. Definieren Sie als Anforderung für die Seite "Als Fertig markieren". Klicken Sie dazu in der Modulüberschrift auf die drei Punkte und wählen Sie Ändern aus. Sie können nun für die Seite die Anforderung "Als Fertig markieren" festlegen.
Icon Maker	Verlinkte Icons/Buttons	Studierende können über die verlinkten Buttons/Icons zu anderen Kursseiten gelangen oder externe Websites aufrufen	Sie können den Icon Maker in der Menüleiste des Editors verwenden, um Icons zu erstellen. Versehen Sie die Symbole mit Links. Klicken Sie dazu auf Einfügen - Link - Externer Link oder Link zum Kurs. Das erstellte Icon dient nun als Button, der auf andere Seiten verweist.
HTML Code	Zusatzinformationen farblich hervorheben	Durch die farbliche Hervorhebung von Inhalten kann die Aufmerksamkeit der Studierenden auf diese gelenkt werden, so dass sie ins Auge springen; bei wiederholter Verwendung entsteht ein Wiedererkennungswert.	Färben Sie Bereiche ein, in denen Sie Elemente platzieren, wie z. B. Videoeinbettungen, Einleitungssätze, FAQs usw. Eine genaue Anleitung zum Einfärben von Bereichen finden Sie im Tab HTML-Codes unter der Frage "Wie kann ich einen Hinweistext farblich hervorheben" oder unter der Frage "Wie ändere ich die Hintergrundfarbe einer Seite/eines Seitenabschnitts".
HTML Code	Wiederkehrende Inhalte in Textboxen anzeigen	Studierende erkennen schnell, welche Inhalte in den diversen Textboxen angeführt sind	Sie können verschiedenfarbige Textboxen verwenden, um unterschiedliche Inhalte darzustellen. Zum Beispiel können Sie Textboxen mit gelben Schatten für "Ideen zum Weiterarbeiten", Textboxen mit grauen Schatten für "Weiterführende Literatur" usw. verwenden. Eine Anleitung zum Einbetten von Textboxen in Seiten finden Sie unter dem Tab HTML-Codes unter der Frage "Wie bette ich eine Textbox mit Schatten ein?
HTML Code	Navigationshilfe auf langen Inhaltsseiten	Sprungmarken/Anker auf langen Inhaltsseiten ermöglichen eine rasche Navigation zu gewünschten Textstellen	Um Sprungmarken/Anker auf langen Inhaltsseiten einzufügen, müssen Sie im HTML-Editor arbeiten. Sie finden im Tab HTML Codes bei der Frage "Wie bette ich Sprungmarken (Anker) in eine Seite ein?" eine genaue Anleitung dazu.
Wiki/Glossar	Kollaboratives Arbeiten	Studierende werden in die Entwicklung von einem Wiki oder Glossar involviert	In der Erstellungsphase des Wikis oder Glossars müssen die Studierenden berechtigt sein, die Seite zu bearbeiten. Dies können Sie in den Optionen der Seite festlegen. Über die Option Seitenverlauf anzeigen können Sie nachvollziehen, wer welche Änderungen vorgenommen hat. Klicken Sie dazu auf die drei Punkte neben der Seite und wählen Sie Seitenverlauf anzeigen.

Zurück zur Übersicht