[TuT] Eigene Homepage Templates coden

Jay Niize · 04/30/2010, 20:11

Hallo ElitePvpers!
Heute zeige ich euch wie ihr eure eigenen Templates macht! Und das Wurde von Jusikid geschrieben also alle Credits zu mir

!

Also zu erst brauchen wir Folgende Programme :

-Gimp

-PhotoImpact x3 (Nur für Aussehn, also nicht wirklich!)

Also da wir nun Gimp haben, können wir loslegen!
Zuerst Brauchen wir Ein paar Bilder, also öffnen wir Gimp, und machen ein Neues Bild. Die Maße sind das es gut ist erstmal 1050x1000!
Danach geht auf das Farbverlauf Tool und wählt eure Farben. Ich habe hier von blau zu Lila gewählt.

Ihr Zieht nun die Maus vom oberen Ende bis zum Unteren Ende. Dann sollte Der Farbverlauf enstanden sein!

Nun haben wir schon den Background!
Diesen Speichern wir unter dem Namen Bg.png in einen Ordner der IMG heisst, der sich im Ordner Toll befindet.
Wir öffnen nun den Editor von Windows und geben nun den Code für den Background ein also :

HTML Code:

<body background="IMG/Bg.png">

Wir Speichern unseren Fortschritt mal als PHP Datei! Also ihr macht Strg + S oder einfach Speichern und Speichert das unter dem Namen Index.php!
So jetzt haben wir eine PHP Datei im Ordner! Wir machen Rechtsklick -> Öffnen als -> Webbrowsername Dokument.
Bei mir sieht das ganze nun so aus :

Nun ist der Background gelungen wollen wir uns an das horizontale Menü wenden. Dazu öffnen wir wieder Gimp und wählen aus, wie es aussehn soll! Meines soll zerfetzt wirken! Also wir nehmen mal die Größen hm... 700x76.
Meines soll gelb und zerfetzt wirken!
Also nehme ich den Eimer und kippe Gelb in mein Bild! Nun um es Fetziger Werden zu lassen nehmen wir einen Schwarzen Pinsel und Gehen hoch und runter am Rand!

Dann gehen wir oben auf Ebene -> Transparenz -> Farbe zu Transparenz und dann schwarz!
So nun haben wir auch schon das Menü, das wir aber noch speichern & einfügen müssen. Wir Speichern es mit menü.png. Also ist unser Code in der Index.php so :

HTML Code:

<body background="IMG/Bg.png">
<img src="IMG/Menü.png" >

Alles soll in der Mitte sein, also Ziehen wir noch ein Center mit rein also :

HTML Code:

<center>
<body background="IMG/Bg.png">
<img src="IMG/Menü.png" >

Hier brauchen wir kein End Tag von Center, da ja auch der Text in die Mitte kommt! Hier mein Zwischenstand, der noch gaaar nicht ausgereift ist!

Jetzt wollen wir einen Header machen, sowie das Menü anpassen!
Dazu downloaden wir uns folgendes Bild :

Das Bild sieht so aus :

So wenn wir es haben nennen wir es header.png, und Tuen es in den Ordner IMG! Unser Code sieht nun So aus :

HTML Code:

<center>
<body background="IMG/Bg.png">
<head>
<img src="IMG/header.png" >
<br>
<img src="IMG/Menü.png" >
</head>

Das <br> steht für eine Neue Zeile!
So sieht nun mein Zwischenstand aus :

Um nun etwas Mehr als nur die normale Page haben wollen, brauchen wir mehr Seiten! Wir nehmen :

Forum
Team
Infos
News

Also legen wir folgende Seiten an!

Aber um nun auch die Seiten Besuchen zu können müssen wir unseren Code in die anderen PHP Dateien kopieren, und die Links auf die Seite ziehen!
Ich habe hier mal Bilder Upgeloadet, die Ihr als Links Verwenden Könnt, die habe ich auch in meinem TuT :

So wir gehen in alle PHP Dateien und fügen die Bilder als Links rein :

HTML Code:

<center>
<body background="IMG/Bg.png" >
<head>
<img src="IMG/header.png"
<br><br>
<img src="IMG/menü.png" >
</head>
<div style="position:absolute;top:415px;left:660px">
<a href="News.php"><img src="IMG/News.png" /></a>
</div>
<div style="position:absolute;top:410px;left:795px">
<a href="Info.php"><img src="IMG/Info.png" /></a>
</div>
<div style="position:absolute;top:400px;left:330px">
<a href="Forum.php"><img src="IMG/Forum.png" /></a>
</div>
<div style="position:absolute;top:420px;left:475px">
<a href="index.php"><img src="IMG/Home.png" /></a>
</div>

so sieht das bei mir aus!

Aber Nun Wollen wir noch mal So richtig alles machen :
Beschriften wir folgende Seiten so :
News

HTML Code:

<center>
<body background="IMG/Bg.png" >
<head>
<img src="IMG/header.png"
<br><br>
<img src="IMG/menü.png" >
</head>
<div style="position:absolute;top:415px;left:660px">
<a href="News.php"><img src="IMG/News.png" /></a>
</div>
<div style="position:absolute;top:410px;left:795px">
<a href="Info.php"><img src="IMG/Info.png" /></a>
</div>
<div style="position:absolute;top:400px;left:330px">
<a href="Forum.php"><img src="IMG/Forum.png" /></a>
</div>
<div style="position:absolute;top:420px;left:475px">
<a href="index.php"><img src="IMG/Home.png" /></a>
</div>
<h1>News</h1>

Forum

HTML Code:

<center>
<body background="IMG/Bg.png" >
<head>
<img src="IMG/header.png"
<br><br>
<img src="IMG/menü.png" >
</head>
<div style="position:absolute;top:415px;left:660px">
<a href="News.php"><img src="IMG/News.png" /></a>
</div>
<div style="position:absolute;top:410px;left:795px">
<a href="Info.php"><img src="IMG/Info.png" /></a>
</div>
<div style="position:absolute;top:400px;left:330px">
<a href="Forum.php"><img src="IMG/Forum.png" /></a>
</div>
<div style="position:absolute;top:420px;left:475px">
<a href="index.php"><img src="IMG/Home.png" /></a>
</div>
<h1>Forum</1>

Team

HTML Code:

<center>
<body background="IMG/Bg.png" >
<head>
<img src="IMG/header.png"
<br><br>
<img src="IMG/menü.png" >
</head>
<div style="position:absolute;top:415px;left:660px">
<a href="News.php"><img src="IMG/News.png" /></a>
</div>
<div style="position:absolute;top:410px;left:795px">
<a href="Info.php"><img src="IMG/Info.png" /></a>
</div>
<div style="position:absolute;top:400px;left:330px">
<a href="Forum.php"><img src="IMG/Forum.png" /></a>
</div>
<div style="position:absolute;top:420px;left:475px">
<a href="index.php"><img src="IMG/Home.png" /></a>
</div>
<h1>Team</h1>

Infos

HTML Code:

<center>
<body background="IMG/Bg.png" >
<head>
<img src="IMG/header.png"
<br><br>
<img src="IMG/menü.png" >
</head>
<div style="position:absolute;top:415px;left:660px">
<a href="News.php"><img src="IMG/News.png" /></a>
</div>
<div style="position:absolute;top:410px;left:795px">
<a href="Info.php"><img src="IMG/Info.png" /></a>
</div>
<div style="position:absolute;top:400px;left:330px">
<a href="Forum.php"><img src="IMG/Forum.png" /></a>
</div>
<div style="position:absolute;top:420px;left:475px">
<a href="index.php"><img src="IMG/Home.png" /></a>
</div>
<h1>Infos</h1>

Und den Index haben wir ja schon

So jetzt wollen wir einen Psykeeper am Rand platzieren als Verschönerung :

Download :

So jetzt nur noch auf jeder Seite Anpassen :

HTML Code:

<center>

<div style="position:absolute;top:120px;left:1px">
<img src="IMG/psy.png" />
</div>

<body background="IMG/Bg.png" >
<head>
<img src="IMG/header.png"
<br><br>
<img src="IMG/menü.png" >
</head>
<div style="position:absolute;top:415px;left:660px">
<a href="News.php"><img src="IMG/News.png" /></a>
</div>
<div style="position:absolute;top:410px;left:795px">
<a href="Info.php"><img src="IMG/Info.png" /></a>
</div>
<div style="position:absolute;top:400px;left:330px">
<a href="Forum.php"><img src="IMG/Forum.png" /></a>
</div>
<div style="position:absolute;top:420px;left:475px">
<a href="index.php"><img src="IMG/Home.png" /></a>
</div>

Soo.... Das war es ja auch schon

Das war nur Das Grundgerüst, das ihr mit Ranking, Register & Mehr voll pfuschen könnt

Das Fertige skript sieht nun so aus :

UND WIE GESAGT ES IST EIN EINFACHES TEMPLATE, NICHT SO PROFESIONELL!!!!!

MFG Jusikid

Kouzai · 04/30/2010, 23:53

Super Tut!

Jay Niize · 05/08/2010, 07:46

Danke

Push
Push
Push
Push

~~Lucyy~~ · 05/08/2010, 13:07

An sich ein nettes Tutorial, aber der background ist echt schlimm.

Jay Niize · 05/08/2010, 13:26

xD ja ich weiss, ist ja nur ein TuT, wo ihr alle BGs verändern könnt

Shiriox3 · 05/15/2010, 21:18

Schön =)

~~TheAnimeFreak~~ · 05/15/2010, 23:31

hinter grund ist aufjeden fall schwul,aber jetz sieht man wie leicht es zu machen ist mit bilder super jusikid thanks ^.^

Jay Niize · 05/16/2010, 08:02

das mit dem Hintergrund könnt ihr selba machen xD ihr müsst ja nicht die Farbe nehmen

Wenn ihr schon c&p macht dann ändert die Bilder

~~TheAnimeFreak~~ · 05/16/2010, 09:16

kla man kann auch ein google bild nehmen das kann in jeden bereich kommen du kanns ja daraus auch was anderes draus machen homepage brauch man überall xD

~~Shizuka®~~ · 12/09/2010, 23:41

Frage ^^ wie öffne ich den Editor von Windows ? oder wo besser gesagt ?

Sedrika · 12/09/2010, 23:45

Quote:

Originally Posted by Aquax3

Frage ^^ wie öffne ich den Editor von Windows ? oder wo besser gesagt ?

notepad.exe

Oder Start -> programme -> zubehör -> editor

~~.Crasy~~ · 12/10/2010, 10:43

man "Codet" keine Homepage..

man Scripted sie.

Es gibt rießen unterschiede zwischen Scripten und Coden.

Achileus · 12/10/2010, 14:03

.Crasy da hast du recht und denn background kann man auch per css machen

body {
background-color: #blue (oder Hex);
}

Und wenn man nichtmals so eine Homepage gescriptet bekommt sollte man sich erst die Homepage Tutorials angucken!

Und das du gezeigt hast wie das mit Gimp geht find ich gut.Naja ich bin ehh für Pain.net und dann bald Photo Shop^^

kikugala · 03/05/2011, 19:43

Ich hab n kleines Prob und zwar ´zeig mein firefox den hintergrund schon net an was soll ich jz mache ???

.Tear · 03/05/2011, 19:55

vll mal deinen code zeigen ^^