Wintersemester
Design HAK-Seite
Beschreibung der Lernsituation
Die Aufgabe bestand darin, eine bestehende HTML-Datei mit Designverbesserungen zu überarbeiten. Ziel war es, die Benutzerfreundlichkeit zu optimieren und Inhalte ansprechend darzustellen. Dabei sollten Links im linken Bereich neugestaltet, Hover-Effekte hinzugefügt und Boxen im rechten Bereich angepasst werden. Zusätzlich wurden dort spezifische Inhalte eingefügt.
Erlernte Kompetenzen
- Anwendung grundlegender und erweiterter Gestaltungstechniken
- Verbesserung von Struktur und Stil für bessere Benutzerfreundlichkeit
- Dynamische Gestaltung mit CSS-Pseudo-Klassen
- Einfügen relevanter Inhalte in bestehende Strukturen
- Effiziente Umsetzung spezifischer Designvorgab
Umsetzung und Ergebnisse
Die Links im linken Bereich wurden so angepasst, dass sie nicht mehr unterstrichen dargestellt werden. Zusätzlich wurde ein dezenter Hover-Effekt hinzugefügt, der die Interaktivität der Seite hervorhebt. Der rechte Bereich wurde in strukturierte Boxen unterteilt, die mit realistischen Daten gefüllt wurden. Die Boxen erhielten zudem ein ansprechendes Layout mit Farben und Abständen, um die Inhalte hervorzuheben. Das finale Ergebnis war eine optisch und funktional deutlich verbesserte Webseite, die sowohl in ihrer Bedienbarkeit als auch in ihrem Erscheinungsbild überzeugte.
Ergebnisse - Beispiele
Hak Schwaz
Fazit
Das Projekt zeigte, wie gezielte Designänderungen die Wahrnehmung und Nutzung einer Webseite verbessern können. Die Umsetzung bot die Möglichkeit, CSS-Fähigkeiten zu vertiefen und ein Auge für Details zu entwickeln. Diese Erfahrungen sind sowohl für zukünftige Projekte als auch für den weiteren Lernprozess wertvoll.
Sommersemester
Arbeiten mit absoluten und relativen Maßeinheiten in HTML und CSS
Beschreibung der Lernsituation
Die Aufgabe bestand darin, verschiedene Maßeinheiten (z. B. cm, pt, px) in HTML und CSS zu verwenden. Ziel war es, eine Webseite mit:
- Beispielen für absolute und relative Maßeinheiten zu gestalten.
- Einem Bild des Wohnortes als Hintergrund in einer div.
- Klarer Struktur und gestalterischer Umsetzung.
Erlernte Kompetenzen
- Verwendung und Unterscheidung von absoluten und relativen Maßeinheiten
- Gestaltung von Webseiten mit HTML und CSS
- Strukturierung von Inhalten
Umsetzung und Ergebnisse
Die Webseite enthält:
- Ein eingebettetes Hintergrundbild des Wohnorts
- Beispiele, die Maßeinheiten wie mm, pt und px illustrieren
- Eine Testbox mit individuellen Maßen, Farben und Rahmenstilen
Beschreibung der Umsetzung
Idee: Demonstration der Unterschiede zwischen verschiedenen Maßeinheiten anhand von konkreten Beispielen.
- HTML wurde genutzt, um die Struktur der Webseite zu erstellen.
- CSS definierte die Maßeinheiten, Farben, Rahmen und Hintergrundbilder.
- Die Datei wurde in einem Browser getestet, um sicherzustellen, dass die Darstellung korrekt ist.
Ergebnisse - Beispiele
Fazit
Die Aufgabe hat die Fähigkeit gefördert, Webseiten gezielt zu gestalten und dabei verschiedene Maßeinheiten effizient einzusetzen. Sie stellt eine solide Basis dar, um komplexere Layouts mit präziser Steuerung von Größen und Abständen zu erstellen.