News Ticker

HTML Template in dynamische PHP Seite umwandeln (Anleitung)

Veröffentlicht in Digitale Welt, Internet, Programmierung, Tutorials

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:

  1. Download euch zunächst ein HTML Template. Ich habe mich bei free-css-templates.com bedient.
  2. Das ZIP Archiv entpackt ihr auf eurem Computer.
  3. Die index.html aus dem einpackten Archiv öffnet ihr mt dem Notpad++.
  4. 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:
    ▼ Code anzeigen

  5. 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:
    ▼ Code anzeigen

  6. 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:
    ▼ Code anzeigen

  7. Europe Sport
  8. Networking
  9. Nature – Africa
  10. SuperCool
  11. Last Category

  12.  

     

    Archives

     

  13. February 2007
  14. March 2007
  15. April 2007
  16. May 2007
  17. June 2007
  18. July 2007
  19. August 2007
  20. September 2007
  21. October 2007
  22. November 2007
  23. December 2007

  24.  

  • 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:
    ▼ Code anzeigen

  • 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):

    ▼ Code anzeigen

  • 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.

    • 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:

    ▼ Code anzeigen

    • 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:
      ▼ Code anzeigen

    • World Politics
    •  

    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.

    Ähnliche Beiträge:

    1. Wie PDFs in Word-Dokumente umwandeln?
    2. Auf der sicheren Seite mit der richtigen Disaster Recovery Strategie
    3. Java Arraylist – Dynamische Arrays
    4. Dynamische Seitentitel mit PHP erzeugen
    5. Anleitung zum updaten auf WordPress 2.7

    7 Kommentare zu HTML Template in dynamische PHP Seite umwandeln (Anleitung)

    1. scorpi // 25. Juli 2011 um 22:31 //

      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?

    2. Andi // 25. Juli 2011 um 22:34 //

      @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?

    3. scorpi // 25. Juli 2011 um 23:19 //

      @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?

    4. Andi // 26. Juli 2011 um 10:15 //

      Ja genau das kannst du dann einfach mit CSS machen und dann wie folgt die Farbe definieren:
      a:active { color:#Hexfarbwert; }

    5. scorpi // 26. Juli 2011 um 12:46 //

      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…

    6. Andi // 26. Juli 2011 um 13:21 //

      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

    7. scorpi // 26. Juli 2011 um 13:42 //

      ok danke…

    Kommentare sind deaktiviert.

    Copyright © Servervoice