Korrekturen? Ergänzungen? Schreiben Sie an stoebener@augsburg-wiki.de


Hauptseite | Hilfe | Bilder


Bilder

Grundsätzliches

Um ein Bild auf einer Seite zu platzieren, wird die die Adresse (URL) eingegeben. Ein alternativer Text (für Tooltip und Browser, die keine Bilder darstellen) wird in doppelte Anführungszeichen direkt nach der URL gesetzt.


http://www.pmichaud.com/img/misc/pc.jpg"alternativer Text"
Mit Büroklammern zu arbeiten macht Spaß.
alternativer Text

Mit Büroklammern zu arbeiten macht Spaß.

Sie können Bilder ebenso als hochgeladene Dateien? (Attach:image.jpg) und InterMap? -Verweise angegeben. Jede Angabe, die auf .gif, .jpg, .jpeg oder .png endet, wird automatisch als Bild behandelt. (Siehe Hinweise für Bilder, die keine Endung besitzen).

Um einen Verweis zu einem Bild (wie http://www.pmichaud.com/img/misc/pc.jpg) zu setzen, anstatt es anzuzeigen, wird der Verweis in doppelte Klammern gesetzt, wie in [[http://www.pmichaud.com/img/misc/pc.jpg]] oder [[Attach:image.jpg]].

Damit ein Bild auf einen anderen Ort verweist, wird das Bild als Verweistext verwendet: [[http://www.pmwiki.org | Attach:image.jpg"PmWiki"]].

Bilder beschriften und von Text umfließen lassen

Um ein Bild zu beschriften, setzen Sie nach dem Bilddatei-Pfad einfach einen senkrechten Balken und fügen den Beschriftungstext anschließend hinzu.


http://www.pmichaud.com/img/misc/pc.jpg"Paper clips" | '''Abbildung 1'''
Paper clips
Abbildung 1

Normalerweise werden Bilder auf der gleichen Grundlinie wie der umgebende Text angezeigt. Um nun ein Bild links oder rechts auszurichten und den Text um das Bild fließen zu lassen, verwenden Sie bitte die %lfloat% und %rfloat% Wikistile.


%lfloat% http://www.pmichaud.com/img/misc/gem.jpg | '''Rock on!'''
Das Bild ist linksbündig ausgerichtet. Der Text fließt rechts um das Bild.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Rock on!

Das Bild ist linksbündig ausgerichtet. Der Text fließt rechts um das Bild.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Mit den %lframe% oder %rframe% Wikistilen wird ein Bild rechts oder links ausgerichtet und zusätzlich ein Rahmen um das Bild gelegt.


%rframe% http://www.pmichaud.com/img/misc/gem.jpg | '''Rock on!'''
Das Bild ist rechtsbündig ausgerichtet. Der Text fließt links um das gerahmte Bild.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Rock on!

Das Bild ist rechtsbündig ausgerichtet. Der Text fließt links um das gerahmte Bild.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Mit %center% können Sie ein Bild zentrieren. %right% richtet es rechts aus - ohne umfließenden Text.


%center%http://www.pmichaud.com/img/misc/pc.jpg"Paper clips" | Paper clips are fun to work with

%right% http://www.pmichaud.com/img/misc/gem.jpg | Rock on!
Paper clips
Paper clips are fun to work with

Rock on!

Bei Thumblists braucht man zur Zentrierung auch den Befehl < div align=center > dazwischen das zu zentrierende Objekt < /div > (ohne die Leerzeichen vor den Pfeilen).

Bilder skalieren

Um die Größe eines Bildes zu ändern, kann %width=50px% oder %height=50px% vor das Bild gesetzt werden. %thumb% ist eine praktische Abkürzung für %width=100px%.


%width=50px% http://www.pmichaud.com/img/misc/bubble.jpg \
%height=50px% http://www.pmichaud.com/img/misc/bubble.jpg \
%thumb% http://www.pmichaud.com/img/misc/bubble.jpg

Das Skalieren ändert nur, in welcher Größe das Bild im Browser angezeigt wird, nicht die Größe oder oder übertragene Dateigröße des Bildes an sich.

Durch %thumb% skalierte Bilder können in Rahmen ausgerichtet oder als Verweise verwendet werden.


%lframe thumb% [[http://www.pmichaud.com/img/misc/bubble.jpg | http://www.pmichaud.com/img/misc/bubble.jpg"Burst the bubble"]] | [-Bubble-]
%lframe thumb% http://www.pmichaud.com/img/misc/pc.jpg"Clip the ticket" | [-Paper Clips-]
%lframe thumb% [[DocumentationIndex | http://www.pmichaud.com/img/misc/gem.jpg"Visit the Documentation Index"]] | [[DocumentationIndex | [-Rock On-]]]
Burst the bubble
Bubble
Clip the ticket
Paper Clips

Hinweise

Bilder ohne korrekte Dateiendung können durch Hinzufügen einer "falschen" Endung zur URL angezeigt werden. Wenn beispielsweise die URL http://www.example.com/script/tux ist, wird der falschen Anfrage automatisch die gewünschte Endung angehängt, beispielsweise http://www.example.com/script/tux?format=.png.

Hintergrundbilder in Tabellen, -zellen und Teilern: Mehr dazu können Sie unter Cookbook:BackgroundImages erfahren.

Web-Konventionen beachten:

Im Internet gelten einheitlich besondere Übereinkünfte (Konventionen) für die Darstellung von Inhalten, damit die verschiedenen Browser wie Internet Explorer, Firefox, Opera Webseiten in gleicher Weise anzeigen können. Wenn man sich nicht an diese Konventionen hält, kann es in dem ein oder anderen Browser zu einer Fehlermeldung kommen oder es wird die Webseite nicht so angezeigt, wie Sie es gerne hätten.

Häufige Fehlermeldung in Browsern ist z. B. ein X anstelle eines Bildes. Um einem solchen X an der Stelle vorzubeugen, an der Sie gerne ein Bild hätten, gilt es ein paar Grundsätze zu beachten. Diese Grundsätze sind so ausgerichtet, dass alle Browser sie richtig interpretieren können.

Verwenden Sie bitte generell:

  • keine Großschreibung
  • keine Leerzeichen
  • keine Sonderzeichen
  • keine Umlaute

Beispiele:

Keine Grosschreibung:

falsch: Name.jpg
richtig: name.jpg

Keine Leerzeichen:

falsch: ich und meine hobbys.jpg
richtig: ich_und_meine_hobbys.jpg
(Leerzeichen werden durch einen Unterstrich ersetzt!)

Keine Sonderzeichen:

falsch: ich-und-meine-hobbys.jpg
richtig: ich_und_meine_hobbys.jpg

Keine Umlaute:

falsch: ich übe schreiben.jpg
richtig: ich_uebe_schreiben.jpg

Was tun, wenn Sie bei der Bildbenennung doch einen Fehler gemacht haben? Benennen Sie das Bild einfach in Ihrem Ordner um und laden Sie es ein zweites Mal hoch. Vergessen sie dann aber nicht, die Bezeichnung des Bildes an der Stelle, an der Sie es eingebaut haben wollen, ebenfalls zu ändern!

Quellen

Die Bilder auf dieser Seite stammen von http://www.flickr.com und werden unter der Creative Commons License verbreitet.


Hauptseite | Hilfe | Bilder


Korrekturen? Ergänzungen? Schreiben Sie an stoebener@augsburg-wiki.de




FacebookTwitThis