Webseiten erstellen mit CHEETAH
Die wichtigsten Gestaltungselemente im Überblick (5)
Wie integriert man eine Bildergalerie in eine Webseite?
Diashows und Bildergalerien machen sich auf einer Webseite immer gut, da sie Aufmerksamkeit erzeugen und damit zum Verweilen einladen. „Cheetah“ stellt für diesen Zweck einige „Galerien“ – Elemente zur Verfügung. Dabei handelt es sich erst einmal um nichts anderes als um spezielle Bildcontainer, die in der Lage sind, die in ihnen enthaltenen Bilder in Form einer „Slide show“ oder in Form einer rechteckigen Anordnung anzuzeigen.
Slider-Element
Möchte man selbst eine kleine Diashow mit ein paar Bildern zur Gestaltung in die eigene Webseite einbauen, dann ist das "Slider" - Element wie geschaffen dafür (erstes Element in der Kategorie “Galerien“). Die Verwendung ist zwar kinderleicht, aber man sollte sich trotzdem im Vorfeld ein paar Gedanken über dessen Einsatz machen. Der Bildcontainer kann zwar ohne weiteres mit Bildern unterschiedlicher Größe und unterschiedlicher Größenverhältnisse arbeiten. Besser ist es aber, wenn alle Bilder der Slide show möglichst die gleichen Ausmaße, also jeweils die gleiche Höhe und Breite, haben (am besten genau die Größe, welches auch das Slider-Element hat – siehe dessen Einstellungen in der Kategorie „Größe“).
Tipp: Verwenden Sie die Onlineplattform „canva.com“, um die Bilder ihrer Slideshow in die genau richtige Größe zu bringen. Dort können Sie pixelgenau eine eigene Vorlage definieren. In diese ziehen Sie dann aus Ihrem Bilderordner eine entsprechende Bilddatei, skalieren sie anschließend, wobei die überstehenden Ränder über der Vorlage abgeschnitten werden, sobald Sie mit der Maus einen Bereich außerhalb des Bildes anklicken. Anschließend speichern Sie das Bild, löschen es wieder aus der Vorlage und ziehen die nächste Bilddatei darauf und wiederholen das Ganze... Natürlich können Sie an dieser Stelle auch eine eventuelle Beschriftung Ihrer "Dias" mit dem Textwerkzeug von Canva vornehmen...
Wenn Sie nun auf diese Weise alle Ihre Bilder vorbereitet und in einen Ordner gespeichert haben, können Sie daran gehen, sie dem Bildcontainer (den Sie zuvor in genau der Bildgröße auf Ihre Webseite positioniert haben) des "Slider" - Elements zuzuweisen. Dazu klicken Sie in dessen Kopfmenü auf das "+" – Icon („Add Image“), worauf sich sofort der Bildcontainer mit den darin als Beispiel enthaltenen Vorschaubildern öffnet:
Das Löschsymbol für die Bilder ("Papierkorb") sehen Sie, sobald Sie mit der Maus ein Bild berühren - jetzt nur noch ein Klick darauf, und das Bild ist verschwunden. Sie können nun auf diese Weise alle überflüssigen Bilder bis auf Eins erst einmal aus dem Container löschen. Um neue Bilder einzufügen, klicken Sie auf die entsprechende Schaltfläche oben rechts („Add Image“), wobei sich das Ihnen bereits bekannte Builderall Image-Repository öffnet. Dort laden Sie zuerst alle ihre vorbereiteten Bilder (in diesem Beispiel sind das Schmetterlingsfotos) hoch, um sie dann anschließend einzeln durch Markieren und Drücken des Speicher-Buttons in den Bildcontainer zu übertragen.