Schnelleinstieg "Cheetah"

Arbeiten mit dem Webseiteneditor

SCHNELLEINSTIEG CHEETAH

Arbeiten mit Bildern und Grafiken in Cheetah

Auf jeder modernen Webseite sind grafische Elemente und Bilder als wesentliche Gestaltungsobjekte enthalten. Wie man mit diesen Gestaltungsobjekten in Cheetah arbeitet und in eigene Webseiten integriert, soll Gegenstand dieses Kapitels sein. 

Bilder und Grafiken als Gestaltungselemente

Bilder und Grafiken haben gegenüber reinenTexten auf Webseiten gleich mehrere  Vorteile: Sie dienen einmal als Eycatcher, d.  h., wenn ein Betrachter sich eine Internetseite anschaut, wird ihm immer zuerst eine darauf vorhandene Abbildung ins Auge fallen. Texte dagegen sind eine spezielle Form codierter Informationsträger, die vom Betrachter explizit entschlüsselt werden müssen, was aber nicht immer gelingt (weil beispielsweise der Betrachter die Textsprache nicht versteht). Die Informationsaufnahme über Bilder und Grafiken erfolgt hingegen deutlich intuitiver und fast wie von selbst, denn ein Betrachter versteht bzw. interpretiert visuellen Medien i. d. R  schneller und einfacher als ein reiner Text. Außerdem können Abbildungen Emotionen und Neugierde wecken und damit verhindern, dass der Nutzer die angesurfte Webseite sofort wieder verlässt. Aus diesem Grund ist die Verwendung von Abbildungen quasi ein Wesensmerkmal moderner Webseitengestaltung.

Bilder und Grafiken auf Webseiten erfülllen verschiedene Funktionen wie beispielsweise

als Hintergrunddekoration und Eycatcher (Hintergrundbild von Bannern)
als Informationsträger (Werbebilder, Geschäftsgrafiken etc.)
zur Unterstreichung des Contents ("Ein Bild sagt mehr als Tausend Worte"
als Werbeträger (Vorstellung des Unternehmens)
zur Suchmaschinenoptimierung (Bildersuche, Verwendung Bildbeschreibung und Tag)

Builderall im Allgemeinen und der Cheetah-Webseiteneditor stellen eine Vielzahl von Tools und Workarounds zum Management von Abbildungen zur Verfügung. Hierbei sei explizit nur auf das 3D Mockup-Studio und das spezielle 3D Photo Editor Studio (beide im Bonuspaket I enthalten) hingewiesen.

Allgemeines zu Bildern auf Webseiten

Der Cheetah Webseiteneditor unterstützt eine Vielzahl von Pixel- und Vektorformaten. Im Einzelnen sind das Bilddateien in den Formaten .PNG, .JPG, . SVG, .GIF, .JFIF, .PJPEG, .PIP, .WEBP und .SVGZ. In der Praxis werden dabei in den meisten Fällen nur die Formate .PNG und .JPG für Pixelgrafiken bzw. Fotos und .SVG für Vektorgrafiken eingesetzt. Das .GIF-Format erlaubt die Einbindung spezieller animierter Bilder. 

Bei der Verwendung von Bildern auf Webseiten gibt es ein paar allgemeine Regeln zu beachten. Die Wichtigste dabei ist - Verwenden Sie hochwertiges Bildmaterial. Nichts ist schlimmer für einen ersten Eindruck als wie verpixelte, unscharfe oder farblich nicht stimmige Bilder. Deshalb sollte ein leistungsfähiges Bildbearbeitungsprogramm immer zur Hand sein (siehe z. B. hier...).  Weiterhin sollten Sie - schon aus SEO-Gründen - auf eine optimale Größe bei Bitmaps achten, denn davon hängt die Ladegeschwindigkeit auf ein Endgerät ab. Im Idealfall sollte die Bildgröße auf der Webseite mit der Bildgröße (jeweils in Pixeln) der Bitmap übereinstimmen oder nur wenig abweichen. Auch kann eine explizite Kompression bei manchen Bildern oder Fotos noch einige kByte bringen. Dazu sind im Web eine Vielzahl von Online-Tools verfügbar, aber auch die meisten Bildbearbeitungsprogramme bieten dazu eine entsprechende Funktion an.

Weiterhin ist es empfehlenswert (aber kein muss), ein externes Repository für Bilddateien zu verwenden. In dieser Hinsicht ist die Webplattform "Cloudinary" die erste Wahl. Hier können Sie die auf Ihren Webseiten eingefügten Bilder bequem in Ordner halten. Die Verknüpfung mit den Bildcontainern auf der Webseite erfolgt über entsprechende externe Links, die sich in Cloudinary ganz leicht erstellen lassen.

Um eventuelle rechtliche Probleme zu umgehen, achten Sie immer darauf, dass Sie auch die Urheberrechte an dem verwendeten Bildmaterial besitzen oder die Bilder rechtlich einwandfrei erworben haben bzw. es sich um frei verfügbares, lizenzfreies Material handelt.  Quellen für derartige Grafiken und Fotos finden Sie hier...

Das Bild-Element

Um ein Bild in eine Webseite einzufügen, müssen Sie nur aus der Elementeliste im rechten Randmenü den Bereich "Bild" wechseln und dort die native Bildvorlage per drag'n drop auf den Banner ziehen. Im Berarbeitungsmodus können Sie dann explizit dem Image-Container das Bild Ihrer Wünsche zuweisen. Dafür gibt es im Cheetah-Editor zwei Möglichkeiten: Entweder Sie wählen ein Bild aus dem Builderall-Repository aus, nachdem Sie es heraufgeladen haben oder Sie weisen dem Container eine URL zu einem Bild zu, d. h. Sie verlinken es beispielsweise mit einem in einer anderen Webseite vorhandenen oder in Cloudinary gespeicherten Bilddatei. Unter "Allgemeine Einstellungen" finden Sie dafür den Eintrag "Bild" sowie den Eintrag "Externe Grafik". 

Standard-Bildcontainer

Wenn Sie "Bild" auswählen, dann öffnet sich das Builderall Image-Repository. Es besteht aus fünf Bereichen, von denen vier (Images, Icons, Buttons, Gifs) eine große Zahl lizenzfreier Bilder und Grafiken enthält, die Sie auf Ihren Webseiten uneingeschränkt verwenden können. Der Bereich "User files" ist dagegen Ihr privates Repository, in welches Sie nach Belieben eigene Bilddateien hochladen können, soweit deren Dateigröße 4 MByte nicht übersteigt. An dieser Stelle macht es Sinn, sich kurz ein paar Gedanken über eine sinnvolle Ordnerstruktur zu machen, denn Sie können im User-File-Bereich in einer Ebene beliebig viele eigene Ordner anlegen. Sie können Sie (was den Ordnernamen betrifft) beispielsweise nach Ihren Projekten oder nach der Art Ihres Inhalts (wie im Bereich "Images") organisieren. 

Nach dem Hochladen wird Ihnen das Bild im Ordner angezeigt. Wenn Sie e es dort mit der Maus berühren, erscheinen drei Icons. Das Erste ("Stift") dient dazu, den Bildnamen zu editieren. Hier ist es sinnvoll und wichtig, der Bilddatei einen aussagekräftigen Namen zu geben, mit dem es auch später einmal über die Suchleiste am oberen Rand des Fensters leicht aufgefunden werden kann. Das zweite Icon ("Lupe") öffnet die interne Bildvorschau und das dritte Icon ("Paperkorb") dient dem Löschen des Bildes aus dem Builderall-Repository.  Um das Bild schließlich in ihren Bildcontainer auf Ihrer Webseite zu übernehmen, brauchen Sie nur das Bild markieren (kenntlich am Rand) und dann die Schaltfläche "SPEICHERN" zu klicken. Anschließend können Sie es mit dem Container beliebig verschieben und skalieren und - wenn Sie möchten - mit diversen Animationseffekten versehen, die Ränder runden und einen Schatten hinzufügen. 

Eine weitere Möglichkeit, Bilder in eine Webseite einzubauen, ist die explizite Verwendung eines "Bildlinks".  Darunter versteht man die URL einer Bilddatei. Man erhält sie, wenn man beispielsweise auf einer Webseite mit dem Mauszeiger ein Bild berührt und dann über das Kontextmenü mittels "Grafikadresse kopieren" die Bild-URL in die Zwischenablage übernimmt. Diese kann man dann im Bildcontainer der eigenen Webseite in die Eigenschaft "Externe Grafik" einfügen. Anschließend ist wird dann das entsprechende Bild - und zwar vollkommen rechtskonform - auf der eigenen Webseite sichtbar.  Das folgende Bild eines "Apfelfruchtstechers" (eines Käfers) wurde z. B. direkt aus dem Naturwunder-Blog auf diese Weise verlinkt:

Der Nachteil dieser Vorgehensweise ist jedoch, dass natürlich dieses hier lediglich verlinkte Bild sofort von der Webseite verschwindet, sobald es auf der Quell-Webseite aus irgendeinem Grund gelöscht wird.

Wenn Sie das Webportal "Cloudinary" zum Speichern Ihrer Bilder verwenden, dann sollten Sie diese Technik soweit es geht immer anwenden. Wenn Sie dort in der Media Library ein Bild markieren, dann finden Sie rechts oben das Link-Symbol. Wenn Sie dort drauf klicken, wird der Bild-Link automatisch in die Zwischenablage kopiert (alternativ können Sie natürlich auch die Funktion "Copy URL" aus dem Kontextmenü verwenden). Anschließend brauchen Sie ihn dann nur noch in die entsprechende Eigenschaft des Bildcontainers einzutragen.

Das 3D-Bild-Element

In der Palette der "Bild-Elemente" findet sich auch eine Image 3D - Komponente, die sich durch einen eingebauten Animationseffekt auszeichnet: 

Um ihn zu sehen, müssen Sie nur den Mauszeiger über das Bild bewegen. In allen anderen Eigenschaften entspricht es dem zuvor beschriebenen normalen Bild-Element.

-  Cheetah-Einstieg: -

Startseite  Anwendungsgebiete  Cheetah-Sitebuilder  Mockup-Studio  Digital-Magazine-Editor  OnPage-SEO  Wordpress  3D-Photo-Editor-Studio  FAQ