7. Lektion
Grafiken im Web

Was Sie hier lernen:

 

Das Internet lebt von Bildern und grafischer Gestaltung. Nichts ist langweiliger, als einen Monitor voller Text vor sich zu haben. Doch sei gleich vorweg gesagt: Einschlägige Untersuchungen zeigen, dass das Wichtigste trotz allem immer noch der Text ist. Sie sollten deshalb einige goldene Regeln beachten:

  • Formulieren Sie Ihren Text knapp, verständlich und übersichtlich
  • Benutzen Sie Bilder so, dass sie Ihren Text nicht stören
  • Bei Bildern gilt: Weniger ist mehr!
  • Ein Bild sollte max. 30K haben um unnötige Ladezeiten zu vermeiden

 


Dateiformate für Bilder im Internet
(im Original vorhanden)


Bilder einfügen

Seit Dreamweaver 8 gibt es eine komfortable Möglichkeit, direkt in Dreamweaver einige kleine Änderungen an einer eingefügten Grafik vorzunehmen. Außerdem gelangen Sie leichter in das voreingestellte Bildprogramm.

Stellen Sie dies zunächst ein. Gehen Sie in die Voreinstellungen und wählen Sie dort die Kategorie Dateityp / Editor.

Editor

Über die Schaltfläche Durchsuchen wählen Sie die Anwendung aus Ihrem Programmverzeichnis. Es dürfen gerne mehrere Programme sein, fügen Sie über das Plus + Zeichen weitere hinzu; doch sollten Sie eine Anwendung zum primären Editor wählen. Klicken Sie dafür zunächst auf den Editor Ihrer Wahl, anschließend auf die Schaltfläche Zum primären Editor machen.

Ihre Bilder sollten Sie ausnahmslos in Ihrem Bildbearbeitungsprogramm bearbeiten. Die Arbeit von Dreamweaver sollte sich also darauf beschränken, Ihre Bilder an der richtigen Stelle einzubinden. Das bedeutet, dass alle Ihre Grafiken idealerweise schon bereit liegen, wenn Sie Ihre HTML-Seite gestalten.

Sofern Sie zu Übungszwecken keine eigenen Bilder haben, kopieren Sie die Bilder massage1.jpg und massage2.jpg aus dem Ordner TN-Material. Speichern Sie die Bilder in einem Unterordner Bilder Ihrer Übungssite.

Hot Stone Fußmassage

Wenn Sie beide Bilder kopiert haben, werfen Sie einen kurzen Blick auf Ihre Site im Dateien-Fenster.

Um die Übersicht zu behalten, sollten Sie für alle Bilder einen eigenen Ordner anlegen.

Eine kleine Übung: Die Titel massage1 und massage2 sind nicht sehr zweckmäßig. Nennen Sie die Dateien um: Klicken Sie dazu im Dateien-Fenster mit der rechten Maustaste auf den Bildtitel und wählen Sie umbenennen. Tippen Sie HotStone.jpg für massage1 ein, und fuss.jpg für massage2.jpg.

Die Dateiendung .jpg behält Dreamweaver bei - also nicht überschreiben.

Die Bilder befinden sich zwar nun in dem entsprechenden Ordner auf Ihrer lokalen Site, aber noch nicht im HTML-Dokument.

Zum Einbinden gibt es - wie immer - unterschiedliche Wege:

  1. Gehen Sie entweder in der Menüleiste auf Einfügen Bild oder im
  2. Einfügen Fenster - Allgemein - Bild (Symbol Baum).
  3. STRG + ALT + I

Dreamweaver schlägt Ihnen automatisch einen Ordner aus Ihrem Stammverzeichnis vor, aus dem Sie das Bild auswählen. Probieren Sie es aus: Erstellen Sie eine neue HTML-Seite und fügen Sie das Bild massage1.jpg bzw. HotStone.jpg jetzt ein. Speichern Sie die html-Datei unter dem Namen Bild einfügen.

 

Bei jedem Bild, das Sie einfügen, blendet Dreamweaver folgende Dialogbox ein:

Alternativer Text

Hier sollten Sie einen Alternativtext für Ihr Bild eingeben: Kann das Bild beim Betrachter nicht angezeigt werden, gibt der Alternativtext nämlich zumindest eine Orientierung, worum es geht. Wichtig ist das für die mobilen Surfer, die Ihre Grafik im Browser ausgeschaltet haben und vor allem im Rahmen der barrierefreien Web-Gestaltung . Wenn man 100% barrierefreie Seiten erstellen möchte, gibt man hier auch noch die lange Beschreibung ein, also den Pfad, unter dem das Bild gespeichert ist.

 

Dieses Feld „Lange Beschreibung“ enthält einen Hyperlink auf eine Datei, die sich auf das Bild bezieht oder nähere Informationen darüber bietet. Geben Sie hier den Speicherort einer Datei ein, die angezeigt werden soll, wenn der Benutzer auf das Bild klickt. Sie können auch auf das Ordnersymbol klicken und die Datei aus der Verzeichnisstruktur auswählen.

Wenn Sie das Feld leer lassen, wird der Alt-Text vorgelesen. Das ist die häufigste Option.

Die Dialogbox wird bei Ihnen nicht angezeigt? Dann gehen Sie bitte in die Voreinstellungen - Eingabehilfen und aktivieren Sie das Häkchen bei Bilder.

Eingabehilfen

Sie möchten ein Bild einfügen, dass sich noch nicht in Ihrem Stammverzeichnis befindet? Auch hier bietet Dreamweaver Hilfen an. Wählen Sie ein beliebiges Bild auf Ihrer Festplatte aus und fügen Sie es ein. Dreamweaver erkennt, dass das Bild noch nicht dort gespeichert ist, und legt automatisch eine Kopie in Ihr Stammverzeichnis.

Wenn Sie gerne mit der Maus arbeiten, dann ziehen Sie das Bild vom Dateienfenster direkt an die Stelle im Dokument, an der Sie das Bild positionieren möchten.


Bilder bearbeiten

Ein Doppelklick auf dGrafik im Fenster Dateien führt Sie übrigens direkt in Ihr jeweiliges Bildbearbeitungsprogramm, wo Sie dann das Bild bearbeiten können. Damit Dreamweaver weiß, welches Ihr Bildbearbeitungsprogramm ist, haben Sie es in den Voreinstellungen - [STRG]+[u] - zum Primären Editor gemacht.

Wenn Sie ein eingefügtes Bild mit der rechten Maustaste anklicken, erhalten Sie im Kontextmenü die Option Bearbeiten mit. Hier können Sie wählen, mit welchem Editor Sie die Datei bearbeiten möchten.

Bleiben noch genügend Eigenschaften, die Sie in Dreamweaver selbst vornehmen. Wenn Sie ein Bild eingefügt haben, klicken Sie darauf um es zu markieren. Gekennzeichnet ist die Markierung durch einen schwarzen Rand mit viereckigen "Anfassern". Schauen Sie in das Eigenschaften-Fenster; diesmal zeigt es Ihnen sämtliche Optionen für eine eingefügte Bilddatei:

Im oberen Teil linken des Fensters sehen Sie die Dateigröße - 13K, daneben die Bildgröße in Pixel, B für Breite und H für Höhe. Hier könnten Sie direkt die Größe der Grafik verändern, aber davon rate ich ab. Machen Sie sich hier lieber die Mühe, das Bild in Ihrem Bild-Editor zu verändern - dahin gelangen Sie über die Schaltfläche neben Bearbeiten im rechten Fensterbereich, wo einer Ihrer Bildeditoren als Symbol eingeblendet ist (hier im Beispiel Photoshop).

Daneben gibt es weitere Schaltflächen, die eine grundlegende Bildbearbeitung in Dreamweaver ermöglichen, ohne den Bildeditor zu starten:

 

  • Optimieren: Über diese Funktion können Sie die Dateigröße verringern und die Qualität anpassen.
  • Zuschneiden: Störende Ränder lassen sich z. B. hier abschneiden oder Bildbereiche auswählen. Per Doppelklick auf das Bild bestätigen Sie den Zuschnitt.
  • Helligkeit und Kontrast sowie Schärfen können Sie direkt über die Schaltflächen daneben aufrufen.

Ein komplettes Bild kann auch als Hyperlink benutzt werden, als Querverweis zu anderen Seiten und Sites. Dazu fügen Sie bei Hyperlink den Dateinamen ein, auf die das Gesamtbild verweisen soll bzw. wählen ihn aus:

  • über das Drag-Symbol zur Datei im Dateienfenster oder
  • über das Ordnersymbol.

Link

Möchten Sie mehrere, verschiedene Links über das Bild erreichen, muss man so genannte Hotspots setzen. Dazu noch ein klein wenig Geduld; zunächst möchten wir unsere Bilder noch ausrichten: Klicken Sie dazu in das Bild und gehen Sie in das Eigenschaften-Fenster. Öffnen Sie dort das Listenfeld Ausrichtung. Die Angaben dort beziehen sich auf den Text, der Ihr Bild umgibt. Hier eine Zusammenfassung der Möglichkeiten:

Ausrichtung
Grundlinie richtet den Text an der Grundlinie des Bildes aus
Oben richtet den Text am oberen Rand des Bildes aus
Mitte richtet die Grundlinie des Textes an der Mitte des Bildes aus
Unten entspricht der Ausrichtung Grundlinie: richtet den Text am untersten Punkt des ausgewählten Objektes aus
Textoberkante richtet das größte Zeichen der Textzeile am obersten Punkt des ausgewählten Objektes aus
Absolute Mitte richtet die Mitte des ausgewählten Objekts an der Mitte des Textes aus
Absolut unten richtet die absolute Unterkante des Textes am untersten Punkt des ausgewählten Objekts aus. Unterlängen der Buchstaben sind darin eingeschlossen: g, p, q etc.
Links platziert das Objekt an den linken Rand, der Text läuft rechts um das Objekt herum. Steht allerdings vor dem Objekt ein linksbündiger Text, erscheinen links ausgerichtete Objekte in einer neuen Zeile.
Rechts platziert das Objekt an den rechten Rand, der Text läuft links um das Objekt herum. Steht allerdings vor dem Objekt ein rechtsbündiger Text, erscheinen rechts ausgerichtete Objekte in einer neuen Zeile.

Diese Aufstellung wirkt sehr abstrakt, deshalb: probieren Sie alle verschiedenen Varianten aus und schauen sich das Ergebnis im Browser an.

Es gibt wesentlich mehr Methoden, ein Bild oder generell Objekte genau zu positionieren. Dazu mehr im Kapitel Layoutwerkzeuge.

Legen wir nun noch den Bildabstand fest. Klicken Sie dazu auf das jeweilige Bild und gehen Sie in das Eigenschaften-Fenster : Im unteren Menübereich finden Sie die Eingabefelder für

  • V-Abstand, den vertikalen Abstand und
  • H-Abstand, den horizontalen Abstand

Der Abstand bezieht sich dabei auf die jeweilige Umgebung des Objekts/Bilds und hängt davon ab, welche Ausrichtung das Bild hat:

Haben Sie ein Bild rechtsbündig am Seitenrand platziert, steht das Bild mit unserer Einstellung 10 Pixel links vom rechten Seitenrand. Bei einer linksbündigen Ausrichtung steht es entsprechend 10 Pixel vom linken Seitenrand entfernt.

Steht Ihr Bild innerhalb einer Tabellenzelle, so wird jeweils vom Rand der Zelle gemessen.

Bilder als Hyperlink

Wie man ein Gesamtbild als Hyperlink verwendet, haben wir gerade gesehen: Beim markierten Bild den Namen der Datei in das Feld Hyperlink einsetzen, auf die der Link verweisen soll.

Möchten Sie nur einzelne Teile des Bildes oder mehrere unterschiedliche Links mit dem Bild einbauen, werden in das Bild so genannte Hotspots gesetzt. Das Ergebnis nennt man dann Image-Map oder verweissensitive Grafiken. Wichtig ist, dass Sie dem Betrachter Ihrer Site deutlich machen, dass sich hinter dem Bild auch Links verbergen. Das lässt sich mit einem simplen Hinweis wie "Fahren Sie das Bild mit der Maus ab" erreichen.

Erstellen wir nun solche Hotspots am Beispiel einer Landkarte - zum Nachmachen finden Sie die Datei Karte BRD.jpg im Ordner TN-Material. Klicken Sie auf die Datei und gehen Sie in das Eigenschaften-Fenster. Im unteren linken Bereich finden Sie die Werkzeuge zum Erstellen von Hotspots.

Landkarte mit Hotspots

Lassen Sie die Grafik markiert und gehen Sie in das Eigenschaften-Fenster in den unteren Menü-Bereich. Dort geben Sie zunächst eine Bezeichnung für die Map ein.

Nennen wir unser Beispiel BRD. Unter diesem Feld sehen Sie drei türkis-grüne Flächen in unterschiedlichen Formen: rechteckig, rund, polygon - je nachdem, welche Fläche Sie haben, entscheiden Sie die Form.

Wir wählen zunächst die runde Form durch Anklicken - mit diesem Werkzeug können wir die Region um Berlin umzingeln und anklickbar machen.

Alternativ gehen Sie über das Einfügen-Fenster in das Register Allgemein. Öffnen Sie durch Klick auf den schwarzen Pfeil das Listenfeld neben dem Baum-Symbol, dort finden Sie die gleichen Werkzeug zum Zeichnen der Hotspots.

Ihr Mauszeiger ändert sich zu einem Fadenkreuz. Damit ziehen Sie bei gedrückter linker Maustaste einen Kreis in den Bildbereich um die Stadt Berlin.

Berlin

Sobald Sie die Maus loslassen, erscheint eine Meldung darüber, dass Sie auch hier Alternativtexte vergeben sollten. Daneben vergeben Sie am besten auch eine Bezeichnung für diesen Hotspot. Vor allem bei solchen komplexen Aufgaben, wie Landkarten, sollten Sie den Überblick behalten.

Meldung Imagemap

Sollten Sie beim Namen der Map Sonderzeichen wie Leerstellen eingeben, erscheint sofort ein entsprechender Hinweis, dass dies nicht zulässig ist.

Fehlermeldung

Beim ALT-Text hingegen dürfen Sie Sonderzeichen eingeben. Unter Alt. geben Sie einen Alternativnamen ein für den Fall, dass die Grafik beim Betrachter nicht angezeigt wird. Sie sollten stets eine alternative Navigation zu verweissensitiven Grafiken bereit stellen, damit Betrachter ohne Grafik Ihre Seiten erreichen können.

Der <tag> für einen Hotspot lautet übrigens <area>

Um die Hyperlinks festzulegen klicken Sie den Hotspot an und gehen in das Eigenschaften-Fenster.

Möchten Sie mit einem Hyperlink auf eine externe Datei verweisen, löschen Sie zunächst das Raute-Zeichen - sie ist nur für interne Anker nötig. Wählen Sie die Datei aus, auf die der Link verweisen soll.

Ebensogut können Sie natürlich absolute Links setzen, d. h. Adresse im Internet. Die URL muss dabei vollständig eingetippt werden, z. B. www.berlin.de

Als nächstes bestimmen Sie das Ziel, also die Art, wie die neue Datei präsentiert werden soll:

  • _blank lädt das verknüpfte Dokument in ein neues, unbenanntes Browserfenster.
  • _parent _self und _top werden dann interessant, wenn Sie Ihre Internet-Seiten mit Frames erstellen. Was genau das ist, erfahren Sie in der entsprechenden Lektion zu Frames.


Wenn Sie hier nichts eingeben, bekommt die neue Datei ebenfalls ein neues Browserfenster, die Ursprungsdatei wird dabei jedoch geschlossen.

Deshalb empfiehlt es sich, als Ziel immer _blank einzugeben.

Für die meisten der verbleibenden Bundesländer empfiehlt es sich, das Polygon-Werkzeug einzusetzen - hier können wir schlecht einfache Kreise oder Rechtecke benutzen.

Das Polygonwerkzeug verwenden Sie durch Klicken auf die einzelnen Punkte, die Sie in den Map-Bereich aufnehmen möchten.

Bei derlei Arbeiten ist es sinnvoll, wenn Sie vorher die Ansicht zoomen.

Polygonwerkzeug

Berlin

Zum Bearbeiten von Hotspots klicken Sie einen Hotspot an.
Größe verändern: Halten Sie einen der Anfasser am Rand mit gedrückter Maustaste und ziehen Sie in die gewünschte Größe.
Verschieben: Gehen Sie bei gedrückter Maustaste in einen der Hotspots und verschieben Sie ihn.
Löschen: Markieren Sie den Hotspot und gehen Sie auf die ENTF-Taste.

 


Roll-Over-Bilder
(im Original vorhanden)


Zusammenfassung
(im Original vorhanden)


Übung: Bilder
(im Original vorhanden)

vorige Lektion

nächste Lektion
 
Inhaltsverzeichnis   nach oben

Hinweis
Falls Sie Hinweise, Kritik, Anregungen oder sonstige Kommentare zu dieser oder anderen Lektionen/zum Kurs haben schicken Sie mir bitte eine Mail.
Sollten Sie länger als 30 Minuten an einem Problem brüten, schicken Sie mir bitte eine Mail.
 

 © Copyright Elisabeth Ebert, Dr. Horst Jaitner.  Dieser Text ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Bilder ohne Genehmigung, auch auszugsweise, ist strafbar. Das gilt auch für die Verwendung in Kursunterlagen, Vervielfältigung oder Verwendung in elektronischen Systemen.
 


Großraum Berlin