... | ... | @@ -4,11 +4,11 @@ |
|
|
|
|
|
**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, dass sich in Abhängigkeit von dem verwendeten Endgerät wechselt (siehe Kap. 4.5.2).
|
|
|
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 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 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.
|
|
|
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"/>
|
|
|
`
|
... | ... | |