HTML5 für Webdesigner

Beispiel-Skizze, Teil 7: Inhaltsbereich in Abschnitte unterteilen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Dieser Film veranschaulicht die Erstellung mehrerer Abschnitte mit section innerhalb von main, die verschiedene Klassen erhalten.

Transkript

Die Skizze der video2brain-Startseite ist im Augenblick so weit gediehen, wie das hier zu sehen ist, die Layout-Bereiche wie Kopfbereich, Navbereiche, der Mainbereich ist angedeutet, der Hauptinhaltsbereich und unten drunter ist der Footer. In diesem Film möchte ich Ihnen jetzt zeigen, wie wir hier den Hauptinhaltsbereich mit solchen Inhalten füllen. Das Vorbild für uns sieht hier so aus, dass hier im Mainbereich, also im Hauptinhaltsbereich 1, 2, 3, 4 große Sections sind und eine Sidebar. Wir sehen mal, hier ist eine Section mit dem Slider, hier ist eine dreispaltige Section mit Vorschauprodukten, dann mit neuen Produkten, darunter die Produktkategorien in 3 Spalten und dann kommen hier neue Produkte in einer zweispaltigen Darstellung und in der Sidebar rechts hier sind Neuigkeiten. Das wollen wir jetzt mal mit kleinen Inhaltsbereichen nachbauen. Es bietet sich an, hier Sections zu nehmen und nicht Article, weil das kann ich mir doch in der Syndikation hier eigentlich kaum vorstellen per RSS, also ist das mehr Section. Hier im Quelltext der Seite, sehen Sie die einzelnen Layout-Bereiche bereits vorbereitet, ich scroll runter bis zu Main, hier war noch ein Fließtextabsatz, der ist schon chirurgisch entfernt worden. Hier kommt jetzt rein eine Section, die ich schon vorbereitet habe, damit Sie nicht beim Tippen zugucken müssen. "Section Class Feature Rotator", dass ist der Slider, der heißt im Quelltext so, "Feature Rotator", ein Slider mit wechselnden Bildern. Das ist also eine Section, die bekommt eine Klasse, damit wir verschiedene Sections auseinander halten können, und eine H3-Überschrift und eine kurze Erläuterung, damit wir anschließend im Browser-Fenster sehen können, was das ist. Die zweite Section, falls das zu schnell geht, hier haben Sie unten eine Pause-Taste, einfach kurz gucken, so, ist Small Features. Das sind 3 kleinere Bilder nebeneinander. Das reicht im Moment, ich zeige es hier noch mal. Das sind also die erste Section und die zweite Section, hier 3 kleine Bilder nebeneinander. Dann kommt die dritte Section, das sind die Produkt-Kategorien, die ebenfalls dreispaltig nebeneinander stehen, das deuten wir hier natürlich alles nur an, weil sonst sind wir hier morgen noch am Tippen. Und last not least, kommt unten eine große Section, die hier neue Produkte, zweispaltige Präsentation neuer Produkte. So, das ist momentan hier eine große Tabelle mit verschiedenen Zellen, das würde ich aufteilen. Hier ist eine Section, diese zweispaltige Geschichte, die kann man einfach nebeneinander floaten und hier ist eine andere Section, die in das Aside kommt, wie wir jetzt hier sehen werden. Das Aside ist also Class=News können wir das mal nennen, so, Class=News und die bestehenden Inhalte kommen hier raus und da kommen auch wieder zwei Sections hinein, die hier einfach reinkopiert werden. Das eine ist "BlogNews", das sind ein paar Schlagzeilen, die im Blog von video2brain hier automatisch eingefügt werden und das andere sind Vorschau auf neue Produkte. Sie sehen, auf der Startseite hier momentan, das ist der video2brain-Blog, und hier sind ein paar Produktvorschauen. Den Rest lassen wir der Einfachheit halber hier unten erst einmal weg und springen dann gleich zum Fußbereich, der hier ganz unten drunter steht. H2, der Fußbereich, da ändert sich nichts. So, hier ist also im Mainbereich, der Hauptinhaltsbereich, die Überschrift wird später ausgeblendet per CSS, weil Sie sie in visuellen Layouts nicht brauchen. Ebenso, wenn man hier an die Gestaltung geht, kann man hier die Überschriften auch wieder rausnehmen, aber eine Section beginnt typischerweise mit einer Überschrift. Im HTML ist das durchaus sinnvoll, weil Überschriften angesprungen werden können von z.B. Screen Readern. Auch für Suchmaschinen, Indikationen geben: Worum geht es hier eigentlich? Wenn im visuellen Layout die Überschrift nicht nötig ist, dann wird sie, so wie hier z.B. einfach ausgeblendet, weil die sind optisch so deutlich, die Einschnitte durch Hintergrundfarben, durch andere optische Anreize, dass das nicht nötig ist. Soweit zum Section-Element, und zum Side-Element, die wir hier im Einsatz haben.

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!