Schnelleinstieg "Cheetah"

Beispiel für die Entwicklung einer Webseite

SCHNELLEINSTIEG CHEETAH

Erstellung einer Beispielwebseite

Das Ziel der Übung soll sein, eine kleine Landingpage zum Thema "Cuba-Zigarren" zu entwickeln, welche aus einen Header, einem Content-Band, einem Kontaktformular und einem Footer besteht. Um uns die Arbeit zu vereinfachen, bauen wir als Erstes die Struktur aus vorgefertigten Banner-Templates auf, die wir anschließend anpassen. Natürlich hätte man auch (was der häufigere Fall ist) mit völlig leeren Bändern beginnen können.

Als Letztes benötigen wir noch einen einfachen Footer, z. B. "Footers - 10". Damit haben wir die Grundstruktur der Webseite festgelegt und wir können beginnen, sie nun nach unseren Vorstellungen umzubauen.

Wir wechseln als Erstes im rechten Randmenü des noch leeren Cheetah-Editors auf "Neu" - "Banner" und suchen uns unter "Header" das Header-Template "Expressheader" aus und klicken darauf. Es wird sofort in den Editor übertragen. Als Nächstes benötigen wir ein Contentband, wobei wir in der Bannerkategorie "1st Fold" fündig werden - "1st Fold -08":

Wie Sie sehen, bestehen die Templates aus vielen einzelnen Elementen, die Sie mit der Maus anklicken können. Wenn Sie das tun, erscheint links oben am Element dessen Kopfmenü, welches aus einzelnen kleinen Icons besteht. Dahinter verbergen sich Schaltflächen mit einer jeweils spezifischen Funktion. Weiterhin können Sie (mit Ausnahme des Banners selbst) "fokussierte" Elemente beliebig mit der Maus verschieben (linke Maustaste gedrückt halten) oder ihren Größenbereich ändern. Dafür finden Sie rechts unten am Umhüllungsrechteck einen kleinen Ankerpunkt, den Sie mit dem Mauszeiger greifen (die Form des Mauszeigers ändert sich) und über den Sie dann die Größe des Elements quasi händisch verändern können. 

Aber schauen wir uns erst einmal die "Kopfmenüs" der Elemente an und was die einzelnen Schaltflächen bedeuten. 

Unterschiedliche Elemente (der Name des gerade fokussierten Elements steht immer als Erstes in der Menüzeile) können dabei eine unterschiedliche Zahl von Schaltflächen in ihrem Kopfmenü aufweisen, was den unterschiedlichen Eigenschaften der jeweiligen Elemente geschuldet ist.

Beginnen wir mit den Schaltflächen, die alle Elemente gemeinsam haben: 

Disketten-Icon: Element bzw. Elementcontainer als Vorlage speichern
Wenn Sie auf diese Schaltfläche klicken erscheint ein Dialog, in dem Sie aufgefordert werden, einen passenden Namen für das Element einzugeben. Es wird dann genau in dieser Form als 
nutzerdefiniertes Template gespeichert. Sie finden es anschließend im Bereich "Vorlagen" des rechten Randmenüs, von wo aus Sie es dann genauso wie jedes andere Element in Cheetah bei Bedarf per dragn' drop (oder Anklicken - "Banner") auf die Webseite bringen können. Gerade bei Bannern und Menüzeilen kann das eine große Arbeitserleichterung sein, da diese Nutzer-definierten Vorlagen natürlich auch anderen Projekten zur Verfügung stehen.

Stift-Icon: Einstellungsmodus
Im rechten Randmenü befindet sich der Bereich "Einstellungen", wo Sie Zugriff auf alle Eigenschaften des gerade fokussierten Elements haben. Häufig schaltet der Randbereich automatisch in den Einstellungsmodus um, sobald Sie ein Element im Editor fokussieren. Aber das ist nicht immer der Fall. Deshalb sollten Sie sich angewöhnen immer dann, wenn Sie ein Element anpassen möchten, das Stift-Icon anzuklicken, weil dadurch der rechte Randbereich sofort auf die Seite "Einstellungen" schaltet. In der ersten Zeile steht übrigens immer, welchen Typ von Element sich gerade im Einstellungsmodus befindet (z. B. "Du bearbeitest Text").

Auge-Icon: Verbergen des Elements
Manchmal möchte man ein Element nicht löschen, sondern nur in der aktuellen Ansicht (Desktop oder Smartphone) unsichtbar machen, d. h. "verbergen". Wenn Sie auf diese Schaltfläche klicken, dann wird das betreffende Element in der Ansicht verschwinden. Es ist aber nicht ganz weg, denn Sie finden es im Bereich "versteckte Elemente" im Hauptmenü des Editors wieder. Wenn Sie es in der dortigen Liste mit der Maus berühren, dann wird es kurzzeitig wieder eingeblendet. Sie können es aber auch wieder dauerhaft reaktivieren, in dem Sie in der Liste auf das entsprechende Auge-Symbol klicken.

Klone-Icon: Klonen des fokussierten Elements
Diese Funktion wird Ihnen am meisten Spaß machen. Denn ein Klick auf das "Klone-Icon"  erstellt sofort eine exakte Kopie des Elements bzw. Elementecontainers (Banner, Box). Sie brauchen es dann nur noch mit der Maus "packen" und dort hinzuschieben, wo Sie es benötigen. Anschließend können Sie natürlich dessen Eigenschaften beliebig ändern.

Papierkorb-Icon: Löschen des Elements
Über diese Schaltfläche löschen Sie das fokussierte Element dauerhaft.

Zentrieren-Icon: Zentrieren des Elements
Damit können Sie das Element in seinem Container (Banner, Box) genau zentrieren.

Set Link-Icon: Element mit einer Verlinkung ausstatten
Wenn Sie möchten, dass bei einem Klick auf das Element (z. B. Bild) auf eine andere Webseite (intern oder extern ist dabei egal) gewechselt oder eine spezielle Aktion ausgeführt werden soll, dann können Sie über diese Schaltfläche den entsprechenden Link definieren oder die entsprechende Aktion zuordnen. Dazu wird ein spezieller und umfangreicher Einstellungsdialog aufgeblendet.

Konfigurations-Icon: Spezielle Konfiguration eines Elements 
Über diese Schaltfläche lässt sich Element-abhängig ein spezielles Konfigurationsmenü öffnen. Das kann beispielsweise bei einem Menü-Element dazu dienen, Menüeinträge und deren Verlinkung zu definieren.

Pfeil-Icon: Ändern der Bannerreihenfolge
Über die Pfeil-Schaltflächen eines Bannerelements kann der Banner relativ zu seiner Umgebung entweder um eine Position nach oben oder eine Position nach unten verschoben werden.

Ein weiterer Satz von Schaltflächen wird sichtbar, wenn Sie mit gedrückter Shifttaste ein Element fokussieren. Es handelt sich dabei um Schaltflächen, die Ihnen bei der horizontalen und vertikalen Ausrichtung ihrer Elemente helfen.

Vertikal-Icon: Vertikales Ausrichten
Wenn Sie mit gedrückter Shift-Taste mehrere Elemente markieren, dann werden über diese Schaltfläche (wird b