MMDE02J Einsendeaufgabe - Gestaltung von Webseiten mit HTML5 und CSS3 - Formatierung und Layout

A. Praxisaufgabe
Sehen Sie sich bitte die folgende Abbildung einer Webseite an, wie sie im Firefox dargestellt wird. Entwickeln Sie bitte nach dieser Vorlage ein HTML-Dokument css-aufgabe.html mit einem zugehörigen externen Stylesheet css-aufgabe.css. Dabei müssen Sie weder dieselben Maße einhalten noch genau dieser Farbgebung folgen. Das Layout sollte aber diesem Muster entsprechen. Dazu hier noch einige Informationen und Anforderungen:
• Legen Sie dazu als Erstes einen neuen Ordner auf Ihrem Rechner an und nennen Sie ihn nachname-mmde02j-aufgabe.
• Speichern Sie bitte darin die beiden Dateien css-aufgabe.html und css-aufgabe.css.
• Orientieren Sie sich bei Ihrem Entwurf an dem Beispiel aus Kapitel 9. Das Layout der Aufgabe ist eine stark vereinfachte Variante dieses Beispiels, es soll also ein „flüssiges Layout“ erstellt werden.
• Die Navigationsleiste soll rechts platziert werden.
Hinweis: Überlegen Sie bitte, welches HTML-Element Sie mit einer Flexbox-Eigenschaft modifizieren müssen, damit die Navigation auf der rechten Seite angezeigt wird.
• Die Verweise im rechten Container sollen als Liste ausgezeichnet sein.
• Die Listenelemente sollen keine Aufzählungspunkte haben.
• Die Verweise sollen im Normalzustand keine Unterstreichung haben.
• Sie können als freiwillige Zusatzarbeit die Verweise als grafische Buttons gestalten.
• Mithilfe einer Pseudoklasse soll als Hover-Effekt für die Links die Unterstreichung realisiert werden. Denken Sie daran, dass Sie als Linkpfad im href- Attribut den „Gartenzaun“ verwenden.
• Setzen Sie bitte ähnliche Hintergrundfarben wie in der Vorlage um. Überlegen Sie bitte, welchem Element Sie dazu welche Farbe zuweisen müssen.
• Auf der ganzen Seite soll eine Schriftart mit der Prioritätsreihenfolge Verdana, Geneva, sans-serif verwendet werden.
• Nutzen Sie Klassen und kontextabhängige Selektoren (Kombinatoren). Hier können Sie Ihrer Fantasie freien Lauf lassen!
• Im linken Container sollen nach der Hauptüberschrift zwei Absätze eingefügt werden, denen die Klassen .grosstext und .kleintext mit entsprechenden CSS-Regeln zugewiesen sind
​
B. Multiple Choice
1. Aufgabe: CSS führt zur Trennung von …
2. Aufgabe: Welche CSS-Codezeile ist korrekt?
3. Aufgabe: Welche Aussage zu kontextabhängigen Selektoren ist richtig?
4. Aufgabe: Die Deklaration {font-family:Helvetica, Arial, sans-serif;} wendet man an, um …
5. Aufgabe: Für die Vererbung von Eigenschaften gilt, …
6. Aufgabe: Welche Aussage zu der Bezeichnung „cascading“ ist richtig?
7. Aufgabe: Welche Eigenschaften werden in dem Box-Modell beschrieben?
8. Aufgabe: Welche Aussage zur CSS-Spezifität ist korrekt?
9. Aufgabe: Welche Aussage zur Flexbox-Technologie ist richtig?
10. Aufgabe: Pseudoklassen werden benutzt, um …