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 8: Abschnitte per CSS gestalten

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Hier geht's an die Formatierung bzw. Gestaltung der Abschnitte im Inhaltsbereich der Seite.

Transkript

In diesem Film wird die Skizze der video2brain Startseite mit den neuen HTML5-Elementen soweit weiter gestaltet, dass hier der Hauptinhaltsbereich, dass diese Bereiche ein bisschen so aussehen, wie hier. Die Graphiken werden nicht mit eingebaut, aber so, dass man zumindest erahnen kann, was dort kommen wird.  Dazu wird dieses HTML gestaltet, hier gibt es "Main", ein paar "Sections" mit verschiedenen Klassen. Hier gibt es eine Side-Klasse News, indem weitere Sections liegen. Und um diese Sections geht es jetzt in erster Linie. Vorher soll hier im Style-Sheet, aber noch im Main Bereich DH2 und gleich im Footer DH2, die werden auch ausgeblendet. Und der Footer, bevor wir uns dem Inhaltsbereich intensiv widmen, soll auch noch ein bisschen "gecleart", wo "gefloatet" wird, da wird auch "gecleart". Und er soll die Schrift noch etwas dezenter bekommen und wie oben auch ein Padding von 2RM. Das ist der Footer. Jetzt rollen wir an das Ende mit dieser wunderbaren Mini-Map hier im Sublime Editor. Und es ist nicht mehr "End-of-File", sondern hier geht es um den Inhaltsbereich. Da kommt als Erstes einen Style, den ich hier einfach rein kopiere. Wenn das zu schnell geht, dann einfach auf die Pause-Taste drücken. Main Section, also alle "Section Elemente" im Element "Main" bekommen ein Padding von einem RM drum herum und einen Margin Bottom nach unten. Jetzt kommt der erste Section Bereich, der hier eingebaut wird. Der hat die Klasse "Feature Rotator", kriegt hier eine Höhe von 310, in Wirklichkeit wäre da später eine Graphik drin und einen hellgrauen Hintergrund. Das ist alles. Ich speichere das einmal ab. Dann gehen wir rüber in den Browser und laden das neu und hier ist der "Feature Rotator". Die Überschrift ist weg und die Überschrift im Fußbereich ist weg, und die Schrift ist hellgrau. Und weiter geht es hier jetzt mit Small Features im CSS. Dort ist jetzt der nächste "StyleSection.Small Features". Eine Höhe von 155 Pixeln, einen grauen Hintergrund, etwas heller und eine etwas dunklere Textfarbe, im Browser sieht das so aus. Hier kommt Small Features unten drunter, so dass die Bereiche schon angedeutet werden. Dann der nächste Bereich enthält die Produktkategorien. Auch dieser kommt wie von Zauberhand hier reingeflogen. Section Punkt Categories entsprechendes HTMLs hier im anderen Browser. 250 Pixel hoch, dunkler Hintergrund und helle Schrift. Also genau umgekehrt, wie oben. Im Browser ganz kurz ein Blick drauf. Sie sehen hier: lauter Rechtecke untereinander. Die Bilder muss man sich denken. Jetzt kommt "neue Produkte". Hier kommt der Vierte unten drunter, der bekommt eine minimale Höhe von 650, damit wir nicht alle Produkte hier reinschreiben müssen. Jetzt kommt noch eine kleine Besonderheit hinzu: Der nimmt nur zwei Drittel der Fläche ein, wird nach links "gefloatet" und bekommt hier ein spezielles Boxmodell, bei dem nämlich das Padding, das wir oben weiter vergeben haben, von der Breite abgezogen wird, damit der insgesamt nur 66 Pixel breit ist. Daneben soll nämlich die Seitenspalte stehen, die hier auch gleich reinfliegt. "Aside.News" also das Aside Element mit 33 Prozent und "floatet" nach "right". Wenn man das durchrechnet 99 bleibt ein Prozent Lücke zwischen dem nach links und dem nach rechts "gefloateten". Auch hier wieder das Boxmodell, damit die Sections innerhalb von Aside das Padding abgezogen kriegen, damit das alles so schön passt. Hier einmal neu laden, und Sie sehen, hier sind die neuen Produkte in einer Section. Daneben als "Aside", also als Inhalt der nur indirekt hiermit zu tun hat. Da drin sind wieder zwei Sections, die das Padding schon automatisch bekommen haben. Man kann jetzt schon mit wenigen "Styles" sehen, dass diese Skizze langsam aber sicher Gestalt annimmt. Das Einzige, was fehlt sind noch ein bisschen Bilder und die "Mehrspaltigkeit" innerhalb der einzelnen Abschnitte. Das ist aber nur ein bisschen klassische "Floaterei", und danach ist alles soweit geschehen. Alles mit neuen Elementen, die hier ganz einfach gestaltet werden. Ich setze hier noch unten drunter, dass hier Schluss ist "End-of-File", damit man später nicht überlegen muss, fehlt da etwas oder ist da wirklich alles drin.

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!