Gegen Bilderklau - Das Original | Druckvorschau: I-Frames coden

Geschrieben von Delilah am 24.02.2005 um 14:59:

I-Frames coden

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 großes Grinsen

...
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 :-)

Geschrieben von Lena12345 am 26.02.2005 um 10:40:

guter

ich finde diesen Tutorial gut. Hab es gut geschafft und kann es jetzt selber *daumenhoch*

-lena-

Geschrieben von | Tshaky | am 26.02.2005 um 16:05:

Ich finde die Erklärung auch sehr gut ! Mit einem habe ich es jetzt geschaft !XD
Jetzt setze ich mich mal an zwei ran !
Ich hoffe es klappt !

ShA

Geschrieben von Knuffelponylein am 28.02.2005 um 16:17:

hab mal ne frage, kannst mal den code sagen wie ich den hg reinbekomme?

Geschrieben von Delilah am 28.02.2005 um 16:21:

Zitat:

Original von Knuffelponylein
hab mal ne frage, kannst mal den code sagen wie ich den hg reinbekomme?

Entweder du nimmst den Code von -Katja-, dann muss der Hintergrund nur weiß sein, oder du speicherst eben den I-Frame-Inhalt als eigenes Bild ab und nimmst ihn auf den Unterseiten als Hintergrundbild ;-)

Geschrieben von Knuffelponylein am 28.02.2005 um 16:23:

also bei 1page.ch gehts nur mit nem code. ich guck mal schnell

Geschrieben von Princess am 06.03.2005 um 15:12:

bei mir klappts irgendwie gar nicht! unglücklich

da kommt nur nen schwarzer hintergrund..

Geschrieben von Delilah am 06.03.2005 um 15:13:

Zitat:

Original von Princess
bei mir klappts irgendwie gar nicht! unglücklich

da kommt nur nen schwarzer hintergrund..

hmm...
Könntest du die Seite mal hochladen?
Oder uns den Quelltext geben?

Geschrieben von LittleSanny am 11.03.2005 um 19:57:

Wow, echt klasse!! ^^
Bei mir klappts jetzt wieder alles, dein Tut. hat wirklich geholfen!!! *knuddel*

Geschrieben von Twiggy am 12.03.2005 um 08:55:

Kannst du es mal erklären wie man das mit Paint macht???

Geschrieben von †Black Pearl† am 12.03.2005 um 10:17:

bei mir hats auch geklappt!
supi!
aber eine frage hät ich da... wenn ich jetzt dann in dem Menü ein hyperlink einfügen möchte.. was muss man dann machen? das ich auf die seite kommen möchte,aber der Hintergrund so bleibt und die Seite in den Main erscheint? ich wüsste ja etwas..so wie ich das hier verstanden habe, aber dann bräuchte man für das jeweils 2 Seiten und das find ich ein bisschen viel für nur die eine Seite die erscheinen werden soll.. ich hoffe ihr habt mich verstanden^^
Carpe Diem
Black Pearl

Geschrieben von Delilah am 12.03.2005 um 15:34:

Zitat:

Original von †Black Pearl†
bei mir hats auch geklappt!
supi!
aber eine frage hät ich da... wenn ich jetzt dann in dem Menü ein hyperlink einfügen möchte.. was muss man dann machen? das ich auf die seite kommen möchte,aber der Hintergrund so bleibt und die Seite in den Main erscheint? ich wüsste ja etwas..so wie ich das hier verstanden habe, aber dann bräuchte man für das jeweils 2 Seiten und das find ich ein bisschen viel für nur die eine Seite die erscheinen werden soll.. ich hoffe ihr habt mich verstanden^^

Danke

....

3 Seiten brauchst du schon, eben eine fürs Menü, eine fürs Home und eine, auf die die I-Frames sollen. Und dann für jede Unterseite nochmals eine.
Für die Links:
Du hast ja dem Mainframe, also da, wo 'Willkommen' steht etc., einen Namen gegeben.

Diesen Namen musst du in diesem Linkcode für Framename einsetzen:

code:
1:	<a href="www.Link.de" target="FRAMENAME">Link...</a>

Geschrieben von Kyli_pferdchen am 18.03.2005 um 23:39:

Hmmm....ja also...Ich habe das jetzt schon supi verstanden, hast du supi erklärt, nur wie baue ich das jetzt ein verwirrt

Geschrieben von Kyli_pferdchen am 19.03.2005 um 10:17:

Hi, also ich habe das jetzt mal versucht einzubauen nur irgendwie stimmt das nicht....was habe ich falsch gemacht: Die Seite wo ich es eingebaut habe

Geschrieben von Delilah am 19.03.2005 um 10:58:

Zitat:

Original von Kyli_pferdchen
Hi, also ich habe das jetzt mal versucht einzubauen nur irgendwie stimmt das nicht....was habe ich falsch gemacht: Die Seite wo ich es eingebaut habe

Sieht doch gut aus ;-)
Du hast nur bei Seite die Adresse zum Hintergrund eingesetzt, dabei muss dort die Seite mit dem Inhalt hin. Wenn du eine neue Seite bei Beepworld z.B. 'menu.htm' nennst [ohne die '], lautet die Adresse zu dieser Seite in deinem Falle: http://www.beepworld.de/members84/kylidolli/menu.htm
Und die müsstest du dann eben bei Seite einsetzen.

Geschrieben von Kyli_pferdchen am 20.03.2005 um 09:43:

Ja, aber wenn ich dann darein den Link zu der Seite mache, ist doch der Hintergrund nicht mehr transparent....Ich will ja das man hinter der Schrift noch den Hintergrund von Desi sieht...

Geschrieben von Pandora am 20.03.2005 um 10:44:

*g* THX! also ich habs nun eingebaut. Des hat auch geklappt, aber geht es das man den Hintergrund von den einzelnen Fensern, also z.b. bei mir des Iframe in dem sich des Hauptmenü öffnet, transparent macht? Im moment hab ich den Hg ausgeschnitten, aber des sieht man irgendwievoll, weils nicht aufeinander passt *lol*.
Glc
Panda

Geschrieben von Bounty am 23.03.2005 um 09:16:

Cool ich habs auch hinbekommen..*freuzz* dankesehr ..*knutsch*

Geschrieben von PonyBaby am 27.03.2005 um 13:27:

ich finde sie auch echt gut!!hat bei mir augeklappt!Kann man das auch bei beep andwenden??

Geschrieben von Delilah am 27.03.2005 um 13:46:

Zitat:

Original von PonyBaby
ich finde sie auch echt gut!!hat bei mir augeklappt!Kann man das auch bei beep andwenden??

Kann man ;-)
Allerdings, soweit ich weiß, nur im alten Texteditor, wo es nur den HTML-Modus gibt.