Webseiten erstellen mit CHEETAH
Texte und die Organisation von Texten auf Webseiten (2)
Hn - Schriftattribute festlegen
Den Einstellbereich für die Header-Schriften (und der Abschnittsschriftart) finden Sie im Hauptmenü des Webseiteneditors unter der Schaltfläche „A“ in dessen Werkzeugleiste:
Hier können die Header-Attribute H1 bis H6 sowie der Standard-Abschnittstext (P = Text-Absatz) sowohl für die Desktopvariante als auch für die Smartphonevariante konfiguriert werden. Jede Änderung, die Sie hier vornehmen, wird übrigens simultan auch auf der Webseite im Editor angezeigt (ausprobieren!).
Jede Art von Überschrift besitzt im Einstellungsdialog einen eigenen Block, welcher mit einer Schriftprobe (entspricht bezüglich der Schriftgröße der Desktopvariante) beginnt und darunter Einstellmöglichkeiten für Schriftart, Schriftgröße (Desktop, Smartphone) sowie Schriftfarbe bietet.
Nachdem Sie sich Gedanken gemacht haben, welche Schriftarten am besten zu Ihrer geplanten Webseite passen, sollten Sie in dem hier vorgestellten Dialog die Überschriften entsprechend konfigurieren. Wenn Sie beim Formatieren der Webtexte später der Versuchung widerstehen, die im Texteditor angebotenen Formatierungsbefehle aktiv zu nutzen - oder anders ausgedrückt - nur die nativen H1 bis H6 - Überschriften und das P-Attribut verwenden, dann haben Änderungen – wie bereits erwähnt – in diesem Dialog instantan Auswirkungen auf die Texte der gesamten Webseite. Das bedeutet, Sie können später einfach durch Änderung der Schriftattribute in diesem Dialog die direkte Auswirkung auf das Aussehen der Webseite begutachten.
Das Handling der Übernahme von Schriften auf die Webseite im Editor ist letztendlich wieder ganz einfach. Sie wechseln im Randmenü in den Bereich "Neu" und "Elemente" und öffnen dort die Kategorie "Text". Es werden Ihnen dann alle Header-Vorlagen sowie die Textabschnittsvorlage in der von Ihnen zuvor eingestellten Form aufgelistet und Sie können dann, wie gewohnt, einfach mit der Maus eine der Vorlagen auswählen und anschließend per drag'n drop in die Webseite ziehen. Und jetzt brauchen Sie nur noch den Vorgabetext durch ihren eigenen zu ersetzen.
Tipp: Bereiten Sie längere Texte zuvor in einem Texteditor (z. B. Wordpad) vor und fügen ihn dann über die Zwischenablage ein. Sie können aber auch in der Designphase erst einmal Platzhaltertexte verwenden, die Sie dann später austauschen. Für diesen Zweck gibt es einige dafür gut geeignete Chrome-Browsererweiterungen wie beispielsweise den „Lorem ipsum Generator“…
Eigene Fonts einbinden und verwenden
Der Builderall Cheetah Webseiteneditor stellt bereits eine größere Zahl von lizenzfreien Schriftarten zur Verfügung. Aber oftmals benötigt man - z. B. um das Corporate Design einer Webseite zu gewährleisten - Schriftarten, die standardmäßig nicht vorhanden sind. In solch einem Fall gibt es aber die Möglichkeit, extern erworbene Fonts zu installieren. Wie das genau in „Cheetah“ funktioniert, soll im Folgenden kurz erläutert werden.
Die erste Frage, welche auftaucht, wenn man auf einer Webseite einen Schriftzug in einer Schriftart sieht, die man gern selbst verwenden möchte, ist "Um was für eine Schrift handelt es sich dabei? Wie ist ihr Name?". Denn diese Informationen benötigt man, wenn man im Netz nach bestimmten Fonts suchen möchte, um sie selbst zu verwenden. Ähnliches gilt natürlich auch, wenn ein Kunde ganz bestimmte Schriftarten für seine Webseite verlangt, aber in fast allen Fällen nicht sagen kann, was deren Namen sind. Aber es gibt Abhilfe. Mit der Chrome-Erweiterung "What Font?" kann man ganz einfach die auf einer Webseite eingesetzte Fontnamen sowie dessen Attribute ermitteln. Die genannte Erweiterung finden Sie im Google Chrome App Store – und Sie sollten sie auch gleich in ihrem Chrome-Browser installieren.
Die Handhabung dieser Browser-Extension ist einfach und intuitiv. Wechseln Sie dazu auf die Webseite, deren Fonts Sie ermitteln möchten. Dann klicken Sie auf der Extension-Liste im Chrome-Browser das "WhatFont"-Icon an und wenn Sie jetzt mit der Maus auf der Webseite einen Schriftzug berühren, wird Ihnen als Hint der Name der Schriftart angezeigt. Aber das ist noch nicht alles. Wenn Sie jetzt einen Mausklick ausführen, öffnet sich ein kleines Fenster mit detaillierten Angaben zum Font (hier "Proxima-Nova"):
Tipp: Sie können die Sie interessierenden Informationen in dem kleinen Fenster mit der Maus markieren und anschließend in die Zwischenablage kopieren. Das macht sich besonders gut, wenn Sie beispielsweise die Schriftfarbe übernehmen möchten.