Mehrere HTML-Dokumente in ein HTML-Dokument einfügen

[some]

Hallo liebe Gemeinde,
ich komme bei meinem Problem nicht weiter.
Ich besuche gerade den Kurs Webdesign, hier arbeiten wir mit HTML, CSS und JavaScript. Allerdings befinde ich mich in meinem Auslandssemester, der Kurs ist in kroatisch und ich bin zwar anwesend, habe mir aber mein Wissen durch Code Academy gelernt. (Falls jemand sich wundert, warum ich nicht einfach meine Kommilitonen frage) Meine Aufgabe ist es, mit einem Teamkollegen eine Website zu erstellen.
Mein Problem:
Ich habe 8 HTML-Dokumente: Index - Index-7.
Die Dozentin war auch zufrieden mit allem, allerdings hat Sie bemängelt, dass wir zu viele HTML-Seiten haben. Wir haben wirklich nicht so viel Inhalt auf den einzelnen Seiten, deswegen ist es möglich, alles in eine Seite zu schreiben, glaube ich jedenfalls. Mein Partner weiß selber nicht, wie das Einfügen von mehreren Seiten in eine funktioniert. Und eine weitere Sache ist, dass alle Seiten den gleichen Aufbau haben:
<div id="page">
<div id="content">...

Das müsste ich nur umbenennen, richtig?
Also, die einfachste Idee wäre wohl alle anderen Seiten in einen <div> Container mit einer ID für jede Seite zu schreiben und in Index einzufügen. Ich weiß nur nicht wie das funktioniert.

<div id="menu2">
<ul>
<li><a href="index-4.html">Men</a></li>
<li><a href="index-5.html">Women</a></li>
<li><a href="index-6.html">Youth</a></li>
<li><a href="index-7.html">Bags & Luggage</a></li>

</ul>
</div>

Das ist zum Beispiel unser Verweis vom index.html zu den anderen Seiten.
Wie kann ich nun den Inhalt der Seiten in das Dokument index.html einfügen?

Vielen Dank und liebe Grüße
some

 

[LeCub]

du könntest mit php den inhalt einer Datei in eine andere ziehen. dafür erstellst du eine php datei. nimmst genau deinen html code und fügst dort wo du den Inhalt der anderen haben möchtest

<?php
include "deinedatei";
?>

ein

 

[SpiceLab]

Ich besuche gerade den Kurs Webdesign, hier arbeiten wir mit HTML, CSS und JavaScript.

@LeCub Womit PHP offensichtlich ausscheidet.

Somit wäre mit JS-Bordmitteln ein AJAX-Request eine Möglichkeit.

Siehe z.B. http://api.jquery.com/jquery.ajax/

 

[NetAktiv]

Üblicherweise kommst nicht mit einem include aus, sondern hast einen für Menü, Footer, .... Ich lasse auch Teile durch PHP erzeugen, so ist mein Dropdown Menü aus einem PHP Array erstellt. Ein zweites Array beschreibt die Include und alle Seiten werden über den Aufruf index.php?page=xxxx gesteuert

Nachtrag: habe leider eben erst den berechtigten Einwand von Spicelab zu PHP gelesen.

Man kann ja auch gleich alles in eine Datei packen und mit JavaScript display:none | block setzen.

 

[some]

Menü und Footer habe ich im index.html und das Design halt im CSS. Die Seiten sehen alle genau gleich aus.
Ich kann noch kein PHP und die Seite haben wir bisher nur mit HTML und CSS gestaltet.
jQuery.ajax() werde ich mir anschauen, habe damit aber noch nie gearbeitet.

Ist die Idee mit <div id=xxx> nicht gut?
Ich wollte in dem Fall nur wissen, wie ich beispielsweise index-4.html in index.html einfügen kann. Gerne auch per PN, falls mir jemand Nachhilfe geben kann.

 

[SpiceLab]

Man kann ja auch gleich alles in eine Datei packen und mit JavaScript display:none | block setzen.

Auf die Schnelle recherchiert: http://www.sitepoint.com/content-switching-component-built-three-ways/ :)

 

[some]

Danke! :-) Soll mir das zeigen, dass jQuery die bessere Lösung für mein Problem ist? :-D

 

[SpiceLab]

Oder hier mit klassischen Links: http://wpaoli.building58.com/2009/10/super-simple-jquery-content-swapper/ :)

Ob Du das JS-Framework jQuery oder "pures" JavaScript verwendest, spielt keine Rolle ;)

 

[some]

Mein geballtes Halbwissen hat mal wieder zugeschlagen

 

[NetAktiv]

Wenn ihr im Kurs noch kein jQuery angesprochen habt, würde ich es vorerst sein lassen. Ich finde es auch besser, erst mal zu verstehen, was so alles mit purem JavaScript geht, bevor man sich auf recht umfangreiche Frameworks einlässt. Wenn dann nämlich mal was nicht geht oder man an die Grenzen stößt, steht man dumm da und weiß nicht mehr weiter, weil die eigentlichen Grundlagen fehlen.

Schau dir mal meine Seite http://php.netaktiv.de/index.php?page=html5test an,
die ist mit einfachen JavaScript geschrieben, ganz ohne jQuery