Kopfbereich.md

@@ -2,41 +2,27 @@
 
 *Autorin: Katharina Fritzler*
 
-*Grundsätzliche Implementierung*
+**Grundsätzliche Implementierung**
 
--> **ToDo** *Kurz ein bis drei zusammenfassende Sätze dazu schreiben, wie der Kopfbereich grundsätzlich realisiert wurde in unserer Anwendung* 
+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).
 
-*Konfiguration des Kopfbereichs*
+**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:
-1) Bilddatei im Ordner *images* als PNG-Datei speichern
-2) 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"/>` 
-
-3) 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:
-        
-     `
+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. 
+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;
- }
-`
-
-- 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**: 
+ 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;}`
 
 
+
 [(Zurück zum Inhalt des Endberichts)](https://gitlab.fbg-hsbo.de/web3dscans/web3dscans1/wikis/Endbericht) 
\ No newline at end of file