Katharina Fritzler4.5.3 Konfiguration des Kopfbereichs
Autorin: Katharina Fritzler
Grundsätzliche Implementierung
Der Kopfbereich unserer Anwendung wurde mithilfe des Containers, mit dem Klassennamen active, in den HTML-Dateien IndexBig.html (für große Bildschirme), sowie IndexSM.html (für mobile Geräte) realisiert. Der sogenannte Header enthält zwei Elemente. Ein Logo, dass in der linken oberen Ecke platziert ist, sowie einem Button in der rechten oberen Ecke, welches sich in Abhängigkeit von dem verwendeten Endgerät wechselt (siehe Kap. 4.5.2).
Konfiguration des Kopfbereichs
Laut zahlreichen Studien wird der obere linke bis mittlere 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 durch eine große Navigationsleiste ausgeglichen werden müssen. Ein transparenter Hintergrund ( .png) ermöglicht die Platzierung des Logos über einem farbigen oder strukturierten Hintergrund.
Als Logo für die Anwendung soll das Logo des Hessischen Landesamt für Naturschutz, Umwelt und Geologie (HLNUG) verwendet werden. Hierzu wurde die entsprechende Bilddatei (Quelle) im Ordner images als PNG-Datei abgespeichert. In der IndexBig.html sowie IndexSM.html wurde das Bild in dem Container des Kopfbereiches (<div class="active">) mit dem Klassennamen 'logoImage' eingebunden:
<img src="./images/HLNUG-Logo.png" alt="Logo" onclick="window.location.href='https://www.hlnug.de/';" class="logoImage"/>
Die Eigenschaften des Bildes, Größe und Abstand zum Rand wurden in der stylees.css festgelegt .logoImage { box-sizing: content-box; height: 35px; margin: 7px 7px;}
Die Hintergrundfarbe des Kopfbereiches ist aktuell Grün, dies ist in der stylees.css definiert:
.active {height: var(--headerHeight); background-color: var(--accentColor);color: white;}
Änderungen der Eigenschaften können mit Hilfe der Variablen accentColor für die Farbe und headerHeight für die Größe vorgenommen werden.
:root { --accentColor: #8dbf19; --headerHeight: 50px;}