Bildformate, Bilder einfügen und ausrichten, Hotspots und Platzhalter

Bildformate

Im Internet haben sich mehrere Formate etabliert. Vor allem das JPG-Format. Damit ist es möglich, Bilder und Fotos mit 16 Mio. Farben zu speichern. Jedoch nicht verlustfrei. Je höher die Kompression ist, desto schlechter wird die Qualität. Wie im Bild links oben zu sehen, wäre das Bild bei einer zu hohen Kompression leider mit Artefakten untersetzt. Darum sollte in z.B. Photoshop immer genau geschaut werden, welche Kompressionsstufe für den jeweiligen Zweck benutzt wird. Für Fotos z.B. Kompressionsstufe 60 – 70 und bei 1 – 20-farbigen Illustrationen sollte erst gar nicht das JPG-Format gewählt werden. Dafür eignet sich das GIF-Format viel besser.

Wir empfehlen:
Dreamweaver-Video-Training

Beim GIF-Format können Bilder mit bis zu 256 Farben gespeichert werden, und dies verlustfrei bzw. es muss geschaut werden, ob die Farben ausreichen. Bei z.B. Graustufenbildern ist das kein Problem wie auch bei Illustrationen mit weniger als 256 Farben. Dieses Format ist dann auch im Vergleich zu JPG speicherschonender. Große Plakate mit nur wenigen Farben würden im JPG-Format mehrere MByte in Anspruch nehmen und bei GIF nur wenige KByte. Gut bei GIF ist auch, dass hier Transparenzen gespeichert werden können. Jedoch nicht mit einem Schatten bzw. weichen Übergang.

Für Fotografen ist da eher das TIF-Format interessant, weil dieses Format sogar eine Kompression ermöglicht, und das verlustfrei. Jedoch sind die Dateien viel größer als beim JPG-/GIF-Format.

Beim PNG-Format können sogar Transparenzen mit Schatten usw. gespeichert werden. Auch diese Bilder sind verlustfrei, jedoch ist keine Kompression möglich. Trotzdem wird dieses Format immer mehr eine Rolle spielen und schon jetzt immer mehr in Webseiten benutzt. Denn seitdem der Internet Explorer 7.0 und Firefox / Opera / Mozilla ja sowieso dieses Format unterstützen, können endlich perfekte Transparenzen angezeigt werden. Für den Webmaster ist das eine sehr große Erleichterung, weil so z.B.  Buttons nicht mit der Homepage-Hintergrundfarbe gespeichert werden müssen, sondern sich an jeden Hintergrund anpassen.

Beim Flash-Format können perfekte Animationen mit Musikuntermalung im Web dargestellt werden. Jedoch muss dazu im Browser ein Flash-Plug-In installiert sein, was heutzutage Standard ist.

Nochmal in der Zusammenfassung:

Format
Anwendung

JPG

  • 16,7 Millionen Farben
  • jede Speicherung leider mit Qualitätsverlust
  • keine Transparenz
  • keine Animation
  • geeignet für Fotos
  • kleine Dateien

GIF

  • nur 256 Farben maximal möglich
  • Transparenz möglich (ohne Schatten)
  • Animation möglich
  • geeignet für Grafiken
  • kleine Dateien

PNG

  • 16,7 Millionen Farben
  • Transparenz möglich (mit Schatten)
  • Animation möglich
  • geeignet für Grafiken und Fotos
  • große Dateien
  • keine Kompression, dafür auch kein Qualitätsverlust bei erneuten Speicherungen
 

Bilder einfügen und ausrichten

So, jetzt aber genug mit der ganzen Theorie. In Dreamweaver Bilder einzufügen ist sehr einfach. Am einfachsten geht das mit dem Dateifenster:

 

Oder durch Menü>Einfügen>Bild:


Einige Funktionen zur Bearbeitung von Bildern stehen auch in Dreamweaver bereit:


Im 1. Symbol ist das Standard-Programm zur Bearbeitung von Bildern hinterlegt. Ändern lässt es sich in den Voreinstellungs-Optionen.

Im 2. Symbol können Grafiken auf die Schnelle von der Dateigröße her optimiert werden.

 

Hinter dem 3. Symbol verbirgt sich eine Funktion, mit der man Bilder direkt in eine neue Größe bringen kann. Zwar können diese Bereiche nicht pixelgenau angelegt werden, trotzdem ist es eine gute Hilfe, um  Bilder schnell in die richtige Größe zu bringen.

Im 4. Symbol werden Grafiken auf die ursprüngliche Größe zurückgesetzt.

 

Das 5. Symbol ermöglicht ein schnelles Ändern der Helligkeit und des Kontrasts:


Und das 6. Symbol enthält eine gute Funktion, um Bilder auf die Schnelle schärfer zu stellen.

 

Ab hier möchte ich kurz erklären, wie ich Bilder relativ einfach ausrichten kann:

Öfters kommt es nämlich vor, dass ich Bilder in einem großen Text so wie in einer Zeitung unterbringen möchte. Dazu gibt es in Dreamweaver eine sehr einfache Option: Die Ausrichten-Funktion. Wenn diese z.B. auf links eingestellt ist, wird das Bild links angezeigt und vom Text rechts umflossen. Am besten wird dann der horizontale und vertikale Abstand auf z.B. 20 Pixel eingestellt.

 

Image-Maps und Hotspots

Mit Image-Maps und Hotspots können bestimmte Bereiche eines Bildes mit separaten Hyperlinks bestückt werden:


So kann ein einzelnes Bild mehrere Links enthalten, ohne dass man das Bild vorher in mehrere Einzelstücke zu speichern bräuchte. In Dreamweaver stehen dazu mehrere Werkzeuge zur Verfügung: kreisförmige, rechteckige und Polygon-Hotspots.

 

Platzhalterbilder

Mit Platzhalterbildern können in Dreamweaver Platzhalter für Bilder bereitgestellt werden. Denn nicht immer hat der Webentwickler zu Anfang alle Bilder zur Verfügung, dennoch muss das Seitendesign vom Aufbau schon stimmen. Dafür können in Dreamweaver Platzhalter angelegt werden, sodass sich im Nachhinein der Aufbau des Designs nicht mehr ändert. Die Platzhalter lassen sich dann später ganz bequem mit den richtigen Grafiken ersetzen.

So, mal wieder viel Theorie, aber anders geht’s leider nicht. Ich hoffe, ihr könnt jetzt in Dreamweaver so einige grafische Elemente besser platzieren und ggfs. bearbeiten. Im nächsten Workshop möchte ich kurz die Arbeit mit Frames erklären, auch wenn diese mehr oder weniger nicht mehr der Zeit entsprechen.

Wir empfehlen:
PHP-Workshop-DVD - Basics & Tricks

Unsere Empfehlung für dich

Grundlagen HTML, CSS und JavaScript

Grundlagen HTML, CSS und JavaScript

Die drei wichtigsten Säulen des Webs – HTML, CSS und JavaScript. Wer die Grundlagen kennt, navigiert mit klarer Sicht durchs Netz und ist zudem in der Lage, ganz einfach selbst in die Programmzeilen einzugreifen.

  • 62 Lektionen in über acht Stunden Video-Training zum Einstieg in HTML, CSS und JavaScript
  • Einfach Grundlagenkenntnisse erwerben und in inklusiven Übungen direkt ausprobieren
  • Von Jan Brinkmann, einem Web-Entwickler aus Leidenschaft mit über 15 Jahren Erfahrung

Zum Training