Anfängerkurs, Abschnitt 3
Willkommen zu Abschnitt 3 des Website-Welttrainingskurses für Anfänger.
Nach Abschluss dieses Abschnitts werden Sie Folgendes können:
- Ändern Sie die auf Ihrer Website angezeigten Schriftarten.
- Ändern der Schriftarten auf einer bestimmten Seite Ihrer Website
- Ändern Sie die allgemeinen Farben, die auf Ihrer Website angezeigt werden.
- die Farben auf einer bestimmten Seite Ihrer Website ändern
Schriftart und Schriftgröße ändern
Schriftart und -größe können Sie über die Option „Design“ im Menü (für die gesamte Website) oder auf jeder einzelnen Seite ändern. Zunächst konzentrieren wir uns auf die Schriftart für die gesamte Website. Wählen Sie dazu im Menü „Design“ die Option „Farben & Schriftarten“.
Scrollen Sie auf der Seite nach unten, bis Sie die Optionen im Feld „Schriftarten“ sehen. Hier können Sie die allgemeine Schriftart, die Überschriftenschriftart, die Schriftgröße und die Zeilenhöhe bearbeiten.
Um eine neue Schriftart auszuwählen, klicken Sie auf die blaue Schaltfläche „Schriftart auswählen“. In diesem Beispiel ändern wir die Hauptschriftart (Standard) und die Schriftgröße auf die Option Arial, Helvetica, URW Gothic L, sans-serif und die Größe 16px.
Sie sehen außerdem ein Feld mit dem Titel „Benutzerdefinierte Schriftarten (Meta-Einbindungen)“. Hier können Sie den spezifischen Code von Google Fonts einfügen, was wir für die Überschrift tun werden. Öffnen Sie dazu einen neuen Browsertab und besuchen Sie die entsprechende Seite. Google Fonts Auf der Webseite suchen Sie nach der Schriftart Merriweather, wählen sie aus, und die Google Fonts-Webseite zeigt Ihnen etwa Folgendes an:
Der Code unter „Standard @ Import“ muss kopiert und anschließend in das Feld „Benutzerdefinierte Schriftarten“ eingefügt werden. Klicken Sie im Feld „Benutzerdefinierte Schriftarten“ auf „Bearbeiten“ und fügen Sie den Code dann unterhalb des vorhandenen Codes ein, wie folgt:
Klicken Sie auf „Änderungen speichern“ und schließen Sie anschließend den Editor. Kopieren Sie nun den Text für die Schriftart und fügen Sie ihn in das Feld „Schriftart (Überschriften)“ ein (siehe Abbildung unten). Klicken Sie anschließend auf „Veröffentlichen“, um Ihre bisherige Arbeit zu speichern.
Ändern der Schriftart auf einer bestimmten Webseite
Öffnen Sie Ihre AGB-Seite, denn hier werden wir Schriftart und -größe nur für diese Seite ändern.
Markieren Sie zunächst die Unterüberschrift „Rückgabebestimmungen“ und klicken Sie dann auf den Dropdown-Pfeil neben dem Feld „Schriftart“ in der Bearbeitungswerkzeugleiste. Beachten Sie, dass die Darstellung anders sein kann, wenn Sie einen anderen Editor als den aktuell verwendeten TinyMCE3510 nutzen (oben rechts sehen Sie den Namen des aktuellen Editors und können in einen anderen Modus wechseln).
Wählen Sie die Schriftart Comic Sans MS. Nur der markierte Text wird in dieser Schriftart angezeigt, der Rest der Seite bleibt unverändert. Markieren Sie den Text „Rückgabebestimmungen“ erneut und klicken Sie diesmal auf den Pfeil neben „Schriftgröße“. Wählen Sie die Option 24 pt. Sie werden feststellen, dass diese Überschrift standardmäßig als H3 (Überschrift 3) formatiert war, was für diese Seite optimal ist. Ihre AGB-Seite sieht nun wie folgt aus (siehe roter Pfeil – die Unterüberschrift ist größer und in einer anderen Schriftart):
Ändern der allgemeinen Farben Ihrer Website
Die allgemeinen Farben Ihrer gesamten Website ändern Sie über den Reiter „Design“ und anschließend über die Option „Farben und Schriftarten“. Auf der Seite „Designoptionen“ können Sie dann die Farben für verschiedene Bereiche Ihrer Website anpassen.
Farben erhalten einen Hexadezimalcode oder eine Farbnummer, wodurch sie genauer bestimmt werden, als beispielsweise einfach nur „Dunkelblau“ genannt zu werden. Sie können den Hexadezimalcode in das Feld neben dem Element eingeben, dessen Farbe Sie ändern möchten, und anschließend in ein anderes Feld klicken, um ihn zu speichern. Alternativ können Sie auf die Schaltfläche „Farbe auswählen“ klicken, dann manuell eine Farbe im Farbassistenten auswählen und anschließend auf die Schaltfläche „Farbe verwenden“ klicken.
WICHTIG – Notieren Sie sich die einzelnen Hexadezimalcodes Ihrer Farbauswahl an einem sicheren Ort, z. B. in einem Tagebuch oder einer Datei auf Ihrem Gerät. Dies erleichtert Ihnen die Bearbeitung Ihres Website-Designs. (wie in Abschnitt 1 des Kurses für Fortgeschrittene).
Hier sind die Farben, die wir ausgewählt haben:
Speichern Sie Ihre Arbeit, indem Sie auf die Schaltflächen „Änderungen speichern“ und anschließend auf „Veröffentlichen“ klicken.
Ändern der Textfarbe auf einzelnen Webseiten
Öffnen Sie Ihre AGB-Seite erneut. Sie werden sehen, dass die Überschriftenfarbe entsprechend der in den Designoptionen ausgewählten Farbe geändert wurde. Diese Änderung betrifft die gesamte Website.
Es ist jedoch möglich, die Textfarbe auf einzelnen Seiten zu ändern. Genau das werden wir als Nächstes tun. Markieren Sie die Überschrift „Rückgabebestimmungen“ und wählen Sie dann das Dropdown-Menü neben dem Symbol „Textfarbe“ aus. Daraufhin öffnet sich eine Auswahl an vordefinierten Farben. Über die Option „Weitere Farben“ können Sie weitere Farben auswählen.
In diesem Beispiel wählen wir die Option „Weitere Farben“, geben dann den Hexadezimalcode #0628f8 in das Farbfeld ein und klicken anschließend auf die Schaltfläche „Anwenden“. Die Überschrift ändert ihre Farbe und sieht dann wie folgt aus:
Klicken Sie auf die Schaltflächen „Änderungen speichern“ und anschließend auf „Veröffentlichen“, um Ihre bisherige Arbeit zu speichern.
Herzlichen Glückwunsch! Sie haben soeben Abschnitt 3 des Anfängerkurses abgeschlossen. Nun müssen Sie eine Prüfung ablegen, in der Sie die in den Abschnitten 1, 2 und 3 dieses Anfängerkurses erlernten Fähigkeiten anwenden. Diese Prüfung trägt den Titel „Prüfung 1“. Um Ihr Zertifikat zu erhalten, müssen Sie diese Prüfung erfolgreich bestehen. Die Bewertung erfolgt durch ein Mitglied unseres Website World-Supportteams.
