Wenn Text und Bild zu einer Einheit verschmelzen, wächst die Bereitschaft des Lesers längere Dokumente zu lesen. Was vorteilhaft aussieht, garantiert zwar keinen Lesegenuß, erhöht aber die Bereitschaft, sich damit auseinanderzusetzen.
Die einfachste Möglichkeit, Text und Bild zu verbinden besteht darin, eine Grafik zwischen zwei Textblöcken zu platzieren. Das wirkt nicht unbedingt elegant und nutzt den ohnehin knappen Platz auf dem Monitor nicht optimal. Noch auffälliger wird das, wenn eine Bilderklärung (Legende) dazukommen soll.
Es bietet sich an, mit einem umfließenden Text zu arbeiten, außerdem sollte sich der Text der Legende vom Fließtext unterschieden. Das lässt sich mit Farben, Größen und anderen Formatierungen leicht erreichen.
Legende : Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Quellcode:
<p>Fließtext</p>
<p><img src="bild.gif" width="" height=""
align="left" hspace="8" vspace="0"><b><font
color="#000066">Legende</font></b><font color="#000066">:
Fließtext</p>
Überschneidungen
Stylesheets bieten weitere Möglichkeiten. So kann man geschickt für Überschneidungen in der Fläche zu sorgen. In unserem Beispiel wurde der Hintergrund des Legendentextes mit einem dunkleren Farbton unterlegt. Da die Grafik diesen Bereich schneidet, wirkt das Bild freigestellt. Ein Effekt, der sich mit Tabellen kaum erzielen lässt.
Legende: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Mit hspace=““ und vspace=““ kann die Position des Bildes horizontal oder vertikal exakt angepasst werden. Ein verblüffendes Ergebnis erhält man, wenn mit freigestellten Grafiken gearbeitet wird.
Der Quellcode
<p style="background-color : #B2B2B2; font-size : 75%; text-align
: left; border: 0px"><img src="bild.gif" width="150"
height="200" align="left" hspace="8" vspace="8"><b>Legende</b>:
Text</p>
Tabellen
Die von Dr. Web bevorzugte Methode arbeitet mit Tabellen, sie eignet sich eher für breite Sreenshots, die mit einer vergleichsweise kurzen Legende auskommen.
|
|
|
Quellcode
<table border="0" cellspacing="0" cellpadding="0"
width="152">
<tr><td><img src="bild.gif" width="00"
height="00"></td></tr>
<tr bgcolor="#F0F0F0"><td>
<table width="100%" border="0" cellspacing="0"
cellpadding="6"><tr><td><span class="leg">Legende:</span></td></tr>
</table></td></tr></table>
Eine Variante stellt dieses Design dar. Es kommt eine zweispaltige Tabelle zum Einsatz. Die linke Spalte nimmt die Legende auf (Textausrichtung unten und rechts), die rechte Spalte das Bild. Der Abstand zwischen den beiden Spalten kann mit hspace=““ geregelt werden.
Legende: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod |
|
Der Quellcode:
<table border="0" cellspacing="0" cellpadding="0">
<tr><td width="120" valign="bottom" align="right">
<span class="leg"><font color="#000066"><b>Legende</b>
</font></span></td><td><img src="bild.gif"
width="" height="" hspace="14" vspace="0"
align="right"></td></tr></table>
Wer ein wenig mit Formen und Möglichkeiten experimentiert, kann schnell zu individuellen Lösungen gelangen. Zum Wohle eines attraktiven, lesbaren und hoffentlich interessanten Textes.
