Grafik

Themen: Linien
Benutzerdefinierte Linien
Hintergründe
Beispiel-Hintergründe
Bilder
Attribute zum <img>-Tag
Sensitive Bilder (Maps)
Maps machen richtig Arbeit!

Linien Eine horizontale Standardlinie (siehe oben) wird mit <hr ...> eingefügt. Dazu gibt es mehrere optionale Parameter, die auch in Kombination zulässig sind. Wenn man im Internet vertikale Linien sieht, sind es höchstwahrscheinlich die Fensterbegrenzungen von Frames.

ohne Schatten	`<hr noshade>`
Liniendicke n= 1 ... in Pixeln	`<hr size=n>`	(n=5)
Länge der Linie (in % der Bildbreite oder in Pixeln)	`<hr width=66%>` `<hr width=90>`
Ausrichtung	`<hr align = "center">` `<hr align = "left">` `<hr align = "right">`
Linienfarbe (nur vom IExplorer, nicht von Netscape angezeigt!)	`<hr color = farbe>`	(color = red)
kombinierte Angabe	`<hr noshade size="17" width="25%" align="right" color="black">`

Benutzerdefinierte Linien

Benutzerdefinierte Linien, die es in großer Fülle gibt, hier zwei "animierte", sind darüber hinaus wie normale Grafiken einzufügen. Bei ihnen gibt es ein Problem, die Breite ist ja in Pixeln vorgegeben. Stellt man solche Linien über die img-Attribute width und height (dazu mehr im nächsten Punkt "Bilder") auf 100% Erstreckung ein, dann verzerrt man die Grafik. Die proportionale Vergrößerung der Linie mittels der Pixel-Einstellungen ist die bessere Möglichkeit. Die Linie hängt dann bei kleineren Browserfenstern "über den Rand", d.h. die rechts liegenden Teile werden nicht mehr gezeigt.

Hintergründe

Für Hintergründe des Dokuments wie der Tabellen gibt es drei prinzipiell unterschiedliche Möglichkeiten der grafischen Gestaltung:

  Erstens kann man garnichts tun. Alle Inhalte werden auf strahlend weißer Fläche präsentiert, was nicht immer das Schlechteste ist.
  Zweitens kann dem Hintergrund eine Farbe verordnet werden. Vergeben wird diese Farbe im body-Tag mit bgcolor. Man hat einzutragen
<body bgcolor="farbname" ...> oder
<body bgcolor="farbcode"..>
Der Eintrag lautet also beispielsweise:
<body bgcolor="#3300aa"...>
  Drittens kann der Hintergrund "gekachelt" werden. Dazu muß eine Grafikdatei geladen werden, die völlig unabhängig von ihrer Größe den Fensterhintergrund in Kachelform bedeckt. Eingefügt wird wieder im body-Tag diesmal mit background="pfad/datname". Wenn die Hintergrunddatei im gleichen Ordner wie die Textdatei steht, entfällt der Pfad. Im anderen Falle muß auf diesen Eintrag noch folgen. Beispieleinträge also, wenn die Grafikdatei etwa "etwas.jpg" heißt und einmal im Ordner "bilder" liegt:
<body background="etwas.jpg"> oder
<body background="bilder/etwas.jpg">.

  Wie man zu Hintergrundgrafiken kommt? Es gibt (mindestens) drei Möglichkeiten:
  Selber machen. Ein geignetes Bild in einem der zulässigen Bildfpormate .jpg, .gif oder .? speichern. Fertig. Das Problem ist die Eignung. Da ja auf dem Bild Text gelesen werden soll, muß man sich über die zulässigen Kontraste Gedanken machen. Zweites Problem ist evtl. die Berandung. Das Bild soll die Grenzen der einzelnen Kachel möglichst nicht zeigen, es sei denn, es ist erwünscht. Drittens nehme man Rücksicht auf die spätere Ladezeit. Das Bild sollte möglichst klein sein und beim Speichern, so stark es die geforderte Qualität zuläßt, komprimiert werden.
  Vorhandene Sammlungen nutzen. Wer z.B. Microsoft Office benutzt, besitzt eine solche. Die Programm-CD dazu bietet noch Nachschlag. Man muß bloß einmal danach schauen.
  Klauen. Nein, die vorhandenen Angebote nutzen. Es gibt im Internet jede Menge freier Grafik-Angebote, wo man große Mengen von Hintergründen auf einen Schlag downloaden kann. Eine weitere Möglichkeit ist es, Hintergründe direkt aus Internetpräsentationen zu speichern. (Bei IExplorer und Netscape Navigator mit rechter Maustaste den Hintergrund anklicken. Wenn es einen gibt. Das dann erscheinende Fenster bietet auch die Option "Hintergrund speichern unter...")

Beispiel-Hintergründe Wie sehen typische Hintergrundbilder im ungekachelten Zustand aus? Hier zwei Beispiele: Das erste hat 13 kByte Größe, also schon eine ordentlich hohe Ladezeit, das zweite hat nur 2 kByte.

Bilder

Es gibt drei zulässige Grafikformate für die Anzeige in Browsern.

JPEG (Joint Photografic Expert Group), in Windows meist mit der Kennung ".jpg", erlaubt die Einstellung einer Kompressionsrate. Damit kann man für die gewünschte Bildgröße bei ausreichender Qualität die Dateigröße minimieren. JPEG wird meist für fotorealistische Darstellungen verwendet.

GIF (Global Interchange Format)-Dateien lassen nur weniger Farben zu und sind besser geeignet für grafische Elemente oder einfache Bilder. GIF's lassen transparente Hintergründe sowie Animation zu. Die Erzeugung von solchen Effekten setzt entsprechende Software voraus.

PNG (Portable Network grafic) soll alle Vorteile der beiden anderen Formate in sich vereinen.

Es gibt wie für Linien und Hintergründe jede Menge Sammlungen, Kauf- oder auch freie Angebote. Bilder lassen sich -wieder mit der rechten Maustaste- auch aus dem Internet speichern. Erwünscht ist natürlich besonders die eigene Bemühung, das eigene Foto oder die selbst gestaltete Animation. Bei der Umwandlung von Bildformaten, die evtl. die Scanner-Software nicht beherrscht, helfen evtl. Shareware-Tools, wie etwa Irfan-View, das ich ebenfalls zum (Download: Irfan-View 400kByte) anbiete.
Bilder werden mit dem img-Tag (von "image") eingebunden. Dazu gehören einige Attribute, die unterschiedlich wichtig sind. Es ist eigentlich zu empfehlen, Bilder mit Hilfe eines Editors einzufügen. Der setzt nämlich die Attribute height und width auf die erforderlichen Pixelwerte, damit das Bild in Originalgröße gezeigt wird. Man kann diese Werte zwar willkürlich verändern. Das ist aber nicht ratsam, weil entweder die Bilddatei größer ist als nötig, oder die Qualität leidet.

Attribute zum <img>-Tag

`align="top middle bottom left right"`	Ausrichtung der Grafik relativ zum Text
`alt="ersatztext"`	Ersatztext, der anstelle der Grafik gezeigt wird.
`border=n`	Rahmenbreite, n = 0 kein Rahmen
`height=n`	Höhe des reservierten Platzes in Pixeln
`hspace=n`	horizontaler Abstand zum umfliessenden Text in Pixeln
`lowscr="URL"`	Grafik niedriger Auflösung zur Voransicht
`src="url"`	Beispiel scr = "bilder/ich1.jpg"
`vspace=n`	vertikaler Abstand zum umfliessenden Text in Pixeln
`vwidth=n`	Breite des reservierten Platzes in Pixeln

Da das Laden von Grafikdateien u. U. sehr lange dauert, gibt es eine ganze Reihe von Maßnahmen, den Nutzer trotzdem nicht mehr als nötig zu ärgern.

Die Angabe von Höhe und Breite der Grafik reserviert den Grafikplatz schon beim Laden des Textes, was Zeitvorteil bringt. Es sollten übrigens immer die wirklichen Bildabmessungen benutzt werden. Veränderungen sind zwar möglich, führen immer zu Verlusten bei der Bildqualität.

Das alt-Tag ermöglicht die Ankündigung, bevor das Bild erscheint bzw. er wird bei auf dem Bild verweilender Maus angezeigt.

Der Navigator läßt es zu, daß eine niedriger aufgelöste Version des Bildes zuerst geladen wird, damit der Nutzer schon mal etwas sieht. Dazu dient das lowscr-Tag. Nachteil des Verfahrens ist, daß nun zwei Bilddateien geladen werden müssen, was die Gesamtzeit vergrößert.

Wenn GIF-Bilder gespeichert werden, wird u.U. nach Interlacing gefragt. Wählt man diese Möglichkeit, dann wird beim späteren Laden des Bildes zunächst nur jede vierte Bildzeile gezeigt und danach erst das Bild komplettiert.

Sensitive Bilder Man nennt eine Grafik, in der Details als Link dienen, eine verweissensitive Grafik. Über abgegrenzten Bereichen der Grafik verändert sich beim Überfahren mit der Maus der Cursor und beim Klicken wird ein Link ausgeführt.
Um eine solche Grafik anzulegen, werden zwei Tags, <map> und <area> benötigt. Die Anlage erfordert mehrere Schritte:
Zunächst wird eine verweissensitive Grafik als Teil der Seite definiert. Diese Ankündigung muß im Body-Teil des Dokuments stehen, ist aber nicht an den Ort gebunden, an dem die Grafik erscheinen soll. Die Definition wird mit <map name="meinbild"> eingeleitet. Der Name ist frei vergebbar und muß zulässige Zeichen enthalten. Auf das öffnende <map>-Tag folgt nun die Definition der empfindlichen (sensitiven) Bereiche. Dazu dienen jeweils <area>-Einträge. In ihnen werden die Bildbereiche definiert, die später empfindlich sein sollen. Als Attribute sind anzugeben "shape = ... " (die Form des Bereiches) mit den zulässigen Werten für shape, welche die Tabelle zeigt. Es folgen die Koordinatenangaben mit "coords = ...", die abhängig von der Wahl von shape sind. Alle Koordinatenangaben beziehen sich auf die linke obere Ecke des Bildes und geben die senkrechten (y) und waagerechten (x) Abstände von dieser Ecke in Pixeln an. Schließlich wird noch mit "href = ..." wie üblich die Adresse der anschließend zu ladenden Seite angegeben.

Maps machen richtig Arbeit!

shape	coords	Bedeutung
`rect`	`x1,y1,x2,y2`	Rechteck, obere linke und untere rechte Ecke
`circle`	`x,y,r`	Kreis, Mittelpunkt und Radius
`poly`	`x1,y1,...,xn,yn`	Vieleck, Koordinaten aller Ecken
`default`		alle Flächen, die nicht belegt sind

  Wenn alle <area>-Einträge getätigt sind, wird die <map>-Datei mit dem schließenden Tag </map> geschlossen.
  Der letzte Schritt betrifft nun noch das Einfügen des Bildes selbst. Es wird wie üblich dort in den Text eingeordnet, wo es erscheinen soll. Dazu wird das <img>-Tag genutzt. Als zusätzlichen Eintrag erhält es nun außer "src = ..." das Attribut usemap = "#meinbild". Damit wird der Bezug zur Map-Datei hergestellt.
  Da die Anlage der sensitiven Flächen von Hand sehr umständlich ist, habe ich ein Tool für die Code-Generierung bereitgestellt (Download: MapTool).

Aufrufbeispiel

Abschließend ein Beispielaufruf:

Map-Datei
<map name="meinbild">
   <area shape=rect coords="1,1,30,30" href="seite1.htm">
   <area shape=circle coords="100,100,25" href="seite2.htm">
   <area shape=poly coords="150,150,200,200,150,25" href="seite2.htm">
</map>
Aufruf
<img src="grafikx.gif" usemap="#meinbild">