Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Überblick über die Beispiel-Website

Testen Sie unsere 2017 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die Beispiel-Website für dieses Video-Training besteht aus einer Start- und einer Kontaktseite. Dieses Video liefert einen detaillierten Überblick über die Seite.

Transkript

Die Beispiel-Site besteht aus zwei Seiten, aus der Startseite und der Kontaktseite, und die möchte ich Ihnen im Folgenden hier kurz vorstellen. Im Ordner "_beispielseiten-anfang" liegen die dazugehörigen Dateien. Da gibt es auch eine "README" und da steht, die Beispieldateien entsprechen in etwa dem Stand am Ende des Videotrainings "Little Boxes - die CSS-Grundlagen". Das ist nicht ganz identisch, aber im Großen und Ganzen ist diese Beispiel-Site in diesem Videotraining erstellt worden. Zunächst einen kurzen Blick auf das HTML, da ist die Startseite "index.html", da gibt's den "head"-Bereich. Dort wird ein Stylesheet geladen, das heißt, "zentrale.css", und eine Ausbesserung für alte Browser, der "html5shiv" wird hier geladen für Internetexplorer 8 und älter, damit der die im Folgenden verwendeten HTML-Elemente "header", "nav", "main" und "footer" überhaupt versteht. Das ist die Startseite, damit haben wir auch gleich die Grundstruktur, hier "header", "nav", "main" und "footer". Im Browser sieht das Ganze so aus. Rechte Maustaste und hier haben wir das Entwicklertool des Firefox, in dem die Seite hier gezeigt wird. "header", "nav", "main" und "footer", - den kann man nicht sehen, da ist er - umgeben von einem "wrapper". Das ist die HTML-Struktur, die auch für die Kontaktseite gilt. Hier ist dann noch ein Formular drin. Ganz normales Kontaktformular. Gestaltet werden diese beiden Seiten von dem Stylesheet "zentrale.css". Und in "zentrale.css", wie der Name bereits andeutet, werden andere Stylesheets nachgeladen. Da gibt es das Stylesheet "fundament.css", in dem gibt es einen Reset für alle HTML-Elemente bezüglich "padding" und "margin". Dann werden einige ABstände restauriert, und zum Schluss werden alle neuen HTML5-Elemente hier als "display: block" definiert. damit auch ältere Browser damit problemlos klarkommen. Weiter geht es in "zentrale" mit "bildschirm.css". Das ist für die Gestaltung am Bildschirm. Hier geht es um die Hintergründe, das Adressfeld, die Hyperlinks, der Wrapper und die Layoutbereiche werden hier im Groben formatiert. "zentrale.css" kommt danach, mit "navi-tabs", und da sehen Sie einen Vorteil dieser Zentralisierung. Es gibt noch ein anderes Stylesheet für eine Inline-Navigation wo die Navigationspunkte einfach nur nebeneinander stehen. Und durch Auskommentieren und einbinden hier, kann man einzelne Module der Seite leicht ändern. Beim Kontaktformular genauso, "form-einspaltig", "form-zweispaltig". Den aktivieren, das auskommentieren, und schon hat man ein völlig anderes Erscheinungsbild des Formulars. "navi-tabs" gestaltet diese Tabulatornavigation hier oben. Und weiter geht es hier in "zentrale.css" mit dem Formular "form-einspaltig". Das ist die Formatierung für das Formular in diesem Stylesheet. Und "zentrale.css", geht es wieder weiter, und ganz am Ende gibt es noch eine Druckversion. In diesem "zentrale.css" werden alle weiteren Stylesheets quasi eingebunden, so dass die Seiten dadurch gestaltet werden. Nehmen Sie sich ruhig einen Moment Zeit. Schauen Sie sich das an. Die Grundstruktur, die HTML-Struktur der HTML-Seiten, der Webseiten hier denn die brauchen wir später zur Gestaltung immer wieder, Wenn man das HTML nicht kennt, wird es schwierig, das mit CSS zu gestalten. Und auch die Technik mit der "zentrale.css" und der Einbindung mit der Anweisung"@import".

Little Boxes – CSS-Positionierung und mehrspaltige Layouts

Sie erfahren, wie HTML-Elemente mit den Eigenschaften "position" und "float" auf Webseiten verschoben werden können und lernen das kontrollierte Zusammenspiel von Float und Clear kennen.

3 Std. 55 min (49 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

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!