| HTML-Dateien selbst erstellen
|  | Grundwissen Grafik

# Typische Grafiksorten für WWW-Seiten

Buttons (Schaltflächen)
Dots (Auflistungspunkte)
Bars (Trennleisten)
Wallpapers (Hintergrundbilder)
Symbole (Textergänzung oder Textersatz)
Cliparts (Illustrationen)
Thumbnails (Vorschau-Grafiken)
Grafiksammlungen im WWW

## Buttons (Schaltflächen)

Buttons werden auf WWW-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.

Der typische HTML-Befehl zum Einbinden solcher Verweis-Buttons lautet:

#### Beispiel:

    <a href="datei.html"><img src="button.gif" border=0></a>

Näheres hierzu im Kapitel Grafiken als Verweise. Verwenden Sie bei mehreren Buttons auf einer WWW-Seite möglichst eine einheitliche Farbpalette.

### Typische Buttons

## Dots (Auflistungspunkte)

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, daß der Leser dazu neigt, den Dots irgendeine Bedeutung zuzuordnen, z.B. "wo dieser blaue Punkt steht, folgt ein Produktname". Verwenden Sie Dots daher so, daß diese eine nachvollziehbare Bedeutung haben. Verwenden Sie nicht lauter unterschiedliche Dots auf einer WWW-Seite, sondern wiederholen Sie die gleichen Dots mehrmals pro WWW-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 muß.

Dots sind zum Beispiel in Überschriften sinnvoll. Der typische HTML-Befehl zur Einbindung lautet dabei:

#### Beispiel:

    <h2><img src="dot.gif" align=middle> Überschriftentext</h2>

Näheres hierzu im Kapitel Grafiken einbinden.

### Typische Dots

## Bars (Trennleisten)

HTML bietet zwar die Möglichkeit an, Trennlinien in den Text einzufügen, um Information übersichtlicher zu strukturieren. Wer auf seinen WWW-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 WWW-Seite, sondern wiederholen Sie die gleichen Bars mehrmals pro WWW-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 muß.

### Typische Bars

## Wallpapers (Hintergrundbilder)

Hintergrundbilder (Wallpapers) sind seit ihrer Einführung durch Netscape zu einem Dauerrenner im WWW geworden. Viele attraktive Web-Seiten benutzen Hintergrundbilder als Effekt. Doch so genial 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 WWW leidet auch die Lesbarkeit der Textinformation unter dem Hintergrundbild.

Generell gilt: wenn Sie auf einer WWW-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.

Der typische HTML-Befehl zum Einbinden von Wallpapers lautet:

#### Beispiel:

    <body background="datei.gif">

Näheres hierzu im Kapitel Hintergrundbilder (Wallpapers).

### Typische Wallpapers

## Symbole (Textergänzung oder Textersatz)

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. Symbole müssen auf den Anwender so wirken, daß er keinen Augenblick über die Bedeutung der Grafik im Zweifel ist.

### Typische Symbole

## Cliparts (Illustrationen)

Cliparts sind aussagekräftige, meistens humorvolle Grafiken, die größere Texte ansprechend auflockern können. Wichtig ist es, Cliparts so einzusetzen, daß 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.

### Typische Cliparts

## Thumbnails (Vorschau-Grafiken)

Leider lassen die heute üblichen Übertragungsmethoden im Internet noch nicht zu, "mal eben" eine wunderschöne, aber speicherfressende Grafik am Bildschirm anzuzeigen. Wenn Sie großformatige Fotos oder Landkarten auf Ihren WWW-Seiten anbieten, sollten Sie diese niemals direkt in die Seiten einbinden. Stattdessen sollten Sie eine stark verkleinerte Version der betreffenden Grafik einbinden. Die verkleinerte Version sollte gerade so groß sein, daß 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. Der typische HTML-Befehl hierzu lautet:

#### Beispiel:

    <a href="bild.jpg"><img src="minibild.gif"></a>

Viele gute Grafikprogramme erlauben das proportionale Verkleinern von Grafiken.

### Typische Thumbnail-Grafik

## Grafiksammlungen im WWW

Es gibt viele Grafiksammlungen im WWW, bei denen Sie Bilder zum Teil kostenlos downloaden können. Achten Sie jedoch in jedem Fall auf die von den Anbietern genannten Copyright-Bestimmungen. Hier eine Auswahl:

Backgrounds
Texture Land
Caboodles
ClipartCom
Barry's Clipart Server
FreeArt Cliparts
Cliparts als ZIP-Pakete (FTP-Verzeichnis)
The Clipart Universe
Web Graphics & Links Collection
Free Web Page Graphics
New World Creations

| Blättern: |
Farbtiefen und Farbpaletten |  |  | Animierte GIF-Grafiken

| HTML-Dateien selbst erstellen
|  | Grundwissen Grafik