Webseiten erstellen mit CHEETAH
Ein erster Blick auf den drag'n drop Sitebuilder "Cheetah" (8)
Um Kopf- und Fußbereiche in eine Webseite zu integrieren, bieten sich mit Builderall „Cheetah“ zwei verschiedene Strategien an, die hier erst einmal nur kurz Erwähnung finden sollen. Die einfachste Möglichkeit ist dafür auf der Webseite jeweils ein eigenes Banner zur Verfügung zu stellen. In diesem Template ist das für den „Footer“ geschehen, während man das Hauptmenü zwar auch auf dem ersten Banner angeordnet hat, welcher aber nicht als separater „Header“ designt wurde. Das kann man so machen, wenn man will. Was ist aber, wenn eine Website, sagen wir mal aus 20 verschiedenen Unterseiten besteht, deren Header und Footer aufgrund des Corporate Designs immer gleich aussehen soll? Im Prinzip ist das erst einmal kein Problem, denn man kann ja in „Cheetah“ auch jede Seite klonen. Problematisch wird es erst dann, wenn man nachträglich Änderungen am Header oder Footer vornehmen muss. Und das bedeutet in diesem Fall, dass die Änderungen auf jeder Seite einzeln durchzuführen sind (hoher Arbeitsaufwand!). Gut, man kann sich damit behelfen, dass man sich eine jeweilige Bannervorlage bastelt und diese dann auf jeder Seite im Block austauscht. Aber die ideale Lösung ist das auch nicht. Besser ist es, man nutzt die Lösung, die „Cheetah“ nativ anbietet, nämlich dass man spezielle Header- bzw. Footer designt und diese dann explizit Webseiten zuweist. Sie sind dann zwar nicht mehr im Webseiteneditor im Bearbeitungsmodus zu sehen (brauchen sie ja auch nicht), aber später (und in der Vorschau) auf der Webseite. Diese elegante und entwicklungszeitsparende Technik wird später in diesem Buch noch im Einzelnen erläutert werden. Das Webseiten-Template, welches wir hier gerade anpassen, verwendet jedoch diese Technologie noch nicht. Hier müssen wir die entsprechenden Banner anpassen.
Beginnen wir mit dem Footer, bei dem wir ja gerade angekommen sind. Als Erstes tauschen wir die Texte aus, was schnell erledigt ist.
Das erste interessante Element auf dem Footer-Band ist das kleine Menü am linken Rand. Dessen Kopfmenü besitzt ein Zahnrad-Icon, über welches wir den Einstellungsdialog öffnen können, welches verblüffend dem ähnelt, welches wir bereits beim Kontaktformular kennengelernt haben:
Die Bedienung ist analog.
Zuerst ändern wir die Label-Bezeichner, in dem wir das jeweilige Stift-Icon mit der Maus anklicken. In dem Dialog „Feld Hinzufügen“ finden Sie den entsprechenden Label-Bezeichner, der sich problemlos überschreiben lässt. Theoretisch könnte man an dieser Stelle auch noch Submenü-Einträge generieren, was hier aber keinen Sinn ergibt.
Danach müssen wir die Verlinkung einrichten, denn ein Klick auf einen der Menüpunkte soll ja einen Wechsel auf eine entsprechende Webseite veranlassen. Dazu dient die Schaltfläche mit dem Link-Symbol. Wenn Sie darauf klicken, öffnet sich der Dialog „Weiterleitungen konfigurieren“. Und siehe da, die Seitenverlinkungen sind im Template bereits korrekt eingetragen:
Wir brauchen hier also nichts weiter tun. Was noch offen ist, ist das auf ein Feld reduzierte Kontaktformular, in welches der Webseitenbesucher seine E-Mail-Adresse eintragen soll, wenn er Interesse an einem Newsletter haben sollte. Wie Sie sich erinnern werden, öffnet sich dessen Einstellungsdialog, sobald Sie auf das Zahnradsymbol des entsprechenden Kopfmenüs klicken.
Bleibt nur noch das Menü im Header-Bereich zu übersetzen. Hier müssen Sie lediglich das Menü-Element etwas nach unten schieben, damit dessen Kopfmenü sichtbar wird. Und den Rest kennen Sie ja schon…
Wenn Sie jetzt noch links das Bild „YOURLOGOHERE“ ersetzen (oder löschen), dann ist die erste Seite unserer Website schon fertig. Mit etwas Vorbereitung und ohne diese Erklärungen hier hätte das in der Summe kaum mehr als 5 Minuten gedauert…
Hinweis: Speichern nicht vergessen!
Bleiben also nur noch die Seiten 2, 3 und 4 der Website anzupassen. Um sich erst einmal einen kleinen Überblick über deren Inhalt zu verschaffen, wählen wir sie nach und nach aus der links oben angeordneten Klappbox aus und scrollen ein bisschen hin und her. Was auffällt ist, dass der Footer auf allen Webseiten gleich ist. Und da wir den Footer auf der Homepage bereits angepasst haben, können wir eine weitere geniale Funktionalität des „Cheetah“ Sitebuilders zur Anwendung bringen, nämlich die Verwendung eigener Vorlagen. Also wechseln Sie über die genannte Klappbox wieder zurück zur Startseite und dort in den Footer. Hier fokussieren wir auf das Footer-Banner und klicken im Kopfmenü auf das erste Icon – dem Diskettensymbol (Sie finden es übrigens bei allen Elementen, die „Cheetah“ zum Webdesign anbietet). Es öffnet sich ein kleines Fenster, in der Sie dem Element einen Namen geben können.