Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- modul:m287:learningunits:lu05:aufgaben:praktisches-beispiel [2025/05/09 07:59] – angelegt kdemirci
+++ modul:m287:learningunits:lu05:aufgaben:praktisches-beispiel [2025/05/09 08:16] (aktuell) – kdemirci
@@ Zeile 1: / Zeile 1: @@
 ====== LU05.A03 - Webseite mobile freundlich umsetzen  ======
-Als Ausgangslage dient ein dreispaltiges, flexibles Layout. Die Breite ist mit 960 Pixeln im ID-Selektor #wrapper festgelegt. Die restlichen Elemente sind mit relativen Werten (hier in Prozent) angegeben. Die relativen Werte für die weiteren Layouts werden mit den Media Queries angepasst. Die Desktopversion mit den 960 Pixeln ist unten abgebildet.
+===== Ausgangslage =====
-{{:modul:m287:learningunits:lu05:anwendung_layout.png?400|}}
+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.
-===== Viewport als Voraussetzung =====
+{{:modul:m287:learningunits:lu05:anwendung_layout.png?600|}}
-Der Viewport ist der sichtbare Bereich des Webbrowsers ohne Menü- und Scrollleiste, in dem die Webseite angezeigt wird.
-Fehlt das Meta-Element viewport, dann zeigen die mobilen Geräten trotzdem die Desktopversion, weil der Viewport vom Gerät breiter angegeben wird, als tatsächlich Pixel vorhanden sind. Das bedeutet, dass sich Webbrowser auf mobilen Geräten so verhalten, als wären sie Webbrowser eines Desktoprechners. Das ist kein Fehler, sonst würde der Webbrowser bei vielen Webseiten nur einen Teil der Webseite darstellen. Der Benutzer müsste folglich immer quer und horizontal scrollen.
-Damit im folgenden Anwendungsbeispiel die mobilen Endgeräte tatsächlich unterstützt werden, wird im <head> das Meta-Element viewport hinzugefügt:
-<code html>
-...
-<head>
-    <title>Responsive Webdesign</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="stylesheet" type="text/css" href="style.css" />
-</head>
-...
-</code>
 ===== HTML-Grundgerüst =====
@@ Zeile 29: / Zeile 14: @@
 <!doctype html>
 <html>
-  <head>
+<head>
     <title>Responsive Webdesign</title>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width">
+    <meta content="width=device-width, initial-scale=1" name="viewport"/>
-    <link rel="stylesheet" type="text/css" href="style/desktop.css" />
+    <link href="style.css" rel="stylesheet" type="text/css"/>
-  </head>
+</head>
-  <body>
+<body>
-    <div id="wrapper">
+<div id="page-wrapper">
     <header>Responsive Webdesign</header>
-    <nav id="mainnav">
+    <section class="main-content">
-      <h3>Navigation</h3>
+        <nav id="mainnav">
-      <ul>
+            <h3>Navigation</h3>
-        <li><a href="#">Home</a></li>
+            <ul>
-        <li><a href="#">Blog</a></li>
+                <li><a href="#">Home</a></li>
-        <li><a href="#">Links</a></li>
+                <li><a href="#">Blog</a></li>
-        <li><a href="#">About</a></li>
+                <li><a href="#">Links</a></li>
-        <li><a href="#">Kontakt</a></li>
+                <li><a href="#">About</a></li>
-      </ul>
+                <li><a href="#">Kontakt</a></li>
-    </nav>
+            </ul>
-    <main>
+        </nav>
-      <article>
+        <main id="content">
-        <h1>Artikel 1</h1>
+            <article class="post-with-image">
-        <p><img src="img/eye.jpg" alt="Pferdekopf">Lorem ipsum dolor sit amet, consectetuer
+                <div class="post-image">
-          adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
+                    <img alt="Pferdekopf" src="https://placehold.co/600x400"/>
-          penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+                </div>
-          ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
+                <div class="post-content">
-          Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
+                    <h1>Artikel 1</h1>
-          rhoncus ut.</p>
+                    <p>
-      </article>
+                        Lorem ipsum dolor sit amet, consectetuer
-      <article>
+                        adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
-        <h1>Artikel 2</h1>
+                        penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
-        <p>Lorem ipsum dolor sit amet, consectetuer
+                        ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
-          adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
+                        Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
-          penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+                        rhoncus ut.
-          ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
+                    </p>
-          Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
+                </div>
-          rhoncus ut.</p>
+            </article>
-      </article>
+            <article class="post">
-      </main>
+                <div class="post-content">
-      <aside id="sidebar">
+                    <h1>Artikel 2</h1>
-        <h3>Seitenleiste</h3>
+                    <p>Lorem ipsum dolor sit amet, consectetuer
-        <p>Lorem ipsum dolor sit amet, consectetuer
+                        adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
-          adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
+                        penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
-          penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+                        ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
-          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,
-          Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
+                        rhoncus ut.
-          rhoncus ut.</p>
+                    </p>
-        <ul>
+                </div>
-        <li><a href="#">Link 1</a></li>
+            </article>
-        <li><a href="#">Link 2</a></li>
+        </main>
-        <li><a href="#">Link 3</a></li>
+        <aside id="sidebar">
-        </ul>
+            <h3>Seitenleiste</h3>
-    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+            <p>Lorem ipsum dolor sit amet, consectetuer
-    </aside>
+                adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
-    <footer class="clear">Fußzeile</footer>
+                penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
-    </div>
+                ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
-  </body>
+                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 |