Webseiten erstellen mit CHEETAH
Spezielle Webseiten und Techniken (2)
5. WhatFont – Find Font
Mit diesem Tool erfahren Sie den Namen und alle Attribute der Schrift, die Sie auf einer Webseite mit der Maus anklicken. Wenn die Schriftart von „Cheetah“ nativ nicht angeboten wird, können Sie diese über den Fontnamen in diversen Font-Sammlungen suchen, eventuell erwerben (wenn kostenpflichtig), herunterladen und dann in „Cheetah“ installieren.
Bevor wir mit dem Nachbau einer Webseite beginnen, schauen wir uns erst einmal das Original an. Hier überlegen wir uns, wie wir sie am besten in Bänder aufteilen (auch in Hinblick auf spätere Erweiterungsmöglichkeiten, eventuell eine kleine Skizze anfertigen). Auch überlegen wir uns hier, ob es Sinn ergibt, den Kopf- und Fußbereich separat anzulegen. Als Nächstes werden wir dann alle Bilder der Website herunterladen und danach in einen entsprechenden Ordner in Cloudinary (oder dem Builderall Repository) ablegen.
Tipp: Wenn Sie auch Augenmerk auf SEO legen, dann sollten Sie – wenn nötig – die Bildgrößen der Bilddateien etwa auf die Bildgröße bringen, wie sie auch in der Webseite angezeigt werden. Auch die Benennung sollten Sie überprüfen. Im Idealfall sollte der Name der Bilddatei das für die Webseite vorgesehene Keyword enthalten.
Jetzt können wir beginnen, die Bannerstruktur der Webseite in „Cheetah“ anzulegen. Die Farben holen wir uns mit dem Color-Picker von der Originalseite und tragen dann deren Hexcode in das entsprechende Eigenschaftsfeld des Banners ein.
Anschließend werden wir dann nach und nach die einzelnen Elemente auf die entsprechenden Banner legen, deren Größe und Positionen wir beispielsweise mittels der Designertools von der Originalwebseite übernehmen.
Was die Schrift betrifft, sollte man in einem ersten Schritt auf der Originalwebseite mittels WhatFont die Schriften aller verwendeten Hn-Schriftarten ermitteln und in einer kleinen Tabelle notieren. Sollten einige der verwendeten Schriftarten in „Cheetah“ nicht verfügbar sein, dann müssen Sie entweder eine entsprechende Alternativschriftart auswählen oder entsprechende Fonts im Netz recherchieren. Wenn Sie dabei fündig werden, dann erwerben Sie die Schriftart (sollte sie kostenpflichtig sein) und installieren Sie anschließend in „Cheetah“.
Der nächste Schritt besteht dann die Anpassung aller verwendeten Hn-Schriften in „Cheetah“ (Hauptmenü, „ct-show-font-group“), wobei Sie dabei die mobile Variante nicht vergessen sollten.
Hinweis: Vermeiden Sie, Schriften in einem Schriftcontainer unabhängig von einer Hn - Formatierung nativ zu formatieren. Verwenden Sie immer – wenn möglich – die explizit eingestellten Hn - Schriftarten unter Einhaltung der damit verbundenen Überschriftenhierarchie (SEO!). Natürlich können Sie nachträglich beispielsweise direkt im Textcontainer die Schriftattribute ändern, wenn es unbedingt notwendig ist.
Den Text selbst schreiben Sie aber nicht etwa von der Originalwebseite ab, sondern markieren ihn dort mit der Maus und kopieren ihn dann in die Zwischenablage. Da dabei auch unerwünschte Formatierungen mit kopiert werden, fügen Sie den Text danach mit
Schwieriger wird es, wenn die zu kopierende Webseite spezielle Skripte (z. B. Javaskripte) oder Datenbankanbindungen (z. B. MySQL) enthält, deren damit verbundene Funktionalität sich nicht oder nur schwer mit „Cheetah“ nativ nachbauen lässt. Hier gibt es entweder die Möglichkeit, auf diese spezielle Funktionalität zu verzichten, selbst zu coden oder den Seitenquelltext zu durchforsten, um daraus den gesuchten Code zu extrahieren. Letztes erfordert natürlich profunde Kenntnisse in der Webprogrammierung und muss deshalb hier außen vorbleiben.
Mit diesen Tipps sollte es zumindest für nicht zu komplexe Websites gelingen, auch, ohne dass direkte Konvertierungsmöglichkeiten bestehen, diese auf „Cheetah“ umzustellen.