Webseiten erstellen mit CHEETAH
„Rapid Design“ einer ersten Website (1)
Kommen wir jetzt zu einer ersten kleinen Beispielwebseite, die quasi „blitzschnell“ mit „Cheetah“ entwickelt werden soll (ein Webdesigner, der schon etwas mit dem „Cheetah Sitebuilder“ vertraut ist und auch ein paar Vorbereitungsarbeiten erledigt hat, sollte dafür kaum mehr als eine halbe Stunde benötigen – deshalb „Rapid Design“).
Das Ziel der Übung soll sein, eine kleine Landingpage zum Thema "Cuba-Zigarren" zu entwickeln, welche aus einem Header, einem Content-Band und einem Footer mit Kontaktformular besteht. Um uns die Arbeit zu vereinfachen, bauen wir die Inhaltsstruktur aus vorgefertigten Banner-Templates auf, die wir anschließend anpassen. Natürlich hätte man auch (was der häufigere Fall sein dürfte) mit völlig leeren Bändern beginnen können.
Was die erwähnten „Vorbereitungsarbeiten“ betrifft, so bestehen sie hier in erster Linie aus einer Vorauswahl von lizenzfreien Bildern und eventuell in der Bereitstellung von Textbausteinen, die Verwendung finden sollen. Und natürlich sollte man sich schon gewisse Vorstellungen über den Aufbau und die Funktionsweise der Website gemacht haben (beispielsweise in Form einer einfachen Skizze).
In diesem Beispiel soll die Website lediglich aus einer Homepage und einer separaten Impressum-Seite bestehen, die im Seitenfooter verlinkt ist.
Legen Sie im „Cheetah“ Sitebuilder eine neue Website mit dem Namen „Cuba-Zigarren“ an und öffnen Sie anschließend in der Seitenansicht die Seite „Home“ im Editor. Über alle Einstellungen, die über die Standardeinstellungen hinausgehen, kümmern wir uns später.
Wichtig: Verwenden Sie als Ausgangspunkt ein leeres „Blank Template“.
Bannerstruktur der Homepage zusammenstellen
Die Homepage soll aus drei Bannern bestehen: dem Header, einem 1st Fold-Banner und einem Footer. Wir wählen dazu aus den Banner-Vorlagen zuerst den Banner „Express Header“ (Kategorie „Header“), dann den 1st Fold – Banner „1st Fold – 08“ und dem Footer „Express Footer“. Anschließend löschen Sie das obere, vom Template bereitgestellte Banner über die Papierkorb-Funktion von dessen Kopfmenü. Das Ergebnis sollte dann im Editor folgendermaßen aussehen:
Anpassung der Bannerinhalte an die Aufgabenstellung
Jetzt können wir beginnen, unsere Webseite anhand der in den Editor geladenen Template-Banner zu gestalten. Hier macht es sich bezahlt, wenn man bereits im Vorfeld einige Vorbereitungen getroffen hat. Das betrifft u. a. die Bereitstellung der einzubauenden Bilder in einem separaten Ordner zusammen mit ein paar vorformulierten Texten, die unformatiert in einer einfachen Textdatei vorliegen sollten. Letztere kann man dann mit einem Editor oder mit WordPad öffnen und ganz oder stückchenweise über die Zwischenablage in die entsprechenden Textfelder der Webseite übertragen.
Was das Bildmaterial betrifft, so sollte es entweder im png- oder jpg-Format vorliegen, möglichst die Größe in Pixel haben, wie sie auch auf dem Desktop erscheinen und - aus SEO-Gründen - einen Dateinamen besitzen, der zusammen mit einem Schlüsselwort möglichst beschreibt, was auf dem jeweiligen Bild zu sehen ist.
Hinweis: Zur Vorbereitung der Bilder eignen sich diverse Programme wie beispielsweise IrfanView oder der Fotomanager von Builderall, um nur zwei zu nennen. Bringen Sie damit ihre Bilder ungefähr auf die gleiche Größe, wie sie auch die Bilder im Template haben, welche Sie ersetzen möchten. Dieser Schritt ist zwar nicht unbedingt notwendig, da Sie innerhalb des Editors die Bildgröße bei gleichbleibendem Seitenverhältnis stufenlos anpassen können. Aber man sollte sich daran gewöhnen, es doch zu tun, da übergroße Bilddateien sich immer negativ auf das Ladeverhalten einer Webseite auswirken.
In unserem 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 vor und zeigt eine Schachtel edler Cuba-Zigarren...
Nachdem wir im Editor das mittleren Content-Banner fokussiert haben, suchen wir im rechten Randmenü (bzw. dem Eigenschaften-Dialogfenster) nach der Kategorie „Hintergrund“. Denn hier kann man dem gesamten Banner ein Hintergrundbild zuordnen. Wie Sie am Vorschaubild sehen, ist das im Template auch geschehen. Da wir aber nur ein Bild im internen Bereich verwenden wollen, werden wir es hier auch gleich löschen. Anschließend wechseln wir in die Kategorie „Interner Hintergrund“. Auch hier finden Sie die Einstellung „Bild ändern“ und ein Klick auf die entsprechende Schaltfläche führt uns in das Builderall Repository, in das wir nun das gewünschte Hintergrundbild hochladen.
Sobald 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 im Webseiteneditor durch das eben ausgewählte ersetzt. Außerdem wird es nun auch im Einstellungsbereich des Banners als „Background Image“ angezeigt.