Differences

This shows you the differences between two versions of the page.

--- lehrkraefte:blc:informatik:glf24:web:webseite-mit-navigation [2025/04/29 06:51] – Ivo Blöchliger
+++ lehrkraefte:blc:informatik:glf24:web:webseite-mit-navigation [2025/05/01 08:36] (current) – [Effizienter Arbeiten mit Live-Server] Ivo Blöchliger
@@ Line 44: / Line 44: @@
   * Zurück im Editor, Rechts-Klick auf ''index.html'' und wählen Sie ''Open with Live Server''): {{:lehrkraefte:blc:informatik:glf24:web:pasted:20250429-075710.png}}
   * Die Webadresse ist von Ihrem Server ist http://127.0.0.1:5500/index.html, wobei die IP-Adresse ''127.0.0.1'' immer auf den eigenen Computer verweist.
-  * Machen Sie eine Änderung an der angezeigten Seite und speichern Sie. Diese Änderung sollte sofort sichtbar sein.
+  * Ordnen Sie das Browser-Fenster mit <key>Windows</key><key>Right</key> rechts auf dem Bildschirm an, und VS-Code mit <key>Windows</key><key>Left</key> links.
+  * Machen Sie eine Änderung im HTML-Code der Seite und speichern Sie. Diese Änderung sollte sofort im Browser sichtbar sein.
 ===== Mit style =====
   * Unmittelbar vor dem schliessenden ''</head>''-Tag, fügen Sie folgende Zeile ein:
 <code html>
+   <link rel="stylesheet" href="style.css">
 </code>
   * Halten Sie dann die <key>Ctrl</key>-Taste gedrückt und klicken Sie im HTML-Code auf ''style.css''. Bestätigen Sie, dass die Datei neu angelegt werden soll.
@@ Line 94: / Line 95: @@
 }
 </code>
+  * Zuletzt wäre es noch toll, den Menu-Punkt der aktuellen Seite anders zu formatieren. Dazu definieren wir in der Datei ''style.css'' eine Klasse ''aktiv'':
+<code css>
+.aktiv {
+    font-weight: bold;             /* Fette Schrift */
+    background-color: #008000;   /* Dunkelgrün */
+}
+</code>
+  * In der Datei ''index.html'' im Link auf die Startseite für wir noch das Attribute ''class="aktiv"'' ein:
+<code html>
+<li> <a class="aktiv" href="index.html">Startseite</a> </li>
+</code>
+Wer später noch mehr an der Navigation "basteln" möchte, sei auf diese Seite und deren Unterseiten verwiesen: https://www.w3schools.com/css/css_navbar.asp
+===== Footer =====
+  * Der Footer gehört ans Seiten-Ende. Fügen Sie folgenden Code der Datei ''style.css'' hinzu:
+<code css>
+footer {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    background-color: #F1F1F1;
+    text-align: center;
+    padding: 10px;
+}
+</code>
+===== body =====
+Um Formatierungen für die ganze Seite festzulegen, kann das ''<body>''-Element "gestylet" werden (am besten am Anfang der Datei ''style.css'' einfügen):
+<code css>
+body {
+    padding:0;
+    margin:0;
+    font-family: sans-serif;
+    background-color: #fff9e0;
+}
+</code>
+===== Navigationsmenu nur an einem Ort =====
+Es ist mühsam, das Navigationsmenü auf allen Seiten nachzuführen. Praktischer ist es, das an einem Ort zu haben. Dazu werden wir das Menü mit einem kleinen Programmcode generieren:
+  * Fügen Sie in der Datei ''index.html'' vor dem schliessenden ''</head>''-Tag folgende Zeile ein:
+<code html>
+  <script src="navmenu.js"></script>
+</code>
+  * Ctrl-Klick im HTML-Code auf navmenu.js, Datei kreieren.
+  * Folgenden Code in navmenu.js speichern.
+<code javascript>
+function myNavMenu(aktuelleSeite) {
+    let myMenu = {
+        "Startseite":"index.html",
+        "Kontakt":"kontakt.html",
+    };
+    let nav = document.getElementsByTagName("nav").item(0);
+    let html = "<ul>\n";
+    for (let titel in myMenu) {
+        let klasse = "";
+        if (titel==aktuelleSeite) {
+            klasse = 'class="aktiv"';
+        }
+        html += `  <li><a ${klasse} href="${myMenu[titel]}">${titel}</a></li>\n`;
+    }
+    html += "</ul>\n"
+    nav.innerHTML = html;
+}
+</code>
+  * In der Datei ''index.html'' löschen Sie alles zwischen den ''<nav>''- und ''</nav>''-Tags.
+  * Im Body-Tag kann dann unsere JavaScript-Funktion aufgerufen werden, nachdem die Seite vollständig geladen ist (vorher existieren die Funktion und html-Element noch gar nicht):
+<code html>
+<body onload="myNavMenu('Startseite')">
+</code>
+  * Machen Sie die entsprechenden Anpassungen in der Datei ''kontakt.html''.
+==== Footer automatisch auf allen Seiten ====
+  * Der Footer kann auch automatisch eingefügt werden. Dazu werden wir zusätzlichen Code am Ende der Datei ''navmenu.js'' unterbringen:
+<code javascript>
+window.addEventListener('load', ()=>{
+    let footer = document.getElementsByTagName("footer").item(0);
+    footer.innerHTML = 'Dieser HTML-Code wurde automatisch in den Footer eingefügt. Und ein Link auf <a href="https://fginfo.ksbg.ch/">fginfo</a>.';
+});
+</code>
+  * Der eingefügte HTML-Code soll natürlich sinnvoll angepasst werden.
+===== Weitere Ideen =====
+Wie bestimme Dinge in HTML und oder CSS gemacht werden, finden Sie Hilfe auf dem Internet oder auch Sprachmodelle sind erstaunlich versiert darin. Empfehlenswerte Seiten:
+  * W3Schools: https://www.w3schools.com/css/default.asp