Mehrere Seiten mit Navigation

Mehrere Seiten mit Navigation

Vorbereitung

Auf Ihrem Computer, in einem geeigneten Verzeichnis (idealerweise dort, wo Sie schon andere Verzeichnisse mit Webseiten gespeichert haben) legen Sie ein neues Verzeichnis mit einem kurzen Namen wie z.B. cool an.
Öffnen Sie dieses Verzeichnis mit Visual Studio Code (File → Open Folder)

Grundstuktur für index.html

Im Ordner cool, legen Sie eine neue Datei index.html an.
Lassen Sie durch Eingabe vom Ausrufezeichen !, (Emmet Abbreviation) die Grundstruktur einer Seite erzeugen.
Ändern Sie den Titel der Seite auf z.B. Startseite, oder Willkomen bei …
Ändern Sie im HTML-Code gegebenenfalls die Sprache von en auf de.
Bauen Sie die Navigation, zwischen dem öffnenden <body>-Tag und dem schliessenden </body>-Tag wie folgt ein:

    <nav>
        <ul>
            <li> <a href="index.html">Startseite</a> </li>
            <li> <a href="kontakt.html">Kontakt</a> </li>
        </ul>
    </nav>

Fügen Sie dann unmittelbar nach dem schliessenden </nav>-Tag einen minimalen Inhalt wie folgt ein:

   <main>
        <h1>Willkommen</h1>
        Willkommen
    </main>

Und zuletzt (unmittelbar vor den schliessenden </body>-Tag noch eine Fusszeile:

 <footer>
        Super coole Fusszeile
    </footer>

Datei speichern, auf den Server laden, online anschauen (sieht zugegebenermassen ziemlich lahm aus).

kontakt.html

Kopieren Sie die Datei index.html als kontakt.html.
Passen Sie die Titel und Texte in kontakt.html entsprechend an.
Speichern, hochladen, testen.

Effizienter Arbeiten mit Live-Server

Gerade wenn man kleinere Änderungen vornimmt, ist das Hochladen auf den Server und Neuladen der Seite im Browser etwas umständlich. Wir werden deswegen die “Live-Server”-Extension verwenden, damit Sie lokal auf Ihrem Computer einen Webserver betreiben können. Zusätzlich fügt diese Erweiterung Ihrer Seite ein Programm hinzu, das die Seite automatisch neu lädt, sobald sich eine Datei ändert.

Öffnen Sie die Extensions in VS-Code:
Suche Sie dort nach Live Server und installieren Sie die Extension.
Zurück im Editor, Rechts-Klick auf index.html und wählen Sie Open with Live Server):
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.
Ordnen Sie das Browser-Fenster mit Windows→ rechts auf dem Bildschirm an, und VS-Code mit Windows← 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:

   <link rel="stylesheet" href="style.css">

Halten Sie dann die Ctrl-Taste gedrückt und klicken Sie im HTML-Code auf style.css. Bestätigen Sie, dass die Datei neu angelegt werden soll.
Fügen Sie in der Datei style.css folgende Code hinzu, um die Punkte von der Liste zu entfernen (d.h. von allen <ul> Elementen, die innerhalb eines <nav> Elements sind).

nav ul {
    list-style-type: none;   /* Keine Bullets */
    margin: 0;               /* Keinen äusseren Abstand */
    padding: 0;              /* Keinen inneren Abstand */
    overflow: hidden;        /* ?? Ohne das gibt es keinen Zeilenumbruch */ 
}

Speichern Sie alle Dateien (File → Save All) und betrachten Sie das Resultat (evtl. ordnen Sie die Fenster nebeneinander oder untereinander an, Win+← und Win+→
Damit die <li>-Elemente nebeneinander erscheinen, fügen Sie folgenden Code in style.css hinzu (bezieht sich auf alle <li>-Elemente innerhalb eines <nav>-Elements):

nav li {
   float: left;         /* Elemente nebeneinander */ 
}

Speichern Sie mit Ctrl+S und betrachten Sie die Änderungen.
Die Links sollen nicht mehr unterstrichen sein, und etwas mehr Platz kriegen:

nav a {
    text-decoration: none;      /* Links nicht mehr unterstreichen */
    padding: 1em 2em;           /* Oben/Unten 1x Schriftgrösse Platz, Links/Rechts 2x Schriftgrösse Platz */
    display: block;             /* Damit die Ränder auch ihren Platz bekommen */
}

Speichern, anschauen.
Jetzt soll es farbig(er) werden. Das <ul> Element soll einen schwarzen Hintergrund kriegen, z.B. mit

   background-color: black;

Die <a> Element im <nav> sollen einen dunkelorangen Hintergrund kriegen, mit weisser Schrift:

    background-color: #604000;   /* Dunkles Orange */
    color: white;                /* Weisse Schrift */

Wenn der Mauszeiger über einem Link in der Navigation ist, sollen Hintergrund und Textfarbe angepasst werden:

nav a:hover {
    background-color: orange;
    color:black;
}

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:

.aktiv {
    font-weight: bold;             /* Fette Schrift */
    background-color: #008000;   /* Dunkelgrün */
}

In der Datei index.html im Link auf die Startseite für wir noch das Attribute class=“aktiv” ein:

<li> <a class="aktiv" href="index.html">Startseite</a> </li>

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

Der Footer gehört ans Seiten-Ende. Fügen Sie folgenden Code der Datei style.css hinzu:

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #F1F1F1;
    text-align: center;
    padding: 10px;
}

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):

body {
    padding:0;
    margin:0;
    font-family: sans-serif;
    background-color: #fff9e0;
}

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:

  <script src="navmenu.js"></script>

Ctrl-Klick im HTML-Code auf navmenu.js, Datei kreieren.
Folgenden Code in navmenu.js speichern.

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;
}

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):

<body onload="myNavMenu('Startseite')">

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:

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>.';
});

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

Table of Contents