Webdesign, mehrere Unterseiten gleichzeitig verändern?
Hallo, wenn ich jetzt nen Neuen Reiter in die Navbar einfügen will.
Muss ich da in jede einzelne html datei rein und das Manuell einfügen?
Oder kann ich das gleichzeitig für alle gewünschten machen ?
Danke
Lg
Was für ein Code Editor (VS-Code etc.) nutzt du?
Brackets.
VS-Code?
3 Antworten
Mit am einfachsten und sinnvollsten ist es, wenn du deine Navigation in eine eigene Datei auslagerst. Die ausgelagerte Navigation wird dann nur noch an den Stellen inkludiert, an denen du sie benötigst und ausgeben möchtest. Schau dir dafür einfach mal den nachfolgenden Aufbau an, lese anschließend in der offiziellen Dokumentation von PHP und freunde dich damit an.
Navigation (navigation.php):
<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
Seite (index.php, page.php etc.):
<nav>
<?php include 'navigation.php'; ?>
</nav>
Um dieses Beispiel umzusetzen, musst du lediglich deine vorhandenen HTML-Dokumente als PHP-Datei abspeichern. Wenn dein Webserver PHP unterstützt (was i.d.R. der Fall sein sollte), wird der PHP Teil serverseitig interpretiert. Sprich, deine Navigation, die in der navigation.php hinterlegte ist, wird ausgegeben.
Eine weitere, jedoch weniger empfehlenswerte Möglichkeit wäre die Verwendung eines <iframe>. Mit dem <iframe> Element können HTML-Inhalte aus einem anderen HTML-Dokument eingebunden werden. Der Aufbau ist im Grunde ähnlich, "nur" dass anstelle von PHP auf HTML eigenen Mittel zurückgegriffen wird.
Ein <iframe> schränkt dich in vielerlei ein, insbesondere bei der Umsetzung einer responsiven Navigation. Inhalte, die in einem <iframe> angezeigt werden, können auch nur im selben dargestellt werden. Von diesem Lösungsansatz solltest du daher Abstand nehmen, in dem du stattdessen PHP verwendest.
LG medmonk
CSS und JavaScript können ganz normal eingebunden und verwendet werden. Vereinfacht heruntergebrochen ändert sich erst einmal "nur" die Dateinamenserweiterung von .html zu .php. Das erlaubt dir wiederum PHP-Scripte einzubinden, die dann serverseitig durch den PHP-Interpreter verarbeitet werden.
Aber mal noch ne Frage die "nav.php" hat das ü in Brackets intern automatisch in "%C3%BC" Umgewandelt.....das liegt an der internen übersetzung von php für "ü"?
Das liegt nicht an PHP, sondern eher an der Einstellung von Brackets oder dem verwendeten Zeichensatz. Verwendest du UTF-8 für dein Dokument?
Das list Element in der "navigation.php" wurde nur umgewandelt:
"<li><a href="%C3%BCbermich.php">Meiner Selbst</a></li>"
Du solltest eigentlich grundsätzlich in Dateinamen auf Umlaute und Sonderzeichen verzichten, da diese früher oder später zum Problem werden können. Benenne also deine übermich.php in uebermich.php um.
Lieben Dank, mache ich. Schönen Tag wünsche ich dir!
Noch ne frage kann man auch den header extern in ner php datei einbinden für alle unterseiten?
Du kannst jedes beliebige Element auslagern und an anderer Stelle inkludieren.
<?php include 'header.php'; ?>
<h1>Title</h1>
<p>page-content comes here...</p>
<?php include 'footer.php'; ?>
VS-Code ist, würde ich sagen eines oder sogar der meist genutzte Code Editor für Sachen wie Webseiten etc.
Auf jeden Fall kann man bei diesem in mehreren Dateien gleichzeitig gewisse Textstellen ersetzten. Das geht dort unter dem Reiter Bearbeiten - In Dateien ersetzten. Vermutlich gibt es in Brackets auch so eine Funktion. Habe im Internet auf die schnelle aber nichts gefunden.
Falls es die Funktion gibt, kannst du dann einfach ein Teil deiner Navbar, welcher überall gleich ist kopieren und ihn mit dem selben Code zusammen und mit deinem neuen Reiter wieder einfügen.
Falls du das allerdings öfters machen willst, empfehle ich dir, die Navbar und möglicherweise auch den Footer per JavaScript einzufügen.
Der Code dafür könnte etwa so aussehen:
navbar.js:
var navbar = `
<a href="#home">Home</a>
<a href="#kontakt">Kontakt</a>`
document.getElementsByTagName("nav")[0].innerHTML = navbar;
In allen HTML Dateien müsstest du dann auf die Datei JS Datei verweisen:
<script language="javascript" type="text/javascript" src="navbar.js"></script>
Ausserdem musst du den <nav> Tag einfach leer (kann aber auch noch alten Code enthalten) im HTML lassen, sodass in diesen eingefügt werden kann.
hey vielen lieben dank für die tollen infos! hat mir auf jedenfall sehr weitergeholfen.
geil jetzt gehts mit js los endlich kann ichs gebrauchen! Ha, denn eine js datei hatte cih bisher nciht drinne.
Wie viele Unterseiten sind es denn? Denn um den Fehler zukünftig zu vermeiden empfehle ich dir, dass Menü in einer externen Datei zu speichern und via php einzubinden. Vielleicht für zukünftige Projekte interessant.
Du meinst die index.html extern und dann irgendwie über php alles auch in den anderen ändern?
Wie geht das?
Du baust quasi deine Website aus php dateien auf
include header.php
include navigation.php
include <UNTERSEITE>.php
include footer.php
---
So müsstest du auch nur die navigation.php bearbeiten jetzt.
Cool, vielen lieben dank, hört sich auch spannend and.
Dann muss ich jetzt mal gucken was besser ist für mich , per JS oder PHP das ganze.
Hi, auch dir vielen Danke.
Kann man eigentlich ganz normal weiter Css und JS dateien in die PHP Dateien einbinden?