Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- modul:m287:learningunits:lu05:aufgaben:praktisches-beispiel [2025/05/09 08:05] – 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.
-===== Ausgangslage =====
+{{:modul:m287:learningunits:lu05:anwendung_layout.png?600|}}
-<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 163: / Zeile 152: @@
     list-style: none;
     margin-left: 0;
-    margin-top: 0.4em;
 }
 </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 |