Bilder vorbereiten und Einfügen

Gerade Webseiten leben von Bildern und Grafiken. Sie dienen als Blickfang oder zur Illustration und Verdeutlichung. Gleichzeitig sind sie aber auch ein wichtiges Gliederungs- und Strukturierungsmittel. Prinzipien und Regeln, die uns aus der Printwerbung her vertraut sind, haben auch hier durchaus ihre Gültigkeit.

Vorhandenes Bildmaterial können Sie einscannen, neue Bilder entweder mit der Digitalkamera aufnehmen und dann auf die Festplatte überspielen oder mit der "Normalkamera" aufnehmen, Abzüge - nicht kleiner als das für die Website gewünschte Format - machen lassen und dann einscannen.

Nun müssen die Bilder zuerst einmal bearbeitet werden.
Für die hier vorgestellte Bildbearbeitung wurde IrfanView, Kontakt zu IrvanView ein einfaches, aber sehr effektives Bildebearbeitungsprogramm, verwendet. IrfanView kann schnell aus dem Intenet heruntergeladen werden. Für die nichtkommerzielle Verwendung fallen keine Gebühren an.

Über die Option Bild können Sie folgende Veränderungen durchführen:

Farbreduzierung:
Verwenden Sie nicht mehr als
256 Farben, um die Ladezeit nicht allzu groß werden zu lassen
(Hier wurden alle Farben auf
16 Farben reduziert.)
htm28.jpg (9454 Byte)
Veränderung der Bildgröße:
Reduzieren Sie die Bildgröße auf ein Format, das sowohl die Ladezeit (also möglichst klein) wie auch die Aussagekraft berücksichtigt.
Achten Sie dabei darauf, dass das Feld htm30.jpg (1029 Byte) angeklickt ist, damit es zu keinen Verzerrungen kommt.
htm29.jpg (12929 Byte)
Bildbearbeitung:
S
chärfen
Sie das Bild noch einmal, falls es Ihnen auf Grund der Bearbeitung unschärfer erscheint.
Verändern Sie die
Helligkeit, den Kontrast oder die Farbbalancierung falls nötig oder erwünscht.
htm31.jpg (3172 Byte)
Rückgängig machen:
Über
Bearbeiten - Rückgängig können Sie die letzte Änderung wieder zurücknehmen
htm32.jpg (3675 Byte)

Wenn Sie mit der Bearbeitung fertig sind, speichern Sie das Bild am besten als JPG-Datei, eine qualitativ höhere aber größere Datei, oder als GIF-Datei.

htm33.jpg (12573 Byte)

htm35.jpg (29055 Byte)

Speichern Sie es in dem Ordner, in dem sich auch Ihre html-Dateien befinden. Wenn Sie es nämlich anschließend in Ihre Webseite einfügen, wird es nicht dorthin kopiert, sondern es wird lediglich ein Verweis gesetzt und beim Aufrufen der Seite wird dann das Bild abgerufen und geladen.

htm34.jpg (21518 Byte)

Jetzt müssen Sie das Bild nur noch auf Ihre Seite bringen.

Öffnen Sie dazu die entsprechende Seite und gehen Sie an die Stelle, an der das Bild eingefügt werden soll. Klicken Sie htm9.jpg (627 Byte) an und wählen Sie im folgenden Menü das Bild aus. Da Sie das Bild ja bereits im entsprechenden Ordner gespeichert haben, brauchen Sie den Ordner nicht zuerst extra auszuwählen.

htm36.jpg (26187 Byte)

Setzen Sie Ihr Bild links, mittig oder rechts.

Um Ihr Bild frei auf dem Bildschirm zu platzieren, legen Sie zunächst eine Tabelle an, richten Sie Ihre Spalten entsprechend aus und fügen dann das Bild in die entsprechende Spalte ein.

New.jpg (630 Byte)

In einem solchen Layout können Sie zum Beispiel ein Symbol in Treppenform anordnen und dann jeweils noch mit dem entsprechenden Text versehen.

New.jpg (630 Byte)

Auch der Abstand der Symbole und der Texteile kann Ihren Vorstellungen entsprechend variiert werden
New.jpg (630 Byte) Wenn Sie sich dann in der Vorschau im Browser das Ergebnis anschauen, werden Sie merken, dass es sich hier um mehr als eine Spielerei handelt,
New.jpg (630 Byte) Solche Bilder können Sie gleichzeitig als Hyperlink verwenden. Hier wurde ein Hyperlink zurück auf die Startseite gesetzt.

Sie können ein Bild auch "fließend" in einen Text einbauen. Dazu fügen Sie es an der entsprechenden Textstelle ein und klicken es dann mit der rechten Maustaste an. Sie können aber auch zuerst das Bild einfügen und dann die Textausrichtung anwählen.

htm37.jpg (35082 Byte)  Zunächst sehen Sie die allgemeinen Bildeigenschaften. Bei Alternative Darstellungsweisen - Text können Sie auch einen eigenen Text eingeben, der angezeigt wird, solange das Bild geladen wird, bzw. wenn der Besucher mit der Maus über das Bild fährt.

Wenn Sie oben im Menü die Option Erscheinungsbild anklicken, können Sie die Art bestimmen, in der das Bild in den Text eingebaut werden soll
htm38.jpg (7479 Byte)   So wurde hier in beiden Fällen die Option
Links angelickt und der Text wird automatisch rechts vom Bild gesetzt.

Falls Sie weitere Möglichkeiten dargestellt sehen wollen, klicken Sie hier. Sie können es aber natürlich auch selber einmal ausprobieren.