Die Grundlemente sind durch die Struktur responsive Website vorgegeben und werden nacheinander in eine HTML-Struktur übersetzt. Insgesamt soll die Website über 3 Seiten verfügen und die Seiten sollen in zwei Größen (Smartphone, Desktop) responsiv ausgegeben werden.
- Startseite
- Inhaltsseite
- Kontaktformular
Die Seite wird zuerst in einem HTML-Dokument mit den Grundelementen aufgesetzt, begonnen wird mit der Startseite, die anderen Seiten werden sich aus der Struktur ableiten.
1. Beginnen Sie mit dem Body und vergeben Sie das Attribut class, damit später die entsprechende Stylesheet-Anweisung zugeordnet werden kann.
2. Arbeiten Sie die Elemente in ihrer Reihenfolge von links oben nach rechts unten ab, das erste Element ist demzufolge der Kopfbereich. Verwenden Sie nach Möglichkeit die semantischen Bezeichnungen von HTML5 - in diesem Falle also header. Im header sind weitere Elemente untergebracht: das Logo und die Navigation.
Die Navigation sollte gleich etwas detaillierter ausgearbeitet werden. Es sind 3 Menüpunkte erforderlich, um später zwischen den einzelnen Seiten navigieren zu können und diese werden in einem Listenelement angelegt. Navigationen werden im Webdesign nahezu ausschließlich in Form von Listenelementen umgesetzt, diese Elemente sind gut zu formatieren und zu steuern. Als Linkadresse werden die Dateinamen feature und kontakt eingesetzt, diese Dateien müssen später noch angelegt werden.
3. Das nächste Element ist der Feature-Bereich. Dieser wird nur auf der Startseite benötigt und wird auf den Folgeseiten dann einfach entfernt. Damit später unterschiedliche Bildgrößen eingesetzt werden könnnen, werden die Bilder später mittels css eingesetzt.
4. Nun folgt der Hauptinhalt. Dieser wird in einen Inhalts und Seitenbereich aufgeteilt.
5. Am Ende steht der Footer - für ihn sind keine weiteren Elemente eingeplant.
Insgesamt sieht der Code für die grobe Seitenstruktur nun so aus:
<body class="home">
<header class="pageheader">
<div class="logo">
</div>
<nav class="navmain" id="nav">
<ul class="navlist">
<li class="active"><a href="/index.html">Home</a></li>
<li><a href="/feature.html">Feature</a></li>
<li><a href="/kontakt.html">Kontakt</a></li>
</ul>
</nav>
</header>
<section class="feature">
<div id="feature1"></div>
<div id="feature2"></div>
<div id="feature3"></div>
</section>
<main class="content">
<section id="contentmain">
</section>
<aside class="sidebar">
</aside>
</main>
<footer class="footer">
</footer>
</body>