Wie werde ich Frames wieder los?

Im letzten Teil wurden die Nachteile besprochen – Jetzt setzen wir uns daran, diese auszumerzen. Da das Menu einen Teil der Seite darstellt, der oft geändert wird, jedoch in jedem Dokument gleich ist, werden wir an diesem Bspl versuchen, uns die Arbeit zu erleichtern und bestimmte Funktionen zu automatisieren – ganz ohne Frames.

Lokale Software nutzen: „Suchen und Ersetzen“

Die meisten am breiten Markt vorhandenen Editoren bieten die Funktion „Dateiübergreifendes Suchen und Ersetzen“. Hierbei ist es möglich, in mehreren Dateien bestimmte, immer wiederkehrende Passagen durch andere Textteile zu ersetzen – dies ist für unser Vorhaben optimal. Da das Menu auf jeder Seite identisch ist, lässt es sich beliebig bearbeiten und austauschen. Die hier benutzte Software ist Phase 5 – ein recht beliebter Text- und HTML-Editor auf Codebasis mit Syntaxhighlithing. Nach dem Start des Editors steht uns diese Funktion unter Tools > Dateiübergreifendes Suchen u. Ersetzen zur Verfügung – alternativ über die Taste F11.

Doch erst zur Vorbereitung. Hierbei müssen wir bedenken, dass nicht der gesamte Menu-Frame eingebunden werden soll, sondern nur das Menu an sich. Hierzu öffnen wir die Datei, die für das Menu zuständig ist – sie könnte zB menu.html heissen, geläufig sind auch Namen wie navigation.html, oder kurz navi.html. Eine typischer Menu-Frame könnte in etwa so aussehen:

<html>
<head>
<title>mein Menu</title>

</head>
<body>

<ul>
<li><a href="home.html" target="inhaltsframe">Home</a></li>
<li><a href="ueber_mich.html" target="inhaltsframe">Über Mich</a></li>
<li><a href="links.html" target="inhaltsframe">Links</a></li>
</ul>

</body>
</html>

Was wir brauchen, ist nur der Inhalt, also alles, was zwischen <body> und </body> steht – am Ende steht uns dann eine komplette Datei zur Verfügung. Wir markieren diesen Bereich und kopieren ihn in die Zwischenablage (Strg+C). Als nächstes wechseln wir, wie oben beschrieben mit F11, zur Option „Dateiübergreifendes Suchen u. Ersetzen“ und suchen im linken bereich das Verzeichnis aus, in dem unsere Dateien liegen. Da in den anderen Dateien das Menu noch nicht vorhanden ist, ersetzen wir so, dass aus <body> folgendes wird:

<body>

<ul>
<li><a href="home.html" target="inhaltsframe">Home</a></li>
<li><a href="ueber_mich.html" target="inhaltsframe">Über Mich</a></li>
<li><a href="links.html" target="inhaltsframe">Links</a></li>
</ul>

Dazu suchen wir zunächsteinmal alle Dateien, die <body> überhaupt enthalten. Wir geben also <body> in die Textbox auf der rechten Seite ein und klicken auf „Suchen“ – daraufhin erscheinen im unteren Bereich des Fensters alle Dateien, die diesen Tag enthalten.

In die Textbox links neben dem Button „Ersetzen“ tragen wir nun ein, was in jede Datei eingetragen werden soll – das Menu. Da wir dieses schon vorher markiert und kopiert haben, brauchen wir nurnoch die Textbox anzuwählen, Rechtsklick > Einfügen zu drücken und auf „Ersetzen“ klicken. Die target=-Tags können wir jetzt wegmachen – die werden nicht mehr gebraucht.

Zusammenfassung

Am Anfang Stand unser Menu-Frame

<html>
<head>
<title>mein Menu</title>

</head>
<body>

<ul>
<li><a href="home.html">Home</a></li>
<li><a href="ueber_mich.html">Über Mich</a></li>
<li><a href="links.html">Links</a></li>
</ul>

</body>
</html>

Dessen Inhalt wollten wir in jede Datei, die über das Menu erreichbar ist, eintragen. Eine solche Datei, die vorher im Inhalts-Frame dargestellt wurde, könnte in etwa so aussehen:

<html>
<head>
<title>Über diese Seite</title>

</head>
<body>

<h1>Über diese Seite</h1>

<p>Diese Seite wurde früher mit Frames zusammengeschustert – Heute ist sie flexibel und besser benutzbar</p>

<p><strong>Toll, oder?<strong></p>

</body>
</html>

Und nach Anwendung des dateiübergreifenden Suchen und Ersetzens, haben wir auch ein Menu – in jeder Datei!

<html>
<head>
<title>Über diese Seite</title>

</head>
<body>

<ul>
<li><a href="home.html">Home</a></li>
<li><a href="ueber_mich.html">Über Mich</a></li>
<li><a href="links.html">Links</a></li>
</ul>

<h1>Über diese Seite</h1>

<p>Diese Seite wurde früher mit Frames zusammengeschustert – Heute ist sie flexibel und besser benutzbar</p>

<p><strong>Toll, oder?<strong></p>

</body>
</html>

Serverseitige Software nutzen: „PHP/SSI Includes“

Eine noch wesentlich komfortablere Möglichkeit ein statisches Menu einzubinden, zeigen uns „Includes“ auf – man bindet nur ein Codefragment in jede neue Seite ein, den Rest macht der Server.

Um jedoch von ihnen Gebrauch machen zu können, muss PHP oder SSI auf dem Server, wo der Webspace liegt, installiert sein. Dies sollte heutzutag jedoch kein grosses Problem mehr darstellen – beinahe jeder neuere Server ist damit ausgestattet, Webspace mit Unterstützung für PHP-Skripte gibt es für wenige Cent im Monat, wenn nicht sogar kostenlos.

include() in PHP

Der Einsatz ist so einfach wie simpel: An jeder beliebigen Stelle im Quelltext braucht man nur eine einzige Zeile angeben.

<?php include('menu.html'); ?>

menu.html ist hierbei nur eine Variable – es ist natürlich auch möglich, beliebige andere HTML- oder auch PHP-Dateien einzubinden. Hierbei ist lediglich zu beachten, dass die Pfadangabe stimmt. In unserem Bspl muss sich die menu.html im gleich Verzeichnis befinden. Unsere Datei könnte danach etwa so aussehen:

<html>
<head>
<title>Über diese Seite</title>

</head>
<body>

<?php include('menu.html'); ?>

<h1>Über diese Seite</h1>

<p>Diese Seite wurde früher mit Frames zusammengeschustert – Heute ist sie flexibel und besser benutzbar</p>

<p><strong>Toll, oder?<strong></p>

</body>
</html>

Den Rest übernimmt der Server für Sie. Bei einem Update müssen sie lediglich die alte menu.html mit der neuen, in der das upgedatete Menu liegt, überschreiben. Ist doch ganz einfach, oder?

SSI Includes

Wenn ihr Server kein PHP unterstützen sollte, jedoch über die Fähigkeit verfügt, SSI-Befehle abzuarbeiten, kann dies ebensoleicht mit einem anderen Befehl umgesetzt werden. Hierbei würde die datei menu.html im Verzeichnis daten liegen.

<!--#include virtual="daten/menu.html"-->

Zusammenfassung

Frames zu ersetzen ist garnichtmal so schwer – ob von Hand, oder automatisch durch den Server, hinnehmen müssen sie die Hindernisse von Frames keinesfalls – eine Umstellung ist leicht, beide Möglichkeiten können kombiniert werden. Konreter: Sie können das dateiübergreifende Suchen und Ersetzen auch dafür verwenden, in jedes ihrer Dokumente ein PHP/SSI-Include einzubinden.