Bearbeiten von MosaPedia:Bildertutorial

Aus MosaPedia

Wechseln zu: Navigation, Suche
Du bearbeitest diese Seite unangemeldet. Wenn du speicherst, wird deine aktuelle IP-Adresse in der Versionsgeschichte aufgezeichnet und ist damit unwiderruflich öffentlich einsehbar.
Um die Änderung rückgängig zu machen, bitte die Bearbeitung in der Vergleichsansicht kontrollieren und dann auf „Seite speichern“ klicken.
Aktuelle Version Dein Text
Zeile 9: Zeile 9:
== Bilder einbinden ==
== Bilder einbinden ==
-
Beim Bearbeiten eines Artikels wird durch Drücken auf den "Datei einfügen"-Knopf [[Datei:button_image.png]] in der "Editierleiste" ein Bild eingebunden: Dieser Knopf erzeugt im Text die Zeichenfolge {{Zitat|<nowiki>[[Datei:Beispiel.jpg]]</nowiki>}}
+
Um ein Bild in einem Artikel darzustellen, gibt es mehrere Möglichkeiten.
-
(Man kann diese oder eine ähnliche Zeichenfolge selbstverständlich auch "von Hand" eintippen.)
+
-
Auf diese Weise wird ein Beispielbild namens <code>Beispiel.jpg</code> in den Artikel eingefügt:
+
-
 
+
-
[[Datei:Beispiel.jpg]]
+
-
 
+
-
Dies allein ist natürlich noch nicht sehr sinnvoll. Darum gibt es nun zweierlei zu tun:
+
-
#Anstelle von <code>Beispiel.jpg</code> muss der Name der gewünschten Bilddatei eingetragen werden,
+
-
#die Darstellung des Bildes (Anordnung, Größe, Rahmen usw.) kann verändert werden.
+
-
Hierfür gibt es eine Reihe von Möglichkeiten, die im folgenden ausführlich beschrieben werden.
+
-
 
+
-
{{Zitat|'''Hinweis:''' Im Folgenden steht ''Bild:'' anstelle von ''Datei:'', beides hat die gleiche Wirkung, ebenso wie ''Image:'' oder ''File:''. (Die Verwendung von ''Datei:'' oder ''File:'' wird empfohlen, ''Bild:'' und ''Image:'' sind "historische" Bezeichnungen, ''Image:'' und ''File:'' sind englisch.)}}
+
-
 
+
-
=== Bild fehlt ===
+
-
Falls in jedem Fall ein Bild vorgesehen, aber dieses noch nicht Teil der MosaPedia-Datenbank ist, kann man den Bildbereich zwischenzeitlich mit dem Platzhalter "Bild fehlt" belegen:
+
-
{{Zitat|<nowiki>[[Bild:Bildfehlt.jpg]]</nowiki>}}
+
-
Das Ergebnis sieht dann so aus:
+
-
[[Bild:Bildfehlt.jpg]]
+
=== Bildgröße beibehalten ===
=== Bildgröße beibehalten ===
Zeile 202: Zeile 185:
</gallery>
</gallery>
-
<gallery perrow="1" caption="Spaltenartige Galerie links mit ziemlich schmalem freiem rechtem Rand" align="left" style="margin-right:1em">
+
<gallery perrow="1" caption="Spaltenartige Galerie links mit ziemlich schmalem freiem rechtem Rand" align="left" style="margin:0em 1em 0em 0em">
  Bild:Baldo 1.jpg|[[Baldo]]
  Bild:Baldo 1.jpg|[[Baldo]]
  Bild:409 Suski.jpg|Farbvariante
  Bild:409 Suski.jpg|Farbvariante
Zeile 209: Zeile 192:
Man kann Galerien auch noch mit weiteren Parametern beeinflussen und formatieren. So kann man sie z.B. mit ''align="right"'' an den rechten Rand schieben oder mit ''style="margin:..."'' mit einem unsichtbaren Rand versehen, der den umgebenden Fließtext "auf Abstand hält".  
Man kann Galerien auch noch mit weiteren Parametern beeinflussen und formatieren. So kann man sie z.B. mit ''align="right"'' an den rechten Rand schieben oder mit ''style="margin:..."'' mit einem unsichtbaren Rand versehen, der den umgebenden Fließtext "auf Abstand hält".  
-
Die Maßeinheit bei ''margin'' ist die Breite des Buchstabens ''m'', geschrieben ''0em'', ''1em'', ''2em'' etc., wobei die Standardeinstellung (also wenn man auf jegliche Angabe von ''margin'' verzichtet) 0em ist; d.h.: keinerlei Rand. Fügt man hinter ''margin:'' nur eine ''em''-Angabe ein, gilt diese für alle vier Ränder. Will man hingegen unterschiedliche Abstände an den vier Rändern erzielen, muss man diese auch für alle vier eigens angeben, und zwar im Uhrzeigersinn oben, rechts, unten, links. Beispiele: ''style="margin:0em 1em 5em 0em"'' erzeugt einen breiten freien Rand unten und einen schmalen freien Rand an der rechten Seite der Galerie; hingegen sorgt ''style="margin:2em"'' für einen gleichmäßig mittelbreiten Rand um die ganze Galerie. Genauso möglich ist die Angabe von Pixel-Größen, also z.B. 20px. Will man lediglich auf einer Seite einen leeren Rand erreichen, kann man auch die Angaben ''margin-top:'', ''margin-right:'', ''margin-bottom:'' bzw. ''margin-left:'' benutzen.
+
Die Maßeinheit bei ''margin'' ist die Breite des Buchstabens ''m'', geschrieben ''0em'', ''1em'', ''2em'' etc. Fügt man hinter ''margin:'' lediglich eine derartige Angabe ein, gilt sie für alle vier Ränder. Will man hingegen unterschiedliche Abstände an den vier Rändern erzielen, muss man diese auch für alle vier eigens angeben, und zwar im Uhrzeigersinn oben, rechts, unten, links. Beispiele: ''style="margin:0em 1em 5em 0em"'' erzeugt einen breiten freien Rand unten und einen schmalen freien Rand an der rechten Seite der Galerie; hingegen sorgt ''style="margin:2em"'' für einen gleichmäßig mittelbreiten Rand um die ganze Galerie.
Erstes Beispiel für ''align'' und ''margin''. Das Ergebnis hierfür ist am rechten Rand zu sehen.
Erstes Beispiel für ''align'' und ''margin''. Das Ergebnis hierfür ist am rechten Rand zu sehen.
Zeile 217: Zeile 200:
Zweites Beispiel. Das Ergebnis ist am linken Rand zu sehen.
Zweites Beispiel. Das Ergebnis ist am linken Rand zu sehen.
-
{{Zitat|<nowiki><gallery perrow="1" caption="Spaltenartige Galerie links mit ziemlich schmalem freiem rechtem Rand" align="left" style="margin-right:1em"></nowiki><br>&nbsp;Bild:Baldo 1.jpg<nowiki>|[[</nowiki>Baldo]]<br>&nbsp;Bild:409 Suski.jpg<nowiki>|</nowiki>Farbvariante<br></gallery>}}
+
{{Zitat|<nowiki><gallery perrow="1" caption="Spaltenartige Galerie links mit ziemlich schmalem freiem rechtem Rand" align="left" style="margin:0em 1em 0em 0em"></nowiki><br>&nbsp;Bild:Baldo 1.jpg<nowiki>|[[</nowiki>Baldo]]<br>&nbsp;Bild:409 Suski.jpg<nowiki>|</nowiki>Farbvariante<br></gallery>}}
-
 
+
-
Wie man hier auch schön sieht, kann man auf diese Weise links und rechts vom Fließtext spaltenartige Galerien erzeugen. Allerdings ist zu beachten, dass Bilder mit der Positionsangabe "left" oder "right" von der Software nicht zwischen solchen Galeriespalten geduldet und nach ganz unten verschoben werden; Bilder mit Positionsangabe "none" oder "center" sowie reine, unformatierte Bilder können hingegen zwischen den Galeriespalten dargestellt werden.
+
-
 
+
-
=== Mehrere Bilder ===
+
-
Zur ansprechenden, etwas kompakteren Darstellung mehrerer Bilder gibt es auch noch die [[:Vorlage:Mehrere Bilder]]. Eine genaue Beschreibung der Benutzungsmöglichkeiten findet
+
-
man auf der Vorlagen-Seite selbst; hier nur einige Beispiele.
+
-
 
+
-
<div style="float:left; margin: .5em 1.4em .8em 0">
+
-
{{Mehrere Bilder | align = left | Richtung = v2
+
-
| Breite1 =  65 | Bild1 = Maman.jpg
+
-
| Breite2 =  65 | Bild2 = Zwentibold.jpg
+
-
| Breite3 = 181 | Bild3 = Nancy_Stadt.jpg
+
-
| Breite5 =  69 | Bild5 = Ludolf1.jpg
+
-
| Breite6 =  69 | Bild6 = Gisele.jpg
+
-
| Kopfzeile  = Der Brand in [[Nancy]]
+
-
| Untertitel1 = [[Maman]]
+
-
| Untertitel2 = [[Zwentibold]]
+
-
| Untertitel3 = Sprachlos: Die [[Abrafaxe]]
+
-
| Untertitel5 = [[Ludolf Fickelscherer|Ludolf]]
+
-
| Untertitel6 = [[Gisèle]]
+
-
}}
+
-
<pre width="48" style="float:left; clear:left; background:#f7f8ff; border:1px solid #8888aa;">
+
-
{{Mehrere Bilder | align = left | Richtung = v2
+
-
| Breite1 =  65 | Bild1 = Maman.jpg
+
-
| Breite2 =  65 | Bild2 = Zwentibold.jpg
+
-
| Breite3 = 180 | Bild3 = Nancy_Stadt.jpg
+
-
| Breite5 =  69 | Bild5 = Ludolf1.jpg
+
-
| Breite6 =  69 | Bild6 = Gisele.jpg
+
-
| Kopfzeile  = Der Brand in [[Nancy]]
+
-
| Untertitel1 = [[Maman]]
+
-
| Untertitel2 = [[Zwentibold]]
+
-
| Untertitel3 = Sprachlos: Die [[Abrafaxe]]
+
-
| Untertitel5 = [[Ludolf Fickelscherer|Ludolf]]
+
-
| Untertitel6 = [[Gisèle]]
+
-
}}
+
-
</pre>
+
-
</div>
+
-
 
+
-
<div style="float:right; clear:right; margin: .5em 0 .8em 1.4em;">
+
-
{{Mehrere Bilder | Breite=70 | Richtung=h4
+
-
| Bild1=Tb_385.jpg | Untertitel1=[[385]] | Bild7 =Tb_391.jpg | Untertitel7 =[[391]]
+
-
| Bild2=Tb_386.jpg | Untertitel2=[[386]] | Bild8 =Tb_392.jpg | Untertitel8 =[[392]]
+
-
| Bild3=Tb_387.jpg | Untertitel3=[[387]] | Bild9 =Tb_393.jpg | Untertitel9 =[[393]]
+
-
| Bild4=Tb_388.jpg | Untertitel4=[[388]] | Bild10=Tb_394.jpg | Untertitel10=[[394]]
+
-
| Bild5=Tb_389.jpg | Untertitel5=[[389]] | Bild11=Tb_395.jpg | Untertitel11=[[395]]
+
-
| Bild6=Tb_390.jpg | Untertitel6=[[390]] | Bild12=Tb_396.jpg | Untertitel12=[[396]]
+
-
}}
+
-
<pre width="42" style="float:right; clear: right; margin: .5em 0 .8em 1.4em; background:#f7f8ff; border:1px solid #8888aa;">
+
-
{{Mehrere Bilder | Breite=70 | Richtung=h4
+
-
| Bild1=Tb_385.jpg | Untertitel1=[[385]]
+
-
| Bild2=Tb_386.jpg | Untertitel2=[[386]]
+
-
| Bild3=...
+
-
}}
+
-
</pre>
+
-
 
+
-
 
+
-
</div>
+
-
<div style="clear:both"></div>
+
=== Klickbare Bilder (''Imagemap'') ===
=== Klickbare Bilder (''Imagemap'') ===
Zeile 345: Zeile 270:
  default [[6/78]]
  default [[6/78]]
</imagemap>
</imagemap>
-
 
-
<br clear=both>
 
-
 
-
=== Erklärtext neben dem Bild oder den Bildern ===
 
-
Erklärende Texte unter dem jeweiligen Bild sind bereits mit den oben genannten Beispielen zu realisieren. Soll ein Text neben einem Bild erscheinen, ist dies nur über die Form einer Tabelle möglich.
 
-
 
-
{{Zitat|<nowiki>{| {{Prettytable}} align="right"</nowiki><br><nowiki>| align="center" width="70" | [[Datei:KochenmitC.jpg]]</nowiki><br><nowiki>| Ein Kochbuch ist schön und gut,<br>aber schließlich lernt Califax<br>während der Abenteuer immer neue<br>Köstlichkeiten kennen und probiert<br>auch selbst so Einiges aus.</nowiki><br><nowiki>|}</nowiki>}}
 
-
 
-
Ergebnis:
 
-
 
-
{| {{Prettytable}} align="right"
 
-
| align="center" width="70" | [[Datei:KochenmitC.jpg]]
 
-
| Ein Kochbuch ist schön und gut,<br>aber schließlich lernt Califax<br>während der Abenteuer immer neue<br>Köstlichkeiten kennen und probiert<br>auch selbst so Einiges aus.
 
-
|}
 
<br clear=both>
<br clear=both>
Zeile 374: Zeile 285:
{{Zitat|<nowiki>[[</nowiki>[[:Kategorie:45 (Bild)]]]]<br><br><nowiki>[[</nowiki>[[:Kategorie:195 Digedags (Bild)]]]]<br><br><nowiki>[[</nowiki>[[:Kategorie:4/76 (Bild)]]]]<br><br><nowiki>[[</nowiki>[[:Kategorie:195 Abrafaxe (Bild)]]]]<br><br><nowiki>[[</nowiki>[[:Kategorie:381 (Bild)]]]]}}
{{Zitat|<nowiki>[[</nowiki>[[:Kategorie:45 (Bild)]]]]<br><br><nowiki>[[</nowiki>[[:Kategorie:195 Digedags (Bild)]]]]<br><br><nowiki>[[</nowiki>[[:Kategorie:4/76 (Bild)]]]]<br><br><nowiki>[[</nowiki>[[:Kategorie:195 Abrafaxe (Bild)]]]]<br><br><nowiki>[[</nowiki>[[:Kategorie:381 (Bild)]]]]}}
-
Titelbilder werden dabei mit einem nachgestellten "|!" an die Spitze der Kategorie geschoben. Beispiele:
+
Titelbilder werden dabei mit einem nachgestellten |! an die Spitze der Kategorie geschoben. Beispiele:
{{Zitat|<nowiki>[[Kategorie:58 (Bild)|!]]</nowiki><br><br><nowiki>[[Kategorie:7/85 (Bild)|!]]</nowiki>}}
{{Zitat|<nowiki>[[Kategorie:58 (Bild)|!]]</nowiki><br><br><nowiki>[[Kategorie:7/85 (Bild)|!]]</nowiki>}}
Zeile 383: Zeile 294:
=== Skizzen und Modelle ===
=== Skizzen und Modelle ===
-
Abbildungen von Vorstudien aller Art - [[Skizze]]n, Modelle, verworfene Titelbilder, [[Manuskript]]e etc. - werden serienweise in eigenen Kategorien zusammengefasst. Die Syntax hierfür lautet beispielsweise:
+
Abbildungen von Vorstudien aller Art - Skizzen, Modelle, verworfene Titelbilder, Manuskripte etc. - werden serienweise in eigenen Kategorien zusammengefasst. Die Syntax hierfür lautet beispielsweise:
{{Zitat|<nowiki>[[</nowiki>[[:Kategorie:Erfinder-Serie (Skizzen und Modelle)]]]]<br><br><nowiki>[[</nowiki>[[:Kategorie:Templer-Serie (Skizzen und Modelle)]]]]}}
{{Zitat|<nowiki>[[</nowiki>[[:Kategorie:Erfinder-Serie (Skizzen und Modelle)]]]]<br><br><nowiki>[[</nowiki>[[:Kategorie:Templer-Serie (Skizzen und Modelle)]]]]}}
Zeile 397: Zeile 308:
=== Sketche ===
=== Sketche ===
-
[[Sketch]]e von Mosaikzeichnern - die man z.B. beim Signieren bekommt - werden nach dem Künstler kategorisiert, wobei der Familienname zuerst genannt wird. Beispiel:
+
Sketche von Mosaikzeichnern - die man z.B. beim Signieren bekommt - werden nach dem Künstler kategorisiert, wobei der Familienname zuerst genannt wird. Beispiel:
{{Zitat|<nowiki>[[</nowiki>[[:Kategorie:Reuter, Jörg (Sketch)]]]]}}
{{Zitat|<nowiki>[[</nowiki>[[:Kategorie:Reuter, Jörg (Sketch)]]]]}}

Bitte kopieren Sie keine Webseiten, die nicht Ihre eigenen sind, benutzen Sie keine urheberrechtlich geschützten Werke ohne Erlaubnis des Copyright-Inhabers!

Sie geben uns hiermit ihre Zusage, dass Sie den Text selbst verfasst haben, dass der Text Allgemeingut (public domain) ist, oder dass der Copyright-Inhaber seine Zustimmung gegeben hat. Falls dieser Text bereits woanders veröffentlicht wurde, weisen Sie bitte auf der Diskussion-Seite darauf hin. Bitte beachten Sie, dass das Nutzungsrecht für alle MosaPedia-Beiträge und Beitragsänderungen automatisch auf die MosaPedia übergeht. Falls Sie nicht möchten, dass Ihre Arbeit hier von anderen verändert und verbreitet wird, dann drücken Sie nicht auf "Speichern".


Abbrechen | Bearbeitungshilfe (wird in einem neuen Fenster geöffnet)
Persönliche Werkzeuge