Webseiten erstellen mit CHEETAH

Spezielle Webseiten und Techniken (1)

In diesem Kapitel sollen einige spezielle Webseitentechniken, ein paar Tipps und Tricks sowie einige allgemeine Designregeln vorgestellt werden und wie man sie am besten mit „Cheetah“ umsetzen kann. Sie sind – mit Ausnahmen – jedoch nur als Anregungen und vielleicht als eine Art Ideengeber zu betrachten.
 

Vorhandene Webseiten mit „Cheetah“ nachbauen
 

Viel öfters als man denkt, stellt sich die Frage, ob man nicht eine bereits vorhandene, nativ oder mit einem der vielen anderen CMS-Systeme bzw. Webbaukästen erstellte Webseite nicht irgendwie auf „Cheetah“ portieren könnte. Diese Frage ist eindeutig mit „Nein“ zu beantworten. Das gilt sogar für Webseiten, die mit dem Vorgänger von „Cheetah“, dem Builderall „PixelPerfect“ Sitebuilder, erstellt wurden (es sei denn, es ist ein damit erstellter Blog, denn dafür besteht eine Konvertierungsmöglichkeit). Aber was man ins Auge fassen kann, ist ein Nachbau in „Cheetah“, der umso leichter gelingen wird, je weniger „Schnickschnack“, die auf JavaScript oder / und CSS etc. beruhen, die Ausgangswebsite enthält. Einfache Landingpages beispielsweise sind mit „Cheetah“ oftmals genauso schnell nachgebaut wie neu erstellt. Und natürlich können Sie zusätzlich dazu die Möglichkeiten von „Cheetah“ nutzen, um solch eine Seite noch besucherfreundlicher zu gestalten.
 

Hinweis: Wenn Sie Webseiten nachbauen, die nicht von Ihnen selbst oder ihrem Auftraggeber stammen, müssen Sie unbedingt das Urheberrecht (und eventuell Markenrechte) beachten. Das gilt insbesondere für die darin eingebundenen Medien (nur Verlinkung, nicht kopieren), eventuelle Texte und spezielle Designmerkmale, die eine gewisse „Schöpfungshöhe“ vermuten lassen.
 

Im Idealfall verwenden Sie als „Entwicklungsumgebung“ eine Zweibildschirmlösung. Auf einem blenden Sie die zu reproduzierende Webseite und im anderen den „Cheetah Sitebuilder“ im gleichen Browser auf. Hier beginnen Sie ihre Arbeit aber nicht mit einer Vorlage, sondern mit einem leeren Template.
 

Weiterhin benötigen Sie noch ein paar Browser AddOns (wir kommen darauf gleich zu sprechen), den einfachen Windows-Editor, einen Taschenrechner sowie einen (echten) Notizblock mit Stift für Notizen.
 

Beginnen wir mit den Browser-Erweiterungen (wir gehen hier davon aus, Sie arbeiten mit Google Chrome oder einem Derivat davon). Mit ihrer Hilfe verschaffen wir uns in erster Linie Informationen über Farbe, Größen und Größenverhältnisse sowie über die jeweils verwendeten Fonts und ihre Größen und Attribute. Weiterhin ist ein Tool von Nutzen, mit dem man alle auf einer Webseite verwendeten Bilder herunterladen kann. Zu jedem im Folgenden vorgeschlagenen AddOns gibt es natürlich Alternativen. Also schauen sie einmal selbst in den Google Webstore, um selbst zu sehen, was es noch so gibt.
 

1. Bilder aus einer Webseite extrahieren

Image Downloader

Mit dieser Chrome-Erweiterung können Sie alle (oder ausgewählte) Bilder der Webseite im aktiven Tab downloaden.
 

Die heruntergeladenen Bilder sollten Sie anschließend, am besten in jeweils einem eigenen Ordner pro Webseite auf Cloudinary hochladen und – wenn nicht bereits geschehen – mit einem SEO-freundlichen Dateinamen versehen.
 

2. Abstände auf der Webseite messen

Dimensions

Immer wenn Sie auf einer Webseite Abstände zwischen farblich klar begrenzten HTML-Elementen messen müssen, dann ist diese leicht zu bedienende Chrome-Erweiterung das Tool der Wahl.
 

3. Farben bestimmen

ColorPick Eyedropper

Beim Nachbau einer Webseite ist es wichtig, auch die Farben der Originalseite genau wiederzugeben. Dazu benötigt man ein Tool, welches die Farbwerte (i. d. R. RGB Hexa) eines mit dem Mauszeiger berührten Pixels ermittelt und zu kopieren erlaubt. Solch ein Chrome AddOn ist der ColorPick Eyedropper, mit dem es ein Leichtes ist, einen Farbwert in die Farbeinstellungen eines „Cheetah“ – Elements zu übertragen.
 

4. Designer Tools

Dieses Chrome AddOn ist unverzichtbar, wenn man die Größe von Elementen auf einer Webseite (Bilder, Textcontainer etc.) pixelgenau messen möchte. Dazu braucht man mit der Maus nur das zu untersuchende Element berühren und es wird sofort ein Rahmen mit Länge- und Breite - Beschriftung angezeigt.
 

TB Amazon