Änderungen Versionsnummer Stand Ursprungsversion Mai 2010 audio, divid, dia, ecall, skype, icq, google-translator

Transkript

1 Befehlsübersicht Das sind die Befehle, die man im Editor verwenden kann Versionen: Änderungen Versionsnummer Stand Ursprungsversion Mai 2010 audio, divid, dia, ecall, skype, icq, google-translator November 2012 comment (kommentar) Januar 2013 Allgemeines Die hier aufgeführten Befehle ersetzen meistens ähnlich lautende HTML-Befehle. Es gibt aber auch Befehle, die es sonst nirgends gibt und die nützliche Funktionen in die Webseite rufen, wie z.b. der Befehl [stundenplan]. Wer in Foren unterwegs ist, kennt vielleicht schon einige der Befehle, wie z.b. [b], um Wörter fett auszugeben. Diese Art der Befehle nennt man bulletin-board-code (Forum-Code) oder schlicht BBCode. Warum hat Yogalehrer-Online keinen zeitgemäßen, grafischen Editor? Das ist eine gute Frage. Jeder, der hier zum ersten Mal hinkommt, stellt sich vermutlich genau diese Frage. Die Antwort: Yogalehrer-Online hat keinen grafischen Editor mehr. Experimente mit diversen, vielversprechenden grafischen Editoren brachten alle das selbe Ergebnis: Eine immer mehr zunehmende, nicht mehr behebbare Vermüllung des Quelltextes der Seiten. Immer mehr Fehler, die zum Schluß dazu führten, dass sich entweder der Browser aufhing oder die Seite nur in Teilen, aber in jedem Fall nicht so wie erwartet, angezeigt wurde. Seite 1 von 39

2 Mit BBCode hat man die Chance, seine Fehler wieder zu beheben. Mit grafischen Editoren nicht. Die allgemeine Syntax (Sprachregeln) von BBCode BBCode hält sich im allgemeinen an das Vorbild HTML. Es gilt die Reihenfolge: [Anfangsbefehl] zu formatierender Text [/Endbefehl] Der Endbefehl lautet wie der Anfangsbefehl, hat aber einen Schrägstrich. Beginn der Formatierung: Eckige Klammer auf Befehlskürzel Optionale Argumente Eckige Klammer zu [ B ] --- zu formatierender Text --- Ende der Formatierung: Eckige Klammer auf Schrägstrich Befehlskürzel Eckige Klammer zu [ / B ] Das ist [b] fettgeschriebener Text [/b]. Normaler Text. Ergebnis: Das ist fettgeschriebener Text. Normaler Text. Die Faulenzer-Syntax von Yogalehrer-Online Manche Befehle haben einen Faulenzer-Modus. Hierbei umschließen die eckigen Klammern den gesamten, zu formatierenden Bereich. Das ist [b fettgeschriebener Text]. Normaler Text. Die Faulenzer-Syntax ist nicht so bekannt wie die normale Syntax. Es gibt sie in Yogalehrer-Online, weil sie die Arbeit mit den Webseiten beschleunigen kann und übersichtlich aussieht. Seite 2 von 39

3 In der nun folgenden Befehlsübersicht werden die Faulenzer mit ausgegeben. Das Zurechtklicken der Befehle mit dem Editor erzeugt immer den offiziellen Code, die Faulenzer sind nur über die Handeingabe möglich. Den Faulenzer gibt es nur für ein paar häufig gebrauchte Befehle. Stichwortverzeichnis A F audio...5 f...15 B fieldset...15 b...5 flag...15 big...5 G bild...6 gbild...16 bildgalerie...6 goname...17 block...7 googletranslator...16 C center...7 H code...8 h comment...8 h D h dia...10 hr...18 div...10 html...19 divbox...11 I divclass...12 i...19 divid...13 K download...13 k...19f. E kontakt...20 ecall...14 kurse...20f L lbild...21 left...22 lgbild...22 li...23 lkontakt...23f. lmap...24 lrollbox...25 M map...25 N name...26 O orte...27 Q q...27 R rbild...28 rgbild...28 right...29 rkontakt...29f. rmap...30 rollbox...31 rrollbox...31 S small...32 stop...32 stundenplan...33 style...34 styleclass...34f. T table...35 td...35, 38 termine...36 tr...37 U u...37 url...37f. W wiki...38f....4!!...4 Seite 3 von 39

4 !(Buchstabe) (Leerzeichen)!G roße!a nfangsbuchstaben Ergebnis: Großer Erstbuchstabe Große Anfangsbuchstaben (Das Aussehen des Ergebnisses ändert sich in jedem Design) Ein Ausrufezeichen wird ohne Zwischenraum an einen Buchstaben gestellt. Danach kommt ein Leerzeichen. Technik: Dadurch wird der Buchstabe mit der CSS-Klasse firstletter ausgestattet. Abhängig vom gewählten Design sieht der Buchstabe dann jeweils anders aus. Das Aussehen der Klasse firstletter kann im CSS-Modul geändert werden. [ ] Hartes Leerzeichen Normalerweise werden alle aufeinander folgenden Whitespace-Zeichen wie Leerzeichen, Zeilenumbrüche oder Tabulatoren im Browser zu einem einzigen Leerzeichen komprimiert. Das macht nicht etwa Yogalehrer-Online, das machen alle Browser so. Es ist eine Vorgabe in der Definition von HTML. Die Browser müssen das so machen, es ist eine Vorschrift. Das harte Leerzeichen wird nicht komprimiert, es gilt nicht als Whitespace-Zeichen, sondern als Buchstabe. Benutze das harte Leerzeichen, um Abstände zwischen einzelne Worte zu bekommen: Ich brauche mehr[][][][]abstand Ergebnis: Ich brauche mehr Abstand Falsch: Ich brauche mehr Abstand Ergebnis: Ich brauche mehr Abstand Seite 4 von 39

5 [audio ] <audio> Sound in der Webseite So funktioniert der Audio-Befehl: Den Sound als *.ogg UND als *.mp3 hochladen in den Arbeitsbereich > Homepage > Downloads. Die beiden Formate hochzuladen ist wichtig, um alle Browser mit im Boot zu haben. Mit diesen beiden Formaten hat man alle Eventualitäten abgedeckt. Mit dem Befehl [audio <Dateiname>] wird dieser Download dann aber noch nicht abgespielt. Er ist schon mal in der Webseite - aber das hat keinerlei Auswirkungen. Damit es von alleine losgeht, muss noch "autoplay" dazu. Also [audio autoplay <Dateiname>] Ein endloses Abspielen mit "loop" [audio autoplay loop <Dateiname>] Mit Abspielknopf zum Draufdrücken: [audio controls <Dateiname>] Der Befehl schaut nach beiden Endungen, deshalb geht [audio] auch mit dem Dateinahmen ohne Endung. [b] text [/b] [b text ] Beispiele: <b> Fetter Text [b]dieser Text wird fettgeschrieben[/b] [b dieser Text wird fettgeschrieben] [big] text [/big] [big text ] <big> Text etwas größer machen [big] macht den Text etwas größer, als er im Moment ist. Seite 5 von 39

6 Das ist normaler Text. [big] Dieser Text wird etwas größer. [/big] Das ist normaler Text. Das ist normaler Text. [big Dieser Text wird etwas größer.] Das ist normaler Text. Das ist normaler Text. Dieser Text wird etwas größer. Das ist normaler Text. [bild (Bildnummer)] <img> Bild als eigene Zeile einbauen Das Bild muss vorher auf der Seite, auf der es verwendet werden soll, hochgeladen werden. Die Bildnummer steht dann in der Übersicht der hochgeladenen Bilder an jedem Bild dran. Jede Seite mit hochgeladenen Bildern hat ein eigenes Bild 1. So wird das erste Bild eingebaut: [bild 1] [bildgalerie (Bildnummer)] <img>+javascript+css Vorschau-Dia für Galeriebild mit jquery-lightbox. Schwebt immer nach links. Siehe auch: [stop] [bildgalerie] stellt ein Bild als Dia in eine Lightbox-Bildergalerie. Javascript muss aktiviert sein. Die Bilder müssen vorher auf der Seite, auf der sie verwendet werden sollen, hochgeladen werden. Die Bildnummer steht dann in der Übersicht der hochgeladenen Bilder an jedem Bild dran. Jede Seite mit hochgeladenen Bildern hat ein eigenes Bild 1. Die Bilder sollten in der größtmöglichen Größe hochgeladen werden, die Yogalehrer-Online zuläßt. So werden die ersten drei Bilder als Dias gezeigt, die beim Draufklicken mit der jquery-lightbox auf die hochgeladene Größe vergrößert werden: Seite 6 von 39

7 [bildgalerie 1][bildgalerie 2][bildgalerie 3] Ergebnis: Der Befehl bildgalerie ist veraltet. Der neue Befehl dia ist kürzer und kann das obige Ergebnis mit deutlich weniger Schreibarbeit durch [dia 1-3] erzielen. [block] text [/block] <div style= textalign:justify > Blocksatz, Absatz wird rechtsund linksbündig gleichzeitig [block] macht sowohl die linke, als auch die rechte Kante des Absatzes glatt. So sieht der Text in Büchern und Zeitungen aus. [block]lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus tortor sed dui fringilla ac imperdiet neque tristique. Quisque dignissim massa in libero molestie posuere. In nec augue orci, vel vulputate justo.[/block] Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus tortor sed dui fringilla ac imperdiet neque tristique. Quisque dignissim massa in libero molestie posuere. In nec augue orci, vel vulputate justo. Siehe auch: [left], [right] und [center] [center] text [/center] <div style= textalign:center > Absatz zentrieren [center] zentriert den eingeschlossenen Absatz. Seite 7 von 39

8 [center]lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus tortor sed dui fringilla ac imperdiet neque tristique. Quisque dignissim massa in libero molestie posuere. In nec augue orci, vel vulputate justo.[/center] Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus tortor sed dui fringilla ac imperdiet neque tristique. Quisque dignissim massa in libero molestie posuere. In nec augue orci, vel vulputate justo. Siehe auch: [left], [right] und [block] [code] text [/code] [code text ] Beispiele: <code> Schreibmaschinentext Das wird [code] Schreibmaschinentext [/code] werden. Das wird [code Schreibmaschinentext] werden. Das wird Schreibmaschinentext werden. [comment <gruppenname>] Gästebuch Der Befehl erzeugt ein Eingabeformular, mit dem der Webseitenbesucher einen Kommentar auf der Webseite hinterlassen kann. Das Eingabeformular benutzt ein grafisches Captcha -Feld, um sicherzustellen, dass es sich beim Eingeber um einen Menschen und nicht um einen Spambot handelt. Wenn unter der angegebenen -Adresse bei Gravatar.com ein Bild hinterlegt wurde, dann wird dieses in der Liste angezeigt. Die -Adressen werden nicht veröffentlicht. [comment termine] Im Beispiel ist termine ein frei gewählter Gruppenname. Man kann auf jeder Webseite einen [comment] Befehl haben. Jeder Befehl kann eine eigene Gruppe haben. Oder man kann auf Seite 8 von 39

9 mehreren Webseiten die selbe Gruppe haben. Im Arbeitsbereich Homepage > Kommentare/Gästebuch kann man die eingegebenen Kommentare verwalten. Hier sieht man zunächst nur die vorhandenen Gruppen mit der Übersicht, wie viele Kommentare pro Gruppe eingegeben wurden. Durch umbenennen wird die Gruppe mit einem neuen Namen versehen. Achtung: Nach dem Umbennen hat die Webseite in aller Regel keine Kommentare mehr. Der comment-befehl auf der Webseite sollte nun ebenfalls den neuen Gruppennamen erhalten, damit die Kommentare wieder angezeigt werden können. Mit umbenennen ist es möglich, mehrere Gruppen zu einer einzigen zu verschmelzen. Durch anzeigen werden alle Kommentare der entsprechenden Gruppe gezeigt. Die Ansicht ist ähnlich wie auf der Webseite, allerdings kann man nun einzelne Kommentare löschen und hier sieht man auch die -Adresse und kann eine an den Kommentator versenden. Weil ich während der Testphase den Befehl ständig falsch eingegeben hatte, reagiert er auf mehr Kommandos als die anderen Befehle. Immer wieder gab ich mal comments (mit s am Schluss) und dann wieder comment und dann auch mal kommentar auf der Webseite ein. Irgendwann wurde mir das alles zu bunt und dann reagierte das Gästebuch auf ALLES. Soll heißen: Es funktioniert nicht nur comment, sondern auch comments, kommentar und kommentare. Seite 9 von 39

10 [dia <nr>(-<nr>)] Bildergalerie [dia] stellt ein oder mehrere Bilder als Dia-Show in eine Lightbox-Bildergalerie. Javascript muss aktiviert sein. Die Bilder müssen vorher auf der Seite, auf der sie verwendet werden sollen, hochgeladen werden. Die Bildnummer steht dann in der Übersicht der hochgeladenen Bilder an jedem Bild dran. Jede Seite mit hochgeladenen Bildern hat ein eigenes Bild 1. Die Bilder sollten in der größtmöglichen Größe hochgeladen werden, die Yogalehrer-Online zuläßt. So werden die ersten drei Bilder als Dias gezeigt, die beim Draufklicken mit der jquery-lightbox auf die hochgeladene Größe vergrößert werden: [dia 1-3] Ergebnis: Mit dem Befehl bildgalerie kann man das selbe Ergebnis erzielen. Der Befehl bildgalerie ist aber veraltet. Um das selbe Ergebnis mit bildgalerie zu haben, müsste man [bildgalerie 1][bildgalerie 2][bildgalerie 3] eingeben. [div (style)] bereich [/div] <div> Formatierter Layer [div] umschließt einen rechteckigen Bereich des sichtbaren Bereichs. Es ist die 1:1 Umsetzung des HTML-Befehls <div style= style-anweisungen > Wenn ein bestimmter Bereich einmalig (nicht wiederholend) formatiert werden soll. Alle CSS- Anweisungen sind möglich. Seite 10 von 39

11 [div background-color:white;color:navy;padding:1em;border:solid 3px red]das ist ein Bereich mit blauer Schrift und rotem Rand[/div] [divbox caption ] text [/divbox] <div class= divbox ><div class= divboxhead ><h2> caption </h2><div class= divboxbody > 3 verschachtelte DIV- Anweisungen, die äußere hat die Klasse divbox [divbox] ist für werdende CSS-Experten, die Text in grafisch besonders ausgestalteten Bereichen darstellen wollen. Durch die Verschachtelung ist es möglich, z. B. Grafiken mit runden Ecken als Hintergrundbilder zu benutzen. Im CSS-Modul müssen die Klassen divbox, divboxhead und divboxbody definiert werden. Im Download-Modul müssen die grafischen Hintergrundbilder hinterlegt werden, auf die das CSS dann zugreift. Ist das CSS einmal definiert, kann man diese Box beliebig oft auf allen Seiten verwenden. Damit man sieht, wie das gemeint ist, gibt es ein funktionerendes Beispiel mit dem benötigten CSS und ein paar Grafiken, die man an seine eigenen Bedürfnisse anpassen kann. Viele profesionelle Seiten nutzen ähnliche Techniken der Gestaltung von Informationskästchen. Es ist deutlich mehr Firlefanz möglich, als nur runde Ecken! Die Beschreibung der CSS-Technik: [divbox Das ist eine DivBox]Das ist die Standard-Divbox in Gelb. [/divbox] Die Standard-Divbox, die eigentlich zu keinem Design wirklich gut passt, ist bereits definiert. Bevor man sich den divbox-lehrgang antut, sollte man divclass verstanden und erfolgreich eingestzt haben. Seite 11 von 39

12 Aussehen Standard-Divbox: Mögliches Aussehen mit eigenem CSS: Die Standard-Divbox ist nur auf weißem Hintergrund schön anzusehen, denn der Hintergrund ist Teil des Bildes. [divclass (Klasse)] text [/divclass] <div class= (Klasse) > Hintergrund: Das selbe Problem. Eigene CSS-Klasse auf einen rechteckigen Bereich wirken lassen. [divclass] holt beliebige, selbst definierte CSS-Klassen in die Webseiten. Die im CSS-Modul definierten Klassen gelten für alle Webseiten. Im Gegensatz zu id darf eine class mehrmals auf einer Seite vorkommen. Eine Beispiel-Definition im CSS-Modul:.wichtig{ background-color: white; color: red; padding: 1em; font-size: 1.2em; border: solid 3px navy; text-align:center; } Aufruf im Seiteninhalt: [divclass wichtig] Das hier ist sehr wichtig![/divclass] Klassen werden im CSS mit einem Punkt eingeleitet. Der kleine Punkt vor wichtig in der CSS- Definition macht das Wort wichtig zu einer CSS-Klasse. Seite 12 von 39

13 [divid <name>] <div id= name > HTML-Layer mit id [divid] holt beliebige, selbst definierte CSS-ids in die Webseiten. Die im CSS-Modul definierten ids gelten für alle Webseiten. Im Gegensatz zu CSS-Klassen müssen ids eindeutig sein und dürfen pro Seite nur einmal vorkommen. Eine Beispiel-Definition im CSS-Modul: #wichtig{ background-color: white; color: red; padding: 1em; font-size: 1.2em; border: solid 3px navy; text-align:center; } Aufruf im Seiteninhalt: [divid wichtig] Das hier ist sehr wichtig![/divid] Eindeutige ids werden im CSS mit einem Lattenkreuz # eingeleitet. Das Lattenkreuz vor wichtig macht das Wort zu einer eindeutigen id. [download (Name)] <a href=... > Downloads zur Verfügung stellen [download] stellt dem Seitenbesucher eine zuvor hochgeladene Datei zur Verfügung. Die Datei muss zuerst unter Arbeitsbereich > Homepage > Downloads hochgeladen werden. Am unteren Ende des Moduls hängt ein Waschzettel, in dem die aktuelle Anleitung zum Hochladen und Benutzen von Downloads findet. In diesem Modul steht der Befehl zum Bereitstellen eines Downloads in der Spalte [download...]. Einfach in das Feld klicken, den Feldinhalt kopieren und in dem Webseiteneditor an der gewünschten Stelle einfügen. [download profiwissen.pdf] Seite 13 von 39

14 [ecall <Telefonnummer>] <a href= callto:... > Telefon-Link [ecall] erzeugt einen Telefonlink, der z.b. beim Aufruf der Seite über Mobiltelefon angeklickt und damit gewählt werden kann. Damit es immer und überall klappt, sollte die Telefonnummer mit +Landesvorwahl (+49 für Deutschland) eingeleitet werden. [ecall ] erzeugt einen wählbaren Link aus der Telefonnummer des Yogalehrer-Online-Supports. Auf Windows-System wird ein <a href= callto:... > - Link erzeugt. Auf allen anderen Systemen wird ein <a href= tel:... > - Link erzeugt. Probleme bitte dem Support melden, auch das verwendete Mobilfunk- oder Computerteil. Dann lassen wir den Befehl auch auf andere Systeme reagieren. [ (Mailadresse)] <a href= mailto:... > Geschützter -Link [ ] erzeugt einen -Link, der beim Anklicken das Mailprogramm des Seitenbesuchers starten will. Der Link ist mit Javascript schwach gegen -Ernteskripte geschützt. Die meisten -Ernter versuchen gar nicht, irgendeinen Schutz zu knacken, deshalb ist der damit gewährte Schutz bei fast 100%. Allerdings: Die -Adresse kann natürlich von Hand übernommen oder von Besuchern in ihr Adressbuch gesammelt werden. Viele Computerviren durchsuchen gezielt die Adressbücher der befallenen Rechner nach -Adressen... [ ganesha@yogalehrer-online.de] Aussehen ohne Javascript: ganesha ( Bitte einfügen ) yogalehrer-online.de Aussehen mit Javascript: Seite 14 von 39

15 [f] text [/f] <b> Fetter Text Beispiele: [f]dieser Text wird fettgeschrieben[/f] [f dieser Text wird fettgeschrieben] [fieldset (Bezeichnung)] <fieldset><legend> Umrandung mit Bezeichnung um Inhalte Mit [fieldset] kann man einen Bereich umranden. Die Bezeichnung des umrandeten Bereichs steht dann oben links in der Umrandung drin. [fieldset Überschrift]Das ist ein umrandeter Bereich mit Überschrift[/fieldset] [flag <code> <size>] <img> Eine kleine Flagge [flag] gibt eine kleine Flagge aus. Damit kann man im Text z. B. Fremdsprachige Abschnitte markieren. Der Code ist der gleiche Wert, wie er auf den Nationalitätsplaketten von Kraftfahrzeugen steht. Size ist die Höhe der Flagge (die Breite ändert sich ebenfalls). Erlaubt sind Größen von 8 bis 20. Werden größere oder kleinere Werte angegeben, dann wird auf den erlaubten Wert eingeschränkt. Die Flagge ist 35 Pixel breit und 20 Pixel hoch. Beispiele: [flag d12] [flag gb12] [flag f12] [flag se 20] [flag e 111] Seite 15 von 39

16 [gbild (Bildnummer)] <img> Yogalehrer-Online Galeriebild als eigene Zeile einbauen Mit [gbild] kann man eines der bereits vorhandenen Bilder aus der Galerie von Yogalehrer- Online für die Webseite übernehmen. Die Bilder sind im Balken Yogalehrer-Online Galerie Bilder enthalten und können dort angesehen werden. Man muss sich die Nummer des gewünschten Bildes merken. [gbild 19] [google-translator] <div id= googletranslator... Google-Übersetzer auf der eigenen Webseiteneditor Der Befehl erzeugt eine Klappliste mit wählbarer Sprache. Es wird der Google-Übersetzungsdienst verwendet, um die Webseite in eine beliebige Sprache zu übersetzen. Da eine eigene DIV mit eindeutigem Namen google-translator verwendet wird, kann man per Benutzer-CSS diese Klappliste in einer beliebigen Ecke der Webseite festschrauben. Seite 16 von 39

17 [goname (Zielname) (Beschriftung)] <a href= #(Bezeichnung) > Seiteninternes Linkziel anspringen [goname] erzeugt einen seiteninternen Link auf einen anderen Teil der selben Webseite. Man benötigt auch noch den Befehl [name] im Zielbereich, um das Ziel zu definieren. Der Zielname darf keine Umlaute und keine Leerzeichen enthalten. Am einfachsten ist es, wenn man nur Ziffern und Buchstaben verwendet. Alles nach dem Zielnamen ist Beschriftung. Dadurch kann man den seiteninternen Link in den fließenden Text der Seite einbauen. Beachten Sie auch unsere [goname neuheiten neuen Angebote] für den Sommer. Beachten Sie auch unsere neuen Angebote für den Sommer. Wirkung: Beim Klick auf den Link neuen Angebote wird der Teil der Webseite mit den neuen Angeboten ins Blickfeld gescrollt. Damit das Beispiel funktioniert, muss an der Stelle mit den neuen Angeboten auf der selben Seite der Befehl [name neuheiten] stehen. Siehe auch: [name] Seite 17 von 39

18 [h1] text [/h1] [h1 text ] <h1> Überschrift 1 [h1] ist die größte Überschrift. [h2] und [h3] fallen jeweils etwas kleiner aus. Jede Seite sollte mit einer großen Überschrift beginnen. Der danach folgende Text darf dann auch mit kleineren Überschriften gegliedert sein. Überschriften werden von Suchmaschinen bevorzugt untersucht: Ist da etwa ein Keywort drin? Je nach gewähltem Design kann eine Überschrift auch mit grafischer Schriftart ersetzt werden. Beispiele: [h1]das ist eine große Überschrift[/1] [h1 Das ist eine große Überschrift] Das ist eine große Überschrift [h2] text [/h2] [h2 text ] <h2> Überschrift 2 [h2] ist etwas kleiner als [h1]. Siehe auch [h1] [h3] text [/h3] [h3 text ] <h3> Überschrift 3 [h3] ist etwas kleiner als [h2]. Siehe auch [h1] oder [h2] [hr] <hr> Horizontale Trennlinie [hr] bedeutet horizontal ruler und macht ein horizontales Lineal. Gemeint ist die horizontale Trennlinie. Das Aussehen der Trennlinie kann im CSS-Modul geändert werden. Seite 18 von 39

19 [hr] (Beachte den Strich über diesem Satz) [html] html-code [/html] Echtes HTML eingeben. [html] erlaubt es, richtigen Quelltext in die Seite einzubauen. So gibt es Webseiten, die sogenannte Badges oder andere Widgets zur Verfügung stellen. Üblicherweise handelt es sich um ein Stückchen Javascript-Code, der etwas von einer anderen Webseite lädt und auf der eigenen Webseite anzeigt. Bei der Eingabe ist zu beachten, dass einfache Anführungszeichen ' innerhalb des HTML- Bereiches dazu führen, dass die Seite nicht gespeichert wird. [i] text [/i] [i text ] Beispiele: <i> Kursiver Text Normal: Mitten im Satz soll [i]kursiver Text[/i] stehen. Faulenzer: Mitten im Satz soll [i kursiver Text] stehen. Mitten im Satz soll kursiver Text stehen. [icq <icq-nummer>] <a href= com... > ICQ-Link zum ICQ-Partner mit der entsprechenden Nummer Der Befehl [icq <nummer>] macht einen klickbaren Link, mit welchem die ICQ-Seite des Inhabers von <nummer> angefahren wird. Es wird versucht, den Online-Status auszugeben. [k] text [/k] [k text ] <i> Kursiver Text Seite 19 von 39

20 Beispiele: Normal: Mitten im Satz soll [k]kursiver Text[/k] stehen. Faulenzer: Mitten im Satz soll [k kursiver Text] stehen. Mitten im Satz soll kursiver Text stehen. [kontakt] Erklärung Interaktives Kontaktformular [kontakt] fügt ein Kontaktformular in die Seite ein. Das Aussehen und Verhalten des Kontaktformulars kann man im Arbeitsbereich > Homepage > Kontaktformular festlegen. Die aktuelle Anleitung befindet sich im Waschzettel am Seitenende des Moduls. [kontakt] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum leo mi, vestibulum eget pretium eu, hendrerit vel orci. Donec at augue arcu, id tempus metus. Nunc facilisis consectetur leo; at malesuada tortor elementum nec. [kurse] Modul Kursliste ausgeben Erlklärung: [kurse] gibt alle aktuellen Kurse in der selben Art aus, wie die Kursliste in der offenen Yogaliste angezeigt wird. Das Aussehen kann sich je nach gewähltem Design leicht ändern. Damit man die Veranstaltungsorte über die Links anspringen kann, muss noch [orte] am Seitenende aufgerufen werden, um die Liste der Trainingsorte auszugeben und damit der Link zum Seite 20 von 39

21 Trainingsort in der Kurstabelle sein Ziel auf der selben Seite findet. [h2 Die aktuellen Kurse] [kurse] [h2 Veranstaltungsort] [orte] Siehe auch: [orte], [stundenplan] [lbild (Bildnummer)] <img> Bild nach links schweben lassen, Text ist rechts davon. Siehe auch: [bild], [stop] [lbild] fügt ein bereits hochgeladenes Bild in die Seite ein. Das Bild schwebt nach links, der Rest der Seite ordnet sich rechts davon an. Man kann diesen Befehl dazu verwenden, um ein Bild mit Text zu erklären oder einfach, um den laufenden Text mit einem Bild aufzulockern. [lbild] und [rbild] sollten am Zeilenanfang stehen. [lbild 1]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate cursus enim sed blandit. Aliquam porttitor eros metus. Proin eget ante vitae neque egestas posuere id a enim. Donec elementum lobortis magna; quis mollis nisl lobortis eget. Proin non sapien enim. Seite 21 von 39

22 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate cursus enim sed blandit. Aliquam porttitor eros metus. Proin eget ante vitae neque egestas posuere id a enim. Donec elementum lobortis magna; quis mollis nisl lobortis eget. Proin non sapien enim. [left] text [/left] <div style= textalign:left > Text linksbündig [left] macht einen linksbündigen Absatz. (Das ist eigentlich das normale Absatzformat.) [left]lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus tortor sed dui fringilla ac imperdiet neque tristique. Quisque dignissim massa in libero molestie posuere. In nec augue orci, vel vulputate justo.[/left] Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus tortor sed dui fringilla ac imperdiet neque tristique. Quisque dignissim massa in libero molestie posuere. In nec augue orci, vel vulputate justo. Siehe auch: [right], [center] und [block] [lgbild (Bildnummer)] <img> Yogalehrer-Online Galeriebild nach links schweben lassen, Text ist rechts davon. [lgbild] fügt ein Bild aus der Galerie von YO in die Seite ein. Das Bild schwebt nach links, der Rest der Seite ordnet sich rechts davon an. Man kann diesen Befehl dazu verwenden, um den laufenden Text mit einem Bild aufzulockern. [lgbild] und [rgbild] sollten am Zeilenanfang stehen. Seite 22 von 39

23 [lgbild 19]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate cursus enim sed blandit. Aliquam porttitor eros metus. Proin eget ante vitae neque egestas posuere id a enim. Donec elementum lobortis magna; quis mollis nisl lobortis eget. Proin non sapien enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate cursus enim sed blandit. Aliquam porttitor eros metus. Proin eget ante vitae neque egestas posuere id a enim. Donec elementum lobortis magna; quis mollis nisl lobortis eget. Proin non sapien enim. Siehe auch: [gbild], [stop] [li] <li> Listenelement für [ol] und [ul] [li] fügt ein Listenelement in eine [ol] oder [ul] Liste ein. [ol][li]erstes Element [li] zweites [li] das Letzte [/ol] 1. erstes Element 2. zweites 3. das Letzte [lkontakt] Erklärung Kontaktformular links schwebend. [lkontakt] fügt ein nach links schwebendes Kontaktformular in die Seite ein. Nachfolgender Text wird rechts daneben angeordnet. Das Aussehen und Verhalten des Kontaktformulars kann man im Arbeitsbereich > Homepage > Kontaktformular festlegen. Die aktuelle Anleitung befindet sich im Waschzettel am Seitenende des Moduls. Seite 23 von 39

24 [lkontakt] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum leo mi, vestibulum eget pretium eu, hendrerit vel orci. Donec at augue arcu, id tempus metus. Nunc facilisis consectetur leo; at malesuada tortor elementum nec. Siehe auch: [stop] [lmap] Google-Map links schwebend einbauen [lmap] bringt die selbe Google-Map, wie sie in der offenen Yogaliste ist, in die Webseite und läßt sie nach links schweben. Folgender Text wird rechts davon angeordnet. Leider klappt die Google- Map nur in etwa 95% der Fälle, die geografischen Daten der Firma Tele Atlas haben noch viele Löcher und sind nicht 100% zuverlässig. [lmap] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum leo mi, vestibulum eget pretium eu, hendrerit vel orci. Donec at augue arcu, id tempus metus. Nunc facilisis consectetur leo; at malesuada tortor elementum nec. Die Map schwebt nach links, der folgende Text wird rechts daneben angeordnet. [lmap] verhält sich wie [lbild]. Es ist sinnvoll, am Ende des Textes den Befehl [stop] einzugeben, um wieder einen sauberen Neuanfang zu haben. Seite 24 von 39

25 [lrollbox] Animierten Bereich links schwebend einfügen. [lrollbox] baut einen animierten Bereich in die Webseite ein und läßt ihn nach links schweben. Nachfolgender Text ordnet sich rechts daneben an. Die Rollbox muss zuvor im Arbeitsbereich > Homepage > Rollbox definiert werden. Die aktuelle Anleitung zur Rollbox findest du im Waschzettel am Seitenende des Moduls Rollbox. [lrollbox] Vergleichbar mit [lbild]. Siehe auch: [stop] [map] Google-Map einbauen [map] bringt die selbe Google-Map, wie sie in der offenen Yogaliste ist, in die Webseite. Leider klappt die Google-Map nur in etwa 95% der Fälle, die geografischen Daten der Firma Tele Atlas haben noch viele Löcher und sind nicht 100% zuverlässig. [lmap] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum leo mi, vestibulum eget pretium eu, hendrerit vel orci. Donec at augue arcu, id tempus metus. Nunc facilisis consectetur leo; at malesuada tortor elementum nec. Die Google-Map wird wie der [bild]-befehl in den Text eingefügt und steht für sich alleine. Seite 25 von 39

26 [name (bezeichnung)] <a name= (bezeichnung) > Ziel für seiteninternes Verlinken festlegen. [name] legt das Ziel für einen [goname] Link fest. Es wird keine grafische Ausgabe erzeugt. Dieser Befehl hat keine Ausgabe, man sieht ihn auf der Webseite nicht mehr. Deshalb kann man [name] mitten im Seiten-Text dort ausbringen, wo für goname interessante Ziele erwähnt werden. [name neuheiten][h3 Die neuen Sommerkurse: Sonne, Sand und Yoga] Die neuen Sommerkurse: Sonne, Sand und Yoga (Man sieht es nicht!) Siehe auch: [goname] [ol] liste [/ol] <ol> Nummerierte Liste OL bedeutet: Ordered List. Eine nummerierte Liste erzeugen. Innerhalb des [ol] [/ol] Konstrukts dürfen nur mit [li] angekündigte Elemente auftauchen. [ol][li]erstes Element [li] zweites [li] das Letzte [/ol] 4. erstes Element 5. zweites Seite 26 von 39

27 6. das Letzte [orte] Alle Trainingsorte auflisten. [orte] wird gebraucht, um für [kurse], [termine] und [stundenplan] das Ziel für den Link zum Trainingsort bereit zu stellen. Immer, wenn [kurse], [termine] oder [stundenplan] auf einer Seite benutzt wird, muss auf der selben Seite irgendwo der Befehl [orte] stehen. [orte] [q] text [/q] [q text ] <blockquote> Eingerückter Text [q] (Quote) ist an sich schon ein Faulenzer für den HTML-Befehl blockquote. Dieser wird wenig genutzt, wohl weil seine HTML-Bezeichnung blockquote zu lang geraten ist, für das Wenige, das er tut. [q] ist verwandt mit [ol] und [ul], die beide ebenfalls einrücken. Normaler Text [q eingerückter Text] und nochmal normaler Text. Normaler Text eingerückter Text und nochmal normaler Text. Seite 27 von 39

28 [rbild (Bildnummer)] <img> Bild nach rechts schweben lassen, Text ist links davon. Siehe auch: [stop] [rbild] fügt ein bereits hochgeladenes Bild in die Seite ein. Das Bild schwebt nach rechts, der Rest der Seite ordnet sich links davon an. Man kann diesen Befehl dazu verwenden, um ein Bild mit Text zu erklären oder einfach, um den laufenden Text mit einem Bild aufzulockern. [rbild] und [lbild] sollten am Zeilenanfang stehen. [rbild 1]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate cursus enim sed blandit. Aliquam porttitor eros metus. Proin eget ante vitae neque egestas posuere id a enim. Donec elementum lobortis magna; quis mollis nisl lobortis eget. Proin non sapien enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate cursus enim sed blandit. Aliquam porttitor eros metus. Proin eget ante vitae neque egestas posuere id a enim. Donec elementum lobortis magna; quis mollis nisl lobortis eget. Proin non sapien enim. [rgbild (Bildnummer)] <img> Yogalehrer-Online Galeriebild nach rechts schweben lassen, Text ist links davon. Siehe auch: [stop] [rgbild] fügt ein Bild aus der Galerie von YO in die Seite ein. Das Bild schwebt nach rechts, der Rest der Seite ordnet sich links davon an. Man kann diesen Befehl dazu verwenden, um den laufenden Text mit einem Bild aufzulockern. [rgbild] und [lgbild] sollten am Zeilenanfang stehen. Seite 28 von 39

29 [rgbild 19]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate cursus enim sed blandit. Aliquam porttitor eros metus. Proin eget ante vitae neque egestas posuere id a enim. Donec elementum lobortis magna; quis mollis nisl lobortis eget. Proin non sapien enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate cursus enim sed blandit. Aliquam porttitor eros metus. Proin eget ante vitae neque egestas posuere id a enim. Donec elementum lobortis magna; quis mollis nisl lobortis eget. Proin non sapien enim. [right] text [/right] <div style= textalign:right > Text rechtsbündig [right] macht den markierten Absatz rechtsbündig. [right]lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus tortor sed dui fringilla ac imperdiet neque tristique. Quisque dignissim massa in libero molestie posuere. In nec augue orci, vel vulputate justo.[/right] Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus tortor sed dui fringilla ac imperdiet neque tristique. Quisque dignissim massa in libero molestie posuere. In nec augue orci, vel vulputate justo. Siehe auch: [left], [center] und [block] [rkontakt] Kontaktformular rechts Seite 29 von 39

30 Erklärung schwebend [rkontakt] fügt ein nach rechts schwebendes Kontaktformular in die Seite ein. Nachfolgender Text wird links daneben angeordnet. Das Aussehen und Verhalten des Kontaktformulars kann man im Arbeitsbereich > Homepage > Kontaktformular festlegen. Die aktuelle Anleitung befindet sich im Waschzettel am Seitenende des Moduls. [rkontakt] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum leo mi, vestibulum eget pretium eu, hendrerit vel orci. Donec at augue arcu, id tempus metus. Nunc facilisis consectetur leo; at malesuada tortor elementum nec. Siehe auch: [stop] [rmap] Google-Map rechts schwebend einbauen [rmap] bringt die selbe Google-Map, wie sie in der offenen Yogaliste ist, in die Webseite und läßt sie nach links schweben. Folgender Text wird rechts davon angeordnet. Leider klappt die Google- Map nur in etwa 95% der Fälle, die geografischen Daten der Firma Tele Atlas haben noch viele Löcher und sind nicht 100% zuverlässig. [rmap] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum leo mi, vestibulum eget pretium eu, hendrerit vel orci. Donec at augue arcu, id tempus metus. Nunc facilisis consectetur leo; at malesuada tortor elementum nec. Seite 30 von 39

31 Die Map schwebt nach rechts, der folgende Text wird links daneben angeordnet. [rmap] verhält sich wie [rbild]. Es ist sinnvoll, am Ende des Textes den Befehl [stop] einzugeben, um wieder einen sauberen Neuanfang zu haben. [rollbox] Animierten Bereich einfügen [rollbox] baut einen animierten Bereich in die Webseite ein. Die Rollbox muss zuvor im Arbeitsbereich > Homepage > Rollbox definiert werden. Die aktuelle Anleitung zur Rollbox findest du im Waschzettel am Seitenende des Moduls Rollbox. [rollbox] Vergleichbar mit [bild] [rrollbox] Animierten Bereich rechts schwebend einfügen. [rrollbox] baut einen animierten Bereich in die Webseite ein und läßt ihn nach rechts schweben. Nachfolgender Text ordnet sich links daneben an. Die Rollbox muss zuvor im Arbeitsbereich > Homepage > Rollbox definiert werden. Die aktuelle Anleitung zur Rollbox findest du im Waschzettel am Seitenende des Moduls Rollbox. [rrollbox] Vergleichbar mit [rbild]. Seite 31 von 39

32 Siehe auch: [stop] [skype <skypenr>] <a href= skype:... > Link für Skype Generiert einen für Skype nutzbaren Link aus der Skype-Adresse <skypenr>. [small] text [/small] [small text ] <small> Text etwas kleiner machen. [small] macht den Text etwas kleiner, als er im Moment ist. Das ist normaler Text. [small] Dieser Text wird etwas kleiner. [/small] Das ist normaler Text. Das ist normaler Text. [small Dieser Text wird etwas kleiner.] Das ist normaler Text. Das ist normaler Text. Dieser Text wird etwas kleiner. Das ist normaler Text. [stop] <div style= clear:both ></ div> Beendet Schwebezustände von Bildern und Textbereichen [stop] beendet Schwebezustände von Seitenbereichen und erlaubt einen sauberen Neuanfang, ohne dass sich schwebende Bereiche ineinander verhaken und einen Treppeneffekt erzeugen. Eine einfache Aufgabe ist es, das Bild eines Yogatrainers nach links schweben zu lassen und rechts daneben die Vita des Trainers als Text auszugeben. Das klappt natürlich. Unter dieser Bild- Textkombination soll der nächste Trainer in gleicher Weise ausgegeben werden. Was passiert? Das nächste Bild hängt irgendwo weiter links, der Vita-Text zum Bild ist noch weiter nach rechts verschoben. Es sieht greulich aus. Wenn man genügend oft die Eingabetaste zwischen den beiden Trainerabsätzen drückt, dann sieht es irgendwann normal aus. Bis der Text wieder geändert wird. Mit [stop] nach jedem Trainertext kommt das nächste [lbild] sofort freiwillig ganz nach links. Das Problem liegt darin, dass HTML den hinter einem mit float:left ins Schweben geratenen Seite 32 von 39

33 Seiteninhalt einfach ebenfalls nach links schweben läßt. [stop] erzeugt einen neuen, leeren Absatz, der den style clear:both enthält. Clear:both bedeutet: Lösche beide Schwebezustände (links und rechts). [stundenplan] Interaktiven Stundenplan ausgeben. [stundenplan] ersetzt [kurse] und [termine] und gibt einen interaktiven Stundenplan aus, der die Kurse und Termine wochenweise anzeigt. Auf der selben Seite muss noch der Befehl [orte] angegeben werden, damit der Link zum beschriebenen Ort auch funktioniert. [h2 Die aktuellen Kurse und Termine] [stundenplan] [h2 Veranstaltungsort] [orte] Das Aussehen des Stundenplans ändert sich mit dem gewählten Design. Siehe auch: [orte], [kurse] und [termine] Seite 33 von 39

34 [style (Argumente)] text [/style] <span style= (Argumente) > Einen Teil des Textes formatieren. [style] formatiert einen Textbereich, ohne dass ein neuer Absatz angelegt wird. Mit [style] kann man mitten im Text die Formatierung ändern. Die Argumente sind durch Semikolon voneinander getrennte CSS-Anweisungen. Mitten im Satz steht hier [style color:red]roter Text[/style], der sich vom Rest abhebt. Mitten im Satz steht hier roter Text, der sich vom Rest abhebt. [styleclass (klasse)] <span class= klasse > Eine CSS-Klasse auf einen Bereich mitten im Text wirken lassen. [styleclass] holt beliebige, selbst definierte CSS-Klassen in die Webseiten. Im Gegensatz zu [divclass] macht [styleclass] keinen neuen Absatz. Die im CSS-Modul definierten Klassen gelten für alle Webseiten. Eine Beispiel-Definition im CSS-Modul:.wichtig{ background-color: white; color: red; padding: 1em; font-size: 1.2em; border: solid 3px navy; text-align:center; } Aufruf im Seiteninhalt: Das hier ist Text davor. [styleclass wichtig] Das hier ist sehr wichtig![/styleclass] Das hier ist Text danach. Siehe auch [divclass] Seite 34 von 39

35 Anmerkung: Die im Beispiel definierte Klasse wichtig kann sowohl für [divclass] als auch für [styleclass] verwendet werden. Man muss die Klasse nicht zweimal definieren. [table] tr td [/table] <table> Tabelle [table](=tabelle) ist ein HTML-Befehl, mit dem man eine Tabelle erzeugen kann. Jeder Inhalt in [table] muss in einer [tr] (table row = Tabellenzeile) stehen. Jeder Inhalt in einer [tr] muss in einer [td] (table definition = Tabelleninhalt, Zelle) stehen. [table][tr][td] Spalte 1[td] Spalte 2 [td] spalte 3 [tr][td] bla bla [td] mittlere Spalte [td] rechte Spalte[/table] [td] <td> Tabellenzelle [td] (table definition=tabelleninhalt) ist eine Tabellenzelle und führt alle Inhalte der Tabelle an. Alle Zellen-Inhalte müssen mit [td] eingeläutet werden. Alle [td] in einer Tabelle müssen von einem [tr] gestartet werden, sie müssen Teil einer Tabellenzeile sein. [table][tr][td] Spalte 1[td] Spalte 2 [td] spalte 3 [tr][td] bla bla [td] mittlere Spalte [td] rechte Spalte[/table] Seite 35 von 39

36 [termine] Erlklärung: Terminliste ausgeben [termine] gibt alle aktuellen Termine in der selben Art aus, wie die Terminliste in der offenen Yogaliste angezeigt wird. Das Aussehen kann sich je nach gewähltem Design leicht ändern. Damit man die Veranstaltungsorte über die Links anspringen kann, muss noch [orte] am Seitenende aufgerufen werden, um die Liste der Trainingsorte auszugeben und damit der Link zum Trainingsort in der Kurstabelle sein Ziel auf der selben Seite findet. [h2 Die aktuellen Termine] [termine] [h2 Veranstaltungsort] [orte] Siehe auch: [kurse], [stundenplan] Seite 36 von 39

37 [tr] <tr> Tabellenzeile [tr] (table row=tabellenzeile) kündigt eine Tabellenzeile an. [tr] muss innerhalb eines [table] [/table] Konstrukts auftauchen. Die einzelnen Zellen werden mit [td] angekündigt. [tr] enthält meistens mehrere [td] Zellen. [table][tr][td] Spalte 1[td] Spalte 2 [td] spalte 3 [tr][td] bla bla [td] mittlere Spalte [td] rechte Spalte[/table] [u] text [/u] [u text ] Beispiele: <u> Unterstrichener Text Normal: Mitten im Satz soll [u] unterstrichener Text[/u] stehen. Faulenzer: Mitten im Satz soll [u unterstrichener Text] stehen. Mitten im Satz soll unterstrichener Text stehen. Anmerkung: Unterstrichener Text in Webseiten wird vom Seitenbesucher als Link zum Anklicken verstanden. Deshalb sollte man auf das Unterstreichen verzichten und den Text auf andere Art und Weise hervorheben. [url (link) (bezeichnung)] <a href= (link) >(bezeic hnung)</a> Anklickbarer Link. (bezeichnung) = sichtbar, (link) wird ausgeführt. [url] erzeugt einen Link auf eine andere Webseite. Wenn der Link nicht mit beginnt, Seite 37 von 39

38 wird das Ziel in der eigenen Domäne gesucht. Das zu vergessen, ist der häufigste Fehler, der beim Eingeben eines externen Links gemacht wird. Syntax: [url <Linkziel> <Anzuklickender Text>] Das ist ein Link zu [url Google]. Das ist ein Link zu Google. Fehler: Das ist kein Link zu [url Google]. (Es fehlt das ) [wiki (wikiwort) (bezeichnung)] <a href=... > Wikipedia-Link zu de.wikipedia.org. Manchmal ist ein Link zu einem Eintrag bei Wipipedia die leichteste Art, ein kompliziertes Thema erklären zu lassen. Als wikiwort bezeichne ich das Wiki-interne Schlagwort, mit dem man das Thema bei Wikipedia.org findet. Mit bezeichnung ist der allgemein gebräuchliche Name des gesuchten Themas gemeint. Die Kunst ist es, das wikiwort zu finden, das manchmal ganz anders aussieht, als man denkt. Wikiwort finden: Ich möchte auf meiner Homepage den Begriff CSS (Cascaded Style Sheets) mit Wikipedia verlinken. Damit das klappt, muss ich erstmal die Wikipedia-Seiten besuchen und mich nach CSS umschauen. Also ab nach de.wikipedia.org. Oben links in der Ecke befindet sich das Suchfeld, wo ich meinen zu erklärenden Begriff eingebe. Ich tippe CSS und klicke dann dann auf Artikel. Ich bekomme eine neue Seite und stelle fest, dass CSS für etwa 25 verschiedene Begriffe in den Sparten Computer, Medizin, Musik und Seite 38 von 39

39 Sonstiges verwendet wird. Mein gesuchter Begriff ist ganz oben: Cascading Style Sheets. Ich klicke drauf und bekomme die gesuchte Seite mit den Erläuterungen und weiteren, hilfreichen Links zum Thema CSS. In der Adresszeile des Browsers steht nun: Die Zeichenfolge hinter wiki/ ist das gesuchte Wikiwort. Hier ist die [wiki Cascading_Style_Sheets Erklärung zum Thema CSS]. Das Aussehen ändert sich je nach gewähltem Design. Seite 39 von 39