HTML5 als Designwerkzeug - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 140

Natürlich legen Sie auch wieder eine Datei für Ihre eigenen Stilangaben an, nennen
Sie sie style.css , und verlinken Sie sie nach dem MagazineGrid.
Das MagazineGrid greift für alle Elemente, die Teil eines Artikels sind. Strukturieren
Sie Ihr HTML-Dokument folgendermaßen:
<article>
<section>
// Erster Abschnitt
</section>
<section>
// Zweiter Abschnitt
</section>
…
</article>
Listing 4.8 Die Strukturierung Ihres Dokuments über article und section
Ein Artikel wird in verschiedene Sektionen aufgeteilt. Dafür verwenden Sie die
HTML5-Elemente article und section .
Im Folgenden gestalten Sie zwei Seiten eines Reisemagazins, in dem Sie von Ihren
Abenteuern in Ägypten berichten. Das MagazineGrid selbst ist lediglich für die
Gestaltung der Einzelseiten geeignet, wie Sie diese zu einem vollständigen HTML5-
Magazin, ähnlich dem Aside Magazine, zusammenstellen, lernen Sie in Abschnitt 8.2,
»Die Entwicklung einer App mit Sencha Touch«.
Das Raster
Eine Magazinseite unterscheidet sich von einer Webseite dadurch, dass sie statt Navi-
gation, Kopfzeile, Seitenleiste etc. vor allem eines enthält: einen Artikel. Der Artikel
besteht aus einem Text, verschiedenen Bildern und Kästen, die sich an einem Gestal-
tungsraster orientieren sollen. Vielleicht kennen Sie das bereits aus klassischen Lay-
outprogrammen, wie z. B. Adobe InDesign (Abbildung 4.7).
Das MagazineGrid unterteilt den Bildschirm in acht Spalten. Je nach Wichtigkeit und
Größe kann sich dabei ein Element über eine oder mehrere Spalten erstrecken. Der
Clou dabei: Die Spalten gehen bis zum Rand, es ist damit ein Leichtes, Bilder »in den
Anschnitt«, das heißt abschließend mit dem Bildschirm, zu setzen, wie man im Edi-
torial Design so schön sagt. Bereiten Sie einen Artikel mit unterschiedlich breiten Ele-
menten vor:
<article>
<section>
<div class="grid x4"></div>