Hier geht es um ein KOMPLETTES Iframe-Design! Angefangen von einem Foto wird es hinterher zu einer super Homepage :D
siehst du, wie es hinterher aussehen wird.
Dieses Tutorial ist seeehr lang und vielleicht auch kompliziert, falls du das das allererste mal machst. Wenn du dir mühe gibst und dich konzentrierst kommt hinterher aber ein vernünftiges ergebnis raus :D
Du brauchst: Paint Shop Pro, HTML-editor [bei windows mit dabei] ODER falls du ein HTML-Prog hast [wie Frontpage, Dreamweaver, Fireworks, Phase 5, NetFusions, NetObjects usw.] nimm dieses Prog.
1. Fangen wir erstmal mit der Grafik an.Such dir ein großes und schönes Foto aus dem Web raus.
Ich nehme dieses:
2. Mache eine neue Ebene [ebenen -> neue raster-ebene]
Such dir eine Stelle
aus, auf die dein Hauptframe soll. Such das Symbol 
in PSP und klicke darauf. Wähle damit einen Bereich auf deinem Bild aus. Meins
ist nun so:
3. Nimm das
Fülltool 
und fülle
die Auswahl schwarz. Gehe nun Auswahl -> Modifizieren -> Verkleinern ->
1 [englisch: selection -> Modify ->
Contract -> 1]
Drücke STRG +X auf deiner Tastatur zusammen.
Das Schwarze sollte nun fast weg sein. Nimm nun nochmal das Fülltool, diesmal aber in weiss.
Suche dieses Symbol in
PSP 
FALLS es
noch nicht aktiviert ist, drücke einmal darauf. Nun sollte ein kleines
Popup-Window da sein, das
"Stilpalette" [englisch: TOOL-Options] heißt.Falls du sie nun noch immer nicht gefunden hast , dann schau im tutorial "paletten" nach! :) Nimm diese
Einstellungen:
Fülle nun die Auswahl. Es sollte un etwas durchscheinend sein.
4. Wiederhole nun Schritt 2 und 3 um den Menu-Frame zu machen. Meins sieht nun so aus:
5. Nun mache eine
neue Ebene und Drücke STRG + A auf deiner Tastatur. Nimm das Fülltool
und fülle die Auswahl Schwarz [Achtung: Deckfähigkeit 100 Prozent!!].
Nun gehe auf Auswahl -> Modifizieren -> Verkleinern ->; 1. Fülle die verkleinerte Auswahl nun Weiß. [auch 100 Prozent!] Mache nochmal Auswahl -> Modifizieren -> Verkleinern -> 1 Drücke un STRG+X auf deiner Tastatur. Dein Lay sollte jetzt einen Rahmen haben.
6. Dein Layout ist fast fertig! Jetzt kannst du noch Brushes hinzufügen, und natürlich text. Nützliche Tutorials dazu: Brushes benutzen und Schattentext.
Speicher dein Layout nun ab, ich nenne es lay.jpg
Jetzt gehts ans coden ;D Öffne den Editor, Frontpage, Phase 5 oder ein anderes der oben genannten Programme.
Codes werden immer Kursiv dargestellt!
1. Gehe in den Quelltext der neuen Seite. Lösche alles was dort (vielleicht) bereits steht und kopiere dieses hier hinein:
Was du verändern musst: Statt DEIN HOMEPAGE-TITEL machst du deinen Homepage namen dorthin [z.bsp. icedale.de - vol. xxxx]
2. Gehe zu PSP wo
du dein lay.jpg öffnest. nimm das colorpicker-tool 
und gehe damit auf eine stelle in deinem lay. Nun gehe auf das grün, dass du unter "stil" findest. [im bild mit 1. gekennzeichnet] klicke darauf. Im neu geöffneten fenster ist unten der farbcode angegeben [im bild rot umkreist]. kopiere ihn.
3. Gehe nun wieder zu Editor und suche den code body bgcolor="#FFFFFF" . ersetze das #FFFFFF durch den eben kopierten Farbcode, in meinem fall wäre es ja #355D14
Jetzt hat deine neue Seite schonmal einen farbigen Hintergrund ;)
4. Jetzt wollen wir mal den Scrollbalken anpassen.
Kopiere diesen Code. Füge ihn im Editor VOR den </head> tag ein. Überall wo in diesem code nun #355D14 steht, musst du die farbzahl durch deine eben ausgewählte farbe ersetzten. Jetzt hat deine HTMl-Seite auch eine Scrollbar, die farblich zum Hintergrund passt :D
5. Nun bauen wir dein Layout ein :D
Du musst wissen: eine Standart-HTMl-Seite ist so aufgebaut:
<html>
<head>
</head>
<body>
</body>
</html>
Dabei kommt zwischen die einzelnen tags dieser inhalt:
<html>
<head>
Style, Scrollbar-Farben, CSS
</head>
<body>
Inhalt deiner Page
</body>
</html>
Also, was wir nun machen, ist der Inhalt deiner Page.
mache zwischen die <body>-TAGs diesen Code:
Speichere nun deine HTML-Seite ab, ABER es muss genau in demselben Ordner sein, in dem auch dein Design-Bild ist. Nenne die Seite lay.htm oder lay.html Ansonsten geht alles nicht! Jetzt kannst du ja mal im Internet Explorer deine Seite anschauen :D
6. Jetzt bauen
wir Iframes ein :) 2 Stück brauchen wir, einen für den Content und ein fürs
Menü. Als erstes coden wir die Iframes auf dein Design. Öffne den editor/oder
dein andres prog und PSP. in dem prog öffnest du natürlich lay.htm und in PSP
lay.jpg. Jetzt findest du die koordinaten heraus. Nimm das Zeiger/Cursor tool 
Fahre an die linke obere ecke des hauptframes. unten, am rand von PSP werden dann 2 zahlen angezeigt (s.bild)
Merk dir diese Beiden Zahlen!!!
7. Ok die
Koordinaten hast du jetzt. jetzt brauchst du noch die größe des iframes. Nimm
das select-tool und selektiere den weißen
frame-bereich
Gehe nun auf Bearbeiten -> Kopieren/Verbinden [auf Englisch "Copy Merged"]
8. drücke STRG+V auf deiner Tastatur. Da sollte jetzt dein eben ausgewählter bereich erscheinen.
9. Gehe nun auf Bild -> Leinwandgröße
Merke dir die beiden Zahlen.
10. Nun füge diesen Code in den <body>-Bereich ein:
Du musst natürlich die Zahlen anpassen! 37 und 140 sind die zahlen aus schritt 6.
360 und 320 sind die Zahlen aus Schritt 9
Dein Iframe sollte jetzt schonmal die richtige Größe und Position haben :D Jetzt braucht der Iframe natürlich noch Content.
1. mache eine neue seite in deinem editor oder html-prog. speicher sie als main.htm und DEMSELBEN Ordner ab, in dem auch lay.htm und lay.jpg sind. nee sie main.htm oder main.html
Lösche den gesamten HTMl-Code der dort vielleicht bereits steht [wie in schritt 1-Coden]
kopiere diesen Code und füge ihn in deinen html ein:
Ändere "Dein Seitentitel" druch den Namen deiner Seite.
2. In diesem Fall wurde die Struktur der HTML-Seite geändert. sie ist nun
<html>
<head>
</head>
<body bgcolor="#ffffff">
</body>
</html>
Also, nun kommt der wirkliche CONTENT ^^ Jetzt gibt es zwei möglichkeiten:
wenn du mit dem microsoft editor arbeitest, schreibe einfach einen kleinen welcome-text zwischen den <body bgcolor="#ffffff">und </body> tag.
Wenn du mit Frontpage, Phase 5, Fireworks und einem der anderen Programme arbeitest, gehe nun in den Modus, wo man text eingeben kann. in frontpage heißt er "Normal" Dort kannst du dann deinen Text einfach schreiben und mit ein paar klicks die schriftart und farbe der schrift verändern. das ist dann alles so ähnlich wie bei Microsoft Word. ACHTUNG: Wenn du mit den einstellungen herumspielst, verändere NICHT die Hintergrundfarbe. sie MUSS weiss sein.
Deine erste Content-Seite ist jetzt fertig. Speicher sie unter dem namen main.htm oder main.html ab.
----------------
Im großen und ganzen ist deine page jetzt fertig. allerdings kannst du jetzt noch einen zweiten frame hinzufügen, den menü-frame
Jetzt kommen eigentlich nur noch wiederholungen, aber ich kann es gern nochmals erklären :)
1. Wiederhole die Schritte sechs bis Neun aus dem kapitel "coden" natürlich merkst du dir die zahlen, die da bei DIR in PSP stehen ;)
2. Nun füge diesen Code in deinen body-bereich ein:
Du musst natürlich die Zahlen anpassen! 37 und 140 sind die zahlen aus schritt 6.
360 und 320 sind die Zahlen aus Schritt 9
Ok jetzt hat deine Seite schon 2 Frames.
Dies ist eigentlich nur die Wiederholung des Kapitels "Content"
1. Wiederhole die Schritte 1 und 2 aus dem Kapitel "Content" nnen die seite frame.htm oder frame.html.
2. Nachdem du die Seite (vielleicht) mit text gefüllt hast muss natürlich auf diese seite ein Menü.
Dazu nehmen wir natrülich Hyperlinks
Hier Ein Beispiellink:
Erklärung dazu: me.htm ist die Seite, die nach anklicken im main-frame erscheinen wird.
target="main" sagt, dass die me.htm seite im mainframe laden wird, und nicht in einem anderen frame.
Me ist die Beschreibung des Links. du könntest genauso gut "Miss" oder "About me" oder "Webmaster" oder sowas schreiben.
Speichere die Seite unter dem Namen frame.htm oder frame.html ab [natürlich im selben ordner]
---------------------
FERTIG! Herzlichen Glückwunsch *lol* dein iframe-design ist jetzt fertig. Du kannst ja mal in den Internet-Explorer gehen und die seite "lay.htm" öffnen. :D Und, wie seihts aus?
Wenn dir das Tutorial geholfen hat, dann schreib es mir doch ins Gästebuch und vergiss nicht die Homepage-Adresse deiner erstellten Page zu schreiben ;) dieses tutorial ist das längste tutorial was ich gemacht habe und es war sehr sehr zeitaufwendig zu machen. Darum bitte ich hier GANZ BESONDERS darum, mich zu linken wenn du das tutorial für deine homepage verwendest. Danke!!