Verwendete Programme
Paint Shop Pro 8.0
Wird aber in anderen Programmen der Reihe ähnlich funktionieren.
Bei Nachfrage bin ich gerne bereit, auch noch eines zu schreiben, wo nur Paint gebraucht wird ;-). Es handelt sich übrigens um ein Tutorial, das versucht, auch andere Browser als den IE zu berücksichtigen - Chroma-Filter wird daher nicht erklärt. Werde aber evtl. bald noch einen Nachsatz hinzufügen ;-).
Was ist ein I-Frame?
I-Frame ist eine kleine Abkürzung für Inline-Frame.
Damit können eine Art "Fenster" in die Website integriert werden... Da man alles genau platzieren kann, sieht es meistens auch optisch ansprechend aus ;-)
Demnächst werde ich hier auch eine kleine Beispielseite linken...
In diesem Tutorial benutzen wir übrigens kein reines I-Frame, sondern eines in Verbindung mit einer (unsichtbaren) DIV-Tabelle! Ich habe damit bis jetzt die besten Erfahrungen gemacht!
Der Code
Das ist der I-Frame-Code, den wir benutzen werden:
<div style="position: absolute; left: 687; top: 312">
<iframe src="Seite.html" name="Seite" width="216" height="423" frameborder="0" scrolling="yes">
</iframe>
</div>
Wir werden mit ihm als Basis arbeiten :-)... Alles, was fett und farbig gedruckt ist, muss im Laufe des Arbeitens angepasst werden - Stück für Stück. Ich hoffe, dass er bei allen Browsern reibungslos funktioniert, ich habe ihn bisher mit Mozilla Firefox und Microsoft Internet Explorer erfolgreich getestet ;-)... Weitere Ergebnisse diesbezüglich sind natürlich erwünscht.
Schritt 1: I-Frame-Größe
Zuerst bestimmen wir die Größe des Inline-Frames.
Dazu öffnen wir zuerst einmal unser PSP.
Außerdem müssen wir natürlich auch noch unser Design in dem Programm öffnen.
Wir wählen das Beschnittwerkzeug:
Es sollte in der Tool-Leiste links zu finden sein ;-).
Jetzt markieren wir damit - möglichst genau - einen Abschnitt des Designs, auf dem später eine Unterseite erscheinen soll.
Ein Doppelklick in den Bereich, und wir haben diesen Teil ausgeschnitten!
Nun gehen wir oben im Menü auf 'Bild' -> 'Größe ändern'. Eine Box, deren oberer Teil so aussieht, sollte erscheinen:
Das sind die Werte, die wir brauchen. Wir tragen Breite anstelle des orangenen Teil im Code ein, und Höhe anstelle des orangeroten Wertes. Speichert noch das Ausgeschnittene ab, damit ihr ihn später als Hintergrund im I-Frame benutzen könnt...
Das wäre erledigt ;-).
Schritt 2: Positionierung des I-Frames
Unser I-Frame hat nach Schritt 1 die richtige Größe, aber es liegt vollkommen falsch! Da müssen wir natürlich etwas ändern
...
Zuerst müssen wir das 'Beschneiden' rückgängig machen. Oben im Menü auf 'Bearbeiten' -> 'Rückgängig Beschneiden'. Das Design sollte wieder wie vorher vor euch liegen ;-).
Mit dem Beschnittwerkzeug markieren wir jetzt den Teil, den das I-Frame vom linken Rand entfernt ist *g*... Der Screenshot macht es (hoffentlich) deutlich.
Jetzt lesen wir den Wert ab, der im Bild rot umkringelt ist - also die Breite. Wir tragen ihn anstelle des lilanen Wertes im Code ein.
Die Höhe funktioniert ähnlich: Wir markieren mit dem Beschnittwerkzeug den Teil, den das I-Frame vom oberen Rand entfernt ist:
Wert bei 'Höhe' ablesen, und damit den hellbraunen Wert im Code ersetzen.
Schritt 3: Weitere Einstellungen...
Zuallererst müssen wir hier natürlich bestimmen, welche Seite überhaupt im I-Frame angezeigt werden soll. Dafür ersetzen wir den hellblauen Wert durch die Adresse zu ebendieser Seite.
Jetzt dürfen wir dem I-Frame noch einen Namen geben ;-)... Das ist wichtig, damit ihr später Interaktionen zwischen mehreren Frames haben könnt! Benennt nie 2 Frames auf derselben Seite gleich!
Denkt euch einen klaren, verständlichen Namen aus, und schreibt ihn anstelle des blauen Wertes.
Der Rest sind eigentlich Feineinstellungen:
Ob man in dem I-Frame scrollen darf, bestimmt ihr, indem ihr entweder yes oder no bei dem grünen Wert eintragt.
Der dunkelrote Wer steht für die Dicke des I-Frames-Rahmen - meistens sieht es mit 0 am Besten aus, also lasst es besser *g*...
Mehr I-Frames!
Bei den allermeisten Designs braucht ihr wohl 2 I-Frames: Eins für das Menü, und eins fürs Main. Die Arbeitsschritte sind dieselben, aber gebt ihnen nicht dieselben Namen ;-).
Ich hoffe, ich konnte euch damit etwas helfen. Über Kommentare & Kritik zu dem Tutorial würde ich mich sehr freuen :-)
Paint Shop Pro 8.0
Wird aber in anderen Programmen der Reihe ähnlich funktionieren.
Bei Nachfrage bin ich gerne bereit, auch noch eines zu schreiben, wo nur Paint gebraucht wird ;-). Es handelt sich übrigens um ein Tutorial, das versucht, auch andere Browser als den IE zu berücksichtigen - Chroma-Filter wird daher nicht erklärt. Werde aber evtl. bald noch einen Nachsatz hinzufügen ;-).
Was ist ein I-Frame?
I-Frame ist eine kleine Abkürzung für Inline-Frame.
Damit können eine Art "Fenster" in die Website integriert werden... Da man alles genau platzieren kann, sieht es meistens auch optisch ansprechend aus ;-)
Demnächst werde ich hier auch eine kleine Beispielseite linken...
In diesem Tutorial benutzen wir übrigens kein reines I-Frame, sondern eines in Verbindung mit einer (unsichtbaren) DIV-Tabelle! Ich habe damit bis jetzt die besten Erfahrungen gemacht!
Der Code
Das ist der I-Frame-Code, den wir benutzen werden:
<div style="position: absolute; left: 687; top: 312">
<iframe src="Seite.html" name="Seite" width="216" height="423" frameborder="0" scrolling="yes">
</iframe>
</div>
Wir werden mit ihm als Basis arbeiten :-)... Alles, was fett und farbig gedruckt ist, muss im Laufe des Arbeitens angepasst werden - Stück für Stück. Ich hoffe, dass er bei allen Browsern reibungslos funktioniert, ich habe ihn bisher mit Mozilla Firefox und Microsoft Internet Explorer erfolgreich getestet ;-)... Weitere Ergebnisse diesbezüglich sind natürlich erwünscht.
Schritt 1: I-Frame-Größe
Zuerst bestimmen wir die Größe des Inline-Frames.
Dazu öffnen wir zuerst einmal unser PSP.
Außerdem müssen wir natürlich auch noch unser Design in dem Programm öffnen.
Wir wählen das Beschnittwerkzeug:
Es sollte in der Tool-Leiste links zu finden sein ;-).
Jetzt markieren wir damit - möglichst genau - einen Abschnitt des Designs, auf dem später eine Unterseite erscheinen soll.
Ein Doppelklick in den Bereich, und wir haben diesen Teil ausgeschnitten!
Nun gehen wir oben im Menü auf 'Bild' -> 'Größe ändern'. Eine Box, deren oberer Teil so aussieht, sollte erscheinen:
Das sind die Werte, die wir brauchen. Wir tragen Breite anstelle des orangenen Teil im Code ein, und Höhe anstelle des orangeroten Wertes. Speichert noch das Ausgeschnittene ab, damit ihr ihn später als Hintergrund im I-Frame benutzen könnt...
Das wäre erledigt ;-).
Schritt 2: Positionierung des I-Frames
Unser I-Frame hat nach Schritt 1 die richtige Größe, aber es liegt vollkommen falsch! Da müssen wir natürlich etwas ändern
...Zuerst müssen wir das 'Beschneiden' rückgängig machen. Oben im Menü auf 'Bearbeiten' -> 'Rückgängig Beschneiden'. Das Design sollte wieder wie vorher vor euch liegen ;-).
Mit dem Beschnittwerkzeug markieren wir jetzt den Teil, den das I-Frame vom linken Rand entfernt ist *g*... Der Screenshot macht es (hoffentlich) deutlich.
Jetzt lesen wir den Wert ab, der im Bild rot umkringelt ist - also die Breite. Wir tragen ihn anstelle des lilanen Wertes im Code ein.
Die Höhe funktioniert ähnlich: Wir markieren mit dem Beschnittwerkzeug den Teil, den das I-Frame vom oberen Rand entfernt ist:
Wert bei 'Höhe' ablesen, und damit den hellbraunen Wert im Code ersetzen.
Schritt 3: Weitere Einstellungen...
Zuallererst müssen wir hier natürlich bestimmen, welche Seite überhaupt im I-Frame angezeigt werden soll. Dafür ersetzen wir den hellblauen Wert durch die Adresse zu ebendieser Seite.
Jetzt dürfen wir dem I-Frame noch einen Namen geben ;-)... Das ist wichtig, damit ihr später Interaktionen zwischen mehreren Frames haben könnt! Benennt nie 2 Frames auf derselben Seite gleich!
Denkt euch einen klaren, verständlichen Namen aus, und schreibt ihn anstelle des blauen Wertes.
Der Rest sind eigentlich Feineinstellungen:
Ob man in dem I-Frame scrollen darf, bestimmt ihr, indem ihr entweder yes oder no bei dem grünen Wert eintragt.
Der dunkelrote Wer steht für die Dicke des I-Frames-Rahmen - meistens sieht es mit 0 am Besten aus, also lasst es besser *g*...
Mehr I-Frames!
Bei den allermeisten Designs braucht ihr wohl 2 I-Frames: Eins für das Menü, und eins fürs Main. Die Arbeitsschritte sind dieselben, aber gebt ihnen nicht dieselben Namen ;-).
Ich hoffe, ich konnte euch damit etwas helfen. Über Kommentare & Kritik zu dem Tutorial würde ich mich sehr freuen :-)
da kommt nur nen schwarzer hintergrund..
....