** C H R I S K I Z Z M Y S U N » .. Kopf aus

Von HTML zu PHP wechseln

Ihr habt eure Website auf HTML aufgebaut und findet es nun aber viel zu mühsam, bei jedem Layoutwechsel alle Seiten zu bearbeiten? Dann seid ihr hier genau richtig. Ich werde euch zeigen, wie einfach es ist, von HTML auf PHP umzusteigen.

Vorraussetzungen

HTML Grundkenntnisse, einen PHP fähigen Host (Funpic, Ohost, Pytal, Kilu etc.), ein FTP Programm, Editor (Start - Programme - Zubehör - Editor oder einen anderen Editor) und einen fertigen Layout Code.

Zuerst muss ich sagen, dass ich persönlich etwas anders include, als normal. Viele haben 3 Dateien (Header, Footer, Navigation) die sie includen, ich nur 2 (Header, Footer), also zeige ich euch, wie ich es mache ;}
Als erstes brauchen wir den Layoutcode. Kopiert vom Anfang des Codes bis zum Anfang des Contents, also so:

<title>Titel der Website</title>
<style type="text/css">
<!--
body, td {
scrollbar-face-color: #Hexcode;
scrollbar-highlight-color: #Hexcode;
scrollbar-3dlight-color: #Hexcode;
scrollbar-darkshadow-color: #Hexcode;
scrollbar-shadow-color: #Hexcode;
scrollbar-arrow-color: #Hexcode;
scrollbar-track-color: #Hexcode;}

a:link {color: #Hexcode; text-decoration:none;} 
a:visited {color: #Hexcode; text-decoration:none;}
a:active {color: #Hexcode; text-decoration:none;} 
a:hover {color: #Hexcode; background-color: #Hexcode;}

A.navi:link, A.navi:active, A.navi:visited {
display: block;
padding-left: 3px;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
margin-top: 1px;
font-family: Schriftart;
font-size: Schriftgrösse pt;
color: #Hexcode Schriftfarbe;
margin-bottom: 1px;
background-color: #Hexcode Hintergrund Farbe;
text-align: Ausrichtung der Links;
line-height: Linienhöhe px;}

A.navi:hover {
display: block;
padding-left: 3px;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
background-color: #Hexcode Hintergrund Farbe;
margin-top: 1px;
font-size: Schriftgrösse pt;
color: #Hexcode Schriftfarbe;
font-family: Schriftart;
text-align: Textausrichtung;
line-height: Linienhöhe px;}

font {font-family: Schriftart; font-size: Schriftgrösse pt;}
b, strong{ color:#Hexcode; font-size: Schriftgrösse pt; font-family:Schriftart;}
i, em{color:#Hexcode; font-size: Schriftgrösse pt; font-family:Schriftart;}
u{color: #Hexcode; font-size: Schriftgrösse pt; font-family:Schriftart;}
s, strike{color:#Hexcode; font-size: Schriftgrösse pt; font-family:Schriftart;}

TEXTAREA { Color: #Hexcode;
width:Breite der Textarea px;
height:Höhe der Textarea px;
background-attachment:fixed;
background-color: #Hexcode Hintergrund Farbe;
Font-Family: Schriftart;
Font-Size: Schriftgrösse px;
Border: 1px solid #Hexcode des Rahmens;}

input { Color: #Hexcode;
background-color: #Hexcode Hintergrund Farbe;
Font-Family: Schriftart;
Font-Size: Schriftgrösse px;
width: Breite px;
Border: 1px solid #Hexcode des Rahmens;}

--> 
</style>
</head>

Diesen Abschnitt kopiert ihr nun in euren Editor und speichert die Seite als header.php ab.
Nun nehmt ihr euch den nächsten Abschnitt des Codes vor, vom Ende des Contents bis zum kompletten Ende des Codes:

Kopiert ihn und fügt ihn wieder in eine neue Editor Seite ein, dann speichert ihr sie als footer.php ab.
Nun kommt das includen dran. Wenn ihr eure Website vorher mit HTML aufgebaut habt, dann besteht eine Seite bei euch immer aus Layoutcode - Inhalt - Ende des Layoutscodes, also in etwa so, wie die Abschnitte, die ihr grade als header und footer Datei abgespeichert habt. Ab jetzt wird es etwas anders und vor allem kürzer. Ihr habt 2 kleine Codes, mit der ihr die beiden Dateien includet. Diese hier:

und

Öffnet wieder euren Editor, fügt den Include Code der header.php Datei ein. Darunter kommt nun euer Text, der später auf der Website erscheinen soll, am Schluss der Include Code für die footer.php und fertig seid ihr ;}
Wichtig: Denkt daran, jede Seite ab jetzt .php zu nennen, denn sonst funktioniert es nicht.
Wenn ihr jetzt eine neue Seite auf eurer Website erstellen wollt, müsst ihr nur noch euren Editor öffnen, den Header Include Code einfügen, euren Inhalt schreiben und darunter den Footer Include einfügen und als php Datei abspeichern. Wollt ihr irgendwann einen Layout Wechsel, braucht ihr nur die beiden Dateien (header.php und footer.php) bearbeiten und nicht mehr alle Seiten, toll oder?

Kleine Anmerkung zum Schluss: Footer und Header Datei müssen immer im selben Ordner auf eurer Website sein, wie eure Textseiten. Ladet ihr also die beiden Dateien normal auf euren Server hoch, die Textseiten aber in einen anderen Ordner, wird eure Website fehlerhaft dargestellt.

Ich wünsche euch viel Spaß beim ausprobieren und falls es noch Fragen geben sollte, könnt ihr euch jederzeit in meinem Askme melden.

(Copyright by Chriskizzmysun, kopieren/verändern ist strikt untersagt!)

Welcome here

× View with IE • Firefox ×
Willkommen auf meinem Blog, auf dem ich über meinen Alltag & alles was mich bewegt blogge. Viele verschiedene Themen, wie es mir grad in den Sinn kommt. Über Feedback freue ich mich & bei Gefallen, verfolgt meinen Blog mithilfe verschiedener Funktionen. Have Fun!