PHP.
Nein, bitte nicht gleich aufhören zu lesen! Ihr müsst wirklich keine komplizierten Funktionen schreiben und auch kein PHP oder HTML Profi sein! Ich erklär es euch einfach.
Hinweise:
- Ich habe einfach die Dateien aus dem ersten Teil verwendet. Ihr könnt sie euch dort auch gerne am Ende des Posts downloaden.
- Damit das ganze klappt muss der Server auf dem ihr eure Homepage habt PHP unterstützen. Schaut einfach mal auf der Homepage eures Hosters oder fragt per E-Mail nach (oder testet es einfach ;)).
Schritt 1 - PHP verwenden
Klingt kompliziert? Keine Angst. Damit ihr PHP verwenden könnt, müsst ihr einfach nur eure .html Datei in eine .php Datei umbenennen. Ihr klickt also Rechtsklick auf die index.html, klickt auf "umbenennen" und nennt die Datei "index.php". Alternativ könnt ihr die Datei auch in eurem Editor (z.B. Notepad++ - siehe Teil 1) öffnen, unter "Datei" auf "Speichern unter" klicken und dort unter Dateinamen: "index.php" eingeben. Danach einfach auf "speichern" drücken.
Wichtig: all eure .html Dateien (also all eure Unterseiten) müssen umbenannt werden, damit alle die Endung ".php" haben (z.B. "webby.html" umbenennen in "webby.php" usw.).
Nun könnt ihr überall PHP verwenden.
Schritt 2 - Design aufteilen
Als nächsten erstellen wir zwei neue Dateien, in die wir gleich das Design kopieren. Ich habe eine "header.php" und eine "footer.php" erstellt. Nun öffnen wir die index.php und kopieren von oben ab alles bis inklusive "<div id="inhalt">".
Fügt diesen Teil in eure header.php ein. Dann geht ihr wieder zu eurer index.php und kopiert alles ab </div> bis ganz unten und fügt diesen Teil in die footer.php ein.
Nun sollte folgendes in der index.php stehen:
In der header.php steht nun:
Und in der footer.php steht:
Schritt 3 - Design einbinden
Rufen wir nun unsere index.php auf, sehen wir nur Text (Hinweis: damit die index.php im Browser angezeigt wird, müsst ihr sie auf euren Server hochladen). Um nun aber nicht nur Text, sondern auch das Design zu sehen, müssen wir die Design Dateien, dass sind in meinem Fall die header.php und die footer.php, einbinden. Dazu verwenden wir nun PHP. Öffnet eure index.php und fügt ganz oben in der Datei folgendes ein:
Die Zeile ist auch ganz einfach zu erklären: mit "<?php" sagen wir dem Browser: "Hey, jetzt kommt PHP Code!". Dann sagen wir: füg uns den Inhalt der header.php ein. Und zum Schluss sagen wir dem Browser mit "?>": PHP ist vorbei, jetzt kommt wieder HTML.
Nun springen wir innerhalb der index.php ganz ans Ende und fügen dort noch die footer.php ein. Das geht genauso wie oben, also:
Wir sagen dem Browser, dass er ganz oben die header.php und ganz unten die footer.php einbinden soll.
Ladet ihr nun eure Dateien (index.php, style.css (siehe Teil 1), header.php und footer.php) auf eurem Server hoch und ruft die index.php auf, wird euer Design angezeigt ohne das der Code nochmal extra in der index.php steht.
Das include müsst ihr nun auf jeder Unterseite einbinden (das ist auch der Grund, warum wir alle Unterseiten umbenennen mussten in .php). Das heißt, ihr öffnet z.B. eure webby.php, löscht allen Text außer das, was auf der Unterseite angezeigt werden soll aus der Datei und fügt ganz oben
und ganz unten
ein und speichert die Datei ab.
Das war es auch schon. Gerne könnt ihr euch die Dateien hier downloaden, verwenden und verändern. Bei Fragen hinterlasst mir einfach einen Kommentar oder schreibt mir eine Mail.
Dateien zum Downloaden
Nicht mit gekommen? Hier gibt es auch die fertigen Dateien zum Downloaden (Rechtsklick: Link speichern unter):
Copy-Paste-Fehler: Bei dir steht überall header.php -> Sollte z.T. footer.php sein.
AntwortenLöschenDanke für den Hinweis :D Das ist mir wirklich nid aufgefallen >.< ich habs gleich geändert :*
LöschenHallöschen die Links sind leider down -.-
AntwortenLöschenOh nein danke für den Hinweis! Ich werde die Dateien demnächst neu hochladen :*
LöschenVielen lieben dank fürs schnelle hochladen, :* nun kann ich endlich vergleichen ob ich alles richtig gemacht habe und es so abändern wie ich es gerne hätte :) Danke dass du dir diese viele Arbeit machst :)
AntwortenLöschenHab dich doch gern gemacht ^////^ Wenn du Fragen oder Probleme hast kannst du mir auch gerne schreiben :3
LöschenOh ich liebe deine Beiträge einfach ^///^ so ist wirklich super leicht verständlich & ich begreife jetzt endlich wie das mit dem ganzen .php fürs Design funktioniert. Bin begeistert. Weiter so <3
AntwortenLöschen