Kopfbereich.md

@@ -8,8 +8,35 @@
 
 *Konfiguration des Kopfbereichs*
 
-- Logo-Bild: **ToDo** *HLNUG-Logo oben rechts, wo im Code wird es wie eingestellt -> ausformulieren*
+- 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:
+        
+     `
+.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;}`
+
 
 [(Zurück zum Inhalt des Endberichts)](https://gitlab.fbg-hsbo.de/web3dscans/web3dscans1/wikis/Endbericht) 
\ No newline at end of file