startseitekatalogpraxiswerkzeugeressourcenmagazingrammiweb

(Stand: 22.12.24, Adresse: http://www.grammiweb.de/anleitungen/ka_ssi.shtml)

 

Seitenbau mit SSI

Server Side Includes bieten viele Gestaltungsmöglichkeiten für das eigene Seitenlayout. In dieser Kurzanleitung zeigen wir Ihnen anhand eines Beispiels, wie einfach eine komplette Website mit SSI optimiert werden kann.

Als Ausgangspunkt verwenden wir ein einfaches Webdokument, das aus einer Tabelle besteht. Diese Tabelle ist unterteilt in 5 Zellen: Logo, Werbung, Links, Inhalt und dem Fuß, in dem die letzte Änderung der Datei angezeigt werden soll:

Das Ergebnis:

Dieser Aufbau soll auf allen Seiten des Webprojektes verwendet werden, einziger Unterschied zwischen den einzelnen Dateien ist der Inhalt (hellblau dargestellt). Um bei Änderungen viel Zeit dadurch einzusparen, dass diese zentralisiert durchgeführt werden können, werden die Elemente, die auf allen Seiten gleichbleibend sind, ausgegliedert.

Diese Elemente, im Beispiel also das Logo, die Werbung, die Links und die Anzeige der letzten Änderung, erhalten jeweils eine eigene Datei, die dann auch mit deren Inhalt benannt wird. Als Dateiendung empfiehlt sich ".shtml", da so jederzeit die Möglichkeit gegeben ist, auch aus diesen Dokumenten heraus SSI-Anweisungen auszuführen (zum Beispiel die Ausführung eines CGI-Scriptes, das für die Bannerrotation zuständig ist). Diese Dateien erhalten folgende Inhalte:

Beachten Sie bei der Ausgliederung, dass enthaltene Links immer mit einem Schrägstrich beginnend vom Hauptverzeichnis aus gesetzt werden sollten, um von jeder Ebene in der Verzeichnishierarchie verwendet werden zu können. Eine Verknüpfung mit Verzeichnispunkten ("../datei.shtml") würde hier zu Problemen führen, da diese nur in das übergeordnete Verzeichnis verweisen. Hierzu ein Beispiel:

Die Verzeichnishierarchie:

Wird nun von einer Datei im Unterverzeichnis sub_1a auf die ausgegliederte Datei zugegriffen, würde eine Verknüpfung mit Punkten bedeuten, dass diese im Verzeichnis sub_1 gesucht würde. Würde dies vom Verzeichnis sub_2c versucht werden, müsste die Datei aber in sub_2b vorliegen. Würde im Verzeichnis sub_1c ein Link auf "../../datei.shtml" verweisen, müsste diese im Verzeichnis sub_1a abgelegt worden sein. Würde dies aber von sub_2c aufgerufen, würde in sub_2a gesucht. Wird jeder Verknüpfung ein Schrägstrich vorangestellt, wird immer vom Hauptverzeichnis ausgehend verwiesen. Dies bedeutet zwar ein wenig mehr Tipparbeit, erleichtert aber die Organisation um ein Vielfaches.

Kopf- und Fußsegmente von HTML-Dokumenten benötigen die ausgegliederten Dateien nicht, denn sie werden ja nicht direkt aufgerufen, sondern in eine Seite eingebunden, die diese bereits enthält.

Um alle "Bruchstückdateien" gesammelt abzulegen, sollten diese in einem eigenen Ordner abgelegt werden, der möglichst nahe am Hauptverzeichnis liegt. Für unser Beispiel verwenden wir das Unterverzeichnis "ssi". So haben Sie alle Varianten Ihrer Website konzentriert vorliegen und geraten nicht in Versuchung, bei Änderungen eine zu übersehen.

Nun müssen diese Ausgliederungen in der Grundseite vermerkt werden. Dazu werden die herauskopierten Zeilen einfach durch die SSI-Anweisung <!--#include virtual="dateiname" --> ersetzt. Beachten Sie dabei, dass die Dateipfade mit einem "/" beginnen, was dem Server anzeigt, dass diese im ensprechenden Verzeichnis unter dem Hauptverzeichnis zu finden sind (also beispielsweise "http://www.grammiweb.de/ssi/").

Nun muss nur noch der Inhalt der Datei "update.shtml" angepasst werden, denn deren Einbindung soll ja die Anzeige der letzten Dokumentenänderung bewirken. Dies wird mit folgendem Code erreicht:

Nun fehlt nur noch der Tauglichkeitstest mit einem Webserver, und schon können Sie Ihr neues SSI-Gerüst verwenden.

Zurück zum Inhaltsverzeichnis

[an error occurred while processing this directive] [an error occurred while processing this directive]