[Guide]Eigene Homepage erstellen

~~FanTasY.~~ · 03/29/2010, 20:51

Hallo liebe Commnuity!
Heute will ich euch Stück für Stück erklären wie ihr eine eigene Homepage erstellt für euren Metin2 Server. Dann habt ihr mal was anderes als diese auf Dauer langweiligen Baukastenpages und als vorgefertige Scripte. Ihr müsst das nicht so wie ich machen. Ihr könnt eure eigenen Farben und Hintergründe verwenden.

Fangen wir an Wir erstellen uns einen Ordner auf dem Desktop. Ich nenne ihn mal "Meine erste Homepage". Dort erstellen wir nun ein Textdokument und nennen es index. Diese öffnen wir nun mit einen beliebigen Textbearbeitungsprogramm und speichern es als Index.html ab. Nun haben wir zwei Dateien in unseren Ordner. Einmal ein "Euerexplorer" Verknüpfung und ein Textdokument. Das Textdokument löschen wir, sodass wir nurnoch eine Sache in unseren Ordner haben.

Das sollte nun so aussehen:

Nun gehen wir mit der rechten Maustaste über Index und drücken öffnen mit --> Texteditor auswählen. Nun notieren wir uns das Grundgerüst.

HTML Code:

<html>

<head>

</head>

<body>

</body>

</html>

Wenn wir die Datei nun öffnen würden, würden wir ein weißes Blatt vor uns sehen. Das ist ganz normal, keine Sorge. Das Grundgerüst dient nur zur Übersicht. Ihr sollt ja schliesslich auch was lernen.
Nun kümmern wir uns ersteinmal um die Bilder. Ihr solltet euch einen Header/Banner besorgen und ein Hintergrundbild. Diese beiden Bilder legt ihr nun in euren Ordner ab. Ich nehme einfach mal den Hintergrund von elitepvpers.com. In Banner gestalten bin ich leider noch nicht sehr gut. Ich nehme einen einfachen Banner. Gibt einfach mal bei Google Bannergenerator oder Bannertool ein. Euer Ordner sollte nun so aussehen:

Nun kümmern wir uns um die Feinheiten. Ersteinmal fügen wir im Headbereich einen Titel hinzu. Den nennt ihr am besten "Servername I Home".

Das ganze sollte nun so aussehen:

HTML Code:

<html>

<head>

<title>Servername I Home</title>

</head>

<body>

</body>

</html>

Jetzt sieht das ganze noch sehr langweilig aus. Das ändern wir nun.
Wir eröffnen einen Style-Bereich und passen unseren Hintergrund an.
Dies sollte nun so aussehen:

HTML Code:

<html>

<head>

<title>Servername I Home</title>

<style type='text/css'>
body{
background-image: url(back.jpg);
}

</style>

</head>

<body>

</body>

</html>

So, jetzt haben wir unseren Hintergrund eingestellt. Nun kümmern wir uns um unseren Banner. Den fügen wir bei dem Body zu. Das sollte nun so aussehen:

Jetzt kommt das wichtigste: Unser Menü. Dieses ist sehr wichtig, damit die Leute einen überblick behalten. Da dies nur eine einfachere Homepage ist nehmen wir vier Punkte: Home, Registration, Download, Forum.
Diese fügen wir nun hinzu, dass sieht nun so aus. Außerdem fügen wir unseren Banner hinzu.

HTML Code:

<html>

<head>

<title>Servername I Home</title>

<style type='text/css'>
body{
background-image: url(back.jpg);
}

</style>

</head>

<body>

<center>

<table class='text' width='65%'>

<tr>

<td>

<img src='banner.jpg' border='0' width='800px'><p>

<br>

<center>

<a href='index.html' class='menulink'>Home</a>

<a href='eureregipage' class='menulink'>Registration</a>

<a href='down.html' class='menulink'>Download</a>

<a href='forumpage' class='menulink'>Forum</a>


</body>

</html>

Jetzt sieht das ganze noch sehr langweilig aus. Vorallem das Menü sieht wirklich schlecht aus. Das ändern wir aber nun. Nun kümmern wir uns ersteinmal um den Text. Wir gehen in den Stylebereich. Das ganze sollte nun so aussehen:

HTML Code:

<html>

<head>

<title>Servername I Home</title>

<style type='text/css'>
body{
background-image: url(back.jpg);
}

.text{
background-color: white;
font-family: Comic Sans ms;
text-align: center;
}

</style>

</head>

<body>

<center>

<table class='text' width='65%'>

<tr>

<td>

<img src='banner.jpg' border='0' width='800px'><p>

<center>

<a href='index.html' class='menulink'>Home</a>

<a href='eureregipage' class='menulink'>Registration</a>

<a href='down.html' class='menulink'>Download</a>

<a href='forumpage' class='menulink'>Forum</a>


</body>

</html>

Der Hintergrund, wo wir was schreiben ist weiß. Die Schriftart ist Comic Sans Ms und der Text steht in der Mitte.
Jetzt fügen wir mal ein paar <br> dazu, damit wir sehen, wie es mit Text aussieht.

HTML Code:

<html>

<head>

<title>Servername I Home</title>

<style type='text/css'>
body{
background-image: url(back.jpg);
}

.text{
background-color: white;
font-family: Comic Sans ms;
text-align: center;
}

</style>

</head>

<body>

<center>

<table class='text' width='65%'>

<tr>

<td>

<img src='banner.jpg' border='0' width='800px'><p>



<center>

<a href='index.html' class='menulink'>Home</a>

<a href='eureregipage' class='menulink'>Registration</a>

<a href='down.html' class='menulink'>Download</a>

<a href='forumpage' class='menulink'>Forum</a>
 <br><br><br><br>
 <br><br><br><br>
 <br><br><br><br>
 <br><br><br><br>
  <br><br><br><br>


</body>

</html>

Bei eureregipage fügt ihr die Adresse euer Regipage ein mit

Bei forumpage genauso. Um down.html kümmern wir uns später. Wir haben ja schon geschrieben class='menulink'. Dieses fügen wir nun auch in unserem Style Bereich zu.

An der Stelle von den <br>'s könnt ihr nun einen kleinen Willkommenstext entwerfen.

So sieht es dann aus:

HTML Code:

<html>

<head>

<title>Servername I Home</title>

<style type='text/css'>
body{
background-image: url(back.jpg);
}

.text{
background-color: white;
font-family: Comic Sans ms;
text-align: center;
}

a.menulink:link, a.menulink:visited{
padding: 8px 50px;
border: 2px solid #383C36;
color: black;
background-color: #D5D8D3;
text-decoration: none;
}


</style>

</head>

<body>

<center>

<table class='text' width='65%'>

<tr>

<td>

<img src='banner.jpg' border='0' width='800px'><p>



<center>

<a href='index.html' class='menulink'>Home</a>

<a href='eureregipage' class='menulink'>Registration</a>

<a href='down.html' class='menulink'>Download</a>

<a href='forumpage' class='menulink'>Forum</a>
 <br><br><br><br>
 <br><br><br><br>
 <br><br><br><br>
 <br><br><br><br>
  <br><br><br><br>


</body>

</html>

Jetzt sieht das Menü viel anschaulicher aus. Dort müsst ihr nun sehr viel rumprobieren, um die richtige Größe der Buttons etc. herrauszufinden, die für euch passt.

Um down.html zu machen, erstellt einfach wieder eine html Datei im Ordner namens down.html. Dann kopiert ihr alles aus Index und fügt es bei down.html ein. Den Text könnt ihr nun anpasse.

Ich hoffe vielen hilft dieser Guide weiter. Bei Fragen, bitte in den Thread schreiben.

lg FanTasY.

Visonar · 03/29/2010, 20:53

hey, danke!
das könnte ich gut gebrauchen

Ri¢hi™ · 03/29/2010, 21:12

gibt es schon mit vtut

hier der link:

~~Jaffa Cake~~ · 03/29/2010, 21:12

Jo..gut

Wozu ich noch ergänzen muss: das ist ein Anfängertut

Ich und vllt. auch mit FanTasY. zusammen werde nachher ein Fortgeschrittenen Tutorial machen...das wird sich aber im Detail auf Photoshop beziehen

lg

flohthuka · 03/29/2010, 21:14

Ich würde eher sagen das es in die Coder Section gehört

~~°TakTik°~~ · 03/29/2010, 21:28

Quote:

Originally Posted by richi_15

gibt es schon mit vtut

hier der link:

Finde die besser Vtut muss man alle vids anguken dauert ewig xD

Naroa · 03/29/2010, 23:08

nice!

THX given!

das suche ich schon lange...

»DarkProphєtღ · 03/30/2010, 09:34

Geil könnt "uns" helfen.

~~FanTasY.~~ · 03/30/2010, 09:35

Danke, schön dass es dir gefällt.

Xandrexx · 04/11/2010, 19:30

Mal ne frage...
Die Hp is dann nur auf meinem Rechner zurückzugreiffen heisst das sie nicht public is.
Wie ändere ich die Adresse ? Wie mache ich das jeder darauf zugreiffen kann?

mfg Xandrexx
(PS: muss der der auf meine hp will auf meinem hamachi server on sein?)

~~FanTasY.~~ · 05/02/2010, 18:39

Vielleicht brauch es noch jemand...

9axe9 · 09/24/2010, 23:27

hey kannst du mir des pls bei teamviewer zeigen ich peil des net muss ich des mit farbe schreiben bidde helf mir meine icq nummer ist 490675262 bidde add mich un hilf mir danke

~~.IlluSion~~ · 09/24/2010, 23:34

#Reported ---> Hochpushen eines alten Threads!

Ma aufs Datum geschaut?

X0R0N · 09/24/2010, 23:44

Alter Thread
*closed