![[Tutorial]eigene Homepage mit PS4 Part2](https://www.elitepvpers.com/forum/iconimages/artist-tutorials/tutorial-eigene-homepage-mit-ps4-part2_ltr.gif){kind=small}
[Tutorial]eigene Homepage mit PS4 Part2
Voraussetzungen:
- HTML Grundkentnisse
- Dreamweaver Grundkentnisse
- Geduld
Benötigte Programme:
- Dreamweaver
- "Internet" - (WTF?!)
- Einen funktionstüchtigen Browser. (Nein, nicht IE!)
Also, beginnen wir.
--------------------------------------------------------------
Dieser Kurs ist nur für Anfänger gedacht,
Profis können hier wegklicken.
--------------------------------------------------------------
Öffnet eure index.html mit Dreamweaver, oder einem anderen HTML Programm.
Natürlich könnt ihr auch den Editor benutzen...
Shit Happenz!
Also:
1. Vorbereitungen
Wenn ihr die index.html öffnet, befindet sich alles noch links oben.
Um das zu beheben gehen wir in Dreamweaver und klicken oben links
auf "Code".
Geht zu dem Body - Bereich.
Fügt den rot markierten Text ein.
HTML Code:
[COLOR="Red"]<center>[/COLOR]<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- Save for Web Slices (index.png) --> <table id="Tabelle_01" width="1024" height="768" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="6"> <img src="Bilder/index_01.png" width="1024" height="32" alt=""></td> </tr> <tr> <td rowspan="6"> ..... </table> <!-- End Save for Web Slices --> </body>[COLOR="Red"]</center>[/COLOR]
Jetzt braucht ihr noch eure Hintergrundfarbe.
Dazu geht ihr wieder in den Entwurf.
Unten bei Eigendschaften befindet sich auch eine Farbpalette wie bei PS.
Wenn ihr auf euren Hintergrund klickt, erhaltet ihr den Hexwert.
HTML Code:
<center><body bgcolor="[COLOR="Red"]#2D344A[/COLOR]" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
Sieht doch schon ganz nett aus.
2. iFrame
Wer nicht weiß was ein iFrame ist, bitte bei SelfHTML schauen, da
ist alles gut erklärt.
Sow.
Ihr wählt euren Context Bereich aus.
Dann geht ihr in den Code, und seht das der Contextbereich ausgewählt ist.
In meinem Falle:
HTML Code:
<td> <img src="Bilder/index_11.png" [COLOR="Red"]width="627" height="319" [/COLOR]alt=""></td> </tr>
HTML Code:
<td [COLOR="Red"]width="627" height="319"[/COLOR]> <img src="Bilder/index_11.png" alt=""></td> </tr>
Geht nun in den Entwurf und löscht den Context Bereich (Das Bild!)
Nun könnt ihr etwas hineinschreiben.
Aber wir wollen ja alles mit iFrames machen.
Ihr geht wieder in den Code, und in die Tabelle.
Es sieht nun folgendermaßen aus:
HTML Code:
<td width="627" height="319">[COLOR="Red"]Hier den iFrame rein![/COLOR]</td>
HTML Code:
<iframe border="0" name="index" [COLOR="Red"]width="622" height="315" src="main.html"</iframe>[/COLOR]
Soweit so gut.
Damit er jetzt die angegebene main.html findet, geht ihr in euren Ordner
wo ihr eure HP gespeichert habt.
Kopiert die "index.html" und benennt sie in "main.html" um.
Öffnte diese dann in Dreamweaver.
Geht nun in den "Entwurf" (Wichtig! Nicht in den Code)
Und drückt STRG + A und danach Entfernen.
Nun sieht euer HTML Code in der main.html etwa so aus:
HTML Code:
<html> <head> <title>Main</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <center><body bgcolor="#2D344A" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> </body></center> </html>
Wenn ihr nun in den Entwurf geht, und dort etwas schreibt,
erscheint dies auch im HTML Modus.
Wenn ihr alles geschrieben habt was ihr wollt, dann speichert die main.html ab.
Jetzt habt ihr schonmal eure main.html.
Wenn ihr eure anderen Bereiche, bzw. Kategorien auch mit einem Text
versehen wollt, dann wiederholt diesen Schritt.
3. Die Buttons
Natürlich muss man etwas anklicken können, damit man zu einer anderen Page kommt.
Dazu geht ihr in den Entwurf, und klickt eure Navigationsleiste an.
Unten links neben eurem Cursor ist ein Rechteckt.
Dieses heißt "Hotspot"
Klickt auf das Rechteck, und wählt dann EINEN Button aus.
In meinem Fall den Main - Button.
Bei Hyperlink gebt ihr "index.html" ein
Ziel bedeutet:
- Neues Fenster
- Gleiches Fenster
- Neuer Tab
- Ect.
Hier gebt ihr den Namen eures iFrames ein.
Bei mir war das glaube "main".
Das Gleiche wiedeholt ihr jetzt mit den anderen Buttons.
--------------------------------------------------------------------
Das wars eigentlich schon mit dem Coden!
Danach auf einen FTP Server laden, und fertig!
Solltet ihr noch Fragen haben, dann postet doch hier in dem Thread.
Grüße - Joshi
€dit:
Wenn im HTML code [color="red"] steht, dann ist damit gemeint, dass ihr diesen Bereich beachten müsst.
Auf keinen Fall [color="red"] kopieren!
P.S: Hier mein Outcome:
Eventuell bei euch etwas zu groß.
Habe fast 2000 Pixel
und hier nochmal das ganze Tutorial zum Download:
Passwort:
