de:modul:m287:learningunits:lu05:aufgaben:praktisches-beispiel

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung		 Vorhergehende Überarbeitung
de:modul:m287:learningunits:lu05:aufgaben:praktisches-beispiel [2026/01/27 10:49] – gelöscht - Externe Bearbeitung (Unbekanntes Datum) 127.0.0.1de:modul:m287:learningunits:lu05:aufgaben:praktisches-beispiel [2026/01/27 12:05] (aktuell) – ↷ Links angepasst, weil Seiten im Wiki verschoben wurden 144.76.32.187
Zeile 1: Zeile 1:
 +====== LU05.A03 - Webseite mobile freundlich umsetzen  ======
 +
 +===== Ausgangslage =====
 +
 +Als Ausgangslage dient ein dreispaltiges, flexibles Layout. Die Breite ist mit 960 Pixeln im ID-Selektor #page-wrapper festgelegt. Die restlichen Elemente sind mit relativen Werten (hier in Prozent) angegeben.
 +
 +{{de:modul:m287:learningunits:lu05:anwendung_layout.png?600|}}
 +
 +===== HTML-Grundgerüst =====
 +
 +Als Grundlage für das Fallbeispiel dient das nachfolgende HTML-Gerüst:
 +
 +<code html>
 +<!doctype html>
 +<html>
 +<head>
 +    <title>Responsive Webdesign</title>
 +    <meta charset="UTF-8">
 +    <meta content="width=device-width, initial-scale=1" name="viewport"/>
 +    <link href="style.css" rel="stylesheet" type="text/css"/>
 +</head>
 +<body>
 +<div id="page-wrapper">
 +    <header>Responsive Webdesign</header>
 +    <section class="main-content">
 +        <nav id="mainnav">
 +            <h3>Navigation</h3>
 +            <ul>
 +                <li><a href="#">Home</a></li>
 +                <li><a href="#">Blog</a></li>
 +                <li><a href="#">Links</a></li>
 +                <li><a href="#">About</a></li>
 +                <li><a href="#">Kontakt</a></li>
 +            </ul>
 +        </nav>
 +        <main id="content">
 +            <article class="post-with-image">
 +                <div class="post-image">
 +                    <img alt="Pferdekopf" src="https://placehold.co/600x400"/>
 +                </div>
 +                <div class="post-content">
 +                    <h1>Artikel 1</h1>
 +                    <p>
 +                        Lorem ipsum dolor sit amet, consectetuer
 +                        adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
 +                        penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
 +                        ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
 +                        Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
 +                        rhoncus ut.
 +                    </p>
 +                </div>
 +            </article>
 +            <article class="post">
 +                <div class="post-content">
 +                    <h1>Artikel 2</h1>
 +                    <p>Lorem ipsum dolor sit amet, consectetuer
 +                        adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
 +                        penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
 +                        ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
 +                        Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
 +                        rhoncus ut.
 +                    </p>
 +                </div>
 +            </article>
 +        </main>
 +        <aside id="sidebar">
 +            <h3>Seitenleiste</h3>
 +            <p>Lorem ipsum dolor sit amet, consectetuer
 +                adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
 +                penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
 +                ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
 +                Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
 +                rhoncus ut.</p>
 +            <ul>
 +                <li><a href="#">Link 1</a></li>
 +                <li><a href="#">Link 2</a></li>
 +                <li><a href="#">Link 3</a></li>
 +            </ul>
 +            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
 +        </aside>
 +    </section>
 +    <footer>Fusszeile</footer>
 +</div>
 +</body>
 +</html>
 +</code>
 +
 +<code css>
 +* {
 +    box-sizing: border-box;
 +}
 +
 +body {
 +    font-family: sans-serif;
 +}
 +
 +#page-wrapper {
 +    margin: auto;
 +    width: 960px;
 +}
 +
 +header, footer {
 +    background: lightgreen;
 +    text-align: center;
 +    padding: 10px;
 +    width: 100%;
 +}
 +
 +.main-content {
 +    display: flex;
 +}
 +
 +.post-with-image {
 +    display: grid;
 +    grid-template-columns: 1fr 1fr;
 +    gap: 15px;
 +}
 +
 +#mainnav {
 +    padding: 15px;
 +    width: 20%;
 +}
 +
 +#sidebar {
 +    padding: 15px;
 +    width: 20%;
 +}
 +
 +main {
 +    padding: 15px;
 +    width: 60%;
 +}
 +
 +article img {
 +    margin: 0 10px 10px 0;
 +    max-width: 100%;
 +    height: auto;
 +    border: 3px solid black;
 +}
 +
 +article {
 +    padding: 15px;
 +    margin-bottom: 5px;
 +    background: lightblue;
 +}
 +
 +nav ul {
 +    padding-left: 0;
 +}
 +
 +nav ul li {
 +    list-style: none;
 +    margin-left: 0;
 +}
 +</code>
 +
 +===== Aufgabenstellung =====
 +
 +  * Analysieren Sie das Markup der Webseite und die Vorgabe der responsiven Ansicht (Bild in der Ausgangslage)
 +  * Setzen Sie die Tablet und Mobile Version der Webseite mit Media Queries um. Überlegen Sie sich dafür geeignete Breakpoints. Ergänzen Sie bei Bedarf das HTML.
 +  * Geben Sie Ihre Ergebnisse als ZIP-Datei ab.
 +
 +===== Rahmenbedingungen =====
 +
 +^ Was ^ Beschreibung ^
 +| **Produkt:** | Webseite mit HTML und CSS |
 +| **Zeit:** | 45 Min. |
 +| **Sozialform:** | Einzel- oder Partnerarbeit |
 +| **Arbeitsmittel:** | Entwicklertools, Browser |