Grafiken

In diesem Kapitel lernt Ihr

Grundwissen über Grafiken

Es gibt nur zwei(drei) internettaugliche Grafikarten.

jpg-Dateien
gif-Dateien
(png-Dateien)

Die drei Arten unterscheiden sich nach der Anzahl der darzustellenden Farben und der Größe der Datei. Alle drei verwenden unterschiedliche Verfahren um die Grafiken zu komprimieren, da unkomprimierte Grafiken zu viel Speicherplatz verbrauchen, als dass man sie für das Internet verwenden könnte.

->gif-Format (Graphics Interchange Format)

Hier sind nur 256 Farben zulässig. Die Bilder werden verlustfrei komprimiert nach einem rechtlich geschützten Algorythmus. Das Problembei diesem Format besteht darin, dass es nicht von jedem Grafikprogramm unterstützt wird.

Was können gif-Dateien?

gif-Dateien können interlaced gespeichert werden, d.h. die datei wird nicht zeilenweise sondern schichtweise aufgebaut. Man kann also schon während dem Ladevorgeng der Site das Bild unscharf erkennen. Ist es vollständig geladen erscheint es natürlich scharf auf dem Bildschirm.
Man kann mehrere gif-Dateien hintereinander hängen und diese wie einen kleinen Film abspielen. Diese Art der gif-Dateien nennt man animierte Gifs.
Man kann eine transparente Farbe darstellen, d.h. man kann ein Bild so einfügen, dass hinter dem Bild der Hintergrund der Site zu sehen ist.

Normalerweise werden Buttons, Symbole, Dots, Bars und Cliparts so dargestellt.

->jpg-Format (Joint Pictures Expert Group)

Hier sind 16 Millionen Farben zulässig. Allerdings verläuft die Komrimierung nicht verlustfrei, d.h. dieses Format stellt die Bilder vielleicht nicht ganz so dar wie das Original.

In manchen Grafikprogrammen ist es möglich die Komprimierungsrate einzustellen. Je stärker man das Bild jedoch komprimiert, desto größer werden die Unterschiede zum Original.

Auch erlauben manche Grafikprogramme die Einstellung der DPI-Dichte (DPI = Dots per Inch, Punkte pro Inch). Die normale DPI-Dichte für das Internet liegt bei 72 DPI.

->png-Format (Portable Network Graphic)

Dieses Format versucht die Vorteile der beiden Anderen zu vereinen. Verlustfreie Komprimierung und 16 Millinen Farben.

Der Nachteil davon ist, dass ältere Browser dieses Format nicht unterstützen, sprich die Grafik wird nicht angezeigt.

Wie bindet man Grafiken in seine Homepage ein?

Das Tag mit dem Ihr Grafiken in Eure Homepage einbinden könnt lautet <img src="bild1.gif">.

img steht dabei für Image und src steht für source, also die Bildquelle. Die Wertangabe für die Grafikquelle ist der eigentliche Dateiname mit der Endung für das Format.

Auch hier gibt es wieder verschiedene Attribute, z.B. die für die Höhe und Breite des Bildes: <img src="bild1.gif" width="400" height="50">. Diese Angaben sind nicht zwingend nötig. Ich empfehle allerdings diese Angaben zu machen, da man dann das Design der Site schon erkennt bevor das Bild geladen ist. Ansonsten kann der Browser das Design erst festlegen wenn das Bild da ist. Das kann unter Umständen ziemlich komisch aussehen.

Beispiel:
<img src="bild2.gif" width="400" height="50">

Mit dem Attribut align kann man auch hier die Grafik positionieren:

<img src="bild2.gif" align="center" width="400" height="50">

Sollte das Bild nicht geladen werden können oder noch nicht angezeigt werden kann mit dem Attribut alt ein Alternativtext angezeigt werden:

<img src="bild2.gif" width="400" height="50" alt="Text">

Man kann auch rund um das Bild einen Bereich festlegen, der freigehalten wird. Die Angabe des Abstandes erfolgt hier mit der Einheit Pixel.

Mit vspace hält man einen Bereich links und rechts des Bildes frei, mit hspace über oder unter dem Bild:

<img src="bild2.gif" width="400" height="50" hspace="20" vspace="20">

Mit dem Attribut border kann man einen Rahmen um das Bild legen. Auch hier erfolgt die Wertangabe in Pixel:

<img src="bild2.gif" width="400" height="50" border="4">

Beachtet aber, dass die Farbe des Rahmens vom Browser festgelegt wird. Wollt Ihr also unbedingt einen Rahmen um das Bild haben so empfehle ich Euch dafür ein Grafikprogramm zu verwenden.

Wie fügt man ein Hintergrundbild ein?

Wie Ihr bestimmt wisst kann man auch Hintergrundbilder auf Websites einfügen. Dies erfordert jedoch je nach Größe des verwendetetn Bildes zum Teil recht lange Ladezeiten. Hat man allerdings ein kleines Hintergrundbild braucht man keine Angst habe, dass es nur einmal angezeigt wird und der Rest weiß ist. Es wird so oft angezeigt, dass der ganze Bildschirm davon gefüllt ist.

Das Tag für das Hintergrundbild lautet: <body background="bild.jpg">

Fügt einfach das entsprechende Tag in das Body-Tag ein. Macht kein neues Tag, so wie Ihr es oben seht. Das bringt nur den Browser durcheinander.

Wichtig: Dies funktioniert nur im begrenzten Rahmen bei Web-Gear! Wenn man die Seiten mit den Web-Gear-Editoren erstellt dann kann man keine Attribute in den Body-Tag einsetzen. Um dennoch ein Hintergrundbild zu bekommen sollte man mit CSS(Cascade Style Sheets) arbeiten. Infos dazu findet Ihr im Forum von Web-Gear.