Gegen Bilderklau - Das Original | Tutorials und FAQ

Gegen Bilderklau - Das Original » Design, Website, Copyright » Homepagehilfe » Tutorials und FAQ » [HTML] I-Frames coden

» Hallo Gast [Anmelden|Registrieren]

Letzter Beitrag | Erster ungelesener Beitrag

Druckvorschau | Thema zu Favoriten hinzufügen

Seiten (4): [1] 2 3 nächste » ... letzte »

I-Frames coden

Autor

Beitrag

« Vorheriges Thema | Nächstes Thema »

Delilah Delilah ist weiblich

Gecko-Fan xD

Dabei seit: 18.02.2005
Beiträge: 905
Herkunft: Deutschland

I-Frames coden

Zitatantwort auf diesen Beitrag erstellen

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

__________________

JUST G R E E N.

24.02.2005 14:59

Nehmen Sie Delilah in Ihre Freundesliste auf

Lena12345 Lena12345 ist weiblich

nix...

Dabei seit: 09.02.2005
Beiträge: 927
Herkunft: Germany

guter

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

-lena-

26.02.2005 10:40

Nehmen Sie Lena12345 in Ihre Freundesliste auf

MSN Passport-Profil von Lena12345 anzeigen

| Tshaky | | Tshaky | ist weiblich

° It´s Springtime

Dabei seit: 09.02.2005
Beiträge: 473
Herkunft: Berlin

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

__________________

Nocky an die Macht ! XD
° GrezZ to alL °

26.02.2005 16:05

Nehmen Sie | Tshaky | in Ihre Freundesliste auf

Knuffelponylein Knuffelponylein ist weiblich

Mitglied

Dabei seit: 09.02.2005
Beiträge: 1.110
Herkunft: Bayern

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

__________________

28.02.2005 16:17

Nehmen Sie Knuffelponylein in Ihre Freundesliste auf

Delilah Delilah ist weiblich

Gecko-Fan xD

Dabei seit: 18.02.2005
Beiträge: 905
Herkunft: Deutschland

Themenstarter Thema begonnen von Delilah

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 ;-)

__________________

JUST G R E E N.

28.02.2005 16:21

Knuffelponylein Knuffelponylein ist weiblich

Mitglied

Dabei seit: 09.02.2005
Beiträge: 1.110
Herkunft: Bayern

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

__________________

28.02.2005 16:23

Princess Princess ist weiblich

all u need..

Dabei seit: 20.02.2005
Beiträge: 343
Herkunft: nrw

bei mir klappts irgendwie gar nicht! unglücklich

da kommt nur nen schwarzer hintergrund..

__________________

I'm not a Princess - But hey, if the crown fits..

06.03.2005 15:12

Nehmen Sie Princess in Ihre Freundesliste auf

Delilah Delilah ist weiblich

Gecko-Fan xD

Dabei seit: 18.02.2005
Beiträge: 905
Herkunft: Deutschland

Themenstarter Thema begonnen von Delilah

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?

__________________

JUST G R E E N.

06.03.2005 15:13

LittleSanny LittleSanny ist weiblich

Mitglied

Dabei seit: 05.03.2005
Beiträge: 7

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

11.03.2005 19:57

Nehmen Sie LittleSanny in Ihre Freundesliste auf

Twiggy Twiggy ist weiblich

Springreiterin

Dabei seit: 09.03.2005
Beiträge: 303

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

__________________

Du möchtest gerne Turniere reiten, hast aber nicht immer die Möglichkeit dazu? Dann bist du hier richtig.
http://www.online-turnierverein.de.vu

12.03.2005 08:55

Nehmen Sie Twiggy in Ihre Freundesliste auf

†Black Pearl† †Black Pearl† ist weiblich

Mitglied

Dabei seit: 09.02.2005
Beiträge: 355

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

__________________

www.reitstall-esperanza.de.ms

12.03.2005 10:17

Nehmen Sie †Black Pearl† in Ihre Freundesliste auf

Delilah Delilah ist weiblich

Gecko-Fan xD

Dabei seit: 18.02.2005
Beiträge: 905
Herkunft: Deutschland

Themenstarter Thema begonnen von Delilah

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>

__________________

JUST G R E E N.

12.03.2005 15:34

Kyli_pferdchen Kyli_pferdchen ist weiblich

LaDaLiI...

Dabei seit: 12.03.2005
Beiträge: 33
Herkunft: Schwarzwald

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

__________________

18.03.2005 23:39

Nehmen Sie Kyli_pferdchen in Ihre Freundesliste auf

Kyli_pferdchen Kyli_pferdchen ist weiblich

LaDaLiI...

Dabei seit: 12.03.2005
Beiträge: 33
Herkunft: Schwarzwald

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

__________________

19.03.2005 10:17

Delilah Delilah ist weiblich

Gecko-Fan xD

Dabei seit: 18.02.2005
Beiträge: 905
Herkunft: Deutschland

Themenstarter Thema begonnen von Delilah

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.

__________________

JUST G R E E N.

19.03.2005 10:58

Kyli_pferdchen Kyli_pferdchen ist weiblich

LaDaLiI...

Dabei seit: 12.03.2005
Beiträge: 33
Herkunft: Schwarzwald

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

__________________

20.03.2005 09:43

Pandora Pandora ist weiblich

Fee <3

Dabei seit: 11.03.2005
Beiträge: 3.427
Herkunft: Solnhofen

*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

__________________

"Wir werden uns wiederfinden
im See
du als Wasser
ich als Lotusblume

Du wirst mich tragen
ich werde dich trinken"
Rose Ausländer

20.03.2005 10:44