HTML Template in dynamische PHP Seite umwandeln (Anleitung)
Es gibt ja Unmengen an kostenlosen HTML Templates. In dieser Anleitung werde ich euch zeigen wie ihr aus so einem statischen Template eine dynamische PHP Seite erstellen könnt.
Mit einer Dynamischen PHP Seite habt ihr viel mehr Möglichkeiten als mit einer reinen HTML Seite.
Benötige Programme für die Umwandlung:
- Download euch zunächst ein HTML Template. Ich habe mich bei free-css-templates.com bedient.
- Das ZIP Archiv entpackt ihr auf eurem Computer.
- Die index.html aus dem einpackten Archiv öffnet ihr mt dem Notpad++.
- Erstellt eine neue Datei mit dem Namen „header.php“, dort kopiert ihr den kompletten Header Bereich aus der index.html hinein. Bei dem Beispiel Template wäre es dieser Code:
- Jetzt erstellt ihr eine Datei mit dem Namen „index.php“, hier müsst ihr eine Abfrage der Kategorien erstellen und den Hauptinhalt einfügen. Bei dem Beispiel wird das mit diesem Code realisiert:
- Anschließend erstellt ihr eine „mainnav.php“ Datei. Hier müsst ihr die HTML Daten der Navigation auf der Linken Seite eingeben. Der genaue Code ist dieser:
- Nun müsst ihr noch eine „footer.php“ erstellen. In diese fügt ihr den Footer Code aus der index.html ein. Der Code aus dem Beispiel ist:
- Jetzt erstellen wir in unserem Homepage Verzeichnis einen Ordner mit dem Namen „stuff“. Dort erstellt ihr Dateien mit den Namen politics.php, sport.php, networking.php.
Die Dateien sollen nach den Vorgaben der index.html aufgebaut sein. Bei dem Beispieltemplate müssen die Dateien dann so aussehen(Die Inhaltlichen Texte können natürlich noch angepasst werden): - Anschließend löscht ihr die index.html Datei. Die ganzen PHP und CSS Dateien so wie der Ordner stuff und der Bilder kopiert ihr in euer Root Verzeichnis von eurem USBWebserver.
- Jetzt ruft ihr in eurem Browser http://localhost:8080/ auf und bestaunt euer PHP Seite.
![\](\"images/pic.jpg\")
Wenn ihr die auf der Homepage angezeigten Texte ändern möchtet müsst ihr das in der jeweiligen PHP Datei machen.
Wollt ihr z.B. noch weitere Kategorien in der Navigation hinzufüge möchtet müsst ihr in der index.php diese Abfrage einfügen:
- In der 2. Zeile wo gerade „politics“ steht müsst ihr den gewünschten Sectionnamen eintragen. Der Sectionname ist der Name eurer PHP Datei.
- In der 4. Zeile wo gerade „stuff/politics.php“ steht muss die entsprechende PHP Datei eintragen werden.
- Anschließend erstellt ihr in dem Ordner Stuff eine PHP Datei mit dem Sectionnamen und fügt den gewünschten Inhalt ein.
- Jetzt müsst ihr noch die Navigation bearbeiten. Dazu öffnet ihr die mainnav.php und müsst diesen Code einfügen:
Dort wo gerade „politics“ steht gebt ihr den gewünschten Sectionnamen ein. Bei „World Politics“ könnt ihr den Namen eingeben welcher in der Navigation angezeigt werden soll.
Ich hoffe das euch diese Anleitung geholfen hat und ihr sie gut verstanden habt.
Wow, einfach spitze! Dieser Artikel hat mir sehr geholfen! Vielen Dank. Nur bleibt noch eine Frage: Wie kann man das so machen, dass in der Navigation bei dem entsprechenden Punkt „a-active“ aktiviert wird?
@scorpi was genau möchtest du machen? Die Punkte in der Navigation mit Hilfe von active anders stylen so das sich etwas bei dem Navigationspunkt ändert wenn der User mit der Maus drüber geht?
@andi
ja genau und wenn er auf einer Seite bleibt, sollte in der Navi dieser Punkt auch „anders“ sein. Mit css ist es ja klar. aber wie mache ich das in diesem Zusammenhang?
Ja genau das kannst du dann einfach mit CSS machen und dann wie folgt die Farbe definieren:
a:active { color:#Hexfarbwert; }
das habe ich ja, aber wie definiere ich denn in php mainnav.php die klassen. ich habe eine klasse, die dafür sorgt, dass der aktive Menüpunkt sich von anderen unterscheidet. und normalerweise würde ich das einfach in einer reinen html seite dazu schreiben das z.b. nicht home die klasse „active“ bekommt sondern z.b. kontakt. Und in php gibt es ja „nur“ eine mainnav.php in der man das definieren müsste. Ich hoffe du verstehst was ich meine…
Einige gute Informationen zu deinem Problem solltest du hier finden:
http://xhtmlforum.de/40267-faq-h-ufig-gestellte-fragen-und.html#post296439
Oder auch hier wurde mal so eine ähnliche Frage gestellt.
http://xhtmlforum.de/50791-farbe-ndern-aktiver-link.html
ok danke…