CodeScouts.de

Dieser Kurs knüpft an den vorherigen HTML- und CSS-Kurs an und erklärt weitergehende Tricks und "best practices" die man braucht um mit HTML und CSS auch komplexe Layouts umzusetzen. Der Kurs ist selbstverständlich auch für die Leute gedacht, denen die Grundlagen von HTML und CSS schon klar sind, die aber mit dem Programmieren von konkreten Layouts Pobleme haben.

Durch diesen Kurs spart ihr euch das lange Suchen und Herumprobieren bis alles in allen Browsern vernünftig läuft: Wir zeigen euch an einem konkreten Beispiel, wie ihr ein Layout umsetzen könnt. Zuerst schauen wir uns noch einmal kurz an, wie man eine HTML-Dateien anlegt, eine CSS-Datei einbettet und wie das HTML5-Grundgerüst aussieht. Danach geht es weiter mit dem ersten spannenden Thema an: CSS-Reset.

Das Layout, das in diesem Kurs umgesetzt wird verfügt genau über die Elemente, die man auf den allermeisten Webseiten findet: ein Grundraster, dass zentriert werden kann, einen Kopfbereich mit Logo und Titel, ein großes Kopf-Bild und einen sehr großer Werbetext, eine Navigation inkl. Subnavigation, einen mehrspaltigen Bereich und einen Footer. Sobald man weiß, wie man diese Elemente alle umsetzt, kann man fast jedes beliebige Layout aus diesen Elemente zusammensetzen.

Danach geht es weiter mit dem Floating: Floating ist ein unheimlich wichtiges Konzept und es wurde im ersten HTML-CSS-Kurs bereits erklärt. Gerade da dies so wichtig ist, wollen wir aber noch einmal im Detail darauf eingehen und an praktischen Beispielen sehen, wie sich Elemente verhalten, die mit dem CSS-Attribut "float" versehen wurden. Am einfachsten kann man die Funktion von Floating dann nachvollziehen, wenn man sich anschaut wofür das Attribut eigentlich gedacht war, und dann ausprobiert wie sich die Elemente auf einer Seite bewegen. Und genau das machen wir in diesem Kurs, denn dann ist es auch einfacher zu verstehen, wie man mit Floating Layouts aufbaut.

Positionierung ist die alternative Methode, um Elemente auf einer Seite anzuordnen: Hierbei teilt man dem Browser explizit mit, an welcher Stelle welches Element gerendert werden soll. Zum Beispiel: "Positioniere dieses Element 100 Pixel weiter unten" oder "dieses Element soll in der ganz oberen rechten Ecke der Seite bleiben". Geeignet ist dies vor allem um einzelne Elemente an eine Stelle zu bewegen, vor allem wenn ich genau weiß wie groß die jeweiligen Elemente sind. Nicht gut eignet sich Positionierung, wenn ich nicht genau weiß, wohin ein Element soll, sondern nur weiß, dass es sich an ein anderes Element anlehnen soll. Dafür würde man dann das Floating verwenden. Es gibt in CSS drei verschiedene Möglichkeiten dieses "Positionieren" zu verwenden, und die schauen wir uns in diesem Kurs an.

Unsere Seite soll eine horizontale Navigation mit einer Subnavigation bekommen, die beim Überfahren automatisch ausklappt. Es ist keine Zauberei, dies mit reinem CSS umzusetzen, da wir auf genau das zurückgreifen können, das wir vorher gelernt haben: Floating und Positionierung. Zuerst schauen wir uns an, wie man eine Navigation so strukturiert, dass sie möglichst barriere-arm und Suchmaschinen-freundlich ist und dann schreiben wir das CSS, das unsere Navigation unseren Wünschen entsprechend aussehen lässt.

Das ist eine ganze Menge und mit dem Wissen könnt ihr problemlos auch komplexere Seiten umsetzen. Gesamtlaufzeit: 44:45 Minuten.