Rheinwerk Computing < openbook > Rheinwerk Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.
 
Inhaltsverzeichnis
Vorwort
Teil I Grundlagen
1 Einleitung
2 Testumgebung einrichten
3 Live-Umgebung einrichten
4 Website planen
Teil II Joomla! benutzen
5 Website-Frontend kennenlernen
6 Administrations-Backend bedienen
7 Content verwalten
8 Contentpflege konfigurieren
9 Menüs aufbauen
10 Layout und Design anpassen
11 Benutzerverwaltung einrichten
12 Mehrsprachigkeit aktivieren
13 System konfigurieren
Teil III Joomla! erweitern
14 Erweiterungen aktivieren
15 Offizielle Joomla!-Komponenten
16 Empfohlene Erweiterungen
17 Joomla! als Content-Management‐System
18 Joomla! als Community-Plattform
19 Joomla! als Online-Shop
Teil IV Joomla! warten
20 Wartung allgemein
21 Joomla! und Content deployen
22 Sicherheit ausbauen
23 Performance- und Suchmaschinenoptimierung
24 Notfallmaßnahmen
Teil V Joomla!-Erweiterungen entwickeln
25 Grundlagen zur Erweiterungsentwicklung
26 Templates entwickeln
27 Plugins entwickeln
28 Module entwickeln
29 Komponenten entwickeln
30 Erweiterungen veröffentlichen
Stichwortverzeichnis

Jetzt Buch bestellen
Ihre Meinung?

Spacer
<< zurück
Joomla! 3 von Richard Eisenmenger
Das umfassende Handbuch
Buch: Joomla! 3

Joomla! 3
Pfeil 10 Layout und Design anpassen
Pfeil 10.1 Homepage anpassen
Pfeil 10.1.1 Homepage-Spaltenlayout anpassen
Pfeil 10.1.2 Beitrags-Metadaten zurechtstutzen
Pfeil 10.1.3 Reihenfolge der Haupteinträge ändern
Pfeil 10.1.4 Andere Seite als Homepage festlegen
Pfeil 10.2 Module einrichten
Pfeil 10.2.1 Neues Modul erstellen
Pfeil 10.2.2 Modul positionieren
Pfeil 10.2.3 Moduldarstellung einschränken
Pfeil 10.2.4 Weitere Darstellungseinstellungen zu Modulen
Pfeil 10.2.5 Alle Modultypen vorgestellt
Pfeil 10.3 Templates verwalten
Pfeil 10.3.1 Templates pro Webseite festlegen
Pfeil 10.3.2 Template konfigurieren
Pfeil 10.3.3 Mehrere Templatestile verwenden
Pfeil 10.4 Neue Templates im Internet finden und installieren
Pfeil 10.4.1 Template-Frameworks
Pfeil 10.4.2 Template herunterladen
Pfeil 10.4.3 Template installieren
Pfeil 10.4.4 Nach der Templateinstallation
Pfeil 10.4.5 Templates deinstallieren
Pfeil 10.5 Template anpassen
Pfeil 10.5.1 HTML-Code ergänzen
Pfeil 10.5.2 Personalisierte CSS-Dateien verwenden
Pfeil 10.5.3 CSS-Overrides anlegen
Pfeil 10.5.4 Template-Overrides einsetzen
Pfeil 10.6 Schriften einbetten
 
Zum Seitenanfang

10.6    Schriften einbetten Zur vorigen ÜberschriftZur nächsten Überschrift

Es ist erst wenige Jahre her, da herrschte im Web typografische Traurigkeit. HTML und CSS sahen zwar recht früh den Einsatz verschiedener Schriften auf Webseiten vor, aber praktisch ließ sich das Schriftbild nur über web-safe Fonts beeinflussen – Schriften, die mit hoher Wahrscheinlichkeit lokal auf PCs oder Macs installiert waren. Dazu zählen Klassiker wie Arial, Courier New, Times New Roman, Comic Sans, Impact, Georgia, Trebuchet, Webdings und Verdana, die Microsoft über die Core-fonts-for-the-Web-Initiative kostenlos vertrieb. Auf Macs waren diese Schriften nicht immer verfügbar, über sogenannte Fallback-Fonts ließen sich aber per CSS Alternativschriften angeben, die dem ursprünglich geplanten Font typografisch ähnlich waren.

font-family: "Times New Roman", Times, serif

Dieser CSS-Style teilt dem Browser mit, die Schrift Times New Roman einzusetzen (Anführungszeichen sind Pflicht bei Schriften, die aus mehreren Wörtern bestehen). Ist diese auf dem lokalen Rechner nicht installiert, soll der Browser doch bitte die Times versuchen. Ebenfalls nicht verfügbar? Dann verwende irgendeinen Font mit Serifen.

Mit der Verbreitung immer schnellerer Internetanschlüsse, höher auflösender Bildschirme und größerer CSS3-Kompatibilität der Browser steht heutzutage ein Füllhorn von Schriften zur Verfügung; nicht installierte Schriften werden vom Browser einfach heruntergeladen. Die kostenlose Verfügbarkeit Hunderter Fonts sorgt für ein Aufblühen typografischer Vielfalt in Netz. Für Webdesigner ist das ein riesiger Schritt nach vorn, da die Wahl der passenden Schrift essenzieller Bestandteil einer ordentlichen Internetpräsenz und Bestandteil jedes Brandguides ist.

Wieder mal ist es die Google Corporation, die eines der größten Repositorien freier Schriften zur Verfügung stellt. Unter https://www.google.com/fonts wählen Sie aus über 600 Schriften, die auch in verschiedenen Variationen (Fett- und Kursivdruck) bereitstehen (siehe Abbildung 10.42). An der linken Seite befinden sich allerlei Filterwerkzeuge; hier suchen Sie gezielt nach einem Schriftnamen oder grenzen die Ergebnisliste auf Schrifttypen, Fett- oder Kursivdruck ein. Für das Reiseforum ist eine möglichst plakative Schrift für den Titel vorgesehen. Filtern Sie nach Display, geben Sie unter Preview Text »Reiseforum« an, und scrollen Sie gemütlich mit einer Tasse Kaffee durch die endlose Liste.

Kostenlos für alle Websites – Google stellt auf »https://www.google.com/fonts« über 600 Schriften zur Verfügung, die Sie über Filteroptionen auswählen und mit eigenem Text antesten.

Abbildung 10.42    Kostenlos für alle Websites – Google stellt auf »https://www.google.com/fonts« über 600 Schriften zur Verfügung, die Sie über Filteroptionen auswählen und mit eigenem Text antesten.

Die richtige Schrift zu finden ist auch für professionelle Designer nicht einfach; einige Tipps:

  • Idealerweise wählen Sie zwei Schriften
    Eine für den Fließtext und eine für Überschriften. Eine weitere Schrift für das Logo ist denkbar, mehr als drei Schriften resultieren in typografischem Chaos.

  • Achten Sie auf die Harmonie zwischen den Schriften
    Das Aussehen von Überschriften und Fließtext sollte sich zwar ähneln, um zusammen ein schönes Gesamtbild zu erzeugen, aber sich stark genug voneinander unterscheiden, um Dynamik zu vermitteln.

  • Serifen für Fließtext und serifenlos für Überschriften oder umgekehrt?
    Ob man Serifenschriften für Fließtext und serifenlose Fonts für Überschriften verwendet oder umgekehrt, darüber brennt ein niemals endender Streit bei Designern. Die Argumentation läuft in Richtung Lesbarkeit: Serifen führen das Auge, serifenlose Zeichen sorgen dagegen für ein klareres Schriftbild. Am Ende ist aber die Schriftart und -kombination entscheidend.

  • Schriften sind Teil des Designs
    Verwenden Sie Schriften als Designelement, und integrieren Sie sie in Entscheidungen für andere Layoutkomponenten. Nach Skeuomorphismus (Apples metallene und hölzerne Texturen) und Flat-Design (Microsofts Metro-Oberfläche und Googles Websites und Apps) legt das neue Web Wert auf anspruchsvolle Typografie. Bringen Sie auch das Farbschema mit ins Spiel.

Für den Reiseforum-Titel eignet sich die Special Elite, die mit ihrem Schreibmaschinencharakter an Postkarten und Briefe aus der Ferne erinnert. Im Schriftenkasten klicken Sie auf Quick-use und gelangen zu einer Seite, aus der Sie den für die Schriftenintegration benötigten HTML-Code und den CSS-Style direkt herauskopieren (siehe Abbildung 10.45).

Über den »Quick use«-Button gelangt man zu den Codeschnipseln zur Einbindung der Schrift in eigene Websites; wer mehrere Schriften aussucht, klickt sich eine sogenannte Collection zusammen.

Abbildung 10.43    Über den »Quick use«-Button gelangt man zu den Codeschnipseln zur Einbindung der Schrift in eigene Websites; wer mehrere Schriften aussucht, klickt sich eine sogenannte Collection zusammen.

Tipp: Einfache Google-Font-Integration über Template-Parameter

In vielen Templates stellen Sie Google Fonts auch bequem im Administrationsbereich ein. Welche Schriftelemente anpassbar sind, hängt natürlich stark vom Template ab; im mitgelieferten Template Protostar geht das z. B. nur für die Überschriften.

Klicken Sie im Menü ErweiterungenTemplates auf den Templatenamen, und durchforsten Sie den Reiter Erweitert nach Google Font API Setting, Google Schrift o. Ä. Hier genügt es dann, den Namen des Google Fonts anzugeben und über den Button Speichern zu verwenden.

Im Standardtemplate Protostar lässt sich über den Administrationsbereich ein Google Font für Überschriften festlegen; bei Schriften, deren Name aus mehreren Worten besteht, ersetzen Sie die Leerzeichen durch ein Plus.

Abbildung 10.44    Im Standardtemplate Protostar lässt sich über den Administrationsbereich ein Google Font für Überschriften festlegen; bei Schriften, deren Name aus mehreren Worten besteht, ersetzen Sie die Leerzeichen durch ein Plus.

Im Afterburner2-Template ist eine Google-Fonts-Zuweisung besonders bequem; alle verfügbaren Schriften erscheinen in einer Dropdown-Liste.

Abbildung 10.45    Im Afterburner2-Template ist eine Google-Fonts-Zuweisung besonders bequem; alle verfügbaren Schriften erscheinen in einer Dropdown-Liste.

Die Schrifteneinbettung in eine Joomla!-Website unterscheidet sich unwesentlich von der Integration in eine statische Website. Sie laden die Schrift per HTTP über ein <link>-Tag im HTML-Header der Webseite und binden sie mit dem Style font-family an CSS-Klassen oder -IDs. Für die Integration in Templates behelfen Sie sich des Tricks aus Abschnitt 10.5.1, »HTML-Code ergänzen«.

  1. Öffnen Sie die Datei index.php im Root-Verzeichnis Ihres Templates.

  2. Fügen Sie den aus der Google-Fonts-Webseite erzeugten <link>-Code in den HTML-Header, vor das </head>-Tag. Jetzt steht die Schrift allen Webseitenelementen zur Verfügung und darf in CSS-Styles eingesetzt werden. Der Beispiel-HTML-Code:

    <head>
    <!--[if lt IE 9]>
    <script src="<?php echo $this->baseurl; ?>/media/jui/js/html5.js">
    </script>

    <![endif]-->
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis. com/css?family=Special+Elite" media="all" />
    </head>
  3. Integrieren Sie mehrere Google Fonts, genügt ein einzelnes <link>-Tag. Die einzelnen Schriften lassen sich dann mit Pipe-Symbolen (|) verketten, z. B.:

    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Special+Elite|Cardo:400,700|Source+Sans+Pro: 400,400italic,700,700italic,300,300italic" media="all" />
  4. Ergänzen Sie nun in den Styles der CSS-Klassen oder -IDs, z. B. im Rahmen von CSS-Overrides, die neue Schrift; für das Beispiel:

    font-family: 'Special Elite', cursive;
Der Einsatz einer sorgfältig ausgesuchten Schrift verändert das gesamte Look and Feel einer Website fundamental.

Abbildung 10.46    Der Einsatz einer sorgfältig ausgesuchten Schrift verändert das gesamte Look and Feel einer Website fundamental.

 


Ihre Meinung

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.

<< zurück
 Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: Joomla! 3 Joomla! 3
Jetzt Buch bestellen

 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchempfehlungen
Zum Rheinwerk-Shop: HTML5 und CSS3
HTML5 und CSS3


Zum Rheinwerk-Shop: Schrödinger lernt HTML5, CSS und JavaScript
Schrödinger lernt HTML5, CSS und JavaScript


Zum Rheinwerk-Shop: Einstieg in PHP 7 und MySQL
Einstieg in PHP 7 und MySQL


Zum Rheinwerk-Shop: PHP 7 und MySQL
PHP 7 und MySQL


Zum Rheinwerk-Shop: Erfolgreiche Websites
Erfolgreiche Websites


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo

 
 


Copyright © Rheinwerk Verlag GmbH 2019
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das Openbook denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

 
Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern