Webseiten erstellen mit CHEETAH
Ein erster Blick auf den drag'n drop Sitebuilder "Cheetah" (9)
Hinweis: Es ist übrigens eine gute Idee, mit ein, zwei Buchstaben den Elemententyp abzukürzen (z. B. „B“ für Banner, „BO“ für Box etc.) und danach eine eindeutigen Namen für die entsprechende Vorlage zu vergeben.
Sobald Sie das getan haben, wechseln Sie über die Seitenauswahlklappbox auf die Seite „About“ und dort wiederum im rechten Randmenü auf die Seite „Vorlagen“. Wenn Sie jetzt die Kategorie „Banner“ öffnen, dann finden Sie darin den eben auf der Homepage als Vorlage gespeicherten Banner „B Footer Friseursite“. Und jetzt klicken Sie einfach auf „+“ – und der Banner wird an das Ende der aktuellen Webseite kopiert. Und Sie ahnen es sicherlich bereits. Jetzt braucht nur noch der darüber liegende „Originalbanner“ über dessen Kopfmenü gelöscht zu werden. Und genau dasselbe machen Sie jetzt gleich noch mit den restlichen zwei Seiten (Speichern nicht vergessen!).
Hinweis: Übrigens, wenn Sie die Vorlage nicht mehr benötigen (auch in Zukunft nicht), dann können Sie diese selbstverständlich wieder löschen. Sie war dann eben nur eine „temporäre Vorlage“…
Wenn Sie möchten, können Sie als Übung auch einmal das Menü-Einzelelement der Startseite als temporäre Vorlage speichern und anschließend nach der gleichen Methode auf den drei anderen Webseiten austauschen. Nur hier müssen Sie (zum ersten Mal) die drag’n drop – Methode, die dem Builderall „Cheetah Sitebuilder“ seinen Namen gab, in Anwendung bringen.
Also speichern Sie das bereits angepasste Hauptmenü als „M Hauptmenü Friseursite“ und wechseln Sie anschließend wieder auf die „About“ – Webseite. Dort können Sie erst einmal das Hauptmenü im Header löschen. Anschließend öffnen Sie im rechten Randmenü die Seite „Vorlagen“ und darin die Kategorie „Elemente“ hier finden Sie das eben gespeicherte „Menü-Element“ wieder, nur dass das „+“ zur Auswahl fehlt.
Und jetzt kommt das „drag’n drop“ ins Spiel, d. h. Sie „greifen“ es sich mit der Maus, in dem Sie den Mauszeiger darauf halten und dann mit gedrückter linker Maustaste auf die ungefähre Position der Webseite ziehen, wo Sie es schließlich ablegen wollen (Maustaste loslassen). Dabei werden Ihnen etwaige Containerelemente – beispielsweise Bannern und Boxen – mit einer hellblauen Begrenzung hervorgehoben, damit Sie auf diese Weise besser erkennen können, wo genau hin Sie das Element ablegen.
Genau auf diese Weise werden übrigens alle Elemente (mit Ausnahme von Bannern) von der Elementepalette des Randmenüs auf die Webseite im Designer übertragen. Diese Methode ist für den „Cheetah Sitebuilder“ fundamental.
Sie sollten jetzt als Übung die Friseur-Website nach dem eben ausführlich beschriebenen Methoden Seite für Seite fertigstellen. Schauen Sie sich auch ab und an die Vorschau an, um zu sehen, wie später die Webseiten im Netz einmal ausschauen werden.
Wenn man mit der Desktopvariante der Website fertig ist, gilt es nun nur noch die Smartphonevariante auf Vordermann zu bringen. Selbst wenn man darauf verzichtet (was man nicht tun sollte), so sieht sie in der Vorschau doch schon recht passabel aus. Selbst die Animationseffekte des Templates funktionieren genau wie gewollt…
Um in den „Smartphone“ - Modus zu gelangen, klicken Sie im Editiermodus oben links auf das Smartphone-Symbol. Jetzt sehen Sie im Editor die (schmale) Smartphonevariante, die aus der Desktopvariante von „Cheetah“ automatisch abgeleitet wurde. Diese können Sie jetzt bearbeiten, wobei alle Änderungen, die Sie hier vornehmen, (meistens) keinen Einfluss auf die Desktopvariante haben (umgekehrt schon).
Klicken wir ein bisschen herum. Genauso wie in der Desktopvariante können Sie auch hier einzelne Elemente fokussieren, wobei das Randmenü nur dessen, nun smartphonerelevanten Eigenschaften, anzeigt. Um ein Banner auszuwählen, müssen Sie auf den linken Rand der Ansicht achten, der, wenn die Maus die Smartphone-Ansicht berührt, in Bannerlänge durch ein schmales Randrechteck ausgezeichnet wird. Wenn Sie in dieses Rechteck klicken, erscheint das Kopfmenü des entsprechenden Banners.
Hinweis: Wenn Sie auf die beschriebene Weise ein Element auswählen, dann beachten Sie, dass Sie immer erst das Stiftsymbol im Kopfmenü des selektierten Elements drücken müssen, um die Seite „Einstellungen“ im Randmenü zu aktualisieren.
Von allen dort angezeigten Kategorien ist die Kategorie „Erweitert (und Mobil)“ die bei weitem wichtigste. Um das zu erkennen, fokussieren Sie beispielsweise einmal auf den „Salvador Dali – Spruch“, drücken dort im Kopfmenü auf das Stift-Icon und beobachten was passiert, wenn Sie in der Kategorie „Erweitert (und Mobil)“ die einzelnen Schieberegler betätigen. Ich glaube, man muss dann nicht mehr viel dazu sagen…