Der Umgang mit Grafiken

Keine Einbettung von Bilddateien in das Dokument möglich

Selbstverständlich bestehen Internetseiten nicht nur aus Text, sondern auch aus Grafiken und Bildern. Anders als bei einer Textverarbeitung werden die Bilder aber nicht im Dokument selbst abgespeichert. Im Internetdokument ist im Hintergrund lediglich eine Anweisung, die besagt, dass an einer bestimmten Stelle im Dokument eine Bilddatei, die an einem bestimmten Ort abgelegt ist, dargestellt werden soll. Wenn Sie in ein Worddokument zwei Bilder einfügen, bleibt es folglich bei einer Textdatei; bei einem Internetdokument liegen hingegen insgesamt drei Dateien vor (die zwei Bilder und die Datei für die Internetseite). Um die Übersicht zu behalten und aus technischen Gründen sollten Sie alle Bilddateien, bevor Sie diese in das Internetdokument einfügen, im gleichen Ordner abspeichern, in welchem sich die dazugehörige Internetseite ebenfalls befindet.

Auf Grafikformate achten

Viele Webautoren nutzen Grafiken, um ihr Internetangebot visuell ansprechend zu gestalten. Sehr umfangreiche Bilddateien führen aber dazu, dass es sehr lange dauert, bis eine Internetseite komplett herunter geladen ist und vollständig betrachtet werden kann. Daher müssen Bilddateien vor dem Einfügen in das Webdokument optimiert werden, um eine möglichst gute Relation zwischen Bildqualität und Speicherplatzbedarf zu erzielen. Ein wichtiges Kriterium ist dabei die Wahl des richtigen Grafikformates für bestimmte Grafiken und Bilder.

Im Internet sind zwei Grafikformate gebräuchlich, die von jedem Browser abgespielt werden können. Jedes Format eignet sich für spezifische Arten von Bildern:

Das JPG-Format eignet sich für die Darstellung von Fotos und erzielt eine relativ große Auflösung dadurch, dass es beliebig viele Farben darstellen kann. Zudem ist es in der Lage, die Datei durch Bildkomprimierung schrumpfen zu lassen. Je höher der Komprimierungsfaktor, desto geringer ist allerdings die Qualität des Bildes.

Das GIF-Format kann maximal 256 Farben darstellen und eignet sich für großflächige Grafiken mit wenigen Farben, wie z.B. bei Schaltflächen und Graphiken.

Bei einem GIF-Bild kann die Hintergrundfarbe transparent eingestellt werden, so dass durch diese der Hintergrund hindurch sichtbar ist, womit sich schöne Effekte erzielen lassen.

Daneben gibt es noch die sogenannten animierten GIFs. Das sind mehrere Bildsequenzen, die in einer einzigen Datei abgespeichert wurden und hintereinander ablaufen, wodurch der Eindruck von Bewegung entsteht.

Exkurs: Grafiken mit dem PhotoEditor in das richtige Bildformat umwandeln

Nehmen wir an, Sie haben ein Bild eingescannt oder mit Ihrer Digitalkamera aufgenommen. Auf Ihrer Festplatte liegt es im Regelfall im sogenannten tif-Format vor. Dies ist nicht für die Verwendung im Internet geeignet, da viele Browser das Format nicht darstellen können und es zudem viel Speicherplatz benötigt. Sie müssen die Datei in ein geeignetes Format umwandeln. Da es sich um ein Foto handelt, sollten Sie das JPG-Format für die Umwandlung wählen.

Die Umwandlungsprozedur wird nachfolgend beispielhaft anhand des Programmes PhotoEditor dargestellt. Es ist Bestandteil des MS-Office-Paketes. Sie finden es im Regelfall, wenn Sie

1)    auf das Symbol „Start“ auf der Taskleiste klicken,

2)    dort den Eintrag „Programme“ wählen,

3)    dann „Microsoft Office Tools“ anklicken

und letztendlich „Microsoft Photoeditor“ auswählen und es öffnet sich das Programm

Um nun das gewünschte Bild, das bearbeitet werden soll, zu öffnen, klicken Sie auf das Symbol . Darauf öffnet sich das nachfolgende Fenster:

� Im Feld „Suchen in:“ können Sie den Ort angeben, an welchem sich Ihre Bilddatei befindet; z.B. einen bestimmten Ordner auf der Festplatte.

‚ Im darunter liegenden Fenster werden alle im Ordner befindlichen Dateien angezeigt. Markieren Sie hier durch einmaliges Anklicken das gewünschte Bild. Sind Sie sich nicht sicher, welche Datei das gewünschte Bild

beinhaltet, klicken Sie nach dem Markieren auf „Vorschau...“ und das Bild wird im Miniformat angezeigt.

ƒ Abschließend klicken Sie auf die Schaltfläche „Öffnen“ und das gewählte Bild wird geöffnet.

Um nun das Bild im gewünschten Format zu speichern, wählen Sie in der Menüleiste den Eintrag „Datei“ und darauf „Speichern unter...“, worauf sich das nachfolgende Fenster öffnet:

�Hier wählen Sie den Ort aus, an dem die neue Version des Bildes gespeichert werden soll; z.B. ein Ordner auf der Festplatte. Unter ‚ geben Sie einen geeigneten Namen für die neue Version des Bildes ein. Da es sich um ein Foto handelt, wählen Sie unter ƒals Dateityp „JPEG File Interchange-Format“.

Darauf Klicken Sie auf die Schaltfläche unter „,

 � Hier können Sie auswählen, ob das Bild in Farbe (True Color) oder als s/w Bild gespeichert werden soll.

Unter ‚ legen Sie die Speicherqualität mittels eines Schiebreglers fest. Dabei gilt, je höher die Speicherqualität, desto größer der Dateiumfang und um-

gekehrt.

Klicken Sie jetzt auf die Schaltfläche „Speichern“. Damit wird die neue Version des Bildes in dem von Ihnen zuvor gewählten Ort abgelegt. Leider zeigt das Programm nicht automatisch die neue Version des Bildes an, sondern noch immer das Ausgangsbild. Um Ihre veränderte Version betrachten zu können, müssen Sie diese zuvor erst wieder mit dem Photo Editor öffnen.

Gefällt Ihnen das Resultat nicht, müssen Sie weitere Optimierungsläufe durchführen. Benutzen Sie für erneute Veränderungen nicht die bereits überarbeitete Version des Bildes, sondern das Original; ansonsten übernehmen Sie ungewollte Veränderungen der misslungenen Version bzw. die Qualität des Bildes leidet.

Grafiken in Ihre Internetseite einfügen

Um nun eine Grafik bzw. ein Bild in Ihre Internetseite einzufügen, wählen Sie in den Menüleiste das Menü „Einfügen“ und dort den Eintrag „Bild“. Darauf öffnet sich das Fenster „Bild“. Markieren Sie dort das Optionsfeld „Aus Datei“ und Klicken auf „Durchsuchen“ (s. Bildausschnitt unten).

Im sich öffnenden Fenster suchen Sie nun die Bilddatei, die das Bild enthält, das Sie einfügen möchten, markieren dies und klicken auf „Öffnen“.

Darauf wird das Bild in Ihre Internetseite eingefügt.

Beachten Sie, dass die obere Bildkante dort beginnt, wo Sie im Dokument zuletzt Ihren Cursor platziert hatten. Die Ausrichtung des Bildes können Sie mit den Schaltflächen  beeinflussen.

Die Bildeigenschaften nachträglich in FrontPage Express beeinflussen

Nach dem erfolgreichen Einfügen des Bildes in Ihre Internetseite sind allerdings noch nicht alle Arbeiten abgeschlossen. Sie müssen noch weitere Einstellungen vornehmen, um das Bild optimal in Ihre Seite zu integrieren.

Klicken Sie dazu das Bild mit der linken Maustaste 1x an und wählen in der Menüleiste den Eintrag „Bearbeiten“. Im ausklappenden Menü klicken Sie den Eintrag „Bildeigenschaften“, worauf sich das nachfolgend abgebildete Fenster öffnet:

Im Eintrag Bildquelle ‚ im Registrierreiter „Allgemein“ � sollte der Dateiname des Bildes ohne weitere Zusätze stehen; dies ist nur der Fall, wenn Sie vor dem Einfügen des Bildes in das Webdokument, die entsprechende Bilddatei auch in den gleichen Ordner wie die Internetseite, auf der das Bild dargestellt werden soll, kopiert haben!

Steht dort beispielsweise der Eintrag „file:///C:/bild.jpg“, sucht der Internetbrowser beim Abspielen der Internetseite auf der

angegebenen Stelle auf der Festplatte nach der Bilddatei. Das gesamte Internet kann aber mit Sicherheit nicht bei jedem Zugriff auf die Seite die Bilddatei von Ihrer Festplatte laden. Haben Sie die Datei allerdings vor dem Einfügen in den gleichen Ordner wie die Internetseite kopiert, so sucht der Browser automatisch nur in diesem Ordner unabhängig davon, wo sie diesen im Internet abgelegt haben.

Im Feld Typ „Typ“ ƒ können Sie nachträglich die Bildart ändern bzw. den Kompressionsgrad für JPG nachträglich verändern. Allerdings raten die Verfasser gerade Anfängern davon ab, von dieser Funktion Gebrauch zu machen, da die Umwandlungsroutine von Laien schwer nachvollzogen werden kann und Veränderungen an der Bilddatei nicht Rückgängig zu machen sind.

Im Internet muss jede Datei, die in eine Internetseite eingebunden ist, einzeln herunter geladen werden. Gerade bei Bilddateien kann es passieren, dass der Text der Internetseite bereits zu sehen ist, die Bilder aber noch auf sich warten lassen, da diese noch nicht herunter geladen sind. Viele Webautoren geben daher für Bilder alternative Texte ein, die so lange angezeigt werden, bis die Graphiken vollständig herunter geladen sind und dargestellt werden können.

Einen solchen alternativen Text können Sie im Feld „Text“ im Bereich „Alternative Darstellungsweisen“ „ eingeben. Achten Sie dabei darauf, dass der Text Ihr Bild gut beschreibt, dabei aber auch kurz und prägnant bleibt.

Im Registrierreiter „Erscheinungsbild“ kann im Bereich „Layout“ festgelegt werden, ob das Bild links auf der Seite, zentriert oder am rechten Rand ausgerichtet dargestellt werden soll. Zudem kann eine Rahmenlinie um das Bild gelegt und festgelegt werden, welchen Abstand das Bild horizontal und vertikal vom Bildrand bzw.

anderen Objekten auf der Webseite haben soll.

Im Feld „Größe“ können Sie die dargestellte Bildgröße beeinflussen. Wenn Sie das Häkchen im Feld „Größe angeben“ durch Anklicken ein Häkchen setzen, wird ein absoluter Wert in Pixeln definiert, welcher der Größe Ihres Bildes entspricht. Dies hat den Vorteil, dass die Internetseite von Anfang an korrekt dargestellt wird, obwohl das Bild noch nicht herunter geladen ist, da der Browser bereits Höhe und Breite kennt und Platzhalter setzen kann. Dies führt auch dazu, dass Ihre Seite schneller aufgebaut wird, da der Browser den Seitenaufbau nach dem vollständigen Laden nicht noch einmal berechnen muss.

Natürlich können Sie auch einen relativen Wert in Prozent definieren; dann nimmt das Bild immer ein bestimmten prozentualen Wert des Browserfensters ein. Allerdings erleichtert es dem Anfänger nicht gerade die Erstellung einer Seite mit ansprechendem Webdesign, da relative Verhaltensweisen von Elementen nur schwer aufeinander abzustimmen sind.

Mit einem Klick auf die Taste „OK“ weisen Sie die gemachten Einstellungen Ihrem Bild zu und das Fenster schließt sich wieder.