[TuT] Eigene Homepage Templates coden

Page 1 of 5 1 23 Last »
04/30/2010 20:11 Jay Niize#1
Hallo ElitePvpers!
Heute zeige ich euch wie ihr eure eigenen Templates macht! Und das Wurde von Jusikid geschrieben also alle Credits zu mir :awesome:!

Also zu erst brauchen wir Folgende Programme :

-Gimp [Only registered and activated users can see links. Click Here To Register...]
-PhotoImpact x3 (Nur für Aussehn, also nicht wirklich!) [Only registered and activated users can see links. Click Here To Register...]

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.
[Only registered and activated users can see links. Click Here To Register...]

Ihr Zieht nun die Maus vom oberen Ende bis zum Unteren Ende. Dann sollte Der Farbverlauf enstanden sein! [Only registered and activated users can see links. Click Here To Register...]
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 :
[Only registered and activated users can see links. Click Here To Register...]
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!
[Only registered and activated users can see links. Click Here To Register...]
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!
[Only registered and activated users can see links. Click Here To Register...]

Jetzt wollen wir einen Header machen, sowie das Menü anpassen!
Dazu downloaden wir uns folgendes Bild :
[Only registered and activated users can see links. Click Here To Register...]
Das Bild sieht so aus :
[Only registered and activated users can see links. Click Here To Register...]

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 :
[Only registered and activated users can see links. Click Here To Register...]
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!
[Only registered and activated users can see links. Click Here To Register...]

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 :
[Only registered and activated users can see links. Click Here To Register...]

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!
[Only registered and activated users can see links. Click Here To Register...]

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 :
[Only registered and activated users can see links. Click Here To Register...]

Download :

[Only registered and activated users can see links. Click Here To Register...]

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 :D
Das Fertige skript sieht nun so aus :
[Only registered and activated users can see links. Click Here To Register...]

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

MFG Jusikid
04/30/2010 23:53 Kouzai#2
Super Tut!
05/08/2010 07:46 Jay Niize#3
Danke :)
Push
Push
Push
Push
05/08/2010 13:07 Lucyy#4
An sich ein nettes Tutorial, aber der background ist echt schlimm.
05/08/2010 13:26 Jay Niize#5
xD ja ich weiss, ist ja nur ein TuT, wo ihr alle BGs verändern könnt :D
05/15/2010 21:18 Shiriox3#6
Schön =)
05/15/2010 23:31 TheAnimeFreak#7
hinter grund ist aufjeden fall schwul,aber jetz sieht man wie leicht es zu machen ist mit bilder super jusikid thanks ^.^
05/16/2010 08:02 Jay Niize#8
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 ;)
05/16/2010 09:16 TheAnimeFreak#9
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
12/09/2010 23:41 Shizuka®#10
Frage ^^ wie öffne ich den Editor von Windows ? oder wo besser gesagt ?
12/09/2010 23:45 Sedrika#11
Quote:
Originally Posted by Aquax3 View Post
Frage ^^ wie öffne ich den Editor von Windows ? oder wo besser gesagt ?
notepad.exe

Oder Start -> programme -> zubehör -> editor
12/10/2010 10:43 .Crasy#12
man "Codet" keine Homepage..

man Scripted sie.

Es gibt rießen unterschiede zwischen Scripten und Coden.
12/10/2010 14:03 Achileus#13
.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^^
03/05/2011 19:43 kikugala#14
Ich hab n kleines Prob und zwar ´zeig mein firefox den hintergrund schon net an was soll ich jz mache ???
03/05/2011 19:55 .Tear#15
vll mal deinen code zeigen ^^
Page 1 of 5 1 23 Last »