Arbeiten mit Bildern

Bilder sind ein wichtiges Gestaltungselement für Ihre Webseite. Sie transportieren Inhalte schnell und kommunizieren klar, auch über Sprachgranzen hinweg. Bilder können Ihre Webseite auflockern, Leser auf Ihre Webseite locken und ihnen beim Lesen Halt und der Gestaltung Struktur geben.

Hier zeigen wir Ihnen, wie Sie Bilder auf Ihre Webseite bringen und die wichtigsten Regeln, die es für den Einsatz von Bildern im Web zu beachten gilt.

Vorab technische Tipps für den Einsatz von Bildern im Web

  • Fotos mit vielen Farbabstufungen speichern oder bestellen Sie am besten im Format .jpg
  • Für Zeichnungen mit eher flachen Farbverläufen verwenden Sie das Format .png
  • .jpg oder .png – höher als 72 Pixel muss die Auflösung nicht sein
  • Auch wenn Sie die Bildgrösse im Tocco anpassen können empfiehlt es sich, die Bilder schon in der gewünschten Grösse hochzuladen um Serverplatz zu sparen und Ladezeiten zur verkürzen

Bilder auf die Webseite laden

  1. Laden Sie das Bild zuerst in das DMS
  2. Wechseln Sie ins CMS auf die Seite, in die das Bild integriert werden soll
  3. Platzieren Sie den Cursor dort, wo Sie das Bild einfügen wollen
  4. Klicken Sie im ckeditor auf das Bild-Symbol
  5. Das Dialogfeld 'Bild-Eigenschaften' öffnet sich


     
  6. Klicken Sie auf 'Server durchsuchen' und definieren Sie den Pfad zum einzusetzenden Bild
  7. Bestätigen Sie mit OK

Das Dialogfeld Bild-Eigenschäften näher erklärt
Das Dialogfeld bietet verschiedene Einstellungen, die das Erscheinungsbild des Bildes und dessen Integration auf der Webseite beeinflussen können. Die Variabeln im Reiter 'Bild-Info' in der Übersicht.

Alle diese Felder sind optional auszufüllen. Sie müssen diese Felder nicht ausfüllen.

URL
Wird automatisch eingefügt, sobald Sie über 'Server durchsuchen' das Bild im DMS definiert haben. Nach der Auswahl wird in diesem Feld der Pfad zum Bild als Link angezeigt.

Alternativer Text
Hier können Sie einen Text einfügen der angezeigt wird, sobald Besucher ihrer Webseite mit der Maus über das Bild fahren. Weiter wird dieser Text angezeigt, sollte das Bild nicht geladen werden.

Breite
Hier können Sie die Breite des Bildes bestimmen. Angenommen, das ins DMS geladene Bild hat eine Breite von 1000 Pixeln, ihnen stehen aber im Webseiten-Layout nur 500 zur Verfügung. Dann geben Sie hier den Wert 500 ein.

Höhe
Das Selbe gilt für die Bildhöhe. Diese können Sie hier Anpassen.

Bezüglich Breite und Höhe gilt zu beachten, dass das Schloss-Symbol rechts dieser Eingabfelder geschlossen ist, andernfalls nur ein Wert verändert wird, was zu einer Verzerrung des Bildes führt, die dem Bild eigenen Proportionen also aufhebt.

Rahmen
Wollen Sie dem Bild einen Rahmen hinzufügen, geben Sie hier die Anzahl Pixel ein, die der Rahmen breit sein soll.

Horizontal-Abstand
Soll das Bild seitlich eingerückt werden, geben Sie hier den Pixelwert an, um den das Bild eingerückt werden soll.

Vertikal-Abstand
Entsprechend dem horizontalen Abstand wird hier der vertikale Versatz definiert.

Ausrichtung
Die Definition der Ausrichtung kennen Sie aus Textprogrammen wie zum Beispiel word. Genau wie Texte können Sie hier Bilder linksbündig, zentriert oder rechtsbündig ausrichten.

Bilder mit einem Link versehen

Bilder können selbstverständlich auch mit einem Link versehen werden.

  1. Doppelklicken Sie das Bild, das Sie mit einem Link versehen möchten
  2. Das Dialog-Fenster 'Bild-Eigenschaften' öffnet sich
  3. Klicken Sie auf den Reiter 'Link'


     
  4. Fügen Sie im Feld 'URL' die gewünschte Zieladresse ein oder definieren Sie die Seite über die Funktion 'Server durchsuchen'