Einfache IFrame-Layouts Coden mit PhotoFiltre o.ä.

pcdfan

Also, da viele ja immer noch nicht wissen wie man codet, beschreibe ich es hier jetzt mal möglichst ausführlich!

1. Öffne den Editor und dein Gafik-Programm (bei mir PhotoFiltre)
2. Kopiere den Text hier in deinen Editor (markieren -> rechtsklick ,,Kopieren" -> Editor öffnen und rechtsklick ,,Einfügen"):

<html>
<head>

<title>%titel%</title>

<style type="text/css">

</style>

</head>

<body bgcolor="#ffffff" topmargin="0" leftmargin="0">

<img border="0" src="http://img3.myimg.de/Bougainvilliae89.gif" scroll="no" bgproperties="fixed"
ALIGN="left" STYLE="position: absolute; top: 0; left: 0" width="1024" height="610">

<div style="overflow: auto; position: absolute; width: 597; height: 320; left: 84; top: 226">
<font face="Verdana" size="2"><font color="#000000">%content%</font></font>
</div>

<div style="overflow: auto; position: absolute; width: 156; height: 213; left: 789; top: 328">
<font face="Verdana" size="3" color="#000000">%navigation_v%</font>
</div>

So...also ich Teile den Code mal in 3 Teile! 1. Teil ist ganz oben, von den Scrollbalken bis zum Aussehen des Desis.

Der 2. Teil ist %content% was soviel wie Main heißt.

Der 3. Teil ist %navigation_v% was soviel wie Navigation heißt.

Am besten fängt man mit dem Main an, die Zahlen muss man dann auch im 2. Teil eintragen, wenn man sie im 1. oder 3. Teil einträgt steht im main entweder die Links oder es wird in irgendeiner Weise das Design verändert.

Das ist mein Code, den ich für mein Design mal gemacht habe.

3. Lade irgendwo (z.B. bei http://www.myimg.de) das Design hoch und schreibe den Direktlink im 2. Teil anstatt der bisherigen Bildaddresse
src="http://img3.myimg.de/Bougainvilliae89.gif"
aber lösche nur http://img3.myimg.de/Bougainvilliae89.gif!!!!!!!!!!!!
Dort musst du dann nämlich deine Direkt-Addresse eintragen!

3. Nun öffne dein Design in deinem Grafik-Programm (bei mir PF)

4. Ziehe in deinem Main einen Kasten, nicht direkt auf dem Rand bitte, sonst hängt der Text total am rand und das sieht blöd aus!

5. trage die Werte unten, bei mir ,,H" und ,,B" in deinem 2. Teil bei ,,Hight" und ,,Widht" ein. Das müsste dann so aussehen (ohne den 1. und 3. Teil)

<div style="overflow: auto; position: absolute; width: 599; height: 532; left: 84; top: 226">
<font face="Verdana" size="2"><font color="#000000">%content%</font></font>
</div>

6. Jetzt kommt der etwas kompliziertere Teil!

Ziehe nun vom oberen linken Rand des Mains einen weiteren Kasten bis zum Ende des Designs!

Doch vorsicht! Du darfst den Kasten soviel nach unten ziehen wie du willst, aber bloß NICHT NACH OBEN!!!!! Jetzt stehen unten wieder die Werte. Trage bei left: die Zahl ein die jetzt bei B= steht! Nun weißt du Left.

7. Ziehe nun vom oberen rechten Rand deines jetzigen Kastens wieder einen Kasten, diesmal von dort aus nach OBEN!

Ob du noch nach links oder rechts ziehst ist egal, du darfst NUR NICHT NACH UNTEN einen Kasten ziehen!!!

Der Wert der jetzt bei ,,H=" steht musst du bei top: eintragen!

8. Mache nun das gleiche mit der Navi, nur im 3. Teil eintragen.

Tipps:

Schriftart ändern: Wenn du deine Schriftart ändern willst, schreibe den Schriftart-Name in deinen Teil 2 oder 3 unten anstatt ,,Verdana".

Schriftgröße ändern: Wenn du deine Schriftgröße ändern willst, schreibe die Schriftgröße in deinen Teil 2 oder 3 unten anstatt 1,5 oder 2.

Scrollbalkenfarbe ändern: Wenn du deine Scrollbalkenfarbe ändern willst tippe mit der Pipette (am besten) auf den Hintergrund deines Mains/deiner Navi. Dann klicke auf die farbe und der Hexcode müsste da stehen, den setzt du dort beim rot-markierten ein:

scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #ffffff;

Achja, bevor ich es vergesse, du musst noch die richtige BILDGRÖßE angeben!

Schaue nach welche Größe dein Desi hat und trage die Größe dann bei:

<img border="0" src="http://img3.myimg.de/Bougainvilliae89.gif" scroll="no" bgproperties="fixed"
ALIGN="left" STYLE="position: absolute; top: 0; left: 0" width="1024" height="610
">

ein.

Ich hoffe das ich helfen konnte, lg pcdfan

Arschkeks

Cooles tut danke...jetzt hab ich es kappiert xD

pcdfan

Danke. Hab jetzt auch noch dazu gelernt und kann jetzt auch Scrollbalken ändern xD

..Sunshine

Du bist echt Klasse! Jetzt kann ich auch bei Oyla.de Einbauen. *HeHe*
Sehr verständliches Tut.^^

Lieben Gruß
Sunny

Tigerlilly

Gehört wohl eher in den Homepagebereich, ich verschiebe mal.

Patricia

Btw, der Effekt mit den andersfarbigen Scrollbalken funktioniert nicht im Mozilla Firefox. Wollte ich nur mal schnell gesagt haben. Augenzwinkern

. Ansonsten ist es aber ein schönes Tutorial, sehr gut verständlich. (=

Alex96

he vielen vielen dank pcdfan für deine super hilfe beim coden mit Photo Filtersuper erklärt auser ein oder 2 sachen die man aber beim denken leicht raus krigen kann.

3 Frage:

1: Wen du codest und dem Besizter des gecodete Desinges gibst und der es einbaut passt das gleich auf den schlag oder muss man da noch a bissal basteln?

2: Wie macht man das coden mit der navi links?

3: Kann man mit Photo Filter auch 3 Frames coden?

LG Alex

Amy_S

Hi!
Also zuerst super erklärt abe ri-wie hab ich es doch noch nicht wirklich hinbekommen...könntest du mir vll. helfen? ICh kam nicht weiter bis zu Punkt 6 udn jetzt kapier ich dort garnichts mehr.

So sieht mein Code aus:

<html>
<head>

<title>%titel%</title>

<style type="text/css">

</style>

</head>

<body bgcolor="#ffffff" topmargin="0" leftmargin="0">

<img border="0" src="http://img5.myimg.de/Herbsthintergrunde5331.jpg" scroll="no" bgproperties="fixed"
ALIGN="left" STYLE="position: absolute; top: 0; left: 0" width="566" height="459">

<div style="overflow: auto; position: absolute; width: 597; height: 320; left: 84; top: 226">
<font face="Verdana" size="2"><font color="#000000">%content%</font></font>
</div>

<div style="overflow: auto; position: absolute; width: 151; height: 230; left: 789; top: 328">
<font face="Verdana" size="3" color="#000000">%navigation_v%</font>
</div>

_________________________________________________________
Das bild sieht so aus:

katjaa

Ich code auch mit Photofiltre. leider verstehe ich deinen Tut nicht wirklich.
Für mich gibt das wenig Sinn.
Ich habe mir den Code von Ladüüü ausgeborgt und dann die Coordinaten per Photofiltre geholt und eingetragen. smile

Probiers mals mal so

Öffne dein design in Photofiltre und zieh mit dem Makierungstool deinen Frame nach.

Dann findest du in der untersten leiste Koordinaten

Das blau hinterlegte
sind deine left & top Koordinaten,
die erste Zahl vor dem Komma ist er Leftkoordinat den fügst du hier
left: KOORDINATENpx;
ein
die 2. Zahl hinter dem Komma fügst du hier:
top: KOORDINATENpx;
ein.

Das grün hinterlegte sind deine
width & height Koordinaten in denen du die höhe und breite der frames einstellst

Die 1 Zahl vor dem x ist die Breite
die fügst du hier ein:
width="ZAHL"
Die 2. Zahl hinter dem x fügst du hier ein:
height="ZAHL"

so viel zu dne Koordinaten weiteres findest du in dem Tut
[Tutorial] ein Design in Paint coden - UP!

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:

<html>
<head>
<title>Seitenname</title>
<BODY marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" scroll="no">
<img src="design.jpg">

<div id="Layer1" style="position: absolute;  left: 43px; top: 119px;">
  <iframe src="menue.html" name="frame" width="89" height="202" frameborder=0 scrolling="auto" noresize style="border: 0px" style="FILTER: chroma (color=#ffffff)" ;>
  </iframe>
</div>

<div id="Layer1" style="position: absolute;  left: 43px; top: 119px;">
  <iframe src="main.html" name="frame" width="89" height="202" frameborder=0 scrolling="auto" noresize style="border: 0px" style="FILTER: chroma (color=#ffffff)" ;>
  </iframe>
</div>

</body>
</html>

Danke Ladüüü für den Code. smile

pcdfan

Zitat:

Original von Alex96
he vielen vielen dank pcdfan für deine super hilfe beim coden mit Photo Filtersuper erklärt auser ein oder 2 sachen die man aber beim denken leicht raus krigen kann.

3 Frage:

1: Wen du codest und dem Besizter des gecodete Desinges gibst und der es einbaut passt das gleich auf den schlag oder muss man da noch a bissal basteln? Meistens passts direkt

2: Wie macht man das coden mit der navi links? genau gleich^^

3: Kann man mit Photo Filter auch 3 Frames coden? Jap^^ aber ich kann nur noch News-Box, Untermenü kann ich nich

LG Alex

Zitat:

Orginal von Amy_S
Hi!
Also zuerst super erklärt abe ri-wie hab ich es doch noch nicht wirklich hinbekommen...könntest du mir vll. helfen? ICh kam nicht weiter bis zu Punkt 6 udn jetzt kapier ich dort garnichts mehr.

So sieht mein Code aus:

<html>
<head>

<title>%titel%</title>

<style type="text/css">

</style>

</head>

<body bgcolor="#ffffff" topmargin="0" leftmargin="0">

<img border="0" src="http://img5.myimg.de/Herbsthintergrunde5331.jpg" scroll="no" bgproperties="fixed"
ALIGN="left" STYLE="position: absolute; top: 0; left: 0" width="566" height="459">

<div style="overflow: auto; position: absolute; width: 597; height: 320; left: 84; top: 226">
<font face="Verdana" size="2"><font color="#000000">%content%</font></font>
</div>

<div style="overflow: auto; position: absolute; width: 151; height: 230; left: 789; top: 328">
<font face="Verdana" size="3" color="#000000">%navigation_v%</font>
</div>

Also du musst .. du hast ja einen Main-Kasten gezogen, stimmts? Dann musst du einfach vom oberen, linken Eck des Kastens einen neuen Kasten bis zum linken Designrand ziehen Dann steht da unten Left oder so und das musst du dann nehmen

@Katjaa:

Das ist der vereinfachte Code, mit dem kann man z.B. keine Scrollbalken-Effects o.ä. einbauen <3

Twister

Gut Erklärt aber stimmt dieser Code?

<html>
<head>

<title>%VRH Caracas%</title>

<style type="text/css">

</style>

</head>

<body bgcolor="#ffffff" topmargin="0" leftmargin="0">

<img border="0" src="http://i26.photobucket.com/albums/c110/MaraHonegger/Design.png" scroll="no" bgproperties="fixed"
ALIGN="left" STYLE="position: absolute; top: 0; left: 0" width="1024" height="610">

<div style="overflow: auto; position: absolute; width: 634; height: 593; left: 208; top: 263">
<font face="Verdana" size="2"><font color="#000000">%content%</font></font>
</div>

<div style="overflow: auto; position: absolute; width: 128; height: 572; left: 7; top: 279">
<font face="Verdana" size="3" color="#000000">%navigation_v%</font>
</div>

pcdfan

Also ich hab dir das Desi gecodet und in deinem anderen Frage-Thread steht die Antwort Augenzwinkern

katjaa

die alternative wäre das alles in ne css-datei zu packen und zu verlinken, aber für die die oyla haben oder 1page is es so besser. smile

Alex96

Zitat:

Original von pcdfan
[quote]Original von Alex96
he vielen vielen dank pcdfan für deine super hilfe beim coden mit Photo Filtersuper erklärt auser ein oder 2 sachen die man aber beim denken leicht raus krigen kann.

3 Frage:

1: Wen du codest und dem Besizter des gecodete Desinges gibst und der es einbaut passt das gleich auf den schlag oder muss man da noch a bissal basteln? Meistens passts direkt

2: Wie macht man das coden mit der navi links? genau gleich^^

3: Kann man mit Photo Filter auch 3 Frames coden? Jap^^ aber ich kann nur noch News-Box, Untermenü kann ich nich könntest du das vill. auch mal versuchen zu erklären??? wehr voll nett

Man ich weis ich nerve aber kann man mit Photo Filter auch 1page oder repage coden

LG Alex

Lara*

Ich liiiiebe diesen Tut smile

Kam mit der 1. Erklärung super zurecht!
Tausend Dank smile

Lara*

Kann vielleicht irgendwer das auch mit Untermenü?
Wäre super Augenzwinkern

Broken.Shine <3

Suuuper Tut. <3
Endlich kann ich meine Designs mal selbst coden *_*
Nur eine Frage...kann man auch noch die Breite des Scrollbalken verändern?Der is so dick :/

Üntermenü erstellen is ziemlich leicht smile

-> http://css.maxdesign.com.au/listamatic/

Eine suuper Homepage,die eigentlich ziemlich verständlich ist smile

Lg Nine. <3

Jaysen

Hey ich habs hinbekommen und wollte mal fragen wie ich das jetzt hinbekomme das es genau im Frame bereich ist und nicht außerhalb oder so...

Jaysen

Nein ich meine das ich den Frame auf die Richtige stelle schiebe moment kanns dir zeigen!
kommt gleich

Ich habs hinbekommen aber die Seite wird da nicht angezeigt....

grace.

Mmhh... wieso wird mein Menü nicht angezeigt? Ist da etwas nicht richtig verlinkt?
http://www.venice.bplaced.net/

CODE MENÜ

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:

<html>
<head>
<link href="http://venice.bplaced.net/menu.css" type="text/css" rel="stylesheet">
<title>Trakehnergestüt Venice</title>
</head>

<body>
<b>WILLKOMMEN</b><br>
<a href="http://venice.bplaced.net/start.html" target="main">Startseite</a><br>
<a href="http://venice.bplaced.net/impressum.html" target="main">Impressum</a><br>
<a href="http://venice.bplaced.net/news2.html" target="main">Neuigkeiten</a><br>
<a href="http://venice.bplaced.net/termine.html" target="main">Termine</a><br>
<br>

<b>KONTAKT</b><br>
<a href="http://venice.bplaced.net/gb.php" target="main">Gästebuch</a><br>
<a href="http://venice.bplaced.net/links.html" target="main">Links</a><br>
<br>

<b>GESTÜT</b><br>
<a href="http://venice.bplaced.net/gestuet.html" target="main">Impressionen</a><br>
<a href="http://venice.bplaced.net/zuchtangebot.html" target="main">Zuchtangebot</a><br>
<a href="http://venice.bplaced.net/dressurstall.html" target="main">Dressurstall</a><br>
<br>

<b>INFORMATIONEN</b><br>
<a href="http://venice.bplaced.net/bedingungen.html" target="main">Geschäftsbedingungen</a><br>
<a href="http://venice.bplaced.net/dienstleistungen.html" target="main">Dienstleistungen</a><br>
<a href="http://venice.bplaced.net/bestellung.html" target="main">Samenbestellung</a><br>
<a href="http://venice.bplaced.net/virtuell.html" target="main">virtuelle Daten</a><br>
<br>

<b>PFERDE</b><br>
<a href="http://venice.bplaced.net/hengste.html" target="main">Hengste</a><br>
<a href="http://venice.bplaced.net/stuten.html" target="main">Stuten</a><br>
<a href="http://venice.bplaced.net/aufzucht.html" target="main">Aufzucht</a><br>
<a href="http://venice.bplaced.net/verkauf.html" target="main">Verkauf</a>

</body>
</html>

CODE INDEX

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:

<html>
<head>
<title>Trakehnergestüt Venice</title>
</head>
<body style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(bg.png); PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px">

<style="BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; LEFT: 30px; BORDER-LEFT: 0px solid; WIDTH: 160px; BORDER-BOTTOM: 0px solid; POSITION: absolute; TOP: 160px; HEIGHT: 408px" src="menu.html" name='menu' scrolling='no' frameborder='0'>

<style="BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; LEFT: 200px; BORDER-LEFT: 0px solid; WIDTH: 600px; BORDER-BOTTOM: 0px solid; POSITION: absolute; TOP: 120px; HEIGHT: 448px" src="main.html" name='main' frameborder='0'>

<style="BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; LEFT: 810px; BORDER-LEFT: 0px solid; WIDTH: 160px; BORDER-BOTTOM: 0px solid; POSITION: absolute; TOP: 160px; HEIGHT: 408px" src="news.html" name='news' scrolling='no' frameborder='0'>

<img src="http://i42.tinypic.com/ohqtj6.gif" width="1000" height="600" border="0" alt="Design" > 
</body>
</html>

nächste Seite

Forensoftware: Burning Board, entwickelt von WoltLab GmbH