 |
Bei Seiten wie Netzpiloten.de ist's zum Erfolgskonzept geworden: sogenannte Webrides.
Das Prinzip
Webrides sind moderierte Touren durchs Web, meist mit Frames realisiert: im einen Frame erscheint die Seite, im anderen Framen eine kurze Beschreibung sowie die Webride-Navigation für z.B. die nächste Seite.
Die Einsatzmöglichkeiten
Diese Technik lässt sich fast überall einsetzen: angefangen von einer Tour durch die eigene Seite bis hin zu einem Ride, der die Lieblings-Links des Webmasters vorstellt.
Überlegungen
Seiten wie die Netzpiloten haben ihre eigenen Browser-Erweiterungen für diese Touren programmiert. Dass so etwas für eine normale Seite nicht in Frage kommt, ist klar. Es gibt aber auch simplere Lösungen, so z.B. eine mit normalen Frames und JavaScript.
Grundsätzliches
Zuallererst sollten wir ein Frameset für den späteren Ride definieren:
<frameset rows="75%,*">
<frame name="main" src="ride_haupt.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
<frame name="ride" src="ride_control.html" marginwidth="10" marginheight="10" scrolling="auto" frameborder="0">
</frameset>
Diesen Code schreiben wir in eine separate Datei, z.B. "ride.html". Diese Datei wird dann von außerhalb aufgerufen, um den Ride zu starten.
Hauptfenster
In der Frameset-Datei verweisen wir auf die Datei "ride_haupt.html". Diese Datei könnte z.B. einen Begrüßungsbildschirm enthalten, was aber für die weitere Vorgehensweise nicht weiter wichtig ist. Interessant wird's, wenn es daran geht, die Ride-Kontrolle zu programmieren.
Kontroll-Datei
In der Haupt-Frameset-Datei wird die Datei "ride_control.html" eingebunden. Wie der Name schon sagt, ist das die Datei, mit der der Benutzer z.B. zur nächsten vorgestellten Seite springen kann. Wichtig ist, dass die Kontroll-Datei, genau wie die Datei im Hauptfenster, mit einem Klick auf "Weiter" ausgewechselt wird.
Jedoch sind alle Kontroll-Dateien vom Prizip her gleich aufgebaut, enthalten also alle die gleichen Buttons.
Ride beenden
Jede gute Anwendung hat einen gut sichtbaren Befehl zum Beenden. Genauso sollte es mit Ihren Rides sein.
Der Code für den "Ride beenden"-Button ist simpel:
<a href="hauptseite.html" target="_top">Ride beenden</a>
hauptseite.html ist hier die Hauptseite Ihres Internet-Angebots. target="_top" sorgt dafür, dass Ihre Hauptseite, sofern der Benutzer beenden will, im ganzen Browserfenster und nicht nur im Kontroll-Frame geladen wird.
Nächste Seite
Hier kommt JavaScript ins Spiel. Erstellen Sie zunächst den passenden Link:
<a href="" onClick="NextPage();">Nächste Seite</a>
Und jetzt die passende Funktion:
<SCRIPT>
function NextPage()
{
parent.main.location.href = "nexthauptseite.html";
parent.ride.locaction.href = "nextkontroll.html";
}
</SCRIPT>
Was wird hier gemacht?
Die erste Zeile unserer Funktion aktualisiert das Hauptfenster, die zweite das Kontrollfenster.
Die vollständige Seite
Eine vollständige Kontrollseite könnte also so aussehen:
<HTML>
<HEAD>
<SCRIPT>
function NextPage()
{
parent.main.location.href = "nexthauptseite.html";
parent.ride.locaction.href = "nextkontroll.html";
}
</SCRIPT>
</HEAD>
<BODY>
<a href="hauptseite.html" target="_top">Ride beenden</a><br>
<a href="" onClick="NextPage();">Nächste Seite</a>
</BODY>
</HTML>
Die nächste Kontrollseite, "nextkontroll.html", würde sehr ähnlich aussehen:
<HTML>
<HEAD>
<SCRIPT>
function NextPage()
{
parent.main.location.href = "anderehauptseite.html";
parent.ride.locaction.href = "nextkontroll2.html";
}
</SCRIPT>
</HEAD>
<BODY>
<a href="hauptseite.html" target="_top">Ride beenden</a><br>
<a href="" onClick="NextPage();">Nächste Seite</a>
</BODY>
</HTML>
|
|
|
|
Sie wollen diese Seite ausdrucken? Dafür haben wir eine spezielle Druckversion ohne grafische Elemente entwickelt! |
|
|
Einführung in CSS bei HTMLWorld.
|
|
