Layout von Webseiten
Layout von Webseiten
Embedded Files
Container für das Layout einer Webseite:
Container für das Layout einer Webseite:
Webseiten sind immer ähnlich aufgebaut:
Zuoberst befindet sich der Header der Webseite, meistens mit einem Bannerbild und einer horizontalen Navigation.
Darunter befindet sich der Hauptteil der Webseite, manchmal mit einer
vertikalen Navigation auf der linken Seite
sowie einer Randspalte mit zusätzlichen Informationen auf der rechten Seite.
Zuunterst befindet sich der Footer, er enthält häufig Links zu den wichtigsten Bereichen der Webseite, Links zum Social Media Angebot, sowie Informationen zu Impressum und Datenschutz.
Dieser Bereich einer Webseite werden mit entsprechenden HTML-Elemente dargestellt:
<header>
<main>
<nav>
<aside>
<footer>
Ziele:
Ziele:
G3: Ich kann den Aufbau einer Webseite erklären (z.B. Header, Body, Tags, Metatags…)
F3: Ich kann eine einfache Webseite umsetzen (z.B. Header, Body, Tags, Metatags…)
E3: Ich kann einen komplexen Webauftritt aus mehreren Seiten planen und umsetzen.
Container für die Strukturierung von Inhalt:
Container für die Strukturierung von Inhalt:
Innerhalb dieser Layout-Elemente werden häufig HTML-Elemente verwendet, um den Inhalt weiter zu strukturieren:
<article> umschliessend einen unabhängigen Bereich einer Webseite. Er beginnt immer mit einer Überschrift, gefolgt vom Inhalt. Mögliche Verwendung:
Blogpost,
einzelnes Produkt,
Zeitungsartikel
<section> definiert einen Abschnitt in sonst zusammenhängendem Inhalt. Auch eine Section beginn immer mit einer Überschrift, gefolgt von weiterem Inhalt. Mögliche Verwendung:
Kapitel eines Dokumentes
<div> definiert ebenfalls einen Abschnitt (divison) einer Webseite. Das Element wird immer dann eingesetzt, wenn die Verwendung eines <article> oder <section>-Elementes keinen Sinn macht.
<address> umschliesst die Informationen zum Autor eines <article> oder einer kompletten Seite.
Buch:
Buch:
Kapitel 15: Layout, Seite 359
Weiterführende Links:
Weiterführende Links:
Learning Apps:
Layout einer Webseite zeichnen:
Page updated
Report abuse