Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Grundlagen der Webprogrammierung: Meine erste Website

Passende Schrift wählen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Schriftwahl ist heutzutage nicht mehr schwierig, da alle möglichen Schriftarten leicht übernommen werden können. Über Google Fonts können Sie die für Sie passende Schriftart wählen.
05:44

Transkript

Nun ist es an der Zeit, dass ich mich um die Gestaltung meiner Schriften auf meiner Seite kümmere. Dabei ist es so, dass Schriften eigentlich ziemlich von Bedeutung sind, weil sie einen unmittelbaren Einfluss auf das Seherlebnis der Betrachter der Seite hat. Früher war es so, dass wir keine besonders große Auswahlmöglichkeit hatten. Wir mussten uns damit zufrieden geben, dass der Zielcomputer mehr oder weniger vorgegeben hat, welche Schrift Verwendung gefunden hat. Ich konnte mir zwar Schriften wünschen aber wenn die am Zielcomputer nicht vorhanden waren, dann konnte auch nichts ausgegeben werden, sondern dann hat einfach der Browser seinen Standard-Schriftsatz verwendet. Diese Zeiten sind zum Glück vorbei und es gibt mehrere Möglichkeiten, wie ich Schriften sozusagen mitgeben kann, damit Sie dann dargestellt werden. Eine der im Moment gemütlichsten Varianten ist aber die, dass ich mich bei GOOGLE FONTS umschaue. Bei Google-Fonts handelt es sich um Schrifttypen, die man verwenden kann, die also unter einer Lizenz stehen, die es mir erlaubt, dass ich sie einsetze. Und unter fonts.google.com finden Sie eben diese Google-Fonts und können jetzt hier unter einer Vielzahl an unterschiedlichen Schriften wählen und die für sich passende heraussuchen. Ich werde es aber kurz halten, denn mir gefällt zum Beispiel für meine Überschrift diese "Roboto" sehr gut, auch wenn Sie schon ziemlich verbreitet im Einsatz ist, aber sie ist sehr gut lesbar und angenehm von den Rundungen her. Wenn ich mehr über eine dieser Schriften, die hier angeboten werden, erfahren möchte, kann hier auf "SEE SPECIMEN" klicken und bekomme jetzt diverse Details für diese Schrift angezeigt. Besonders hilfreich ist hier dieses Vorgehen, nämlich, dass man übliche Kombinationen übernimmt. Und diese Kombination würde besagen, dass sich Roboto gut für Überschriften eignet und Open Sans gut für den Fließtext. Ich kann mir hier jetzt anschauen, wie Roboto als medium Überschrift, von der Dicke her aussieht, gefällt mir auch sehr gut, okay. Und jetzt habe ich die Möglichkeit, dass ich hier auf dieses kleine Plus klicke, und damit hier eine kleine Auswahl getroffen habe für meine Schrift. Da ist jetzt aber im Moment nur die Open Sans hinterlegt und noch nicht meine Roboto, das heißt, ich gehe wieder ganz nach oben und klicke auch hier auf das Pluszeichen bei der Schrift Roboto, und wenn ich jetzt mir die Seiten wieder anzeigen lasse, dann sehe ich, dass jetzt hier beide ausgewählt sind, und ich automatisch einen Link generiert bekomme, mit dessen Hilfe ich mir diese Schriften in mein HTML holen kann. Würde ich jetzt diesen Linkverweis nehmen, müsste ich ihn auf jeder Seite wieder einfügen, das ist mir zu anstrengend, zumal mir auch hier die Möglichkeit geboten wird, dass ich mit einem Import-Befehl arbeite. Der Import-Befehl ist direkt in meiner CSS-Datei einsetzbar. Ich wähle ihn also aus, markiere ihn, mit "Strg+C" kopiere ich ihn in die Zwischenablage und werde nun in meine CSS gehen und hier am Kopfende mit "Strg+V" diesen Import mir hereinholen. Und dann muss ich eigentlich nur noch dafür sorgen, dass diese Schriften auch zur Anwendung kommen. Mit dem Fließtext ist es einfach. Da gehe ich in meine Regeln für meinen "body"-Bereich hinein und setze hier "font-family: 'Open Sans'" ein. Mit "Strg+C" übernehme ich das gleich und kopiere es mir hier herein und füge es mit "Strg+V" wieder ein. Für meine Überschriften muss ich jetzt noch eine gemeinsame Linie festlegen. Ich sage also, jede "H1", jede "H2" und jede "H3". Egal, was ich sonst noch mit den Schriften mache, sollen als Schriftart diese Roboto bekommen. Mit "Strg+C" und "Strg+V" füge ich es hier wieder rein. So, bevor ich noch mir die Details zu den Schriften anschaue, speichere ich jetzt alles, was in meiner CSS ist, wechsle zurück in meine Bergwelten, lasse mir die Seite neu laden und Sie sehen schon, dass ich hier jetzt bereits diese anderen Schriften am Start habe. Diese anderen Schriften sehen sehr gut aus und es ist sehr angenehm zum Lesen. Und dadurch, dass ich es eben auf meiner CSS als Import hinterlegt habe, gilt dies jetzt auch für alle anderen Seiten und ich habe nicht mehr das Problem, dass ich jetzt für jede Seite was neu beschließen muss. Gut, so viel zu den Schriften. Was jetzt in einem weiteren Schritt natürlich je nach Ihrem Geschmack zu überlegen ist, ist, ob Sie nicht noch Schriftgrößen anpassen wollen oder eben die Schriftdicke, aber ich bin jetzt mit dem Ergebnis hier eigentlich schon sehr zufrieden.

Grundlagen der Webprogrammierung: Meine erste Website

Gestalten Sie in wenigen Stunden Ihre erste Website und lassen Sie sich dabei von der Idee über die Auswahl der Werkzeuge bis zur Veröffentlichung Ihrer Web-Präsenz begleiten.

2 Std. 53 min (29 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:09.05.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!