SSI - Virtueller Rundgang

von Arne Pottharst

Ist ein Besucher zum ersten Mal auf einer Website, weiß er in der Regel nicht, was die Seiten zu bieten haben. Wer sicher gehen will, dass kein Highlight verpaßt wird, bietet einen virtuellen Rundgang an.

Dies ist eine der wenigen wirklich sinnvollen Einsatzmöglichkeiten von Frames. Wenn man dann noch SSI ins Spiel bringt, braucht es bloss zwei verschiedene Seiten, um die Tour zu realisieren.

Hier geht's zur Live Demo

Die eine Seite (tourmenu.shtml) beinhaltet das Menü mit den Links für "Weiter", "Zurück", "Tour hier beenden" und "Tour beenden", die andere Datei (tour.shtml) zeigt das Frameset: oben die aktuell vorgestellte Seite, unten das Menü. Natürlich kann das Menü auch links, rechts oder oben angezeigt werden, wenn das Frameset entsprechend angepasst wird.

Damit die Tour weiß, wo sich der Besucher gerade befindet, übergibt man jeweils einen Parameter an das Frameset (tour.shtml?3). In diesem Beispiel sind es Zahlen, man kann aber genau so gut Namen benutzen. Der übergebene Parameter hinter dem Fragezeichen wird in der Umgebungsvariable QUERY_STRING gespeichert.

In der Framedatei (tour.shtml) wird das Frameset abhängig vom Parameter erzeugt, dieser wird dafür mit einer if Abfrage ausgelesen:

 1: <frameset rows="*,150" border=0 frameborder=0>
 2: <!--#if expr="$QUERY_STRING = '1'" -->
 3:   <frame src="seite1.shtml" name="main">
 4: <!--#elif expr="$QUERY_STRING = '2'" -->
 5:   <frame src="seite2.shtml" name="main">
 6: <!--#elif expr="$QUERY_STRING = '3'" -->
 7:   <frame src="seite3.shtml" name="main">
 8: <!--#else -->
 9:   <frame src="index.shtml" name="main">
10: <!--#endif -->
11:   <frame name="menu"
    src="tourmenu.shtml?<!--#echo var="QUERY_STRING"-->">
12: </frameset>

Erklärung:
In Zeile 1 und 12 wird das Frameset definiert, es wird festgelegt, dass es aus zwei horizontalen Fenstern besteht, das obere beliebig und das untere 150 Pixel hoch. Die Framegröße ist hier vom Benutzer nicht veränderbar.

Zeilen 2, 4 und 6 beinhalten die Abfrage des QUERY_STRING, je nachdem welche Zahl er beinhaltet, wird der entsprechende Code der darauffolgenden Zeile ausgeführt, dieser fügt einen Frame mit der jeweils anzuzeigenden Seite ein. Wenn kein oder ein falscher Parameter übergeben wird, wird der Code aus Zeile 9 ausgeführt und die Startseite der Tour angezeigt.

Zeile 11 fügt den unteren Frame mit dem Menü ein, aus layouttechnischen Gründen ist hier ein Zeilenumbruch vorhanden, der entfernt werden kann. Dem Menü wird ebenfalls der Parameter übergeben, damit dieses den entsprechenden Text und die jeweiligen Links zur aktuellen Tour-Seite anzeigen kann.

In der Menüdatei dient wiederum eine if Abfrage dazu, die Seite abhängig vom QUERY_STRING auszugeben:

<table><tr><td>
[1]
<p><b>Tour durch meine Homepage</b></p><p>
<!--#if expr="$QUERY_STRING = '1'" -->
  Beschreibung Seite 1
<!--#elif expr="$QUERY_STRING = '2'" -->
  Beschreibung Seite 2
<!--#elif expr="$QUERY_STRING = '3'" -->
  Beschreibung Seite 3
<!--#else -->
  Standardbeschreibung für Tour-Startseite
<!--#endif -->
</p>
</td><td>
[2]
<!--#if expr="$QUERY_STRING = '1'" -->
  <a target="_top" href="tour.html?2">Weiter</a><br>
  <a target="_top" href="tour.html">Zurück</a><br>
  <a target="_top"
    href="seite1.shtml">Tour hier beenden</a><br>
  <a target="_top" href="tour.html?3">Tour beenden</a>
<!--#elif expr="$QUERY_STRING = '2'" -->
  <a target="_top" href="tour.html?3">Weiter</a><br>
  <a target="_top" href="tour.html?1">Zurück</a><br>
  <a target="_top"
    href="seite2.shtml">Tour hier beenden</a><br>
  <a target="_top" href="tour.html?3">Tour beenden</a>
<!--#elif expr="$QUERY_STRING = '3'" -->
  <br>
  <a target="_top" href="tour.html">Zurück</a><br>
  <a target="_top"
    href="seite3.shtml">Tour hier beenden</a><br>
  <a target="_top" href="index.html">Index</a>
<!--#else -->
  <a target="_top" href="tour.html?1">Los</a><br>
  <br>
  <a target="_top"
    href="index.shtml">Tour hier beenden</a><br>
  <a target="_top" href="tour.html?3">Tour beenden</a>
<!--#endif -->
</td></tr></table>

Erklärung:
[1] Im ersten Teil der Menüdatei werden Beschreibungen zu der aktuellen Seite angezeigt, die Abfrage funktioniert wie auch schon beim Frameset.

[2] Rechts vom Beschreibungstext (hier formatiert durch eine Tabelle) werden verschiedene Links angeboten: "Weiter" (bzw. "Los" auf der ersten Seite) führt zur nächsten Zwischenstopp der Tour. Als Link wird das Frameset (tour.html) angegeben, als Parameter wird die Zahl der nächsten Seite übergeben.

Ähnlich funktioniert der "Zurück" Link, dieser zeigt auf die vorhergehenden Seite mit entsprechender Zahl.

Der "Tour hier beenden"-Link schließt das Frameset und ruft die aktuell angezeigte Seite auf, der Besucher kann von hier aus weiter die Homepage erkunden.

Zuguterletzt gibt es noch den "Tour beenden"-Link, dieser führt zur letzten Seite der Tour, die zweckmäßigerweise eine Sitemap oder weiterführende Tipps enthält, etwa eine FAQ.