de:modul:m287:learningunits:lu05:loesungen: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:loesungen:praktisches-beispiel [2026/05/29 07:59] – gelöscht - Externe Bearbeitung (Unbekanntes Datum) 127.0.0.1de:modul:m287:learningunits:lu05:loesungen:praktisches-beispiel [2026/05/29 13:22] (aktuell) – vdemir
Zeile 1: Zeile 1:
 +====== LU05.L03 - Webseite mobile freundlich umsetzen  ======
 +
 +===== Lösungshinweis =====
 +
 +Nachfolgend finden Sie eine übersichtliche Aufzählung aller Anpassungen, die an den Dateien vorgenommen habe, um das Layout exakt wie auf der Vorlage umzusetzen:
 +
 +===== Änderungen im HTML (`index.html`) ======
 +
 +Da HTML-Grundgerüst bereits gut strukturiert war, mussten nur minimale Optimierungen für die Barrierefreiheit und Struktur vorgenommen werden:
 + 
 +  * **Sprachattribut ergänzt:** Im `<html>`-Tag wurde `lang="de"` hinzugefügt. Das hilft Screenreadern und Suchmaschinen zu erkennen, dass es sich um eine deutschsprachige Seite handelt.
 +  * **Strukturierende Kommentare:** Es wurden aussagekräftige HTML-Kommentare (``) eingefügt, damit sofort ersichtlich ist, welcher Block (Navigation, Hauptbereich, Seitenleiste) in welcher Ansicht wohin rutscht.
 +
 +===== Änderungen im CSS (`style.css`) ======
 +
 +Hier fand die eigentliche Magie statt. Der Desktop-Code blieb als Basis bestehen, wurde aber um zwei Media Queries erweitert.
 +
 +==== 1. Allgemeine Basis-Anpassung (Desktop) =====
 +
 +  * **`body { margin: 0; }` hinzugefügt:** Das entfernt den standardmäßigen weißen Rand, den Browser automatisch um die Webseite legen. So schließen Header und Footer perfekt mit dem Bildschirmrand ab.
 +
 +
 +==== 2. Für die Tablet-Ansicht (`@media screen and (max-width: 959px)`) ====
 +
 +  * **Flexibler Wrapper:** `#page-wrapper` wurde von festen `960px` auf `width: 100%` umgestellt, damit die Seite auf schmaleren Bildschirmen nicht abgeschnitten wird. Ein leichtes `padding` (Seitenabstand) sorgt dafür, dass Text nicht am Glasrand klebt.
 +  * **Zeilenumbruch aktiviert:** Dem Container `.main-content` wurde `flex-wrap: wrap;` zugewiesen. Nur dadurch können Elemente überhaupt untereinander rutschen.
 +  * **Navigation nach oben gezogen:** `#mainnav` bekam `width: 100%` und `order: 1`, damit sie sich – wie in der Grafik – über die gesamte Breite über den Inhalt legt.
 +  * **Seitenleiste nach links verschoben:** `#sidebar` wurde auf `width: 30%` gesetzt und bekam `order: 2`. Dadurch rutscht sie auf die linke Seite.
 +  * **Hauptbereich nach rechts verschoben:** `main` wurde auf `width: 70%` gesetzt und bekam `order: 3`. So teilt es sich die Zeile mit der Seitenleiste und steht rechts daneben.
 +
 +==== 3. Für die Mobile-Ansicht (`@media screen and (max-width: 600px)`) ====
 +
 +  * **Alles auf 100% Breite:** Für `#mainnav`, `main` und `#sidebar` wurde die Breite auf `100%` gesetzt. Dadurch bricht das Nebeneinander komplett auf und alle Elemente stapeln sich sauber untereinander.
 +  * **Reihenfolge getauscht:** Durch die `order`-Eigenschaften rutscht die Navigation (`order: 1`) ganz nach oben, der Hauptbereich (`order: 2`) in die Mitte und die Seitenleiste (`order: 3`) nach unten – exakt wie auf der rechten Skizze.
 +  * **Artikel-Grid aufgelöst:** Das zweispaltige Grid der Klasse `.post-with-image` wurde auf `grid-template-columns: 1fr;` (eine Spalte) reduziert. Dadurch rutscht der Text bei Artikel 1 unter das Bild, statt daneben gequetscht zu werden.
 +  * **Bild-Optimierung:** Das Bild (`article img`) nutzt nun `width: 100%`, um sich perfekt an die Breite des Smartphones anzupassen.
 +
 +===== Sourcecode: index.html =====
 +
 +<code html>
 +<!doctype html>
 +<html lang="de">
 +<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>
 +
 +<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>
 +
 +</code>
 +
 +===== style.css =====
 +
 +<code css>
 +/* ==========================================================================
 +   1. DESKTOP-ANSICHT (Basis-Layout)
 +   Grafik links: Header oben | Nav (links) - Main (mitte) - Aside (rechts) | Footer unten
 +   ========================================================================== */
 +* {
 +    box-sizing: border-box;
 +}
 + 
 +body {
 +    font-family: sans-serif;
 +    margin: 0; /* Verhindert ungewollte Ränder am Bildschirmrand */
 +}
 + 
 +#page-wrapper {
 +    margin: auto;
 +    width: 960px; /* Feste Breite für die Desktop-Ansicht */
 +}
 + 
 +header, footer {
 +    background: lightgreen;
 +    text-align: center;
 +    padding: 10px;
 +    width: 100%;
 +}
 + 
 +.main-content {
 +    display: flex; /* Flexbox aktiviert das nebeneinander Anordnen */
 +}
 + 
 +.post-with-image {
 +    display: grid;
 +    grid-template-columns: 1fr 1fr;
 +    gap: 15px;
 +}
 + 
 +#mainnav {
 +    padding: 15px;
 +    width: 20%; /* Nav nimmt 20% Breite ein */
 +}
 + 
 +#sidebar {
 +    padding: 15px;
 +    width: 20%; /* Sidebar nimmt 20% Breite ein */
 +}
 + 
 +main {
 +    padding: 15px;
 +    width: 60%; /* Hauptbereich nimmt 60% Breite ein (Zusammen 100%) */
 +}
 + 
 +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;
 +}
 +
 +
 +/* ==========================================================================
 +   2. TABLET-ANSICHT (Breakpoint: unter 960px)
 +   Grafik mitte: Header oben | Navigation vollflächig darunter
 +                 Seitenleiste (links) - Hauptbereich (rechts)
 +                 Footer unten
 +   ========================================================================== */
 +@media screen and (max-width: 959px) {
 +    #page-wrapper {
 +        width: 100%; /* Layout passt sich flexibel der Bildschirmbreite an */
 +        padding: 0 10px;
 +    }
 +
 +    .main-content {
 +        flex-wrap: wrap; /* Ermöglicht das Umbrechen der Elemente in eine neue Zeile */
 +    }
 +
 +    /* Navigation wird vollflächig über die Inhaltsblöcke geschoben */
 +    #mainnav {
 +        width: 100%;
 +        order: 1; /* Kommt als erstes Element innerhalb von .main-content */
 +    }
 +
 +    /* Seitenleiste rutscht nach links */
 +    #sidebar {
 +        width: 30%; /* Nimmt 30% der Breite ein */
 +        order: 2;   /* Kommt an zweite Stelle (links) */
 +    }
 +
 +    /* Hauptbereich rutscht nach rechts neben die Seitenleiste */
 +    main {
 +        width: 70%; /* Nimmt die restlichen 70% der Breite ein */
 +        order: 3;   /* Kommt an dritte Stelle (rechts) */
 +    }
 +}
 +
 +
 +/* ==========================================================================
 +   3. MOBILE-ANSICHT (Breakpoint: unter 600px)
 +   Grafik rechts: Header | Navigation | Hauptbereich | Seitenleiste | Footer
 +   (Alle Elemente untereinander gestapelt)
 +   ========================================================================== */
 +@media screen and (max-width: 600px) {
 +    /* Alle Blöcke werden auf die volle Breite gesetzt, um untereinander zu stehen */
 +    #mainnav, main, #sidebar {
 +        width: 100%;
 +    }
 +
 +    /* Reihenfolge laut Skizze anpassen */
 +    #mainnav {
 +        order: 1; /* 1. Navigation */
 +    }
 +
 +    main {
 +        order: 2; /* 2. Hauptbereich rutscht über die Seitenleiste */
 +    }
 +
 +    #sidebar {
 +        order: 3; /* 3. Seitenleiste rutscht unter den Hauptbereich */
 +    }
 +
 +    /* Optimierung für den Artikel: Das zweispaltige Grid wird einspaltig */
 +    .post-with-image {
 +        grid-template-columns: 1fr;
 +        gap: 10px;
 +    }
 +
 +    /* Das Artikelbild wird für Mobilgeräte zentriert dargestellt */
 +    article img {
 +        margin: 0 0 10px 0;
 +        width: 100%;
 +    }
 +}
 +</code>
 +
 +
 +----
 +[[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir