Im Gegensatz zu Texten springen Bilder sofort ins Auge und werden schneller wahrgenommen.

• Das Thema eines übersichtlichen Bildes kann in 1/100 Sekunde erkannt werden.
• Wir können uns an eine sehr große Menge von Bildern wieder erinnern; unsere Gedächtniskapazität für Bilder ist wesentlich größer als für Texte.
• Bilder werden mit geringerer gedanklicher Anstrengung verarbeitet.
• Unsere Gedächtnisleistung wird durch Bilder erhöht.
• Bilder haben einen sehr großen, oft unbewußten Einfluss auf unser Verhalten.
  

Funktion von Bildern

• Veranschaulichung - Ergänzung des Textes; das Bild hat einen inhaltlichen Bezug und zeigt etwas, was der Text beschreibt.
• Strukturierung - Veranschaulichung der Struktur des Themas. Das Bild dient der Orientierung und ist oft auch gleichzeitig Navigationselement.
• Dekoration - das Bild umrahmt den eigentlichen Inhalt und bietet einen ästhetischen Kontext, der auf Benutzer motivierend wirken sollte. Dekorative Elemente ihrer selbst willen verlieren ihre positive Wirkung.

• Icons und Texte sollten sich nicht ausschließen, sondern ergänzen.
• Verwende Icons sparsam und gezielt.
• Gruppiere Icons auf dem Bildschirm, bringe eine räumliche und logische Ordnung in diese Gruppierung.
• Bedenke, dass Icons kulturell unterschiedlich interpretiert werden.
• Icons sollen nicht schön sein, sondern funktional.
• Icons sollten auf das Wesentliche reduziert sein und nicht zur Dekoration eingesetzt werden.

Die Verwendung von Hintergrundbildern erschwert oft das Lesen. der Text sollte sich deutlich vom Hintergrund absetzen.

Eigenschaften eines brauchbaren Hintergrundbildes:

• thematisch passend
• großflächig
• geringer Kontrast
• ungesättigte Farben und Pastelltöne
• stark weich gezeichnet
• unscharf

Audio

• Ton sollte ergänzen und nicht konkurieren.
• Der Benutzer sollte steuern und wählen können, ob und was er hören will.

Video:

• lasse dem Benutzer die Wahl, ob er ein Video ansehen will
• teile immer vorher Dauer und Dateigröße (Ladedauer) mit
• kurze Sequenzen bis 30 Sekunden sind akzeptabel
• ab einer Minute wird es anstrengend
• Einführungsvideos sollten immer überspringbar sein
• Stelle dem Benutzer Steuerungselemente zur Verfügung (Stop, Start (Replay))

Als kleines Bildformat ist 75px * 50px als untere Grenze noch akzeptabel, nach oben hin solltest du dich auf allerhöchstens 400px * 300px beschränken.

Die Darstellungsgröße solltest du nie direkt auf der Webseite ändern, sondern immer vorher in einem Grafikprogramm; die nachträgliche Skalierung ändert nichts am Speicherbedarf und ist qualitativ auch noch schlecher.

Im Web sind zwei Grafikformate verbreitet, die beide ihre speziellen Vor- und Nachteile haben (Ein drittes Format -PNG- wird noch nicht von allen Browsern unterstützt.) :

Nachdem du dein Bild fertig bearbeitet und skaliert hast, wählst du Datei - Für Web speichern... . Ganz oben wählst du nun 4-fach, um dein Original mit drei verschieden komprimierten Versionen vergleichen zu können. Im linken Teil des Bildschirms werden nun die vier Versionen des Bildes mit der jeweils gewählten Komprimierung und Dateigröße angegeben. Im rechten Teil kannst du für jedes ausgewählte Bild die Art der Koprimierung ändern.

Unten im Eigenschaftenfenster solltest du deinem Bild einen Namen geben, falls du es später z.B. über JavaScript ansprechen willst.
Wenn dein Bild nicht direkt am Text kleben soll, kannst du mit V-Abstand und H-Abstand rund um das Bild einen leeren Bereich definieren.
Im Feld Alt. solltest du eine kurze Beschreibung (Namen) des Bildes eingeben; dieser Text wird angezeigt, wenn der Mauszeiger auf das Bild zeigt, oder wenn der Browser keine Bilder darstellen kann.
Wenn du dein Bild mit einem Rahmen versehen willst, kannst du das auch hier einstellen.

Mit dem Auswahlfeld Ausrichten im Eigenschaftenfenster kannst du deine Grafik relativ zum umgebenden Text innerhalb eines Absatzes ausrichten.
Brauchbar erscheinen mir nur die beiden letzten Einträge: Links und Rechts - probiere aber ruhig alle Ausrichtungen durch.
Dreamweaver fügt nach der Ausrichtung einen Ankerpunkt in den Text ein.

Du kannst das Bild auch in einen eigenen Absatz einfügen und dort ausrichten oder du ordnest Text und Bild mit Hilfe einer Tabelle (mit unsichtbarem Rand) an.

Um ein Bild als Seitenhintergrund einzufügen, wählst du Modifizieren - Seiteneigenschaften... und wählst dann dort nach Drücken auf den Button Durchsuchen... ein Bild aus.

Bilder, die kleiner als der dargestellte Bereich der Seite sind, werden gekachelt (nach rechts und unten wiederholt). Du kannst diesen Effekt ausnutzen, indem du ein relativ kleines Hintergrundbild (kleines Rechteck oder langen Streifen) erstellst, das sich nahtlos aneinander setzen läßt.

Auch ganze Tabellen oder einzelne Zellen lassen sich mit einem Hintergrundbild versehen; wähle hierzu den entsprechenden Teil der Tabelle aus und gib unten bei Eigenschaften eine Bilddatei bei Hintergrund (Hg) ein.

Du kannst nicht nur das gesamte Bild als Link verwenden, sondern auch einzelne Teile des Bildes mit verschiedenen Links belegen. Klicke das Bild an und wähle dann bei Eigenschaften unten links, ob du einen rechteckigen, runden oder unregelmäßigen Bildausschnitt als Link haben willst. Klicke die entsprechende Figur an und markiere dann auf deiner Grafik den gewünschten Bereich. Unten bei Eigenschaften kannst du nun den Hyperlink für diesen sogenannten Hotspot eintragen.

Flash-Schaltflächen sind räumlich wirkende Buttons, die beim Überfahren mit der Maus ihre Farbe ändern oder animiert werden.

Markiere mit der Schreibmarke die Stelle, wo der Button eingefügt werden sollen und wähle dann Einfügen - Interaktive Bilder - Flash-Schaltfläche (Einfügen - Medien - Flash-Schaltfläche in DW2004). Wähle dann im sich öffnenden Fenster einen Button-Stil, Schaltflächentext und Hyperlink aus.

Bei einem Rollover wird ein Bild durch ein anderes ersetzt, sowie der Mauszeiger darüber fährt. Beide Bilder sollten gleich groß sein, da das zweite auf die Größe des ersten Bildes skaliert wird.

Markiere mit der Schreibmarke die Stelle, wo die beiden Bilder eingefügt werden sollen und wähle dann Einfügen - Interaktive Bilder - Rollover-Bild (Einfügen - Grafikobjekte - Rollover-Bild in DW2004). Wähle dann im sich öffnenden Fenster die beiden Bilder aus und füge - falls beabsichtigt - noch eine Linkadresse (gehe zu URL) hinzu. Achte darauf, das das Häkchen bei Rollover-Bild vorausladen gesetzt ist.

Wenn du eine Auswahl deiner digitalen Fotos auf deiner Homepage zeigen willst, bietet Photoshop hierfür eine sehr einfache Möglichkeit.
Kopiere alle ausgewählten Fotos in einen neuen leeren Ordner und lege einen zweiten leeren Ordner an, in den Photoshop die erzeugten Web-Seiten ablegen soll. Wähle dann in Photoshop Datei - Automatisieren - Web-Fotogalerie .

Im erscheinenden Fenster kannst du dann das Aussehen deiner Webgalerie beeinflussen. Ganz oben wählst du über Stile das grungsätzliche Aussehen (Vorschau rechts) aus, im mittleren Teil wählst du den Bilder- und den Ziel-Ordner und unten kannst du über Optionen Texte und Bildgrößen für Vorschau und Hauptbild, sowie einige weitere Eigenschaften der Webgalerie wählen. Nach einem Klick auf OK erzeugt Photoshop die gewünschte Galerie in deinen ausgewählten Ordner.

Zur Veröffentlichung im Internet kopierst du den gesamten Ordner auf deine Homepage und setzt einen Link auf die Startdatei index.htm.