Zum Inhalt springen

Template erstellen

Gast

Von Gast
in Webdesign

 Teilen

Empfohlene Beiträge

Gast

Gast

Geschrieben
Geschrieben

Hallo,

ich möchte in meiner Freizeit an einem Projekt arbeiten. Mein Problem ist aber, dass wir letztes Jahr nur Grundkenntnisse in HTML, CSS, JS und PHP erworben haben.

Leider waren es auch nur kleinere Übungen also keine ganzen Websites.

Nun möchte ich eben bei meinem Projekt ein Template erstellen, welches auf jeder Seite gleich aussieht, aber der Inhalt ändert sich.

Sprich:

Header

Navi - Content

Footer

Der Content soll z.B. die Registrierungs bzw. Login Seite enthalten oder die News Seite, ... (extra .php Dateien)

Auch haben wir leider mit Tables "gestaltet", also nicht wirklich professionell. Ich möchte alles über div-Tags realisieren, weiß aber nicht genau wie. Kennt von euch jemand ein Tutorial dazu? (außer W3Schools)

Zu meiner Hauptfrage:

Wie kann ich nun mein Template realisieren? Ich binde derzeit in jede Datei meine header.php und footer.php ein (sessions starten, db connection herstellen)

Grüße,

Mythos

Link zu diesem Kommentar
Auf anderen Seiten teilen
Adrian3591

Adrian3591

Geschrieben
Geschrieben

Wie willst du das Ganze realisieren?

arbeitest du mit einer IDE?

Falls nicht kann ich dir erst einmal die IDE Netbeans empfehlen. Hier ist der download link: http://netbeans.org/downloads/

Dort kannst dir dann die PHP version for free herunterladen.

Solltest du Lokal arbeiten empfehle ich dir noch die installation von Xampp (Apache Webserver).

Des weiteren lassen sich sone Sachen leichter mit einem Framework realisieren. Verwende hierbei am besten das Zend Framework 2 (findest auch eine Dokumentation auf der Webseite die allerdings an manchen stellen fehlerhaft ist.)

Bezüglich des Dynamischen contents. Du gehst die Sache aktuell von der falschen Seite aus an. Du bindest nämlich die Statischen Seitenteile in den Dynamischen ein. Eigentlich sollte dies umgekehrt sein!

Heißt du machst dir ein statisches Template und hast dann darin z.B. einen div.content in dem du dynamisch deine Seiteninhalte reinlädst.

Heißt du wirst ein Menü haben und dann musst du abfragen welche Seite aufgerufen wird und dementsprechend dann die richtige datei einbinden.

zum Thema Tutorials: schau dir die Seite CSS 4 You - The Finest in Stylesheets an, sowie PHP: Hypertext Preprocessor

sind beides sehr gute referenzen :)

hoffe das hilft dir ein bisschen

Link zu diesem Kommentar
Auf anderen Seiten teilen
Gast

Gast

Geschrieben
Geschrieben

Ich arbeite mit Netbeans bzw. Dreamweaver (OS abhängig).

XAMPP / LAMPP ist bei beiden Systemen installiert.

Leider haben wir in der 11. Klasse erst mit der OO angefangen (Objekte erzeugen, Klassen u. Methoden verwenden -> Karol in Java) und ich kenne mich da noch nicht so richtig aus, v. a. hab ich keine Ahnung von MVC.

Ich habe versucht ein bisschen was in CodeIgniter anzuschauen, aber wegen fehlender Tutorials habe ich das abgebrochen.

CI soll angeblich viel leichter zu erlernen sein als das Zend Framework

Link zu diesem Kommentar
Auf anderen Seiten teilen
azett

azett

Geschrieben
Geschrieben

Du könntest auch ein HTML-Template erstellen, das Platzhalter für alle dynamischen Inhalte (Menüs, Inhalt, etc.) enthält. Dieses Template liest du per PHP ein, ersetzt die Platzhalter je nach angefordertem Inhalt und gibst das resultierende "komplette" HTML an den Browser zurück.

In meiner Signatur findest du den Link zu einem OpenSource-CMS-Projekt (dessen Gründer ich dereinst war) - dessen Template-Engine funktioniert exakt auf diese Weise. (Vielleicht hast du ja Lust, deine Energie da einzubringen, statt "from scratch" etwas ganz Neues aufzubauen?)

Beispiel-Template aus besagtem CMS (ein wenig zusammengekürzt; in geschweiften Klammern die Platzhalter, die zur Laufzeit von der CMS-Logik ersetzt werden):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>

        <meta name="keywords" content="{WEBSITE_KEYWORDS}" />

        <meta name="description" content="{WEBSITE_DESCRIPTION}" />

        <title>{WEBSITE_TITLE}</title>

        <link rel="SHORTCUT ICON" href="{LAYOUT_DIR}/favicon.ico" />

        <style type="text/css"> @import "{LAYOUT_DIR}/css/style.css"; </style>

        <meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />

    </head>


    <body id="a0">

        <div id="container">

            <div id="banner">

                <img src="{LAYOUT_DIR}/grafiken/banner.gif" alt="{WEBSITE_TITLE}" />

            </div>


            <div id="containerboth">



            <div id="sidebar-a">


                  <div id="rightmenu">

                      {MAINMENU}

                </div>


                  <h1>Suche</h1>

                  <div class="search">

                      {SEARCH}

                    </div>


              </div>




              <div id="content">

                    {CONTENT}

                </div>


            </div>


            <div id="footer">

              <div class="fotext">

                  | {CMSINFO} | {SITEMAPLINK} | {LASTCHANGE} |

              </div>

            </div>


        </div>

    </body>

</html>

Link zu diesem Kommentar
Auf anderen Seiten teilen
hbspike

hbspike

Geschrieben
Geschrieben

Ich kann dir nur JavaServer Faces ans Herz legen.

Da gibt es so tolle Sachen wie:

Ein Template:

Das definiert so Sachen wie:

<ui:insert name="content">Hier kommt der eigentlich Content hin</ui:insert>

und dann kannst du auf deiner xhtml-Seite per 

<ui:composition 

	xmlns="http://www.w3.org/1999/xhtml"

	xmlns:ui="http://java.sun.com/jsf/facelets"

	template="/templates/bvDesktop_designe_template.xhtml">
das Template einbinden und mit 

<ui:define name="content"> </ui:define>
festlegen was jetzt auf der Seite xyz.xhtml für content angezeigt werden soll. Darüber hinaus könntest du auch geschützte Bereiche integrieren, indem du noch ein paar Java-Klassen Logik einbaust. z.B.: 

<c:if test="#{navigator.isLoggedIn}">

	<ui:insert name="content">Hier kommt der eigentlich Content hin</ui:insert>

</c:if>

kannst du per Java-Klasse Navigator über die Methode isLoggedIn (mache ich so) überprüfen, ist der User eingeloggt und wenn ja zeige den Content, wenn nein mache etwas anderes --> z.B. ein Redirect auf die Login-Seite

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

×
 Teilen
Zur Themenübersicht

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Links

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...