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 5: / Zeile 5: @@
 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.
-{{:modul:m287:learningunits:lu05:anwendung_layout.png?400|}}
+{{: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 |