[Tutorial] Funpic - Homepage erstellen

Obsessive

V O R W O R T

Erst einmal: Hallo. smile
Ich habe lange Zeit nach einem Tutorial gesucht, welches mir zeigt, wie ich bei Funpic eine Homepage erstellen kann. Man findet auch hier & da Fusselteile, aber erst durch Erklärung anderer habe ich erst begriffen, wie es geht.
Dies' soll nun eine ganze Anleitung sein, wie man sich bei Funpic seine Homepage erstellen kann. Da es viel Aufwand ist, werden einzelne Schritte wohl nach & nach kommen. Also habt bitte ein bisschen Geduld. smile

Was ihr auf alle Fälle machen müsst: euch wirklich alles genau durchlesen.
& was ihr auf alle Fälle können müsst: HTML-Grundkenntnisse - sonst wird das nix. Augenzwinkern
__________________________________________________________


T E I L 1 - E D I T O R

Eure Textseiten müsst ihr ja im HTML-Format schreiben. Dazu braucht ihr einen Editor - wie ihr schon wisst. Da dieses ganze Codes per Hand schreiben unheimlich aufwendig ist, empfehle ich euch NVU.
Dort könnt ihr alles so aufschreiben wie ihr wollt & er wandelt euch das denn auch um. Ganz einfach. & außerdem könnt ihr mit NVU auch super schöne Tabellen machen.
NVU - kostenlos downloaden
__________________________________________________________


T E I L 2 - A N M E L D U N G

Nun geht es zur Anmeldung. Bitte ordentlich lesen & keine Schritte überspringen! Augenzwinkern

- www.funpic.de aufrufen (& am besten gleich als Lesezeichen speichern)
- auf "Jetzt Anmelden" klicken
- dann einen Usernamen aussuchen & zum 2. Schritt
- den Rest ausfüllen & anmelden
- ihr bekommt eine Mail in den nächsten Minuten, die ihr dann bestätigt
__________________________________________________________


Z W I S C H E N S C H R I T T
Ihr braucht in den nächsten Teilen mehrere Passwörter. Deshalb empfehle ich euch, alle auf einen Zettel zu schreiben. Nehmt euch einen Zettel & schreibt rauf:
Funpic.de
Username: "euer Username bei Funpic.de"
Passwort: "euer Passwort bei Funpic.de"

__________________________________________________________


T E I L 3 - E I N L O G G E N & F R E I S C H A L T U N G

Habt ihr die Mail bestätigt, die ihr nach der Registrierung bekommen habt, loggt ihr euch ein und landet auf der Funpic-Startseite.
Ihr müsst jetzt euren FTP- und MySQL-Zugang freischalten.

F T P - Z U G A N G
- klickt auf "Webhosting FTP"
- dann steht dort "FTP-Status" und nun klickt ihr "Aktivieren"
- denkt euch ein Passwort für den FTP-Zugang aus & bestätigt das ganze - fertig
- schreibt auf euren angelegten Zettel hinzu FTP-Passwort: "euer FTP-Passwort"

M y S Q L - Z U G A N G
- klickt auf "Webhosting MySQL"
- dann wieder ein Passwort ausdenken & MySQL wie FTP aktivieren
- schreibt wieder auf den Zettel MySQL-Passwort: "euer MySQL-Passwort"
__________________________________________________________


T E I L 4 - T E S T S E I T E

So, nun vergesst das ganze Internet mal & öffnet NVU.
Hier ganz kurz das wichtigste:


Jetzt legt ihr eine HTML-Testseite an.
Schreibt folgendes (in Schriftart Verdana am besten):
"Testseite
fett kursiv unterstrichen"

- vergesst nicht das auch wirklich fett, kursiv & unterstrichen zu machen Augenzwinkern
- dann geht ihr auf "Datei", "Speichern unter"
- es kommt ein Feld, tragt dort "testseite" ein
- es öffnet sich nun das eigentliche "Speichern unter - Feld"
- passt gut auf WO ihr es abspeichert - ihr müsst es wieder finden (vllt. legt ihr euch einen neuen Ordner an!?)
- also als "testseite" im Datei-Typ "HTML" speichern - fertig
__________________________________________________________


T E I L 5 - H O C H L A D E N

Jetzt gehts zum hochladen. Ich empfehle: www2ftp.de
Ihr braucht es nicht downloaden und es ist kostenlos. Speichert es euch am besten gleich als Lesezeichen ab. Jetzt gehts los:

- bei www2ftp.de einloggen:



- rechts steht "Datei-Upload"
- auf "Durchsuchen" und eure testseite.html hochladen
- ist sie hochgeladen, steht sie links in diesem großen weißes Kästchen
- finden könnt ihr sie dann unter "http://username.us.funpic.de/testseite.html"

So könnt ihr auch Bilder hochladen. Das Bild "Party.jpg" wäre dann unter "http://username.us.funpic.de/Party.jpg" zu finden. smile
__________________________________________________________

T E I L 6 - D E S I G N H O C H L A D E N

So. :/ Ich bin ziemlich raus aus dem ganzen. Ich habe hier als erstes mal den HTML-Code:

code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
<html><head>
<title>Ponyfarm</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div
 style="position: absolute; left: 0px; width: 900px; top: 0px; height: 600px;">
<img src="http://ponyfarm.po.funpic.de/Ponyfarm-Design.jpg"
 bgproperties="fixed" border="0" height="600"
 width="900"></div>

<div id="main"
 style="position: absolute; left: 45px; top: 230px;">
<iframe src="http://ponyfarm.po.funpic.de/home.html"
 name="main" ;="" allowtransparency="yes"
 target="main" frameborder="0" height="350"
 scrolling="auto" width="532"></iframe></div>

<div id="menu"
 style="position: absolute; left: 658px; top: 390px;">
<iframe src="http://ponyfarm.po.funpic.de/menue.html"
 name="menu" ;="" allowtransparency="yes"
 target="main" frameborder="0" height="325"
 scrolling="auto" width="168"></iframe></div>

<div id="menu"
 style="position: absolute; left: 658px; top: 255px;">
<iframe src="http://ponyfarm.po.funpic.de/login.html"
 name="menu" ;="" allowtransparency="yes"
 target="main" frameborder="0" height="140"
 scrolling="auto" width="175"></iframe></div>
</body>
</html>


Den findet ihr auf "ponyfarm.po.funpic.de"
Schreibt das alles einfach um.
Ich werde noch eine Grafik erstellen dazu. <3
Ansonsten nachfragen, ich mag jetzt nicht alles detailiert aufschreiben. ._.

























VRH Pferde
total gut beschrieben (:
besonders die 'bunten' grafiken gefallen mir n_n
Obsessive
Danke.^^
Ich hoffe das ich welchen damit helfen kann.
VRH Pferde
mir jetzt nich unbedingt aber wenn das tut vor 2-3 jahren gekommen wär hätt ichs ganz gut gebrauchen können XD
Obsessive
^^ na denn. Hoffe das es verständlich geschrieben ist.
Schatti
Kommt das nicht in die TUT Ecke?
Lauri
Ich verschiebs mal smile
Love
das Tut ist echt ausführlich & übersichtlich geschrieben.
Wusste zwar schon davor wie's geht, aber ich denke für Anfänger ist das echt gut (:
heartbeat
Das hätte ich n paar STunden früher haben müssen! großes Grinsen
Aber trotzdem total verständlich das Tut.

Ich brauche allerdings ganz dringend das Desi-einbauen-Tut.. hofffentlich machstes bald Zunge raus
Nuria*
Find ich toll geschrieben, hab schon lange so ein Tut gesucht...

werd jetzt versuchen mal eine eigene Homepage zu kreieren.^^

lg Nuria

edit:
bei mir funktioniert das mit testseite nicht wirklich!?
Schatti
Danke für den TUT! Habe nun es auch Versucht. Doch wie geht es dann weiter???
Schatti
Mhh also dann kommt ja wenn ich jetzt die HP auf rufe dieses Weisse Fenster mit den einzelnen Seiten. Und da ist jetzt meine Frage wie ich
1. wo ich der Design Code einfügen muss und
2.
Nuria*
Zitat:
Original von Sarah-00
Mhh also dann kommt ja wenn ich jetzt die HP auf rufe dieses Weisse Fenster mit den einzelnen Seiten. Und da ist jetzt meine Frage wie ich
1. wo ich der Design Code einfügen muss und
2.



jap diese frage hab ich mir auch schon gestellt...xD
bolop
Zitat:
Original von Sarah-00
Mhh also dann kommt ja wenn ich jetzt die HP auf rufe dieses Weisse Fenster mit den einzelnen Seiten. Und da ist jetzt meine Frage wie ich
1. wo ich der Design Code einfügen muss und
2.


In einer .html Datei?
Nuria*
ich kapiers immer noch nicht ganz...

wie krieg ich diese seite weg?... ich lade die html-seiten mit www.ftp2.de hoch...hab dan abe immer noch diese weissen seiten.... wie werd ich die los?
Schatti
Also bei mir kommt dan nur der Code und nicht das Design =(.
Schatti
Ich habe es wie bei der Seite gemacht wo ihr hier rein gepostet habt

code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
<html>
<head>
<title>Reiterhof Lambadi</title>
<BODY marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" scroll="no">
<img src="http://www.oyla11.de/userdaten/39827144/bilder/2qa3j3k.jpg">

<div id="Layer1" style="position: absolute;  left: 240px; top: 160px;">
  <iframe src="main.html" name="frame" width="735" height="570" frameborder=0 scrolling="auto" noresize style="border: 0px" style="FILTER: chroma (color=#000000)" ;>
  </iframe>
</div>

<div id="Layer1" style="position: absolute;  left: 60px; top: 270px;">
  <iframe src="menue.html" name="frame" width="160" height="460" frameborder=0 scrolling="auto" noresize style="border: 0px" style="FILTER: chroma (color=#000000)" ;>
  </iframe>
</div>


</body>
</html> 
Nuria*
Zitat:
Original von Jeanny
In dem du auf deine Seite bzw. in deine HTML Datei was reinschreibst mit HTML, CSS o.ä. und die Hauptseite in index.html benennst und diese dann erneut hochlädtst. Augenzwinkern
Ansonsten zeig mal deine HP Adresse.


http://nuria.nu.funpic.de/

kann man die adresse eigentlich noch änder oder nicht?
Schatti
@ Nuria
Ausser du machst die ne Kostenlose Domain unter www.nic.de.vu dann heisst es www.blablabla.de.vu ;-).

@ JeanneOkey ich probier es nochmal Augenzwinkern

Edit
Hat immer noch nicht geklappt. Aber was auch nicht geht bei dem hochlade Dinger kann ich die Seiten da nicht löschen, warscheinlich geht es wegen dem nicht.
Schatti
Ka, weill ich da bischen Müll gebaut habe *gg*. Habe den Designcode auf nem anderem Server nochmal probiert und dort ging er auch nicht?