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

HTML5 für Webdesigner

Beispiel-Skizze, Teil 4: Basisformatierung mit CSS

Testen Sie unsere 2015 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Das HTML der Layoutskizze mit den neuen HTML-Elementen wird per CSS gestaltet. In diesem Film binden Sie das Stylesheet per link-Element ein und definieren die neuen Elemente im CSS als Blockelemente.

Transkript

Das HTML für die Skizze der Startseite mit den neuen Layout-Elementen ist soweit fertig. Hier ist der Header, der geht etwas weiter runter hier, relativ groß. Mit zwei Nervbereichen, der Grafiktitel-Navigation für die Site und die Meta-Navigation. Auch wenn es in einem HTML5-Training streng genommen nicht direkt dazu gehört, möchte ich Ihnen zumindest kurz zeigen, wie man dieses HTML gestalten könnte. Los geht es mit dem Bodybereich und dem schwarzen Bereich hier hinten. Dazu benötigen Sie eine Grafik. Hier ist der Body markiert. Wenn ich hier etwas runterrolle, dann sieht man hier dieser schwarze Bereich ist gebaut mit einer Grafik Heather_BG.PNG. Die kann man sich hier einfach kopieren und wenn ich die hier ausstelle, dann sieht man, dass ist das Schwarz, was benötigt wird, dadurch geht es nur 521 Pixel runter.Diese Grafik habe ich schon einmal vorbereitet. Hier Heather_BG und dann noch die beiden für die Meta-Navigation: Zwei Grafiken plus hier das Logo. Das ist bereits eingebaut. Im Editor brauchen Sie für das Style Sheet in HTML5 natürlich wie früher ein Linkelement. Das hat aber weniger Attribute. Type, Text, CSS ist nicht mehr nötig. Sie müssen nur noch sagen, dieser Link führt zu einem Relation Style Sheet. Die Datei, die hier verknüpft ist, ist ein Style Sheet für dieses HTML. Ich habe die Datei genannt Styles.CSS. Die liegt im selben Ordner wie SkizzeV2B Startseite. Und die ist hier noch komplett leer. Nach einem kleinen Anfangskommentar für Webdesigner, "Skizze Startseite" - das ist jetzt nicht wirklich wichtig, dann weiss man später noch zu welchem Style Sheet es gehört - geht es los damit, dass wir die neuen Elemente - Heather Nav, Main, Aside und Footer haben wir bis jetzt verwendet -, dass wir für diese Elemente, den Browser, die die noch nicht kennen sollten, sagen, dass die als Blog-Elemente dargestellt werden. Browser nehmen unbekannte Elemente immer erst einmal als Inline-Element und das wäre für ein Fuss-, Navi-, Haupt-, Spalten- und Footbereich nicht so schön. Dann geht es noch weiter mit der Grundgestaltung. Wir haben keinen Wrapper, keine Doppelung von Body, wir haben aber hier für die Fontsize-Angabe von 100 Prozent. Die geben wir an das Stammelement HTML, und auch die Fontfamily bekommt. Für die Skizze reicht es, wenn wir Verdana angeben und Body dient zur Gestaltung und da kommen ein paar allgemeinere Angaben "with". Die klassischen 960 Pixel für die Skizze, völlig in Ordnung. Dann haben wir Fontsize. Da nehmen wir ein bisschen weniger und ich nehme mal die Einheit REM. Internet Explorer 8 versteht das nicht, aber für eine Skizze ist das nicht so wichtig. Background ist "White", aber es gibt die Hintergrundgrafik, die liegt im Ordner "Grafiken" und hat den schönen Namen Heather_BG.PNG. Die soll links oben anfangen und nur horizontal wiederholt werden. Dann gibt es noch ein bisschen Margin, auch da nehme ich REM. Das bezieht sich auf die Schriftgrösse für das Stammelement "Root EM" für das Stammelement 100 Prozent. Im Normalfall sind das 16 Pixel. Speichern in Firefox. Die Beispielseite noch einmal laden, und Sie sehen, die Grafik ist eingebaut. Hier gibt es noch ein bisschen Handlungsbedarf. Wir haben die Verbindung zwischen Stylesheet und Dokument und die Grundformatierung Heater, Nav, Aside, Footer, Main, Display Blog und für Stammelement und für Body ist soweit vorhanden.

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!