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.

HTML5 für Webdesigner

Beispiel-Skizze, Teil 5: Layoutbereiche per CSS gestalten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In diesem Film sehen Sie, wie die Layoutbereiche der Beispielseite mit wenigen Styles gestaltet werden.

Transkript

Das HTML für die Skizze der Beispielseite steht so weit. Es gibt eine Verknüpfung zu einem Stylesheet namens "Style.css" und alle Layout-Bereiche haben die neuen HTML 5 Elemente, Footer, Main, Aside, Header und Nav. Im CSS sind diese fünf neuen Elemente bereits zu Blockelementen erklärt worden. Das ist nötig, weil alte Browser, die das nicht kennen, sonst Inline-Elemente davon machen würden. Und eine Grundformatierung für das Stammelement HTML und Body ist soweit passiert. Im Browser sieht das noch nicht so pralle aus. Wenn Sie sich das hier anschauen, da besteht noch ein bisschen Handlungsbedarf. Deswegen geht es jetzt gleich weiter im Editor mit der Grundgestaltung der Layout-Bereiche. Los geht es mit dem Header, dem neuen Element Header. Das bekommt als Erstes Position "relative", damit man innerhalb des Headers schön mit absoluter Positionierung arbeiten kann, und es soll ein bisschen Padding bekommen. Oben nix. Zwei REM oben und unten und links und rechts, und eins für unten. Das war es schon. Jetzt kommen die Überschrift, die Hauptüberschrift, in der das Logo sitzt. Das soll kein Padding haben. Aber ein bisschen Margin. Oben ein bisschen Abstand und unten, rechts und links nichts. So, ein bisschen Platz machen hier. Die Links, im gesamten Kopfbereich, haben zwei Eigenschaften. Sie sollen zum Einen weiß sein, und zum Anderen brauchen sie die Unterstreichung nicht. Es ist auch so deutlich, dass sie Links sind. So weit zum Kopfbereich. Weiter geht es mit den Navigationsbereichen, die innerhalb sitzen, innerhalb des Kopfbereiches. Auch die sollen Position "relative" haben, damit man schön positionieren kann darin. Die Überschriften innerhalb der Navigationsbereiche sind in einem visuellen Layout nicht wirklich nötig. Und die Listen, davon gibt es ja einige innerhalb der Navigationsbereiche, die sollen keine Aufzählungspunkte haben, und ebenso setzen wir das Padding und das Margin einfach einmal zurück. Das ist fürs Erste hier die Layout-Bereiche. Jetzt fehlt nur noch "Main". Und der bekommt erst einmal eine minimale Höhe, da er ja noch gar keinen Inhalt hat; damit man ihn überhaupt ein bisschen wahrnehmen kann. Hintergrund für Main soll weiß sein. Weiß - White. Und ein Padding von zwei REM. Soweit ist das hier dabei. Einmal im Überblick: Layout-Bereich im Header, Position "relative", ein bisschen Padding, rechts und links und unten. Die Überschrift ein bisschen Abstand nach oben. Links im Kopfbereich weiß und Text-Decoration "non". Nav, Position "relative", die Überschriften verschwinden lassen. Die Listen ohne Aufzählungspunkte, und Main bekommt ein bisschen. Gespeichert ist, rüber in den Firefox, und das sieht schon etwas besser aus hier. Main ist weiß, das ist schwarz von der Background-Grafik für Body. Hier ist das Logo. Das einzige, was noch verbleibt, ist die Positionierung dieser verschiedenen Navigationsbereiche.

HTML5 für Webdesigner

Lernen Sie, wie Sie in HTML5 Layoutbereiche strukturieren, die richtigen Elemente für Inhalte benutzen, Formulareingaben optimieren und Multimedia ohne Plug-in einbauen.

3 Std. 14 min (39 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!