Grafiken

Auf Webseiten sind folgende typische Grafiken in unterschiedlicher Verwendung zu finden:

• Button - Schaltflächen
• Wallpaper - Hintertgrundbilder
• Bars - Trennleisten/Trennlinien
• Dots - Aufzählungspunkte
• Symbole - Textergänzungen
• Cliparts - Illustrationen
• Thumbnails - Vorschaugraphiken
Das Einbinden von Grafiken in HTML-Seiten sollte so erfolgen, dass

• der Name der Grafik
• die Größe der Grafik
• der Alternativtext
• der Abstand der Grafik zur Umgebung
angegeben werden.

Diese Angaben dienen dem optimalen Laden der Datei. Ist z.B. die Größe der Grafik nicht definiert, wird diese im Originalzustand geladen und kann den Aufbau der Seite stark verzögern. In besonderen Fällen ist es zweckmäßig, für den optimalen Bildaufbau zwei Grafiken zu laden(1. Grafik mit geringer Farbtiefe, 2. Grafik mit optimaler Farbtiefe).

Es können auf HTML-Seiten nur Bilder vom Typ .gif, .jpg, .png verwendet werden.

Beseitigung von "Treppeneffekten":

Die Bearbeitung der Grafik hat in einem entsprechenden Grafikprogramm zu erfolgen. Besonders bei Schriftzügen innerhalb von Grafiken ist Anti-Aliasing ein Mittel für mehr Professionalität. Aber auch bei anderen Objekten mit Schrägen oder Kurven bietet sich Anti-Aliasing an, um die Ränder weichzuzeichnen und sichtbare Pixeltreppen zu vermeiden.

Grafiken mit transparentem Hintergrund:

Das Dateiformat GIF, in dem die Grafiken fürs WWW vorliegen, sieht die Möglichkeit vor, eine Farbe (hier: die Farbe für den Hintergrund) als unsichtbar zu definieren. Dies ist jedoch erst mit dem 89er-Format von GIF möglich. Im älteren, 87er Format ist das noch nicht möglich.
Bei der Auswahl der transparenten Farbe ist bei vielen Grafikprogrammen der sog. Farbindex (die Farbnummer) anzugeben, die aus dem Farbpool auszulesen ist. Es genügt nicht, z.B. einfach ein grün anzugeben, um diese Farbe transparent zu machen.

Möglichkeiten des Einbindens einer Grafik:

Quellcode	Wirkungsweise
<img src="URL">	Einbinden einer Grafik - allgemein
<img src="URL" alt="Text">	alternativer Bildtext
<img src="URL" width="x" height="x">	Breite und Höhe der Grafik festlegen
<img src="URL" border="x">	Rahmen um die Grafik
<img src="URL" name="Bild1">	Name des Grafik
<img src="URL" hspace="x" vspace="x">	Abstand des Bildes zu seiner Umgebung
<A href="URL"><img src="URL"></A>	Grafik als Verweis
<img src="URL" align="texttop" | "absmiddle" | "absbottom" | "baseline">	Ausrichtung des nachfolgenden Textes
<img src="URL" align="left" | "right">	Text um Grafik fließen lassen


Diese Wirkungen können bei der Einbindung von Grafiken sinnvoll kombiniert werden.

Beispiel

Sensitive Grafiken

Sensitive Grafiken werden eingesetzt, wenn von Teilen dieser Grafiken verschiedene Links aktiviert werden sollen.

Voraussetzung für ein einwandfreies Funktionieren ist das Vorhandensein einer fertigen Web-Seite, die die Grafiken in Originalgröße enthält. Die sensitiven Bereiche werden wie eine "Kontaktfolie" über die Bildbereiche gelegt und mit den erforderlichem Links (href="URL") versehen.

Für das Erstellen dieser sensitiven Bereiche stehen komplexe Programmeditoren wie FrontPage, Dreamwaver,Homesite, aber auch einzelne Programme wie Mapedit zur Verfügung.

Vorgehensweise mit Mapedit:

1. Starten von Mapedit (map32.exe)
2. Auswahl der HTML-Seite, die diese Grafik enthält
3. Auswahl der Grafik auf dieser HTML-Seite
4. Mit [OK] Grafik in Mapedit öffnen
5. Auswahl der Form des Bildbereiches (Rechteck, Kreis, Polygon)
6. Markieren des ausgewählten Bildbreiches
7. RM - Eintragen des Ziel-"URL", optional auch Alternativtext
8. Wiederholung der Punkte 5 - 7
9. Datei speichern
• Der Quelltext wird automatisch in die HTML-Seite eingetragen
• Er befindet sich im map-Tag
10. HTML-Datei im Editor neu laden (ergänzter Quellcode ist sichtbar)

Anmerkung:

Die Koordinatenangabe wird wie folgt realisiert:

1. Rechteck: linke obere Ecke(w/s), rechte untere Ecke (w/s)
2. Kreis: Koordinaten des Mittelpunktes (w/s), Radius
3. Polygon: Koordinaten der Punkte (w/s) in der Reihenfolge ihrer Auswahl

Kopierschutz durch Blind-Gif's

Eigene Grafiken und Bilder, die ins Internet gestellt werden, können mit einem einfachen Kopierschutz versehen werden. Üblicherweise können Bilder einer Web-Seite per rechten Mausclick auf dem lokalen Rechner gespeichert werden. Das soll mit Blind-Gif's verhindert werden.
Vorgehensweise:
• für jedes zu schützende Bild wird eine einzeilige, einspaltige Tabelle erstellt (in den Abmaßen des Bildes)
• das Bild wird als Hintergrundbild in die Tabelle eingebunden
• in der Größe des Bildes wird in die Tabellenzelle ein Blind-Gif gespeichert

Quelltext:

<table background="../images/Bild1.jpg"> <tr> <td><img src="../images/Blind.gif" width="230" height="120"> </td> </tr> </table>
 
Anmerkung: Die Größe des zu schützenden Bildes sei 230 x 120 px!