Bilder einfügen

Wenn Sie nun Ihr Bild glücklich in eine sinnvolle Ordnerstruktur auf dem Server hochgeladen haben, ist das eigentliche Einfügen in den Bericht ganz einfach: Klicken Sie zuerst an diejenige Stelle im Text, an der es platziert werden soll, öffnen Sie anschließend den „Bilder-Manager”, klicken Sie dort das gewünschte Bild an und fügen es zuletzt mit dem „Einfügen”-Button (ganz unten im „Bilder-Manager”-Fenster) in den Text ein.

Bilder positionieren und Textumfluss

Wenn Sie ein Bild in den Text eingefügt haben, so unterbricht es den Textfluss, d.h. der sich vor dem Bild befindliche Text steht über dem Bild, der nachfolgende Text darunter. Dieses Verhalten kennen Sie von Textverarbeitungsprogrammen; auch dort muss einem Bild eine Positionierung zugewiesen werden, wenn der Text das Bild umfließen soll (wie das z.B. in dieser Anleitung der Fall ist). In aller Regel sieht ein illustrierter Text mit Textumfluss um die Bilder ansprechender aus, als ein Text, dessen Fluss auch von kleineren Bilder immer wieder unterbrochen wird. Abgesehen vom ästhetischen Aspekt wird ein Text ohne Textumfluss kürzer, was gerade bei Internetseiten von Vorteil ist, weil Betrachter weniger scrollen müssen.

Die Positionierung eines Bilds können Sie im oberen Bereich des „Bilder-Managers” mit der Auswahlliste „Ausrichtung” einstellen. Sinnvoll sind „Links” oder „Rechts”. Die Angabe bezieht sich auf die Position des Bilds im Text, „Links” bewirkt also einen rechten Textumfuss und „Rechts” einen linken. Um die gewählte Einstellung anschaulich zu machen, werden Bild und Textumfluss in der kleinen Vorschau rechts neben den Einstellungen dargestellt.

Wird ein Bild von Text umflossen, ist es empfehlenswert auch einen Abstand zum Text anzugeben: Ist das Bild links positioniert, definiert man rechts einen (Bild)Rand, denn das ist der „Abstand” zum Text, der das Bild rechts umfließt. Bei einer rechtsseitigen Positionierung des Bilds geben Sie entsprechend einen linken Rand. Die Voreinstellung ist „alle gleich”; das müssen Sie zuerst deaktivieren, bevor Sie einen Rand eingeben können. Bewährt haben sich Werte zwischen 10 und 20. Oft ist es auch erforderlich, einen oberen bzw. unteren Rand einzugeben; das hängt ganz von ihrer Textstruktur ab. Um Ihnen eine Idee zu geben, sehen Sie im obigen Bild die Einstellungen dieses Bilds selbst.

Die „Größe” lassen Sie unberührt, dieser Wert wird automatisch bei der Auswahl des Bilds in der Listenansicht eingetragen. Aber denken Sie bei der Vorbereitung des Bilds daran, seine Dimensionen genau so zu bemessen, wie es in den Beitrag eingefügt wird. Verändern Sie die Größe des Bilds oder gar seine Proportionen, so muss der Browser beim Betrachten des Beitrags die Bildgröße neu berechnen; dabei verliert das Bild aber deutlich an Qualität.

Wenn es denn sein soll, können Sie einen „Rand” und dessen Breite, Stil und Farbe (Voreinstellung ist Schwarz = #000000) angeben. Klicken Sie dazu das Kästchen neben „Breite”an, mit dem kleinen Symbol ganz rechts in der Zeile können Sie einen Farbwähler öffnen. Aber bitte setzen Sie Bildränder sparsam ein, denn diese Art Ränder sieht oftmals nicht gut aus, zumal wenn die Ränder unterschiedlich gestaltet sind. Sollen die Bilder Ihrer Beiträge eine grafische Einfassung bekommen (so wie z.B. in dieser Anleitung) so lässt sich das gestalterisch viel eleganter — und vor allem zentral an einer einzigen Stelle — in einer Layoutdatei (für die Fortgeschrittenen: in einer CSS-Datei) einstellen. Das ist dann ein Job, mit dem Sie die technische Betreuung Ihres Internetauftritts beauftragen sollten, also mich.

Der „Alt. Text” (Alternativer Text) wird bei der Auswahl des Bilds in der Listenansicht ebenfalls automatisch eingetragen. Dieser Text ist meistens im Browser nicht sichtbar, nur wenn das Bild nicht gefunden werden sollte (weil es z.B. unbeabsichtigt auf dem Server gelöscht wurde). Dennoch ist dieser Text nicht unwichtig, denn er wird Menschen mit beeinträchtigter Sehkraft von „Screenreadern” genannten Programmen vorgelesen, damit diese sich vorstellen können, was dort zu sehen wäre. Aus diesem Grund lieben auch Suchmaschienen einen sinnvollen Alt-Text. Je sprechender dieser ist, desto besser ist das für sehschwache Seitenbesucher, aber auch für die Rangfolge Ihres Beitrags bei Suchmaschinen. Dies sind auch die Gründe, weshalb eine automatische Eintragung des Alt-Texts erfolgt; dabei wird er aus dem Bildnamen generiert. Sie sehen, dass es sinnvoll ist, von Anfang an einen sprechenden Bildnamen zu wählen, denn dann erspart man sich das Nacheditieren des Alt-Texts.

Die Einstellungen eines Bilds lassen sich jederzeit nachträglich anpassen. Dazu wird zuerst das betreffende Bild angeklickt, eine Umrandung wird sichtbar. Nun öffnet man den „Bilder-Manager” wie weiter oben beschrieben  und kann die Einstellungen des Bilds ändern.

Absatzkontrolle nach einem Textumfluss (für Fortgeschrittene)

Wenn der umfließende Text kürzer ist als die Bildhöhe (z.B. eine Bildlegende), der nachfolgende Text aber unterhalb des Bilds weiterlaufen soll, kann man sich mit eingefügten Zeilenumbruchen oder leeren Absätzen behelfen. Sofern der Beitrag im Browser eine fixe Breite hat, ist dieser Behelf meistens ausreichend.

Ist die Beitragsbreite aber flexibel (und der Trend geht in diese Richtung, um der großen Anzahl ganz unterschiedlicher Bildschirmgrößen und -auflösungen gerecht zu werden) können die eingefügten Leerzeilen zu unschönen Abständen führen, wenn die Textbreite schmal wird. Auch dieses Problem lässt sich lösen, allerdings nur im HTML-Quelltext und mit einem Griff in die CSS-Tickkiste. Wie der Beitrag in der HTML-Ansicht geöffnet wird und was dabei aus Sicherheitsgründen zu beachten ist, habe ich auf der ersten Seite dieser Anleitung beschrieben. Im zugegebenermaßen für das ungeübte Auge recht unanschaulichen und unübersichtlichen HTML-Quelltext müssen Sie nun denjenigen Absatz finden, der dem fraglichen positionierten Bild mit Textumfluss folgt. Dort finden Sie in der Regel eine Paragraph-Anweisung vor, der den Text umschließt, in etwa so:
<p>Hier steht der auf den Textumfluss nachfolgende Text</p>
Dort müssen Sie das öffnende Paragraph-Tag um die unterstrichene Anweisung ergänzen:
<p style="clear: both;" >
Dieses Verfahren funktioniert auch bei Überschriften, z.B.: <h3 style="clear: both;" >