yubb.de-Logo
Tutorials
yubb@yubb
yubbService
Inside yubb

Tabellen anstatt Frames



Frames sind (meistens) Schund und man sollte aus den verschiedensten Gründen versuchen, sie zu umgehen. Eine gute Methode ist, anstatt von Frames Tabellen zu nutzen. Da kommt man aber meist schnell an seine Grenzen: Die Navigation muss in jede Tabelle eingebunden werden. ändert sich nun nur ein Link, kommt, je nach Größe der Seite, eine Menge Arbeit auf einen zu: Man muss jede einzelne Seite öffnen und die Navigation ändern.
Eine Möglichkeit ist es, mit PHP und der Funktion include() die Navigation in das Dokument einzufügen. Aber nicht jeder Webspace unterstützt PHP. Man kann aber auf JavaScript zurückgreifen:

Stellen wir uns vor, die Navigation sähe so aus:

Code:
<a href="news.html">News</a>
<a href="ueber.html">Ich über mich</a>
<a href="downloads.html">Downloads</a>


Diesen Quelltext schreiben wir nun in eine externe JavaScript-Datei:
Code:
<!--
document.write("<a href=\\"news.html\\">News</a>");
document.write("<a href=\\"bilder.html\\">Bilder</a>");
document.write("<a href=\\"ueber.html\\">Ich über mich</a>");
document.write("<a href=\\"downloads.html\\">Downloads</a>");
//-->


In den üblichen Kommentarklammern (Schutz vor veralteten Browsern, die kein JavaScript können) steht im Grunde die Navigation mit 2 Unterschieden:
Einerseits haben wir nun ein
Code:
document.write("...");
. Das sorgt dafür, dass das, was zwischen den Anführungsstrichen steht, ausgegeben wird.
Andererseits sind manche Anführungsstriche mit einem
Code:
\\
davor versehen. Wie oben beschrieben, wird alles zwischen den Anfürungsstrichen von
Code:
document.write
ausgegeben. Damit keine Fehler zustandekommen, müssen die Anführungsstriche vom Link (
Code:
<a href="...">
) maskiert werden. Dies geschieht mit einem sog. Backslash (AltGr+ß).
Das war die Arbeit an der externen JavaScript-Datei. Speichere Sie unter einem aussagekräftigen Namen mit der Endung *.js, hier
Code:
navi.js
.

Nun werden nur noch die Grundseiten editiert. Das folgende Beispiel zeigt eine einfache Seite, die auf Tabellen basiert.
Code:
<html>
<head>
<title>Meine Seite</title>
</head>
<body>
<table border="0">
<tr>
<td><script language="javascript" type="text/javascript" src="navi.js"></script></td>
<td>SEITENINHALT</td>
</tr>
</table>
</body>
</html>

Dies ist ein ganz normales HTML-Grundgerüst, mit dem Unterschied, dass dort, wo normalerweise die Navigation steht, nun unsere
Code:
navi.js
geladen wird.

Das war der gesamte Zauber: Da die
Code:
navi.js
die Navigation beinhaltet und ausgibt, erhält man an exakt dieser Stelle die Navigation.
Im Weiteren muss man also nicht mehr alle Seiten einzeln ändern, sondern muss nur eine einzige Datei ändern: Die
Code:
navi.js
.

Geschrieben von Phil Marx am 18.06.2004 (9412x gelesen)
weiterempfehlen weiterempfehlen   Druckversion Druckversion   kommentieren kommentieren

Hallo!

Ich habe dieses Script eben versucht, aber irgendetwas hab' ich wohl falsch gemacht. Die Navigation wird einfach nicht geladen....
Geschrieben von Petra
Das Problem ist, dass der Befehl document.write in den Klammern keine doppelten Striche hat sondern einfache Striche.



Beispiel:

document.write('Der Tag')



Zwischen diesen einfachen Strichen kannst du auch normale Anführungsstriche verwenden.
Geschrieben von meus