TYPO3-Handbuch · Inhalte pflegen
Anleitungen mit Markierungen
Mit dem Element „Schritt“ bauen Sie Anleitungen wie in diesem Handbuch: nummerierte Schritte mit Bildschirmfoto, orange Markierungen im Bild, Erklärungen beim Zeigen auf die Nummer und einem Rundgang, der Stelle für Stelle durch das Bild führt.
Was Besucher sehen
- Nummern im Bild – Maus darauf oder antippen zeigt die Erklärung in einer Sprechblase.
- Liste unter dem Bild – dieselben Erklärungen als Text, auch für Vorlesesoftware.
- Großansicht – ein Klick aufs Bild zeigt es groß, mit allen Markierungen.
- Rundgang – ein Mauszeiger fährt von Stelle zu Stelle, je Stelle mit Erklärung und Aufforderung. Auf dem Handy zoomt das Bild an die Stelle heran.
Das Element „Schritt“ gibt es auf Websites von QUADRONET. Probieren Sie es gleich aus: Starten Sie unten den Rundgang.
So legen Sie einen Schritt an
Schritt 1
Element „Schritt“ anlegen
Legen Sie wie unter Inhalte anlegen ein neues Element an und wählen Sie in der Gruppe QUADRONET das Element Schritt (Anleitung). Die Nummer vor der Überschrift zählt TYPO3 selbst.
Schreiben Sie die Überschrift als kurzen Befehl, etwa „Text ohne Formatierung einfügen“, und darunter, was zu tun ist.
- Markierung 1: Gruppen In der Gruppe QUADRONET steht das Element „Schritt (Anleitung)“. Klicken Sie auf „QUADRONET“.
Schritt 2
Bildschirmfoto einfügen
Auf dem Reiter Bildschirmfoto fügen Sie das Bild ein. Ein zweites Bild ist freiwillig – es erscheint als vergrößerter Ausschnitt unter dem ersten.
Schneiden Sie Bildschirmfotos vorher eng zu. Ein Foto des ganzen Bildschirms wird in der Spalte so klein, dass die Schrift nicht mehr lesbar ist.
Schritt 3
Markierungen eintragen
Im Feld Markierungen im Bildschirmfoto steht je Zeile eine Markierung. Die Teile trennen Sie mit einem senkrechten Strich |:
links | oben | Breite | Höhe | Beschriftung | Erklärung | Aufforderung
- links, oben, Breite, Höhe – Lage und Größe des Rahmens in Pixeln des Originalbilds. Diese Werte lesen Sie in jedem Bildprogramm ab, wenn Sie einen Bereich markieren. Alternativ in Prozent mit
%. - Beschriftung – kurz, der Name des Knopfs oder Felds.
- Erklärung – freiwillig, ein bis zwei Sätze.
- Aufforderung – freiwillig, was der Leser jetzt tun soll. Erscheint mit „Jetzt Sie:“.
Beispiel:
412 | 38 | 34 | 30 | Formatierung entfernen | Löscht Schriftarten aus Word. | Text markieren, dann hier klicken.
Schritt 4
Links in Erklärungen
Erklärung und Aufforderung dürfen Links enthalten. Schreiben Sie den Linktext in eckige Klammern und das Ziel direkt dahinter in runde:
Siehe [Vorschau](104)
Als Ziel geht die Nummer einer Seite (die ID aus dem Seitenbaum), eine Adresse mit https://, mailto: oder tel:.
Schritt 5
Speichern und prüfen
Speichern Sie und öffnen Sie die Seite mit Web-Seite anzeigen. Sitzt ein Rahmen daneben, korrigieren Sie die Zahlen – meist reichen ein paar Pixel. Starten Sie einmal den Rundgang, um die Reihenfolge zu prüfen: Er folgt der Reihenfolge der Zeilen.
Tipps für gute Anleitungen
- Ein Schritt, eine Handlung. Lieber sieben kurze Schritte als drei lange.
- Höchstens fünf bis sechs Markierungen je Bild – sonst verliert man die Übersicht.
- Die Reihenfolge der Markierungen ist die Reihenfolge im Rundgang: oben links nach unten rechts oder in der Reihenfolge, in der man klickt.
- Eine zweite Anleitung auf derselben Seite beginnt mit dem Schalter Nummerierung hier neu bei 1 beginnen.