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 beim "letzten" Element angezeigt) alle diese Elemente vertikal ausgerichtet, wobei das zuletzt angeklickte Element das Referenzobjekt darstellt.
Horizontal-Icon: Horizontales Ausrichten
Wenn Sie mit gedrückter Shift-Taste mehrere Elemente markieren, dann werden über diese Schaltfläche (wird beim "letzten" Element angezeigt) alle diese Elemente horizontal ausgerichtet, wobei das zuletzt angeklickte Element das Referenzobjekt darstellt.
Nun können wir endlich beginnen, unsere Webseite anhand der in den Editor geladenen Template-Banner zu gestalten. Hier macht es sich bezahlt, wenn man im Vorfeld bereits einige Vorbereitungen gemacht hat. Das betrifft u. a. die einzubauenden Bilder und eventuell auch schon einige Texte, die unformatiert vorliegen sollten. Letztere kann man dann mit einem Editor oder WordPad öffnen und ganz oder stückchenweise über die Zwischenablage in die entsprechenden Textfelder der Webseite übertragen.
Was Bilder betrifft, so sollten sie entweder im png- oder jpg-Format vorliegen, möglichst die Größe haben, wie sie auch auf dem Desktop erscheinen und - aus SEO-Gründen - einen Dateinamen besitzen, der möglichst beschreibt, was auf dem Bild zu sehen ist. Beim Einbauen in die Webseite werden Sie über einen speziellen Dialogin den Cloud-Bildspeicher von Builderall geladen und können von dort der Webseite zugänglich gemacht werden. Wie das genau geht, wollen wir gleich einmal ausprobieren.
Tipp: Verwenden Sie Cloudinary als Bild-Repository für Ihre Webseiten und bauen Sie nur Links auf diese Bilder in Ihre Webseite ein.
Bleibt nur noch die Gestaltung des Footers. Aber das sollte Ihnen jetzt selbst gelingen...
In userem Fall tauschen wir das Hintergrundbild des Content-Banners durch ein werbewirksames Bild, welches zu unserem Thema passt, aus. Es liegt in einem Ordner der Festplatte bereits fertig bearbeitet bereit...
Jetzt klicken wir im Editor auf den mittleren Contentbanner worauf das rechte Randmenü sofort die Einstellungsseite des Banners aufblendet. Von den vielen Eigenschaften, die hier gelistet sind, interessiert uns hier erst einmal nur die Eigenschaft "Hintergrund". Wenn Sie auf diese Eigenschaft klicken, öffnet sich der entsprechende Einstellbereich mit dem Eingabefeld "Bild". Sobald man dort drauf klickt, öffnet sich das Builderall Image-Repository und Sie können über die Schaltfläche "Select File" das gewünschte Bild hochladen. Wenn schließlich der Ladevorgang abgeschlossen ist, erscheint das Bild im Ordner und kann mit der Maus explizit markiert werden (d. h. es wird "umrahmt"). Jetzt nur noch "Speichern" klicken, und das ehemalige Hintergrundbild wird durch das Neue ersetzt:
Auf dem Contentbanner befindet sich oben noch eine blaue Box, die den oberen Teil des Bildes abdeckt. Diese Box sollten Sie als Nächstes löschen (sollte das Kopfmenü auf ihrem Monitor nicht zu sehen sein, dann verschieben Sie die Box einfach mit der Maus nach rechts bis das Kopfmenü sichtbar wird).
Jetzt werfen wir schnell noch einen Blick auf den Header. Da wir weder Logo noch Menü benötigen, löschen wir es auf die gleiche Weise wie eben auch die Box (Papierkorb im jeweiligen Kopfmenü). Dafür wollen wir einen hübschen Werbespruch auf diesem Banner unterbringen, z. B. "Der Luxus an einer Zigarre ist nicht deren Preis, sondern die Zeit, die man mit ihr verbringt". Und auch das ist schnell geschehen. Im Randmenü wählen wir dazu "Neu" - "Elemente" - "Texte" aus, worauf eine Anzahl von Überschriftsvorlagen (H1 bis H6) und eine Vorlage für Textabsätze angezeigt wird. Letztere wollen wir jetzt verwenden: Mit der Maus auf "Text-Absatz" klicken und mit gedrückter linker Maustaste in den Header-Panel ziehen und dort ablegen. Wegen der schlechten Kombination von Hintergrundfarbe und Textfarbe ist der Text zwar nur zu erahnen, aber sobald die Maus über das Textfeld streicht, zeigt sich das blaue Elementerechteck. Ein Klick darauf bringt auch das entsprechende Kopfmenü zur Ansicht. Um den Text zu editieren und zu formatieren, müssen Sie jetzt nur noch einen Doppelklick in das "Textrechteck" ausführen - und die Menüleiste des Texteditors öffnet sich. Wenn Sie sich bereits etwas mit Texteditoren auskennen, dürfte dessen Bedienungkein Problem darstellen.
Als Erstes markieren wir mit gedrückter linker Maustaste den Vorgabetext, der nun deutlich sichtbar wird. Dann suchen Sie sich im Editor die Funktion "Textfarbe" und wählen dort z. B. aus der erweiterten Palette "Gelb" aus. Anschließend markieren Sie den Vorgabetext erneut und schreiben den neuen "Werbetext" in das Textfeld (Sie können ihn natürlich auch alternativ mittels
Jetzt sollten Sie im Eigenschaftenbereich noch die weiteren, durch "Radio Groups" gekennzeichneten Eigenschaften "Origin", "Size" und "Repeat" durchprobieren und beobachten was im Editor mit dem Bild passiert. Am Ende stellen Sie aber bitte wieder die Eigenschaften auf "Border Box", "Cover" und "No-Repeat".
Nach der gleichen Methode können Sie jetzt auch den Text auf der Banderole austauschen und eventuell umformatieren. Zuvor sollten Sie noch den Aktion-Button löschen und die blaue Hintergrundfarbe der Banderolen-Box durch ein passendes Braun ersetzen. Am Ende könnte der Content-Banner dann folgendermaßen aussehen:
An dieser Stelle sollten Sie die Gelegenheit nutzen und das Handling im Editor üben, in dem Sie beispielsweise weitere Bänder hinzufügen, deren Position ändern, sie mittels drag'n drop aus dem rechten Randmenü mit verschiedenen Elementen belegen (die Sie dann individuell anpassen), ihr Aussehen in der Vorschau begutachten (Desktop und Smartphone-Ansicht) usw. Und zum Schluss löschen Sie die Banner bzw. Elemente, die Sie nur zur Übung der Webseite hinzugefügt haben. Aber auch dann ist die Webseite noch nicht fertig, denn es fehlt noch das Impressum und die Datenschutzerklärung. Und genau für diese benötigen wir eine weitere Webseite, die wir dann mit dem Impressumslabel des Footer verlinken werden.
Zum Abschluss dieses Kapitels noch ein paar Worte zur Funktion "Speichern". Sie besitzt nämlich genaugenommen zwei Modi - "Nicht jetzt" und "Alles klar" - die sich auf die gleichzeitige Veröffentlichung Ihrer Webseite beziehen. Standardmäßig sollten Sie immer "Nicht jetzt" auswählen, so lange ihre Webseite noch nicht fertig ist oder Sie diese nicht in ihrer vollen Funktionalität ausprobieren möchten. Denn wenn Sie "Alles klar" auswählen, dann wird ihre Webseite veröffentlicht und ist weltweit über die von Builderall automatisch zugeordnete Subdomän (bzw, Ihrer Domän, sollten Sie diese bereits aufgeschaltet haben) sichtbar. Unter welcher Domän / Subdomän dann die Webseite erreichbar ist, wird Ihnen in einem Dialogfenster angezeigt. Dort finden Sie auch einen Button, über den Sie die veröffentlichte Webseite in ihrem Browser öffnen können. Sie können an dieser Stelle aber auch eine eigene Domän aufschalten, die Sie bereits erworben haben oder die Sie direkt über Builderall erwerben können.
Impressum-Seite anlegen
Eine Webpräsentation besteht gewöhnlich nicht nur aus einer Homepage, sondern aus einer Vielzahl (manchmal "Hunderte") von Unterseiten, die nach bestimmten Gesichtspunkten untereinander verlinkt sind. Auch in Cheetah können Sie selbstverständlich zusätzlich zu Ihrer Homepage noch beliebig viele weitere Unterseiten anlegen - beispielsweise für Impressum und Datenschutzerklärung. Und das wollen wir jetzt tun.
Um eine neue Unterseite einzurichten, müssen Sie im Cheetah-Webseiteneditor auf "Meine Webseite" (Excellente Cuba-Zigarren) wechseln. Dort können Sie dann über die Schaltfläche "Neue Seite hinzufügen" eine neue Unterseite anlegen. In dem darauf hin aufgeblendeten Dialog geben Sie der Unterseite einen Namen und einen Titel und eine suchmaschinenrelevante Beschreibung (können Sie natürlich auch später nachholen). In unserem Fall nennen wir die Seite "Impressum und Datenschutz" und den Titel "Impressum". Nach dem Speichern wird in der Webseitenansicht eine neue Seite angezeigt, der Sie wieder - wenn Sie möchten - ein Page Share Image zuweisen können (und bei größeren Projekten auch immer tun sollten). Bevor wir aber die Seite bearbeiten, rufen wir noch einmal über das Drei-Punkte-Menü die Seiteneinstellungen auf und editieren das Feld "URL" -> "impressum".
Jetzt können Sie die Einstellungen wieder speichern und auf "Seite bearbeiten" klicken. Anschließend fügen Sie in den noch leeren Editor ein leeres Band ein, welches dann den Impressumstext und die Datenschutzerklärung aufnehmen soll. Der Rest ist einfach (beim "Impressum" muss man ja nicht unbedingt auf Schönheit achten). Sie ziehen aus dem rechten Randmenü entsprechende Texttemplates (Abschnitt) auf das Banner, fügen dort den Impressumstext ein. Danach brauchen Sie ihn mittels des Texteditors nur noch entsprechend formatieren und mit der Maus gefällig auf dem Banner anordnen. Das Gleiche gilt auch für die Datenschutzerklärung, die man aber zuvor bereits geschrieben oder von einem entsprechenden "Generator" im Netz hat erstellen lassen (z. B. Recht24). Hier erfolgt dann das Einfügen im Editor über die Zwischenablage. Am Ende könnte die Seite beispielsweise so aussehen:
Nachdem Sie die Seite gespeichert und in der Vorschau geprüft haben, wechseln Sie wieder in die Homepage im Cheetah-Editor. Dort müssen wir jetzt noch das Impressum auf dem Footer verlinken. Und das geht so:
- Schalten Sie den Text "Impressum und Datenschutz" in den Editiermodus (Doppelklick) und markieren Sie ihn dann mit der Maus.
- Klicken Sie im Editor auf das Link-Symbol, um den Verlinkungseditor zu öffnen und tragen Sie dort die URL der Impressumsseite ein. Sie ergibt sich in unserem Fall aus dem Bezeichner der Hauptdomän gefolgt von einem Slash und der in den Einstellungen der Seite festgelegten URL (hier "impressum").
Alternativ (und das ist einfacher, solange die Webseite noch nicht veröffentlicht ist) ist die Verwendung einer Schaltfläche (Button) mit der Bezeichnung "Impressum und Datenschutz", deren Farben so eingestellt sind, dass sie mit dem Bannerhintergrund übereinstimmen. Diese Schaltfläche besitzt nämlich wie alle Buttons in ihrem Kopfmenü die Verlinkungsfunktion. Klickt man darauf, dann öffnet sich auch ein Verlinkungseditor, der jedoch nicht nur die Verlinkung über eine URL zulässt:
- Wechseln Sie auf die Seite "Page" des Verbindungseditors
- Wählen Sie die Seite "Impressum und Datenschutz" aus sowie "Im gleichen Tab öffnen"
- Speichern Sie die Einstellungen
Und das war es auch schon. Sobald irgendwann später jemand auf die Schaltfläche klickt, öffnet sich die Impressumsseite.
- Cheetah-Einstieg: -
Startseite Anwendungsgebiete Cheetah-Sitebuilder Mockup-Studio Digital-Magazine-Editor OnPage-SEO Wordpress 3D-Photo-Editor-Studio FAQ