Lektion 9: CSS Bootstrap
CSS Bootstrap
Bootstrap CSS-Bibliothek
Verwendung von Bootstrap
- Online CSS Bibliothek mit vorgefertigten Styles!
- Einbindung durch Verlinkung des online CSS- und JS-Dokuments
- Riesiges Online-Nachschlagewerk: GetBootstrap.com
- Auch w3schools hat ein Nachschlagewerk: w3schools.com
- Verwendung von Klassen (
class) und Id's (id) zum stylen!
Im Folgenden werden wir unter Anderem Bootstrap verwenden und uns konkrete Beispiele anschauen!
Meine Webseite - Das Vorgehen
Schritt 1: Das Layout
Div-Container & Strukturelemente
Wir benötigen Bereiche auf der Webseite (Kopfzeile, Navigation, Fusszeile...). Bisherige Tags (h1, p, ...) fügen nach dem Schliessen
einen Zeilenumbruch und einen Abstand ein (unbrauchbar für Bereiche). Div-Container machen das nicht!
HTML5-Stukturelemente sind spezielle Div-Container mit entsprechenden Layout-Namen:
<header> |
Kopfbereich |
<nav> |
Navigationsmenü |
<main> |
Hauptteil |
<article> |
Artikel im Hauptteil |
<section> |
Unterkapitel im Hauptteil |
<footer> |
Fusszeile |
<aside> |
Inhalt "am Rande" |
-
Die Elemente haben per se keine Formatierung und sind Container
(Block-Elemente).
-
Man definiert damit aber den Zweck ("Semantik") des jeweiligen Inhalts.
➡ Semantische Tags
-
❗
<header> ist ein HTML5-Strukturelement im
<body>, während <head>
für den Benutzer nicht sichtbare Informationen enthält.
-
HTML5-Strukturelemente.pdf (Anleitung/Erklärung)
Die Ausrichtung der Bereiche: Das Flexbox-Konzept
Mit Hilfe des Flexbox-Konzepts lassen sich die einzelnen Strukturelemente & Div-Container auf der Seite ausrichten. Nähere Informationen
zu diesem Konzept findest du hier: Flexbox.html
Grössenangaben: Im CSS Dokument können Grössen (hier von Bereichen) ganz verschieden angegeben werden:
-
In Pixel (px): Dies ist eine fixe Grössenangabe, egal wieviel Platz zur Verfügung steht (z.B. 200px)
-
In Prozent: Gemessen am zur Verfügung stehenden Platz (z.B. 80%)
-
In Viewport Height (vh) & Width (vw): Prozente der verfügbaren Höhe bzw. Breite (z.B. 70vh)
Das Ergebnis: 6 mögliche Layouts
Schritt 2: Gliederung & Navigation
- Überlege dir gut, welche Unterseiten deine Webseite haben wird (Startseite, Über uns, Spielbeschreibung...)
- Du erstellst eine Navigation (sowie den Header und den Footer) der Seite!
Für die Navigation kannst du entweder die Idee der letzten Übung verwenden oder einen Bootstrap Navigations-Baustein.
Beispiele und weitere Infos zur Gliederung findest du in der Demo: Navigation.html
❗ Wenn du dich für die Endlos-Seite entscheidest, braucht es im Layout 2-3 Änderungen:
- Da die Seite nach unten über den Bildrand hinausgeht, sollte die Navigation fix am oberen Rand sein
- Der
main-Teil darf keine fixe Höhe haben
- Demo: LayoutEndlos.html
- Download: LayoutEndlos.zip
❗ Wenn du dich für eine Gliederung auf mehreren HTML-Seiten entscheidest, ein Tipp:
- Schön wäre, wenn die Webseite immer genau auf einer Seite dargestellt wird!
- Sollte der Inhalt einer Seite mal zu umfangreich sein, kannst du die Funktionalität Mehr Lesen einsetzen:
- Demo: MehrLesen_Funktionalität.html
- Download: MehrLesen.zip
Schritt 3: Inhalte
Ist die Gliederung einmal gemacht, müssen lediglich noch die Inhalte der einzelnen Seiten erstellt werden. Wie in den früheren Übungen kannst du
mit HTML-Bausteinen (Überschriften, Absätzen, Tabellen, Aufzählungen, Bilder...) den Inhalt erstellen. Folgend findest du nützliche Infos und Beispiele
zum Stylen und Einfügen von Inhalten.
Bootstrap Standard-Inhalte
Zu allen Standard-Bausteinen bietet Bootstrap vorgefertigte Klassen und auch ganze Beispiele, die ihr verwenden könnt!
Spezielle Icons
Viele Online-Seiten bieten ganze Sets von Icons, die auf der eigenen Webseite verwendet werden können.
Demo & Download: Web Icons
Spezielle Schriftarten
Neben sehr vielen verschiedenen Schriftarten, die du auf deiner Webseite verwenden kannst, bieten verschiedene Online-Anbieter auch
Schriftarten an, die du in deiner Webseite einbinden kannst (sogar mit coolen Effekten)! Einer davon ist Google:
Demo & Download: Google Fonts
Spezielle Inhalt-Vorlagen
In der folgenden Liste findest du eine nette Auswahl an ganzen Bausteinen für deine Webseite. Hier werden meist auch eigene CSS-Dateien verwendet, die du ebenfalls
übernehmen musst für die Verwendung.
Übung 9: Meine Webseite mit Bootstrap
Der Auftrag ist ganz einfach: Folge den Anweisungen oben, um dir einen ersten Entwurf deiner Webseite zusammenzustellen:
- Layout wählen: Entscheide dich für ein Layout und lade den Code herunter. Entpacke ihn in dein Laufwerk P.
- Navigation einbinden: Nimm dir aus der Demo oder von Bootstrap den Code für eine Navigation und binde sie in dein Layout ein. Der HTML-Code kommt in den nav-Bereich, allfälliger CSS-Code fügst du deiner CSS-Datei hinzu.
- Farbwahl: Wähle für die verschiedenen Bereiche ein passendes Farbschema. Du kannst auch Inhalte für den Header & Footer definieren.
- Eine Unterseite: Kopiere die aktuelle HTML-Seite und kreiere daraus eine erste Unterseite. Verlinke die beiden Seiten im Navigations-Menu.
- Inhalte: Fülle nun die beiden Seiten mit Inhalten. Dafür kannst du alle möglichen Bausteine von oben (Icons, Schriftarten, Timeline, UeberUns...) verwenden.