Webseiten erstellen mit CHEETAH
Ein erster Blick auf den drag'n drop Sitebuilder "Cheetah" (5)
Das jeweils ausgewählte Bild erkennen Sie im Repository-Fenster an dessen blauer Umrandung. Wenn Sie jetzt rechts unten die Schaltfläche „Speichern“ klicken, wird das ausgewählte Bild in den Image-Container Ihrer Webseite geladen und auch sogleich im Editor sichtbar. Jetzt können Sie das Logo in seiner Größe ändern oder auch drehen (Ankerpunkte), die Position verändern (automatisch aufgeblendete Ausrichtungslinien beachten) oder auch weitere Eigenschaften des Bildes über das Randmenü einstellen (probieren Sie doch einmal einen roten Rand mit der Breite 5 Pixel und abgerundeten Ecken um das Logo-Image zu zeichnen).
Wenn Sie bis hierhergekommen sind, dann haben Sie bereits das Prinzip begriffen, wie man in „Cheetah“ Webseitentemplates anpasst, um letztendlich ohne großen Aufwand zu einer eigenen Webseite zu gelangen. Natürlich müssen Sie sich etwas mit den die Webseite aufbauenden Elementen und deren Eigenschaften auseinandersetzen (wir kommen noch ausführlich darauf zurück). Aber schwierig ist es sicherlich nicht, mit Builderall „Cheetah“ aus einem Webseitentemplate eine eigene, unverwechselbare Webseite zu erschaffen.
Wichtig: Vergessen Sie keinesfalls zwischendurch öfters einmal die Webseite zu speichern!
Gut, machen wir weiter. Den „Slider“ lassen wir erst einmal so wie er ist (um zu sehen, wie er funktioniert, brauchen Sie übrigens nur in die Webseitenvorschau zu wechseln. Den Button dafür finden Sie oben rechts in der Hauptmenüzeile des Editors). Wir wenden uns jetzt vielmehr den aus jeweils drei nebeneinander liegenden Boxen aufgebauten Bereich darunter zu. Sie liegen genauso wie die Elemente in der durch eine blaue Linie im Editor abgegrenzten blauen Linie darüber auf einem sogenannten „Banner“. Um das zu erkennen, klicken Sie mit der Maus auf die linke Box („Professional Barber Kit“) und ziehen sie mit gedrückter linker Maustaste etwas nach unten, bis der hellgraue Untergrund zu sehen ist. Wenn Sie jetzt mit der Maus in diesen hellgrauen Untergrundbereich klicken, wird genau dieser Banner fokussiert und dessen Kopfmenü wird aufgeblendet.
Banner sind das grundlegende Aufbauelement von Webseiten in „Cheetah“ überhaupt. Banner sind dabei erst einmal nur in ihrer Höhe einstellbare Bereiche, auf die die einzelnen, die Webseite ausmachenden Elemente gelegt werden. Diese Elemente werden dann quasi „Eigentum“ des Banners, auf dem sie liegen.
Achtung: Ein bestimmtes Element kann immer nur zu einem Banner gehören (dessen „Eigner“), weshalb Sie Überlappungen vermeiden sollten.
Weiterhin können Banner samt ihrem Inhalt vertikal verschoben werden, was ein „Umsortieren“ der Funktionsbereiche einer Webseite zu einer einfachen Übung macht. Auch lassen sich jederzeit neue Banner zu einer Webseite hinzufügen und an genau die Stelle positionieren, wo man sie hinhaben möchte. Die entsprechende Einstellmöglichkeit finden Sie in den Banner-Eigenschaften in der Kategorie „Banner anordnen“ (ausprobieren!). Und Banner können samt ihren Elementen als „Bannervorlagen“ zur Wiederverwendung gespeichert werden, was u. U. zu enormen Zeitersparnissen bei der Webseitenentwicklung beitragen kann.
Auch ein Banner an sich besitzt eine Menge Eigenschaften, wie Sie am umfangreichen Randmenü unschwer erkennen können. Die bei weitem wichtigste Eigenschaft ist dabei die „Größe“, über den Sie pixelgenau per Tastatureingabe oder ganz schnell über den Schieberegler die Höhe des Banners einstellen können. Und das ist genial. Denn wenn Sie beispielsweise später einmal einen Text auf Ihrer Webseite durch einen längeren ersetzen möchten, der Platz dafür aber nicht ausreicht, denn vergrößern Sie einfach die Höhe des darunter liegenden Banners, und schon haben Sie wieder genug Platz, um Texte zu erweitern oder neue Elemente wie Bilder, Boxen etc. einzufügen. Und, wie bereits kurz erwähnt, Sie können ganze „ausgestaltete“ Banner als private Templates speichern und dann auf anderen Webseiten bzw. Websites wieder verwenden...
In unserem Fall lassen wir jedoch das Banner so wie er ist und ziehen das linke Box-Element wieder an seine angestammte Position. Beim Verschieben werden Sie sicherlich bemerkt haben, dass auch die auf der Box liegende Schrift und die darunter liegende Schaltfläche mit verschoben wurden. Denn hier gilt das Gleiche wie bei einem Banner: Alle Elemente, die auf einer Box liegen, gehören quasi der Box – oder anders ausgedrückt, die Box ist deren Eigner. Und auch das ist genauso genial. Denn in „Cheetah“ können Sie natürlich auch fertig mit den verschiedensten Elementen ausgestattete Boxen als private Templates speichern und so im gleichen oder in anderen Webprojekten wieder verwenden. Damit wird es zu einer leichten Übung, ohne großen Aufwand über alle seine Webseiten ein einheitliches „Corporate Design“ zu gewährleisten, was gerade bei Firmenwebsites wichtig ist.
Schauen Sie sich kurz einmal die Eigenschaften eines Box-Elements an und ändern Sie anschließen auf allen drei Boxen des Banners die Texte. Beachten Sie insbesondere, dass eine Box über die Eigenschaften der Kategorie „Allgemeine Farben“ auch explizit mit einem Hintergrundbild ausgestattet werden kann. Man muss in diesem Fall also nicht unbedingt ein separates Image-Element dafür verwenden.