Bilder im normalen Textbereich

Für Bilder im normalen Textbereich gibt es keine besonderen Eigenschaften vorzunehmen. Der Einbau erfolgt mit dem normalen <img />-Tag innerhalb eines Absatzes.
Unter Umständen möchte man ein Bild jedoch rechts oder links eines Textes fließen lassen.
Das Bild in diesem Absatz wurde ohne jegliche Klassenangabe eingebaut.

Es wurden zwei Klassen eingeführt:

  • bildrechts läßt das Bild rechts vom Text erscheinen
  • bildlinks läßt das Bild links vom Text erscheinen

Beispiele

In diesen Absatz ist ein Bild mit der Klasse bildlinks links positioniert. Es handelt sich um ein kleines Bild, welches keine besondere Funktion enthält und als Schmuckgrafik dient. Daher muss das Bild auch nicht im Text oder über einen längeren Eintrag im alt-Attribut beschrieben werden.

In diesem Absatz ist das Bild mit der Klasse bildrechts rechts vom Text positioniert. Auch hier gilt das was im vorherigen Absatz bereits erwähnt wurde: Es handelt sich um kein Bild miteiner besonderen inhaltlichen Aussage, so daß auf eine Beschreibung verzichtet werden darf.

Sollte es aufgrund großer Bildauflösungen oder wenig text bei großem Bildern zu ungewollten Positionierungen innerhalb verschiedener Absätze kommen, kann dies abgeholfen indem man am Ende eines Absatzes oder mit Beginn eines neuen die allgemeine Klasse clear verwendet.

Illustrationen / Große Bilder mit Boxen und Unterschriften

Kleine Illustration

Fuß eines Gecko

Zu jedem Bild gehört auch eine kleine Bildunterschrift.

Illustrationen werden vielfach nur einen Teil der jeweiligen Spalte einnehmen. Dann wird die Bildunterschrift durch die Styles unter das Bild gestellt.

Bilder rechts oder links zu platzieren ist nur dann sinnvoll, wenn alle Bilder innerhalb eines Dokuments die gleiche Breite, möglichst unter 200px haben. In den Fällen, in denen die Bilder deutlich breiter und dazu auch noch unterschiedlich breit sind, empfiehlt es sich, den Bildraum über die ganze Spaltenbreite gehen zu lassen und die Bildunterschrift in den Fällen, wo es der Platz erlaubt, neben das Bild rutschen zu lassen.

In diesem Fall ist darauf zu achten, daß genug Text vorhanden ist, um den freien Platz neben dem Bild mit Anstand zu füllen. Andernfalls kann es zu unschönen Darstellungen kommen. Falls nicht genügend Text vorhanden ist, ist es besser, alle Bilder bzw. den sie umgebenden Rahmen über die ganze Breite gehen zu lassen. Die Einfügung eines clear-Elementes zur Trennung möglicherweise überlappender Bilder ist direkt in "content" nur möglich, wenn "Zusatzinfo" entfällt oder (weitestgehend) leer ist.

Große Illustration

Fuß eines Gecko

Zu jedem Bild gehört auch eine kleine Bildunterschrift mit möglichst kurzen Wörtern.

Der Code für die Bildboxen sieht in jedem Fall gleich aus, z.B. für die kleinen Illustrationen 

<div class="klein_box_rechts">
<h2>Kleine Illustration</h2>
<img src="/grafiken/gecko.jpg" width="200" height="263" alt="Fuß eines Gecko" />
<p>Zu jedem Bild gehört auch eine kleine Bildunterschrift.
</p>
</div>

und für die großen

<div class="vollbox">
<h4>Große Illustration</h4>
<img src="/grafiken/laser.jpg" width="300" height="225" alt="Fuß eines Gecko" />
<p>Zu jedem Bild gehört auch eine kleine Bildunterschrift mit möglichst kurzen Wörtern.</p>
</div>

Ob die Bildbox eine Überschrift aus dem H-System enthält und ob bzw. wie der Titel zu belegen ist, muß im Einzelfall entschieden werden und sollte innerhalb eines Dokuments konsistent gehandhabt werden.

Lightbox 2

Mit der Anwendung "Lightbox 2" ist es möglich, große Bilder im Browser zu öffnen und sie über die ganze Seite zu legen. Beispiel:

Beispielbild

Eine Anleitung hierzu finden sie unter Externe Tools --> Lightbox 2.