Katharina Fritzler4.5.3 Konfiguration des Kopfbereichs
Autorin: Katharina Fritzler
Grundsätzliche Implementierung
-> ToDo Kurz ein bis drei zusammenfassende Sätze dazu schreiben, wie der Kopfbereich grundsätzlich realisiert wurde in unserer Anwendung
Konfiguration des Kopfbereichs
- Logo-Bild: ToDo HLNUG-Logo oben links, wo im Code wird es wie eingestellt -> ausformulieren
Laut zahlreichen Studien wird der obere linke bis mittleres Bereich einer Website als erstes betrachtet, weshalb dies, logisch betrachtet, der ideale Platz für das Logo auf einer Webseite ist. Das Logo muss gut lesbar und die „richtige“ Größe haben, da zu große Logos müssen durch eine große Navigationsleiste ausgeglichen werden. Ein transparenter Hintergrund ( .png) ermöglicht die Platzierung des Logos über einem farbigen oder strukturierten Hintergrund. Folgende Schritte wurden zur Einbindung des Logos in die WebSeite ausgeführt:
-
Bilddatei im Ordner images als PNG-Datei speichern
-
In der IndexBig.html sowie IndexSM.html das Bild in dem Tag der oberen Leiste (
<div class="active">)einbinden:<img src="./images/HLNUG-Logo.png" alt="Logo" onclick="window.location.href='https://www.hlnug.de/';" class="logoImage"/> -
in der stylees.css die Eigenschaften (Größe, Abstand zum Rand) des Bildes festlegen, dabei auf ausreichende Größe der Hintergrundleiste zu achten ggf. ändern:
.logoImage { box-sizing: content-box; height: 35px; margin: 7px 7px; }
- Farbe des Hintergrundbereichs: ToDo aktuell ist Grün eingestellt; wo im Code lässt sich die Farbe wie einstellen -> ausformulieren
Die Farbe sowie die Größe des Hintergrundsbereichs ist in der stylees.css definiert.
.active {height: var(--headerHeight); background-color: var(--accentColor);color: white;}
Geändert können diese durch Setzen von gewünschten Werten für die Variablen accentColor, headerHeight:
:root { --accentColor: #8dbf19; --headerHeight: 50px;}