![[How to] Eigene Homepage/Template erstellen](https://www.elitepvpers.com/forum/iconimages/coding-tutorials/how-eigene-homepage-template-erstellen_ltr.gif){kind=small}
[How to] Eigene Homepage/Template erstellen
Da ich finde das diese Geschichte mit Homepage Baukasten
langsam echt mal aufhören soll habe ich gedacht ich erkläre
mal wie man sich ganz einfach eine kleine Homepage baut,
Vorweg:
Ich erkläre das ganze wie man es in der Index datei macht,
nicht in einer externen Style.css
Ich bin jederzeit für Kritik offen die mir weiter hilft.
Dann legen wir mal los!
Was wird benötigt?
-Etwas Brain.exe
-Photoshop oder ein anderes Bilderbearbeitungsprogramm
-
(Empfohlen)-Ein Internetbrowser
-Filezilla (Optional)
Als erstes werden die "grundDateien" angelegt:
Es wird ein Ordner images erstellt ---> Darin werden später die ganzen Bilder gespeichert.
Und eine Index.php datei . Die index datei ist die Datei,die beim Aufrufen
des Weblinks als erstes aufgerufen wird,also die Startseite.
Danach öffnen wir die index.php datei und schreiben dort rein:
PHP Code:
<title>Euer Homepagetitel</titel>
<center>
Nun kommt es zum wichtigsten Teil.
---------------------------------------------------------
Wir erstellen erstmal einen Background , die Hintergrundgrafik.
Natürlich können auch fertige Bilder von sonst wo genommen werden.
Ich habe jetzt mal die Hintergrundgrafik von epvp als Beispiel genommen.
Diese speichern wir als bg.png ab und packen es in den eben
angelegten images ordner
Das sieht dann so aus:
Jetzt muss aber ja noch der Background in der index reingeschrieben
werden damit die index auch "weiß" das ,das der Background sein soll.
Das machen wir folgendermaßen:
Wir öffnen die index.php mit Notepad++
und schreiben hinein:
PHP Code:
<body background="images/bg.png">
body background bedeutet das diese Grafik als
Hintergrundgrafik verwendet werden soll.
das images/bg.png heißt das die index sozusagen
den ordner images öffnen soll und darin die bg.png datei
verwenden soll.
--------------------------------------------------------------------
Als nächstes machen wir den Header,
wie beim Background sucht ihr euch ein Bild
aus welches als Header verwendet werden soll.
Danach speichert ihr das bild als header.png
in den Ordner images ab und legen wieder
in der index datei fest das dies als Header eingefügt werden soll.
Dazu folgendes einfügen:
PHP Code:
<head>
<img src="images/header.png">
</head>
das img src bedeutet das die Index datei
ein Bild suchen soll.
Das images/header.png bedeutet das die Index datei
den images ordner öffnen soll und dadrin die header.png datei verwenden soll.
--> Nicht durch das <head> und </head> irrietieren lassen,das </head>
werden wir einfach "vor uns her schieben"
--------------------------------------------------------------------
Jetzt können wir ja mal unser zwischenergebnis anschauen.
Das tut ihr indem ihr die index.php datei einfach in euren Internetbrowser
zieht.
Das könnte folgendermaßen aussehen:
Wenn wir schonmal dabei sind, hier auch mal ein zwischenergebnis
der index.php datei:
PHP Code:
<title>Euer Homepagetitel</title>
<center><body background="images/bg.png">
<head>
<br>
<br>
<img src="images/header.png">
</head>
Nun kommt die Navigations auswahl.
Dazu erstellen wir uns erstmal ein Bild welches
dann als Naviauswahlstext angezeigt werden soll.
Sollte ungefähr so aussehen:
Dies speichern wir jetzt beispielsweise als start.png
im images Ordner ab.
Das müssen wir dann auchnoch in der index.php reinschreiben,wie
gewohnt ,aber diesmal kommt noch eine Verlinkung dazu:
PHP Code:
<br>
<a href="index.php"><img src="images/start.png"></a>
das <br> hat nichts mit dem Bild oder verlinkung zutun,
<br> steht für eine neue Zeile,bzw. eine leer Zeile.
-
Das img src hab ich ja schon erklärt.
-
das <a href="index.php"> und </a> bedeutet das alles zwischen
dem ersten und 2. teil verlinkt werden soll, in diesem Falle wird
auf die index.php datei verlinkt, natürlich kann man dort auch ganze
Links einfügen.
Folgendes sollte bisher in der index.php stehen:
PHP Code:
<title>Euer Homepagetitel</title>
<center><body background="images/bg.png">
<head>
<br>
<br>
<img src="images/header.png">
<br>
<a href="index.php"><img src="images/start.png"></a>
</head>
Nun machen wir ein art Trennstrich welcher zwischen der
ganzen Navigationspunkten steht , es ist kein muss aber ich
persönlich finde es sieht besser aus.
Sollte ungefähr so aussehen:
Ich habe es als strich.png in den images ordner gespeichert
Das fügen wir jetzt ebenfalls noch in die index.php ein.
Dazu folgendes einfügen:
PHP Code:
<img src="images/strich.png">
-----------------------------------------------
Jetzt fügen wir auf die gleiche weiße noch die Restlichen Navigations
punkte ein.
Dann sollte es ungefähr so aussehen:
Und in der index.php müsste das stehen:
PHP Code:
<title>Euer Homepagetitel</title>
<center><body background="images/bg.png">
<head>
<br>
<br>
<img src="images/header.png">
<br>
<img src="images/strich.png">
<a href="index.php"><img src="images/start.png"></a>
<img src="images/strich.png">
<a href="downloads.php"><img src="images/down.png"></a>
<img src="images/strich.png">
</head>
Ausarbeiten usw. könnt ihr ja denk ich mal selber, da ich ja
die ganzen commands nochmal erklärt habe.
Nun kommen wir zu den Texten.
Aber bevor wir die Texte einfügen, würde ich erstmal
ein paar <br> reinsetzen,damit es nicht zu gequetscht aussieht.
Ich empfehle so ca. 5 Stück rein zu setzen.
Danach könnt ihr noch mit der Font spielen.
Die Schriftgröße ändert ihr mit:
[php]
<font size="5">Der text in Schriftgröße 5</font>
[php]
Einfach die 5 durch die gewünschte Schriftgröße ersetzen.
Die Schriftfarbe ändert ihr mit:
[php]
<font color="#FFFFFF"> Weißer Text </font>
Einfach das #FFFFFF mit eurer Wunschfarbe ersetzen.
in diesem Falle ist es weiß.
So sieht die Index.php nun aus:
PHP Code:
<title>Euer Homepagetitel</title>
<center><body background="images/bg.png">
<head>
<br>
<br>
<img src="images/header.png">
<br>
<img src="images/strich.png">
<a href="index.php"><img src="images/start.png"></a>
<img src="images/strich.png">
<a href="downloads.php"><img src="images/down.png"></a>
<img src="images/strich.png">
<br>
<br>
<br>
<br>
<br>
<font size="5"><font color="#FFFFFF">Das hier ist meine erste Homepage!<br>
Viel Spass!</font></color>
</head>
also müssen wir diese datei nun auch noch anlegen.
Das tut ihr einfach indem ihr die index.php datei Kopiert und in down.php
umbenennt.
Nun zum Webspace.
Ich empfehle bplaced.net oder cwsurf.de als Hoster,
um eine .tk domain zu erhalten müsst ihr euch einfach auf
anmelden und der rest wird dort erklärt.Schlusswort:
Ich brauche keine unnötigen kommentare.
Ebenfalls brauch keiner sagen "gibt es schon" weil ich vorher
die SuFu benutzt habe, und auch ein How to gefunden hab aber
ich fande das die einzelnen Codes auch mal erklärt werden müssen,
was dort leider nicht der fall war.
Und dann hab ich mich ran gemacht und meine Langeweile genutzt.
---> Probleme & Lösungen.
Bilder/Grafiken werden nicht angezeigt:
Mehr Probleme wüsst ich grad nicht...
Dieses HowTo ist 100% von mir gemacht und unterliegt mein Copyright.
Ich stehe natürlich für Probleme und Fragen gerne zur verfügung.
