24.05.2008

Der Umstieg von Frames auf CSS

Die früher übliche Framestruktur einer Homepage wird heute von professionellen Webdesignern, aber auch zunehmend im Privatbereich nicht mehr benutzt. Mit den heutigen Mitteln der Trennung von Inhalt und Layout besteht für Frames zum einen kein Bedarf mehr, zum anderen haben sie auch etliche Nachteile. Dazu zählen insbesondere:

Viele Webmaster kehren sich deshalb vollkommen zu Recht von Frames ab und steigen auf die zeitgemäße CSS-Technik um.
Allerdings erfordert dieser Umstieg auch eine neue Denkweise, eine Abkehr vom bisherigen "Frame-Denken". Anstelle der bisherigen Frames werden per CSS sogenannte "Div's" (division), also begrenzte Bereiche auf einer Seite formatiert und positioniert.

Die dabei wohl am häufigsten gestellte Frage lautet: "Wie kann ich den Inhalt in einen Div laden bzw. wie verlinke ich einen Div?" Hintergrund dieser Fragestellung ist, dass beim Arbeiten mit Frames das "Grundgerippe" einer Homepage konstant bleibt und durch die Links lediglich der Inhalt in den vorgesehenen Frame geladen wird.

Die Antwort darauf ist kurz und eindeutig: "Überhaupt nicht", was jedoch kein Nachteil sein muss.
Im Unterschied zu den Frames wird mit der CSS-Methode immer eine Seite komplett geladen. Das bedeutet, dass sich auf jeder Datei auch immer der komplette HTML-Code der sogenannten "Fixbestandteile" wie z.B. Header und Navigation befinden muss. Das mag zunächst etwas aufwendiger erscheinen, hat aber auch im Hinblick auf o.g. Frame-Nachteile folgende Vorteile:

Für den Webmaster bedeutet dies:

Jede Seite muss mit ihrem kompletten Inhalt erstellt werden. Dazu zählen also auch die Fixbestandteile wie Header, Navi oder Footer.
Um die Arbeit dennoch etwas zu erleichtern, gibt es natürlich einige Tricks und Möglichkeiten:

Man erstellt zunächst eine komplette "Basis-Seite" mit allen Bestandteilen. Diese speichert man unter den jeweiligen Seitennamen ab und ändert dann jeweils nur den seitenspezifischen Inhalt.

Was tun, wenn sich z.B. in der Navigation ein Link ändert oder neue Links hinzukommen?

Grundsätzlich muss dann wieder der HTML-Code von sämtlichen Seiten angepasst werden. Das kann man manuell machen, oder aber auch dateiübergreifend mit einem Editor wie z.B. Phase 5 nach der Methode "Suche und ersetze".

Fixbestandteile includen

Eine weitere Möglichkeit besteht darin, die Navigation oder andere "Fixbestandteile" mit einem kleinen PHP-Script zu includen (einzufügen): Dafür muss der Webspace php-fähig sein. Die einzelnen Datein müssen die Dateiendung "php" statt "html" haben.
Bereits vorhandene html-Dateien können hierzu einfach umbenannt werden. Aus der bisherigen "index.html" wird "index.php", entsprechend werden die anderen Dateien umbenannt (Achtung: Eventuell bereits vorhandene Links müssen ebenfalls umbenannt werden).

Nun schreibt man in den entsprechenden Container (z.B. in den Div, der die Navigation enthält) anstelle des HTML-Codes für die einzelnen Links lediglich folgendes:

<?php
include("menue.php");
?>

Den HTML-Code mit den einzelnen Links schreibt man (mit einem einfachen Editor) in eine weitere Datei mit der Bezeichnung "menue.php".

Soll später das Menü einmal geändert oder ergänzt werden, muss man lediglich die Datei "menue.php" anpassen. Die Änderung schlägt dann auf sämtliche Dateien durch, welche den Include-Befehl für die Datei "menue-php" haben. Nach der gleichen Methode können auch Header und Footer includet werden.

Hinweis: Zum Testen müssen die Dateien erst auf den Webspace hochgeladen werden oder auf dem PC muss z.B. XAMPP installiert sein.

nach oben