e n v o u t a n t . o r g

Diary Miss Domain Reviews Exit

News

Jules im Kino

Wishes

Currently

07.06.2oo9

müde

bewölkt

Frühstück

Biss zur Mittagsstunde

Charmed Season 1

Juni

M	T	W	T	F	S	S
1	2	3		5	6	7
8	9		11	12	13	14
15	16		18		20	21
22	23	24	25	26	27	28
29	30

I-Frame Design

Dieses Tutorial ist für Paint Shop Pro 7!!! Manche Bilder habe ich verkleinert, zum vergrößern bitte draufklicken, sie öffnen sich dann in einem neuen Fenster.

Du hast dir jetzt dein eigenes Layout erstellt, weißt aber nicht wie du es "Internetfähig" machst.

1. Klicke zuerst auf das "Bild unterteilen" Symbol

2. Daraufhin öffnet sich ein Fenster. Jetzt klickst du auf "Unterteilung"

3. Nun solltest du einstellen in welchem Format alles abgespeichert werden soll. Du kannst zusätzlich noch auf "Zelle optimieren" klicken und z.B. den sehr hilfreichen "Wizard" verwenden.

4. Jetzt gehts ans Schneiden. Dabei kannst du dir das Bild auch ranzoomen. Achte aber darauf, dass die Schnittstellen nicht durch eines der I-Frame-Fenster durchlaufen. Wenn du alles richtig geschnitten hast, dann könnte es z.B. so aussehen:

5. Dann musst du noch auf "Einstellungen speichern" und "Speichern unter". Achte darauf, dass du vorher einen neuen Ordner dafür anlegst.
6. Jetzt sind wir erstmal mit PSP fertig und gehen an die HTML-Arbeit.
7. In deinem Ordner könnte es jetzt so aussehen:

8. Du hast dein Bild in mehrere Einzelstücke zerteilt. Uns interessieren aber nur die I-Frame-Stücke. Das wären in diesem Fall, die beiden helleren. Und die Index-Datei ist wichtig. Die solltet ihr mit eurem Editor öffnen.
9. Es kommt darauf an wie sich euer Design öffnen soll. Entweder als Pop-Up oder ihr fügt es in ein normales Fenster ein mit farbigem Hintergrund. Oder die 3. Möglichkeit: Das Design ist so groß, dass es eh schon das komplette Fenster ausfüllt. Das ist ganz euch überlassen =) Wenn ihr das so wie meine Designs sind machen wollt, dann sollte euer HEAD Bereich so aussehen:
<HTML> <HEAD> <TITLE>envoutant.org</TITLE> </HEAD> <p align=center><BODY topmargin="0" leftmargin="0" body scroll="no">
Den Titel solltet ihr natürlich noch ändern. Die letzte Reihe ist dafür zuständig, damit euer Design links oben in der Ecke anfängt und keine weißen Streifen an den Rändern auftauchen.
10. Nun gehts an die I-Frame-Fenster. Zuerst coden wir das Main-Fenster. Dafür müsst ihr gucken wie es heißt (hier: 01_3x1) und das im Index wiederfinden. Im Moment sieht diese Stelle noch so aus:

11. Ihr löscht diese Zeile:

12. Und fügt stattdessen das hier ein:
<TD ROWSPAN="2" COLSPAN="1" WIDTH="290" HEIGHT="277" background="URL"> <iframe src="main.html" width="290" height="277" name="mainframe" align="center" frameborder="0" ALLOWTRANSPARENCY="true">Ihr Browser kann den IFrame nicht anzeigen - Your browser doesn't support iframes</iframe>
13. Achtung! Die Werte von ROWSPAN, COLSPAN, WIDTH und HEIGHT sind von Fenster zu Fenster unterschiedlich. Ihr musst immer mit der Zeile die über eurer gelöschten Zeile steht arbeiten, dort stehen alle wichtigen Infos und diese Zeile dürft ihr nicht löschen.
14. Das gleiche macht ihr dann auch noch für das Menü-Fenster, dort ändern sich zusätzlich auch noch die Angaben, welche Seite angezeigt werden soll, also nicht "main.html" sondern z.B. "menue.html"
15. Alles abspeichern und dann seid ihr auch schon fertig.