Webseiten erstellen mit CHEETAH
Ein erster Blick auf den drag'n drop Sitebuilder "Cheetah" (3)
Hinweis: Das Randmenü ist bei bestimmten Bildschirmgrößen „einklappbar“. Es ist dann bis auf eine kleine kreisförmige Schaltfläche (die dem Aufklappen dient) unsichtbar. Wenn Sie in diesem Zustand im Kopfmenü eines Elements auf das Stift-Icon klicken, dann wird nicht das Randmenü aufgeklappt, sondern die Eigenschaften des Elements in einem separaten, frei positionierbaren Fenster angezeigt.
Bevor wir das gleich einmal ausprobieren, wollen wir aber zuvor einmal kurz einen Blick auf die Hauptmenüzeile werfen.
Der linke Funktionsblock dient einmal dazu, wieder zurück in die Webseitenansicht zu wechseln („Häuschen“ – eventuell werden Sie dabei aufgefordert, zuvor die Webseite zu speichern) und zum anderen (die nächsten zwei Schaltflächen rechts davon), um die Webseite einmal im Desktop-Modus bzw. im Smartphone-Modus im Editor darzustellen.
Designt wird eine Webseite generell im Desktop-Modus. Dabei wird im Hintergrund simultan die Smartphonevariante mit erzeugt. Sie ist in der Regel sofort ohne weitere Änderungen „brauchbar“, sollte aber im Smartphone-Modus noch etwas nachbearbeitet werden, um sie designmäßig „aufzuhübschen“ und vielleicht auch in der Funktionalität noch etwas anzupassen.
Editor im Smartphone-Modus
Wenn Sie einen „Blick“ auf das Aussehen der Webseite noch während des Designprozesses werfen möchten, dann können Sie jederzeit über den entsprechenden Button im Hauptmenü in den „Preview-Modus“ des „Cheetah“-Editors schalten („Vorschau“). Auch hier haben Sie die Möglichkeit, von der Desktop-Ansicht auf die Smartphone -Ansicht zu wechseln.
Hinweis: Bevor Sie wieder in den Editor-Modus wechseln können, müssen Sie die Desktop-Preview aktiviert haben. Nur dort ist rechts im Hauptmenü die Schaltfläche „Zurück zum Editor“ in der Hauptmenüzeile sichtbar.
Dem Editor-Modus schließt sich rechts eine Klappbox an, über die Sie bequem zu einer anderen Seite Ihrer Website wechseln können. Die Auswahl erfolgt dabei über den Webseitennamen. Schon allein deshalb ergibt es Sinn, jeder Webseite einen kurzen, prägnanten (beschreibenden) Namen zu geben (und nicht etwa irgendetwas „Kryptisches“).
Als Nächstes folgt ein „funktioneller“ Menübereich, der u. a. die globalen Schrifteinstellungen der Webseite sowie das sehr nützliche Randlineal enthält. Die Schaltflächen wirken dabei wie Schalter, welche die entsprechende Funktion „aufblenden“ oder wieder „verschwinden“ lassen.
Als Letztes sei noch auf die äußerst wichtige Schaltfläche „Speichern“ hingewiesen. Diesen Button sollten Sie während des Designprozesses möglichst oft bemühen, um den erreichten Bearbeitungsstand in der Builderall-Cloud zu speichern. Dabei können Sie entscheiden, ob die gemachten Änderungen zugleich auch veröffentlicht werden sollen (d. h. sie sind quasi sofort im World Wide Web sichtbar) oder erst später.
Schauen wir uns nun die Vorlage etwas genauer an. Sie besteht offensichtlich aus einem Menübereich ganz oben („Header“), einem Themenbereich in der Mitte und einem Fußbereich („Footer“) ganz unten. Alle diese Bereiche bestehen aus einzelnen Elementen wie Texte, Boxen, Slider, Bilder etc., die man mit der Maus anklicken und damit „fokussieren“ kann. Klicken Sie dazu einmal auf den nicht zu übersehenden Text „BARBERSHOP IS A LIFESTYLE“. Sie sehen, es wird im Editor ein Rahmen um das Element gezeichnet, welcher links oben ein sogenannten „Kopfmenü“ mit einzelnen Schaltflächen unterschiedlicher Bedeutung besitzt (Erklärung jeweils als Hint bei Mauszeigerberührung). Zugleich werden im Randmenü die einzelnen Eigenschaftskategorien des Textelements aufgeblendet, die Sie wiederum mit einem Mausklick darauf öffnen können. Sie verbergen die jeweils spezifischen Elementeeigenschaften. Sollte das Randmenü die Eigenschaften des fokussierten Elements gerade nicht anzeigen (z. B. weil eben die Vorlagen-Seite aufgeblendet ist), dann reicht es aus, im Kopfmenü des Elements auf das Stift-Symbol zu klicken:
Ein Textelement besitzt aber noch eine wichtige Funktion, denn Sie möchten ja auch gerne selbst Texte eingeben oder vorhandene Texte bzw. Texttemplate („Lorem ipsum dolor…“) ändern oder explizit formatieren. Diese Funktion blendet einen kleinen, aber leistungsfähigen Texteditor auf – und zwar immer dann, wenn Sie auf ein Textelement einen Doppelklick ausführen:
In diesem Modus können Sie – wie Sie es bei einem Texteditor gewohnt sind – einen Text eingeben, verändern oder anderweitig editieren: