Hilfe:Diaschau: Unterschied zwischen den Versionen
K |
K (→eine einfache Diaschau) |
||
(8 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
Ihr könnt an beliebiger Stelle auf einer Wikiseite eine Diaschau erstellen bzw. einfügen. hier findet ihr eine Erklärung dazu was die Diaschau alles kann und wie ihr das Verhalten beeinflussen könnt. | Ihr könnt an beliebiger Stelle auf einer Wikiseite eine Diaschau erstellen bzw. einfügen. hier findet ihr eine Erklärung dazu was die Diaschau alles kann und wie ihr das Verhalten beeinflussen könnt. | ||
+ | |||
+ | Diese Diaschau werden wir in dieser Hilfeseite erstellen: | ||
+ | |||
+ | <slideshow transition="fade" refresh="5000" sequence="forward"> | ||
+ | <div><center>[[Image:Schnupptrupp-titel.jpeg]]</center></div> | ||
+ | <div> | ||
+ | <div style="width: 600px;"><center><br><br><br><span style="font-size: xx-large;">Der Schnupptrupp</span><br> | ||
+ | <span style="font-size: larger;">'''kein''' ''Clan'' aber eine '''starke''' ''Gemeinschaft''</span><br><br><br></center></div> | ||
+ | </div> | ||
+ | <div> | ||
+ | {| align="center" cellspacing="1" cellpadding="1" border="2" style="width: 600px; height: 156px;" | ||
+ | |- | ||
+ | ! bgcolor="#993300" scope="col" | Der Schnupptrupp | ||
+ | ! bgcolor="#993300" scope="col" | kein Clan | ||
+ | ! bgcolor="#993300" scope="col" | starke Gemeinschaft | ||
+ | |- | ||
+ | | align="center" bgcolor="#cccccc" | immer am Schnuppensuchen | ||
+ | | align="center" bgcolor="#cccccc" | keine Ränge | ||
+ | | align="center" bgcolor="#cccccc" | Hilfe in und um Runescape | ||
+ | |- | ||
+ | | align="center" bgcolor="#cccccc" | regelmäßige gemeinschaftliche Aktivitäten | ||
+ | | align="center" bgcolor="#cccccc" | aber nicht nur ein Chat | ||
+ | | align="center" bgcolor="#cccccc" | Webseite und Forum | ||
+ | |} | ||
+ | </div> | ||
+ | </slideshow> | ||
== Diaschau erstellen == | == Diaschau erstellen == | ||
Zeile 48: | Zeile 74: | ||
<span style="font-size: larger;">'''kein''' ''Clan'' aber eine '''starke''' ''Gemeinschaft''</span><br><br><br></center></div></pre> | <span style="font-size: larger;">'''kein''' ''Clan'' aber eine '''starke''' ''Gemeinschaft''</span><br><br><br></center></div></pre> | ||
− | den fertigen | + | den fertigen Text betten wir dann komplett nochmal in ein DIV Element ein |
<pre><div> | <pre><div> | ||
Zeile 114: | Zeile 140: | ||
Um aus diesen drei Elementen eine Diaschau zu erstellen, betten wir das ganze in das spezielle Element <nowiki><slideshow></slideshow></nowiki> ein. | Um aus diesen drei Elementen eine Diaschau zu erstellen, betten wir das ganze in das spezielle Element <nowiki><slideshow></slideshow></nowiki> ein. | ||
− | + | In der Wikischreibweise würde das ganze dann so aussehen | |
<pre> | <pre> | ||
Zeile 176: | Zeile 202: | ||
*next | *next | ||
*previous | *previous | ||
+ | |||
+ | === Option sequence === | ||
+ | |||
+ | Die Option '''sequence''' legt fest in welcher Reihenfloge die Diaschau ablaufen soll. Möglich sind folgende Werte | ||
+ | |||
+ | *forward -> vorwärts | ||
+ | *backward -> rückwärts | ||
+ | *random -> zufällig (das ist die Standard Einstellung wenn diese Option nicht angegeben wird) | ||
+ | |||
+ | === Option transition === | ||
+ | |||
+ | Die Option '''transition''' legt fest wie der Wechsel zum nächsten Element dargestellt wird. Möglich sind folgende Werte | ||
+ | |||
+ | *cut -> harter Übergang (das ist die Standard Einstellung wenn diese Option nicht angegeben wird) | ||
+ | *fade -> weicher Übergang (ausblenden/einblenden) | ||
+ | |||
+ | === Option refresh === | ||
+ | |||
+ | Die Option '''refresh''' legt fest, wie lange ein Element angezeigt wird. Möglich sind folgende Werte | ||
+ | |||
+ | *''Zahl'' -> Zeit in Millisekunden | ||
+ | *user -> es wird eine Navigation angezeigt mit welcher der Benutzer vor/zurückblättern kann. | ||
+ | |||
+ | === Option position === | ||
+ | |||
+ | Die Option '''position''' legt fest, wie viele Pixel vom linken Rand die Navigation angezeigt wird. Diese Option ist nur aktiv wenn die Option '''refresh="user"''' gesetzt ist. | ||
+ | |||
+ | *''zahl'' -> Abstand vom linken Rand in Pixel | ||
+ | |||
+ | === Option next === | ||
+ | |||
+ | Die Option '''next''' legt fest, welcher Text oder welches Bild angezeigt wird, um auf das nächste Element zu wechseln. Diese Option ist nur aktiv wenn die Option '''refresh="user"''' gesetzt ist. | ||
+ | |||
+ | *''Text'' -> der Text wir als Link angezeigt | ||
+ | oder | ||
+ | *''Bild'' -> das Bild wird als Link angezeigt ('''ACHTUNG:''' Das Bild selbst darf kein Link sein, den internen Wikilink ausschalten mit ''<nowiki>[[Image:meinblild.png|link=]]</nowiki>'') | ||
+ | |||
+ | === Option previous === | ||
+ | |||
+ | Die Option '''previous''' ist das Gegenstück zur Option '''next''' und legt den Text bzw. das Bild fest welches als Link angezeigt wird um auf das vorhergehende Element zu wechseln. Diese Option ist nur aktiv wenn die Option '''refresh="user"''' gesetzt ist. | ||
+ | |||
+ | *''Text'' -> der Text wir als Link angezeigt | ||
+ | oder | ||
+ | *''Bild'' -> das Bild wird als Link angezeigt ('''ACHTUNG:''' Das Bild selbst darf kein Link sein, den internen Wikilink ausschalten mit ''<nowiki>[[Image:meinblild.png|link=]]</nowiki>'') | ||
+ | |||
+ | == Das Endergebnis == | ||
+ | |||
+ | Mit den richtigen Optionen sieht unsere Diaschau dann so aus | ||
+ | |||
+ | <pre> | ||
+ | <slideshow transition="fade" refresh="5000" sequence="forward"> | ||
+ | <div><center>[[Image:Schnupptrupp-titel.jpeg]]</center></div> | ||
+ | <div> | ||
+ | <div style="width: 600px;"><center><br><br><br><span style="font-size: xx-large;">Der Schnupptrupp</span><br> | ||
+ | <span style="font-size: larger;">'''kein''' ''Clan'' aber eine '''starke''' ''Gemeinschaft''</span><br><br><br></center></div> | ||
+ | </div> | ||
+ | <div> | ||
+ | {| align="center" cellspacing="1" cellpadding="1" border="2" style="width: 600px; height: 156px;" | ||
+ | |- | ||
+ | ! bgcolor="#993300" scope="col" | Der Schnupptrupp | ||
+ | ! bgcolor="#993300" scope="col" | kein Clan | ||
+ | ! bgcolor="#993300" scope="col" | starke Gemeinschaft | ||
+ | |- | ||
+ | | align="center" bgcolor="#cccccc" | immer am Schnuppensuchen | ||
+ | | align="center" bgcolor="#cccccc" | keine Ränge | ||
+ | | align="center" bgcolor="#cccccc" | Hilfe in und um Runescape | ||
+ | |- | ||
+ | | align="center" bgcolor="#cccccc" | regelmäßige gemeinschaftliche Aktivitäten | ||
+ | | align="center" bgcolor="#cccccc" | aber nicht nur ein Chat | ||
+ | | align="center" bgcolor="#cccccc" | Webseite und Forum | ||
+ | |} | ||
+ | </div> | ||
+ | </slideshow> | ||
+ | </pre> | ||
+ | |||
+ | <slideshow transition="fade" refresh="5000" sequence="forward"> | ||
+ | <div><center>[[Image:Schnupptrupp-titel.jpeg]]</center></div> | ||
+ | <div> | ||
+ | <div style="width: 600px;"><center><br><br><br><span style="font-size: xx-large;">Der Schnupptrupp</span><br> | ||
+ | <span style="font-size: larger;">'''kein''' ''Clan'' aber eine '''starke''' ''Gemeinschaft''</span><br><br><br></center></div> | ||
+ | </div> | ||
+ | <div> | ||
+ | {| align="center" cellspacing="1" cellpadding="1" border="2" style="width: 600px; height: 156px;" | ||
+ | |- | ||
+ | ! bgcolor="#993300" scope="col" | Der Schnupptrupp | ||
+ | ! bgcolor="#993300" scope="col" | kein Clan | ||
+ | ! bgcolor="#993300" scope="col" | starke Gemeinschaft | ||
+ | |- | ||
+ | | align="center" bgcolor="#cccccc" | immer am Schnuppensuchen | ||
+ | | align="center" bgcolor="#cccccc" | keine Ränge | ||
+ | | align="center" bgcolor="#cccccc" | Hilfe in und um Runescape | ||
+ | |- | ||
+ | | align="center" bgcolor="#cccccc" | regelmäßige gemeinschaftliche Aktivitäten | ||
+ | | align="center" bgcolor="#cccccc" | aber nicht nur ein Chat | ||
+ | | align="center" bgcolor="#cccccc" | Webseite und Forum | ||
+ | |} | ||
+ | </div> | ||
+ | </slideshow> | ||
+ | ---- | ||
+ | [[Kategorie:Hilfe]] |
Aktuelle Version vom 8. Dezember 2010, 17:34 Uhr
Ihr könnt an beliebiger Stelle auf einer Wikiseite eine Diaschau erstellen bzw. einfügen. hier findet ihr eine Erklärung dazu was die Diaschau alles kann und wie ihr das Verhalten beeinflussen könnt.
Diese Diaschau werden wir in dieser Hilfeseite erstellen:
Inhaltsverzeichnis
Diaschau erstellen
Eine Diaschau besteht aus zwei oder mehreren Bildern, Tabellen oder Texten. Jede dem Wiki bekannte Möglichkeit sollte funktionieren. In dieser Hilfe werden wir eine Diaschau aus allen möglichen Elementen erstellen um euch die Funktion zu beschreiben.
Elemente für die Diaschau
Bild
Folgendes Bild soll in der Diaschau gezeigt werden
in der Wikischreibweise wird das Bild so eingebunden
<center>[[Image:Schnupptrupp-titel.jpeg]]</center>
um das ganze in der Diaschau einbinden zu können müssen wir das ganze in ein DIV Element einbetten
<div><center>[[Image:Schnupptrupp-titel.jpeg]]</center></div>
formatierter Text
Als zweites Element wollen wir einen Text in der Diaschau einfügen
kein Clan aber eine starke Gemeinschaft
in der Wikischreibweise würde das ganze so aussehen
<center><br><br><br><span style="font-size: xx-large;">Der Schnupptrupp</span><br> <span style="font-size: larger;">'''kein''' ''Clan'' aber eine '''starke''' ''Gemeinschaft''</span><br><br><br></center>
da der formatierte Textbereich keine festen Dimmensionen in Breite und Höhe hat sollten wir das ganze ein ein DIV Element einbetten in welchem wir die Breite und eventuell eine Höhe festlegen
<div style="width: 600px;"<center><br><br><br><span style="font-size: xx-large;">Der Schnupptrupp</span><br> <span style="font-size: larger;">'''kein''' ''Clan'' aber eine '''starke''' ''Gemeinschaft''</span><br><br><br></center></div>
den fertigen Text betten wir dann komplett nochmal in ein DIV Element ein
<div> <div style="width: 600px;"<center><br><br><br><span style="font-size: xx-large;">Der Schnupptrupp</span><br> <span style="font-size: larger;">'''kein''' ''Clan'' aber eine '''starke''' ''Gemeinschaft''</span><br><br><br></center></div> </div>
eine Tabelle
auch eine Tabelle kann in der Diaschau angezeigt werden. Folgende Tabelle soll in unserer Diaschau angezeigt werden
Der Schnupptrupp | kein Clan | starke Gemeinschaft |
---|---|---|
immer am Schnuppensuchen | keine Ränge | Hilfe in und um Runescape |
regelmäßige gemeinschaftliche Aktivitäten | aber nicht nur ein Chat | Webseite und Forum |
in der Wikischreibweise würde das ganze so aussehen
{| align="center" cellspacing="1" cellpadding="1" border="2" style="width: 547px; height: 156px;" |- ! bgcolor="#993300" scope="col" | Der Schnupptrupp ! bgcolor="#993300" scope="col" | kein Clan ! bgcolor="#993300" scope="col" | starke Gemeinschaft |- | align="center" bgcolor="#cccccc" | immer am Schnuppensuchen | align="center" bgcolor="#cccccc" | keine Ränge | align="center" bgcolor="#cccccc" | Hilfe in und um Runescape |- | align="center" bgcolor="#cccccc" | regelmäßige gemeinschaftliche Aktivitäten | align="center" bgcolor="#cccccc" | aber nicht nur ein Chat | align="center" bgcolor="#cccccc" | Webseite und Forum |}
auch diese Tabelle betten wir wieder in ein DIV Element ein, bei Tabellen ist es jedoch wichtig das die DIV Elemente immer in einer extra Zeile stehen
<div> {| align="center" cellspacing="1" cellpadding="1" border="2" style="width: 600px; height: 156px;" |- ! bgcolor="#993300" scope="col" | Der Schnupptrupp ! bgcolor="#993300" scope="col" | kein Clan ! bgcolor="#993300" scope="col" | starke Gemeinschaft |- | align="center" bgcolor="#cccccc" | immer am Schnuppensuchen | align="center" bgcolor="#cccccc" | keine Ränge | align="center" bgcolor="#cccccc" | Hilfe in und um Runescape |- | align="center" bgcolor="#cccccc" | regelmäßige gemeinschaftliche Aktivitäten | align="center" bgcolor="#cccccc" | aber nicht nur ein Chat | align="center" bgcolor="#cccccc" | Webseite und Forum |} </div>
eine einfache Diaschau
Um aus diesen drei Elementen eine Diaschau zu erstellen, betten wir das ganze in das spezielle Element <slideshow></slideshow> ein.
In der Wikischreibweise würde das ganze dann so aussehen
<slideshow> <div><center>[[Image:Schnupptrupp-titel.jpeg]]</center></div> <div><center><br><br><br><span style="font-size: xx-large;">Der Schnupptrupp</span><br> <span style="font-size: larger;">'''kein''' ''Clan'' aber eine '''starke''' ''Gemeinschaft''</span><br><br><br></center></div> <div>{| align="center" cellspacing="1" cellpadding="1" border="2" style="width: 600px; height: 156px;" |- ! bgcolor="#993300" scope="col" | Der Schnupptrupp ! bgcolor="#993300" scope="col" | kein Clan ! bgcolor="#993300" scope="col" | starke Gemeinschaft |- | align="center" bgcolor="#cccccc" | immer am Schnuppensuchen | align="center" bgcolor="#cccccc" | keine Ränge | align="center" bgcolor="#cccccc" | Hilfe in und um Runescape |- | align="center" bgcolor="#cccccc" | regelmäßige gemeinschaftliche Aktivitäten | align="center" bgcolor="#cccccc" | aber nicht nur ein Chat | align="center" bgcolor="#cccccc" | Webseite und Forum |}</div> </slideshow>
und so sieht das Ergebnis aus
das ist schon mal ein schönes Ergebnis aber noch nicht wirklich benutzbar. Die einzelnen Elemente wechseln viel zu schnell und die Reihenfolge der Elemente ist zufällig. Also sollten wir noch durch Optionen auf das verhalten der Diaschau Einfluss nehmen.
Optionen für die Diaschau
Folgende Optionen sind möglich
- sequence
- transition
- refresh
- position
- next
- previous
Option sequence
Die Option sequence legt fest in welcher Reihenfloge die Diaschau ablaufen soll. Möglich sind folgende Werte
- forward -> vorwärts
- backward -> rückwärts
- random -> zufällig (das ist die Standard Einstellung wenn diese Option nicht angegeben wird)
Option transition
Die Option transition legt fest wie der Wechsel zum nächsten Element dargestellt wird. Möglich sind folgende Werte
- cut -> harter Übergang (das ist die Standard Einstellung wenn diese Option nicht angegeben wird)
- fade -> weicher Übergang (ausblenden/einblenden)
Option refresh
Die Option refresh legt fest, wie lange ein Element angezeigt wird. Möglich sind folgende Werte
- Zahl -> Zeit in Millisekunden
- user -> es wird eine Navigation angezeigt mit welcher der Benutzer vor/zurückblättern kann.
Option position
Die Option position legt fest, wie viele Pixel vom linken Rand die Navigation angezeigt wird. Diese Option ist nur aktiv wenn die Option refresh="user" gesetzt ist.
- zahl -> Abstand vom linken Rand in Pixel
Option next
Die Option next legt fest, welcher Text oder welches Bild angezeigt wird, um auf das nächste Element zu wechseln. Diese Option ist nur aktiv wenn die Option refresh="user" gesetzt ist.
- Text -> der Text wir als Link angezeigt
oder
- Bild -> das Bild wird als Link angezeigt (ACHTUNG: Das Bild selbst darf kein Link sein, den internen Wikilink ausschalten mit [[Image:meinblild.png|link=]])
Option previous
Die Option previous ist das Gegenstück zur Option next und legt den Text bzw. das Bild fest welches als Link angezeigt wird um auf das vorhergehende Element zu wechseln. Diese Option ist nur aktiv wenn die Option refresh="user" gesetzt ist.
- Text -> der Text wir als Link angezeigt
oder
- Bild -> das Bild wird als Link angezeigt (ACHTUNG: Das Bild selbst darf kein Link sein, den internen Wikilink ausschalten mit [[Image:meinblild.png|link=]])
Das Endergebnis
Mit den richtigen Optionen sieht unsere Diaschau dann so aus
<slideshow transition="fade" refresh="5000" sequence="forward"> <div><center>[[Image:Schnupptrupp-titel.jpeg]]</center></div> <div> <div style="width: 600px;"><center><br><br><br><span style="font-size: xx-large;">Der Schnupptrupp</span><br> <span style="font-size: larger;">'''kein''' ''Clan'' aber eine '''starke''' ''Gemeinschaft''</span><br><br><br></center></div> </div> <div> {| align="center" cellspacing="1" cellpadding="1" border="2" style="width: 600px; height: 156px;" |- ! bgcolor="#993300" scope="col" | Der Schnupptrupp ! bgcolor="#993300" scope="col" | kein Clan ! bgcolor="#993300" scope="col" | starke Gemeinschaft |- | align="center" bgcolor="#cccccc" | immer am Schnuppensuchen | align="center" bgcolor="#cccccc" | keine Ränge | align="center" bgcolor="#cccccc" | Hilfe in und um Runescape |- | align="center" bgcolor="#cccccc" | regelmäßige gemeinschaftliche Aktivitäten | align="center" bgcolor="#cccccc" | aber nicht nur ein Chat | align="center" bgcolor="#cccccc" | Webseite und Forum |} </div> </slideshow>