Achtung!

Der Webbaukasten wird nicht mehr aktiv betreut und nicht mehr weiter entwickelt. Verwenden Sie stattdessen das CMS-Angebot des RRZE.
Die Dokumentation des CMS-Angebotes finden Sie auf der Website wordpress.rrze.fau.de.

Bilder im normalen Textbereich

Für Bilder im normalen Textbereich müssen keine besonderen Eigenschaften vorgenommen werden. Der Einbau erfolgt mit dem normalen <img />-Tag innerhalb eines Absatzes, weitere Klassenangaben sind nicht notwendig. Auch das Bild in diesem Absatz wurde ohne jegliche Klassenangaben eingebaut.

Für einen Textfluss rechts oder links eines Bildes können zwei Klassen eingesetzt werden:

  • bildrechts lässt das Bild rechts vom Text erscheinen.
  • bildlinks lässt das Bild links vom Text erscheinen.

Beispiele

In diesem Absatz wurde das Bild mit der Klasse bildlinks links des Textes positioniert. Übrigens handelt es sich hier um eine kleine Schmuckgrafik ohne weitere Funktion, die deshalb nicht im Text oder über einen längeren Eintrag im alt-Attribut beschrieben werden muss.

In diesem Absatz wurde das Bild mit der Klasse bildrechts rechts des Textes positioniert. Auch hier gilt das im vorherigen Absatz Erwähnte: Da es sich nicht um ein Bild mit einer besonderen inhaltlichen Aussage handelt, kann auf eine Beschreibung verzichtet werden.

Werden Bilder in sehr hoher Auflösung oder in Kombination mit sehr wenig Text eingesetzt, kann es in einem Absatz manchmal zu ungewollten und unschönen Positionierungen der Text- und Bildelemente kommen. Dies können Sie vermeiden, indem Sie am Ende dieses Absatzes (oder zu Beginn des neuen Absatzes) die allgemeine Klasse clear verwenden.

Illustrationen / Große Bilder mit Boxen und Unterschriften

Kleine Illustration

Fuß eines Gecko

Zu jedem Bild gehört auch eine kleine Bildunterschrift.

Bilder rechts oder links des Textes zu platzieren, ist aus gestalterischer Sicht nur dann sinnvoll, wenn das Dokument bestimmte Kriterien erfüllt:

  • Die Bilder sollten nicht allzu breit sein (ca. 200-300px).
  • Die Bilder sollten in etwa die gleiche Breite haben.
  • Es sollte ausreichend Text vorhanden sein, um den freien Platz neben dem Bild zu füllen. Andernfalls kann es zu unschönen "weißen Flächen" kommen.

Werden diese Kriterien nicht erfüllt, empfiehlt es sich, bei den Bildern jeweils den Textfluss zu unterbrechen, den Bildraum über die ganze Spaltenbreite auszuweiten und die Bildunterschrift, wenn es der Platz erlaubt, direkt neben das Bild zu stellen.

Die Einfügung eines clear-Elementes zur Trennung möglicherweise überlappender Bilder ist 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 kleine Illustration:

<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ße:

<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>

Es gibt keine Vorgaben dafür, ob die Bildbox eine Überschrift aus dem H-System enthält und ob bzw. wie der Titel zu belegen ist. Dies kann individuell entschieden werden, sollte aber innerhalb eines Dokuments konsistent gehandhabt werden.

Lightbox 2

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

Beispielbild

Eine Anleitung hierzu finden sie unter Bildergalerien --> Lightbox 2.