Eine Navigation für alle Seiten mit SSI

Antworten
Admin
Administrator
Beiträge: 83
Registriert: Di 19. Aug 2014, 10:47

Eine Navigation für alle Seiten mit SSI

Beitrag von Admin » Do 21. Aug 2014, 16:02

Die Theorie
Ein (statischer) Internetauftritt besteht aus mehreren Webseiten.
Jede Seite ist ein eigenes HTML-Dokument. Einige Bereiche wie z.B. die Navigation wiederholen sich jedoch meistens auf jeder Seite.

Nachteil:
Wird der Internetauftritt z.B. um eine Seite erweitert, muss der zusätzliche Link auf jeder einzelnen Seite nachgetragen werden. Desto mehr Seiten der Internetauftritt hat, desto mehr Arbeit hat man also. Natürlich steigt die Fehlerwahrscheinlichkeit auch mit der Anzahl der Seiten.

Lösung:
Eine Lösung sind sogenannte Serverseitige includes. Dabei wird die Navigation nicht in die Webseiten geschrieben, stattdessen kommt eine Include-Anweisung an die Stelle an der die Navigation eingefügt werden soll. Der Server, also (vereinfacht) der Computer auf dem eure Webseite im Internet gespeichert ist setzt die Anweisung um und fügt den Inhalt der angegebenen Datei an der Stelle ein, an der die Anweisung steht.

PHP oder SSI?
Die Scriptsprachen mit denen Includes bevorzugt durchgeführt werden sind PHP oder SSI (ServerSideIncludes).
SSI funktioniert auf fast allen Servern, also auch bei den sehr günstigen Hostingangeboten. Webspace mit PHP ist hingegen oft ein wenig teurer. Dafür ist PHP um ein vielfaches leistungsfähiger als SSI.
PHP und SSI können nicht im gleichen Dokument verwendet werden.

Ich gehe hier auf SSI ein.
Wie man das mit PHP umsetzt könnt ihr hier Lesen: Eine Navigation-Seite für alle Unterseiten? Geht das????.

Aber nun zurück zur SSI-Lösung ;)

Hier ein Beispiel:
Die statische Seite enthält die Navigation in Form einer <ul>

Code: Alles auswählen

<div id="navigation">
  <ul>
    <li><a href="index.html">Seite 1</a></li>
    <li><a href="seite2.html">Seite 2</a></li>
    <li><a href="seite3.html">Seite 3</a></li>
    <li><a href="seite4.html">Seite 4</a></li>
    <li><a href="seite5.html">Seite 5</a></li>
    <li><a href="seite6.html">Seite 6</a></li>
    <li><a href="seite7.html">Seite 7Links</a></li>
  </ul>
</div>
Hier die überarbeitete Seite mit der Include-Anweisung (SSI)
Anstelle des Kommentars (zweite Zeile) wird nun die Datei navigation.shtml eingebunden
Wichtig: alle Dateien in denen Includes zum Einsatz kommen müssen die richtige Endung haben. Ansonsten wird die Includ-Anweisung vom Server ignoriert.

Code: Alles auswählen

<div id="navigation">
  <!--#include file="navigation.shtml"-->
</div>
Der Inhalt der Datei navigation.shtml
(Dateiendungen auf .shtml geändert)

Code: Alles auswählen

   <ul>
    <li><a href="index.shtml">Seite 1</a></li>
    <li><a href="seite2.shtml">Seite 2</a></li>
    <li><a href="seite3.shtml">Seite 3</a></li>
    <li><a href="seite4.shtml">Seite 4</a></li>
    <li><a href="seite5.shtml">Seite 5</a></li>
    <li><a href="seite6.shtml">Seite 6</a></li>
    <li><a href="seite7.shtml">Seite 7Links</a></li>
  </ul>
Vorraussetzungen
  • Der Webhoster muss SSI unterstützen
  • Die Datei in der SSI verwendet wird muss die Dateiendung .shtml, .shtm oder .sht besitzen. Die übliche Dateiendung .html funktioniert meistens nicht.
Die Praxis
Als erstes erstellst du einen neuen Ordner für deine SSI-Testseite.
Öffne KompoZer und erstelle ein neues HTML Dokument das wie folgt aussieht:
  • Einen <h1>-Überschrift "Meine erste SSI-Seite"
  • Eine <div> mit der ID navigation
  • Eine <ul> mit sechs Listenpunkten "Seite 1", "Seite 2", "Seite 3" usw.
  • Eine <h2>-Überschrift mit dem Inhalt "Meine Seite 1"
  • Ein Absatz mit beliebigem Text
Im KompoZer sieht meine Seite so aus:
ssi_001.png
Als nächstes bewegst du den Cursor in die Unsortierte Liste und klickst in der Statusleiste auf <ul> um die gesammte Liste zuverlässig zu markieren.
ssi_002.png
Nachdem die Liste markiert ist wechselst du in die Quelltextansicht. Auch in der Quelltextansicht ist die gesamte <ul> markiert. Wähle hier Bearbeiten --> ausschneiden
ssi_004.png
Nun musst du einen Texteditor (ich verwende hier Notepad++) zur Hilfe nehmen in dem du den Quelltext der Navigation einfügst (Bearbeiten--> Einfügen). Dann speicherst du die Datei unter navigation.shtml im Ordner ssi ab.
ssi_006.png
Als nächstes wechselst du wieder zu KompoZer und dort in die Normale Ansicht. Klicke in den, nun leeren Div für die Navigation und Wähle in der Menüleiste Einfügen--> Kommentar. Im Kommentarfeld gibst du den Befehl #include file="navigation.shtml" ein. #include file weist den Server an eine Datei einzufügen und ="navigation.shtml" gibt an das es sich dabei um die Datei navigation.shtml handelt. Bestätige anschließend mit OK. Speichere die Datei unter index.shtml ab.
ssi_009.png
Speichere die Datei nun auch unter den Namen seite2.shtml, seite3.shtml usw. ab. Ändere am besten auch die Überschrift <h2> damit du auf den ersten Blick siehst auf welcher Seite du bist.

Wenn du nun eine der lokal gespeicherten Dateien im Browser öffnest wird die Navigation nicht angezeigt (es sei den du hast auf deinem PC einen Server installiert).
ssi_010.png
Sobald du deine Dateien aber auf einen Server hoch lädst und dort aufrufst, taucht die Navigation in den Seiten auf :). Im Quelltext ist die Include-Anweisung übrigens nicht mehr sichtbar.
ssi_011.png
Wird die Datei navigation.shtml um einen Eintrag ergänzt,
ssi_012.png

Wird der Eintrag auf allen Seiten angezeigt :).
ssi_013.png
Mission erfüllt :D.
Dieses Tutorial wurde am 02.11.2012 von mich78 für KompoZer-Web erstellt.

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste