SELFHTML/Navigationshilfen Grafik| SELFHTML/Navigationshilfen Grafik |
Anzeigebeispiel: Typische Buttons
Buttons werden auf Web-Seiten gerne verwendet, um Verweise grafisch und attraktiv darzustellen. Achten Sie dabei jedoch immer auf die gesamte zu ladende Datenmenge. Bei einem halben Dutzend Verweisen sind kleine grafische Buttons durchaus akzeptabel, nicht aber bei Dutzenden von Verweisen auf einer Seite.
Näheres zum Einbinden in HTML wird im Abschnitt 
Grafiken als Verweise beschrieben. Verwenden Sie bei mehreren Buttons auf einer Web-Seite möglichst eine einheitliche Farbpalette!
Das typische HTML-Konstrukt für anklickbare Verweis-Buttons lautet:
<a href="datei.html"> <img src="button.gif" width="100" height="25" alt="Button" border="0"> </a> |
  |
Anzeigebeispiel: Typische Dots
Nur Text am Bildschirm ist langweilig und ermüdend. Das Auge sucht nach Augenweiden. Mit kleinen, farbigen Punkten, Quadraten, Dreiecken und informellen Flecken, die aufgrund ihrer Größe nur wenig Speicher brauchen, können Sie textlastige Information augenfreundlich unterstützen. Wichtig ist hierbei zu beachten, dass der Leser dazu neigt, den Dots irgendeine Bedeutung zuzuordnen, z.B. "wo dieser blaue Punkt steht, folgt ein Produktname". Verwenden Sie Dots daher so, dass diese eine nachvollziehbare Bedeutung haben. Verwenden Sie nicht lauter unterschiedliche Dots auf einer Web-Seite, sondern wiederholen Sie die gleichen Dots mehrmals pro Web-Seite. Das ist nicht langweilig, sondern sorgt für ein sauberes Erscheinungsbild und spart beim Anwender Ladezeit, da die betreffende Grafik nur einmal geladen werden muss.
Dots sind zum Beispiel in Aufzählungslisten sinnvoll und lassen sich mit Hilfe der CSS-Eigenschaft list-style-image sogar ganz elegant einbinden. Ein typisches HTML-Konstrukt sieht dann etwa so aus:
<ul style="list-style-image:url(dot.gif)"> <li>Listenpunkt</li> <li>anderer Listenpunkt</li> </ul> |
|
|
Anzeigebeispiel: Typische Bars
HTML bietet zwar die Möglichkeit an, Trennlinien in den Text einzufügen, um Information übersichtlicher zu strukturieren. Wer auf seinen Web-Seiten jedoch etwas Besonderes bieten will, verwendet grafische Linien. Ähnlich wie Dots benötigen Bars wenig Speicher. Auch bei Bars gilt: verwenden Sie nicht lauter unterschiedliche Bars auf einer Web-Seite, sondern wiederholen Sie die gleichen Bars mehrmals pro Web-Seite. Das ist nicht langweilig, sondern sorgt für ein sauberes Erscheinungsbild und spart beim Anwender Ladezeit, da die betreffende Grafik nur einmal geladen werden muss.
Bei sauber kodiertem HTML sollten Grafiken innerhalb anderer Blockelemente notiert werden. Ein typisches HTML-Konstrukt zum Notieren einer Bar, das mit den CSS-Eigenschaften margin-top und margin-bottom auch gleich Abstände zum vorhergehenden und nachfolgenden Inhalt definiert, könnte etwa so aussehen:
<div style="margin-top:20px; margin-bottom:20px;"> <img src="bar.gif" width="600" height="5" border="0" alt="Trennlinie"></div> |
|
|
Anzeigebeispiel: Typische Wallpapers
Hintergrundbilder (Wallpapers) sind seit ihrer Einführung durch Netscape zu einem Dauerrenner im Web geworden. Wenn Sie nichts anderes angeben, wird ein Hintergrundbild so oft aneinandergereiht dargestellt, wie es erforderlich ist (Tapetenmuster- oder Kacheleffekt). Wenn die verwendete Grafik an den Seiten nicht einheitlich aussieht, entstehen sichtbare Kacheln. Das kann in manchen Fällen gewollt sein, in anderen aber zeugt es auch von Dilettantismus.
Es gibt mehrere Typen von Hintergrundbildern. Die klassischen und meistverwendeten stellen irgendeine informelle Struktur dar und bewirken auf diese Weise z.B. den visuellen Effekt einer faserigen, hölzernen, metallenen oder papiernen Oberfläche. Andere Hintergrundbilder stellen durch klare Farbflächen sichtbare Kacheln dar und bewirken dann im Kacheleffekt geometrische Muster. Und dann gibt es noch Hintergrundbilder vom Typ "Browser-Überlistung". Das sind Grafiken, die extrem breit sind (z.B. 3000 Pixel), also bei üblichen Fensterbreiten im Browser nicht mehrmals nebeneinander angezeigt werden. In der Höhe haben sie dagegen oft nur 1 bis 5 Pixel. Die ersten 200 Pixel dieses langen Streifens enthalten dann beispielsweise ein Rechteck in einer bestimmten Farbe, während der gesamte Rest der Grafik eine andere Farbe hat. Im Browserfenster entsteht dann links ein Farbstreifen, über den sich beispielsweise Buttons zur Navigation platzieren lassen.
So pfiffig die Idee der Hintergrundbilder ist, so viel kann man dabei auch verkehrt machen. Bei allzu auffälligen Hintergrundbildern wird der Anwender zu sehr vom Vordergrund, dem eigentlichen Inhalt, abgelenkt. In vielen Negativbeispielen im Web leidet auch die Lesbarkeit der Textinformation unter dem Hintergrundbild.
Generell gilt: wenn Sie auf einer Web-Seite wichtigen Text anbieten wollen, sollte ein Hintergrund-Wallpaper angenehm, aber unauffällig sein. Nur bei besonderen grafischen Effekten ist der Einsatz einer "aufregenden" Hintergrundgrafik gerechtfertigt.
Um den gesamten Inhalt des Browser-Anzeigefensters mit einer Hintergrundgrafik zu unterlegen, wird die Hintergrundgrafik im einleitenden <body>-Tag der HTML-Datei eingebunden:
<body background="hintergrund.jpg" text="#000000"> |
Mit Hilfe der CSS-Eigenschaft background-image ist es außerdem möglich, auch anderen, untergeordneten HTML-Elementen einen Wallpaper-Effekt zuzuordnen. Im Beispiel eines Textabsatzes könnte das so aussehen:
<p style="background-image:url(hintergrund.jpg)">Text<p> |
|
|
Anzeigebeispiel: Typische Symbole
Von allen Grafiksorten ist dies wohl die inhaltlich wichtigste. Vor allem bei Textsorten wie technischer Dokumentation oder wissenschaftlichen Texten ist es dem Autor schon fast als Faulheit oder Ignoranz anzukreiden, wenn er auf Symbole verzichtet. Denn gerade beim Online-Lesen von Texten lesen die meisten Anwender quer, d.h. sie lesen nicht gemütlich Satz für Satz, sondern suchen ständig nach Orientierungsmöglichkeiten, um schnell zu der gewünschten Information zu gelangen. Hierbei sind Symbole eine hervorragende Orientierungshilfe.
Symbole sollten sich an geltenden Standards orientieren. Das ist kein Ausdruck von Phantasielosigkeit, sondern erleichtert die intuitive Orientierung. Eine Grafik beispielsweise, die eine kunstvolle Ziffer "8" enthält und dahinter die drei Buchstaben "ung", erschließt sich eben nicht so schnell wie ein Warndreieck mit Ausrufezeichen oder ein erhobener Zeigefinger. Symbole sollten auf den Anwender so wirken, dass er keinen Augenblick über die Bedeutung der Grafik im Zweifel ist.
Symbolgrafiken können in HTML an ganz verschiedenen Stellen vorkommen, beispielsweise vor Verweisen, um Art und Verzweisziel zu charakterisieren, oder vor Absätzen, die Text eines bestimmten Typs enthalten, z.B. eine Warnung, eine Zusatzinfo, ein Hinweis auf andere Information oder dergleichen.
|
|
Anzeigebeispiel: Typische Cliparts
Cliparts sind aussagekräftige, oft humorvolle Grafiken, die größere Texte ansprechend auflockern können. Wichtig ist es, Cliparts so einzusetzen, dass sie zu der umgebenden Textinformation eine sinnvolle Ergänzung bilden. Idealerweise bringt eine Clipart-Grafik genau das auf den Punkt, was tausend Worte nicht zu sagen vermögen.
Manche Web-Seiten sind vollgepfropft mit irgendwo wahllos "besorgten", fertigen Cliparts. Dabei werden meist zwei schwere Fehler begangen: erstens sind zu viele verschiedene Grafiken an allen Ecken und Enden schlecht, weil jede einzelne Aufmerksamkeit erzwingt und beim Betrachter daher ein spontanes Gefühl von Stress, Überforderung und Orientierungslosigkeit entsteht. Und zweitens passen die Grafiken oft in Farbe, Größe und Stil nicht zueinander. Alles deutet darauf hin, dass da jemand wahllos eine der zahlreichen auf dem Markt erhältlichen CD-ROMs mit Clipart-Sammlungen ausgeschlachtet hat, aber ohne jedes Gespür für grafische Harmonie. Cliparts machen sich dann gut, wenn sie ein Gegengewicht zu vorhandenen Texten darstellen und einen nachvollziehbaren Bezug zum Text herstellen. Ideal sind Clipart-Serien, wo beispielsweise eine lustige Figur verschiedene Posen einnimmt und damit einen Textbezug herstellt.
Um Cliparts in HTML neben Text anzuordnen, bieten sich zwei Möglichkeiten an. Die eine ist, den Text um die Grafik fließen zu lassen. Das folgende typische Beispiel richtet eine Grafik rechts neben dem Text eines Absatzes aus, und der Text fließt um die Grafik:
<p><img src="clipart.gif" width="200" height="250" alt="Clipart" border="0" align="right" hspace="10" vspace="5"> Text des Absatzes</p> |
Die andere Möglichkeit besteht darin, Text und Grafik mit Hilfe einer blinden Tabelle zu positionieren. Das folgende Beispiel zeigt das Prinzip:
<table border="0" cellspacing="10"> <tr><td valign="top"> <img src="clipart.gif" width="200" height="250" alt="Clipart" border="0"> </td><td valign="top"> Text links neben der Grafik </td></tr></table> |
|
|
Anzeigebeispiel: Typische Thumbnails
Leider stehen nicht allen Besuchern von Web-Seiten solche Bandbreiten der Datenübertragung zur Verfügung, die es erlauben, "mal eben" eine wunderschöne, aber speicherfressende Grafik am Bildschirm anzuzeigen. Wenn Sie großformatige Fotos oder Landkarten auf Ihren Web-Seiten anbieten, sollten Sie diese nicht "ohne Vorwarnung" in Seiten einbinden. Stattdessen sollten Sie eine stark verkleinerte Version der betreffenden Grafik einbinden. Die verkleinerte Version sollte gerade so groß sein, dass der Anwender entscheiden kann, ob er die Grafik in voller Größe betrachten möchte oder nicht. Die verkleinerte Grafik sollte anklickbar sein und beim Anklicken die große Grafik aufrufen, z.B. in einem neuen Anzeigefenster. Ein typisches HTML-Konstrukt dafür ist:
<a href="bild.jpg" target="_blank"> <img src="minibild.jpg" width="100" height="80" alt="Vorschau" border="1"> </a> |
|
|
Anzeigebeispiel: Typische Fotos
Viel zu viele Web-Seiten bieten viel zu wenig Fotos an. Dabei sind Menschen, also Besucher von Web-Seiten, doch von Natur aus so neugierig und freuen sich immer, wenn sie Fotos zu sehen bekommen. Im Zeitalter der preiswert gewordenen Digitalkameras und Scanner ist es auch wirklich kein großes Problem mehr, eigene Aufnahmen als Pixelgrafiken in den Computer zu bekommen. Was Sie dann nur noch brauchen, ist ein Grafikprogramm, mit dem Sie die Bilder gegebenenfalls auf eine web-gerechte Größe bringen können, und mit dem Sie solche Bilder in einem geeigneten Grafik-Format wie JPEG abspeichern können. Bei den meisten Scannern und Digitalkameras gehören solche Programm als Zugabe zum Produkt.
Fotos auf Web-Seiten brauchen auch gar nicht sonderlich großformatig sein. Im Gegenteil - das bricht meistens nur das Seitenlayout auf, sorgt für lange Ladezeiten beim Anwender und sieht meistens nicht mal besonders gut aus. Bilder von Digitalkameras, die mehrere "Megapixel" Auflösung anbieten, sollten also erst mal in der Größe reduziert werden. Wichtig ist dabei, dass volle 16,7 Mio. Farben eingestellt sind. Gute Grafikprogramme besitzen ausgereifte Algorithmen, so dass eine Größenreduzierung dem Erscheinungsbild des Fotos keine große Gewalt antut. Wichtig ist bei Fotos, dass die Größenreduktion über die Angabe von gewünschten Pixeln für Breite und Höhe erfolgt, nicht über Angaben aus dem Print-Bereich, wie Zentimeter oder Zoll. Für ansprechende Bilder auf Web-Seiten reichen meist 200 bis 400 Pixel für die kürzere Seite und 300 bis 600 Pixel für die breitere Seite. Dabei entstehen bei JPEG und mittlerer Kompression auch akzeptable Dateigrößen, die in der Regel unter 100 Kilobyte liegen.
|
|
HTML-Puristen bekommen einen nervösen Hautausschlag, wenn sie von "blinden Pixeln" hören. Aber besser als diesen Trick totzuschweigen ist es, ihn zu verraten und darauf hinzuweisen, warum und wieso er nicht selten eingesetzt wird, und welche Probleme damit verbunden sein können.
Der blinde Pixel ist eine Erfindung von David Siegel, einem der frühen Gurus des Web-Designs. Verärgert über das Verhalten bei Web-Browsern, Tabellen nicht mit den in HTML notierten Attributwerten für width= und height= darzustellen, wenn der Zelleninhalt schmaler ist und Nachbarzellen relativ viel Inhalt haben, erzwang er den gewünschten Raum einfach mit Hilfe einer unsichtbaren Grafik.
Der Trick besteht aus zwei Teilen. Im ersten Teil wird eine sehr kleine GIF-Grafik erzeugt, die überhaupt nichts darstellt, sondern nur aus einer einfarbigen Fläche besteht. Es ist besser, wenn die Grafik nicht wirklich nur 1 mal 1 Pixel groß ist, sondern ca. 5 mal 5 Pixel. So werden Probleme bei einigen Browsern vermieden. Die eine Farbe, aus der die GIF-Grafik besteht, wird sodann als transparent definiert. Der Effekt ist, dass die Grafik Raum beansprucht, aber nicht sichtbar ist. Darunter liegende Farben, etwa definierte Hintergrundfarben von Tabellenzellen, in denen die unsichtbare Grafik eingebunden wird, scheinen durch.
Der zweite Teil des Tricks besteht in der Möglichkeit, beim Einbinden der unsichtbaren Grafik die Attribute width= und height= im <img>-Tag auf beliebige gewünschte Werte zu setzen. Die Grafik wird dann zwar vom Browser verzerrt, aber da sie ja unsichtbar ist, sieht man auch nichts von der Verzerrung.
So lassen sich mit der einen Grafik, die nur ein paar dutzend Byte groß ist, beliebige horizontale und vertikale Räume und Abstände erzwingen.
Der folgende HTML-Ausschnitt zeigt eine typische Anwendung. Die Grafik wird in zwei nebeneinander liegenden Tabellenzellen gleich zu Beginn referenziert. Ihre Höhe wird in beiden Referenzen auf 1 Pixel verzerrt, und ihre Breite auf den jeweils gewünschten Wert. Auf diese Weise erhält die Tabelle zwei Spalten mit unumstößlichen Mindestbreiten:
<table border="0" cellspacing="0" cellpadding="0"> <tr><td valign="top"> <img src="pixel.gif" width="200" height="1" alt="" border="0"> Hier folgt der Inhalt der ersten Spalte, die mindestens 200 Pixel breit ist. </td><td valign="top"> <img src="pixel.gif" width="400" height="1" alt="" border="0"> Hier folgt der Inhalt der zweiten Spalte, die mindestens 400 Pixel breit ist. </td></tr></table> |
Unsauber ist die Methode mit dem blinden Pixel insofern, als hässliche "broken-image"-Symbole angezeigt werden, wenn die Grafik beim Übertragen der Web-Seite an den Browser nicht übertragen wird, z.B. weil der Anwender den Ladevorgang abbricht oder das Anzeigen von Grafiken abgeschaltet hat. Darüber hinaus wird es von Puristen als Zweckentfremdung von Grafik und HTML-Eigenschaften empfunden, solche Mittel einzusetzen. Und schließlich ist das Erzwingen fester Breiten ohnehin zweifelhaft, da der Anwender dann beispielsweise bei der Anzeige in nicht genügend großen Browserfenstern gezwungen ist, quer zu scrollen, was nicht besonders anwenderfreundlich ist. Andererseits ist der blinde Pixel ein Notbehelf, um fehlende Möglichkeiten in HTML und CSS auszugleichen. Mittlerweile sind zwar bestimmte CSS-Eigenschaften zur Positionierung von Elementen, die den Zweck des blinden Pixels ebenfalls erfüllen, verfügbar, aber nur in neueren Browsern.
|
|
Grafiken dienen beim Web-Design nicht selten dazu, Dinge zu realisieren, die mit HTML und CSS (noch) nicht möglich sind. Dazu gehören beispielsweise Rundbögen. Solche grafischen Elemente empfindet der unbedarfte Betrachter einer Web-Seite nicht als Grafiken "auf der Web-Seite", sondern als Basisbestandteile der Formgebung. Ähnlich wie bei blinden Pixeln fallen solche Grafiken dann negativ auf, wenn sie beim Laden der Seite nicht übertragen werden und ein "broken-image" in der Anzeige erzeugen.
Eingesetzt werden solche grafischen Bestandteile meistens in blinden Tabellen oder absolut positionierten Elementen. Durch nahtloses Aneinanderfügen von Tabellenzellen oder positionierten Elementen, die als Inhalt eine entsprechende Grafik haben, lassen sich solche Layout-Effekte wie die im Anzeigebeispiel erzielen. Bei Verwendung von blinden Tabellen für solche Effekte ist es wichtig, dass die Werte für die Attribute border=, cellspacing= und cellpadding= explizit auf 0 gesetzt werden. Ein typisches HTML-Konstrukt sieht etwa so aus:
<table border="0" cellspacing="0" cellpadding="0"><tr> <td><img src="rundbogen.gif" width="100" height="100" alt="" border="0"></td> <td><img src="balken_oben.gif" width="500" height="100" alt="" border="0"></td> </tr><tr> <td><img src="balken_links.gif" width="100" height="500" alt="" border="0"></td> <td><!-- Inhalt wie Text, andere Grafiken - oft auch "innere Tabellen" usw. --></td> </tr></table> |
|
| |
 |
Techniken und Begriffe der Bildbearbeitung
|
 |
Grafikformate für Web-Seiten
|
| SELFHTML/Navigationshilfen Grafik |
© 2001 
selfhtml@teamone.de
