So, wie versprochen habe ich das eben erledigt
Zunächst mal die URL:
http://ajaxhp.wkstats.de/ Das Design stammt von freecsstemplates, da ich diesbzüglich nicht sonderlich begabt bin. Als Technikdemo sollte das aber zunächst genügen
Warum das ganze?
Auch wenn masterronnows Problem nun gelöst wurde (fehlende </frame>-Tags), sind Frames immernoch eine veraltete Technik. Auch Tabellen sind eher suboptimal, da diese schlicht nicht für solche Aufgaben gemacht wurden (kein "logischer" Aufbau). Daher nutzt dieses Beispiel div-Container, die die Seite logisch aufbauen und die mit CSS deutlich freier gestaltbar sind.
Aber dann muss ich doch die Navigation und Header und Footer und die (in diesem Beispiel vorhandene) Sidebar immer auf allen Seiten einzeln aktualisieren!
Nein! Mit AJAX bieten sich in
allen neuen Browsern Möglichkeiten, Seitenteile dynamisch nachzuladen. Mithilfe von Frameworks wie
Prototype wird diese Methode stark vereinfacht, wie der Quelltext der Demo zeigen wird.
Gibt es Nachteile?
Die gibt es überall. Ohne aktiviertes JavaScript kann die seite nicht vernünftig angezeigt werden, und barriefrei ist sie aufgrund der fehlenden JS-Kompatibilität der üblichen Screenreader (das, womit z.b. Sehbehinderte die Seite vorlesen lassen) auch nicht.
Und wie funktioniert das nun?
Zunächst einmal den Code der "Hauptdatei":
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
-->
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>AJAX-HP - Design by freecsstemplates.org</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="prototype.js"></script>
</head>
<body>
<div id="header">
<h1>Logistix</h1>
<h2>By Free CSS Templates</h2>
</div>
<!-- end #header -->
<div id="menu">
<ul>
<li><a href="
seite3.html" title="Start" onclick="new Ajax.Updater('
posts','
seite3.html');return false;" onfocus="this.blur();">Startseite</a></li>
<li><a href="
seite0.php" title="PHP-Test" onclick="new Ajax.Updater('
posts','
seite0.php');return false;" onfocus="this.blur();">Ein PHP-Test</a></li>
<li><a href="
seite1.html" title="Testlink" onclick="new Ajax.Updater('
posts','
seite1.html');return false;" onfocus="this.blur();">Ein Test</a></li>
<li><a href="
seite2.html" title="Noch ein Testlink" onclick="new Ajax.Updater('
posts','
seite2.html');return false;" onfocus="this.blur();">Und noch ein Test
</a></li>
</ul>
</div>
<!-- end #menu -->
<div id="content">
<div id="
posts">
<div class="post">
<h2 class="title">Welcome to Logistix!</h2>
<div class="story">
<p><strong>Logistix</strong> is a free template from <a href="
http://www.freecsstemplates.org/">Free CSS Templates</a> released under a <a href="
http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The photo is from <a href="
http://www.pdphoto.org/">PDPhoto.org</a>. You're free to use it for both commercial or personal use. I only ask that you link back to my site in some way. <em><strong>Enjoy
</strong></em></p>
</div>
</div>
</div>
<!-- end #posts -->
<div id="links">
<ul>
<li>
<h2>Sidebarzeug...</h2>
<ul>
<li><a href="#">February 2007</a> <i>(22)</i></li>
<li><a href="#">January 2007</a> <i>(31)</i></li>
<li><a href="#">December 2006</a> <i>(31)</i></li>
<li><a href="#">November 2006</a> <i>(30)</i></li>
<li><a href="#">October 2006</a> <i>(31)</i></li>
</ul>
</li>
<li>
<h2>Sidebar</h2>
<p>Was man hier so alles tun kann...
</p>
</li>
</ul>
</div>
<!-- end #links -->
<div style="clear: both;"> </div>
</div>
<!-- end #content -->
<div id="footer">
<p id="legal">Copyright © 2007 Logistix. Designed by <a href="
http://www.freecsstemplates.org/">Free CSS Templates</a></p>
</div>
<!-- end #footer -->
</body>
</html>
Alles was hier wichtig ist wurde farblich hervorgehoben. Hier müssen teilweise Anpassungen vorgenommen werden, die Orte an denen dasselbe getan werden muss wurden auch gleich gefärbt
Der Quelltext der Seiten seite0.php, seite1.html, seite2.html und seite3.html ist recht einfach, für seite0.php:
Code: Alles auswählen
<div class="post">
<h2 class="title">PHP-Test!</h2>
<div class="story">
<p><strong>PHP</strong> ist eine tolle Sprache! Ich kann mit ihr z.B. die Zeit darstellen: <?=strftime("%d.%m.%Y %H:%M:%S",time());?></p>
</div>
</div>
<div class="post">
<h2 class="title">Nur ein Beispieltext ;)</h2>
<div class="story">
<p>Blaaa bla bla Lorem ipsum usw., ihr kennt das ja :p</p>
</div>
</div>
Anhand dessen wird klar, wie man das in anderen Dateien zu machen hat.
OK, aber wie baue ich das nun auf meiner Seite ein? Dein Testlayout mag ich nämlich nicht 
Zunächst einmal: die Voraussetzung ist, ein Tabellenlayout oder ein div-Layout zu haben. Wie das genau aussieht ist zunächst egal. Dann müsst ihr folgendes tun:
- Prototype auf euren Webspace laden und in die Seite einbinden (Abschnitt im Beispielcode: Diese Farbe)
- Je nach eurem Design hat euer Inhaltsbereich eine ID, im Beispiel ist es posts. Diese müsst ihr bei den Links in eurem Code anpassen. Wenn euer Inhaltsbereich noch keine ID hat, müsst ihr ihm eine zuweisen!
- Unterseiten erstellen und verlinken. Dazu einfach den Beispielquelltext anschauen, alles was im div mit der ID posts steht, muss in eine eigene Datei ausgelagert werden. Dazu einfach den Beispielquelltext der seite0.php ansehen
- Hochladen und testen
Habt ihr dies alles getan sollte es eigentlich schon funktionieren. Falls es das nicht tut, meldet euch einfach hier
Fragen, Anregungen und dergleichen ausdrücklich erwünscht