amber2012
07-10-2004, 09:22 AM
I made a tutorial for coding I-Frames as most of my friend's didn't know how to code them properly.
Well here is the tutorial :
.:Note:. Layout coding is very easy and in my opinion sort of fun not many people, however, agree. I have known how to make iframes for , roughly, 4 months now and i prefer iframes to frames because they look neater and they are the most popular now (i think) anyhow. I would like to make it clear that i ,myself, am not excellent at coding layouts, and if you find a fault in my tutorial i would be pleased if you emailed me about it, but these codes work on all of my layouts as you have probably seen many times before. This also only covers how to do one frame but you can copy and paste the code and repeat the process.
Requirements for this Tutorial : Mspaint, and notepad. These come standard with every computer, at least so i think anyway.
1. Open up notepade by going : Start >> Programs >> Accessories >> Notepad. Then copy and paste this code :
<LINK REL=stylesheet HREF="css.html" TYPE="text/css">
<title>Your site name </title>
<div style="position: absolute; top:0; left: 0">
<img src="thelayoutsname.gif">
<iframe FRAMEBORDER="0" BORDER=0 width="the width of the frame"
height="height of the frame" src="your page name"
name="menu" style="position:absolute; left: how far left; top:how far down" scrolling=yes marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=auto style="FILTER: chroma(color=#ff0000)" allowtransparency="true"></IFRAME>
</html>
2. Open up mspaint by going : Start >> Programs >> Accessories >> Paint. Then create a square with your mouse (looks like this ) where you want the frame to be , don't let go of your mouse but also (with the keyboard) press printshotscreen which looks like "Prt Scr" and can be found near the "F12" key.
3. Then go back to mspaint again and press CTRL+V (paste) and there at the bottom of the screen should be a number on the bottom corner we want the two numbers on the left first of all. On notepad It should say something like 721, 68 or something along those lines. Here is where it is in the code : name="menu" style="position:absolute; left: how far left; top:how far down" . Delete the "how far left" and instead put the number on the left there in my case it would be "721" and where it says "how far down" delete that and put the right number in my case also it would be "68".
4. Then go back to mspaint and check the two numbers at the bottom, but on the right this time.... it should be something like 340 x 157 .... just alter the numbers on this bit of the code :
<iframe FRAMEBORDER="0" BORDER=0 width="the width of the frame" height="height of the frame"
</html>
to what is on your layout, the same rules apply as last time the number on the left is the width, the number on the right the height" . *See the image above on the right hand-side*
5. All you have to do now is change the the layout name .gif to your layouts name and what you have saved it as in my opinion saving it as a ".gif" is the best but it's up to you. You will also need to change "your site's name" to your site's name obviously, your site's name this will appear on the top of the screen, most people also put the layout's version, e.g (but with no spaces): < title > *~*DollieDreams*~*~*. Vs 1.2 : Pastel Passion*~* < /title >
There you Go! You have finished coding your layout! I can now do it with no tutorial or any help whatsoever, and i haven't done it for very long at all so i'm sure you can, too. If you have had any problems at all email me and i will help you as best as i can. <33 Amber.
Well here is the tutorial :
.:Note:. Layout coding is very easy and in my opinion sort of fun not many people, however, agree. I have known how to make iframes for , roughly, 4 months now and i prefer iframes to frames because they look neater and they are the most popular now (i think) anyhow. I would like to make it clear that i ,myself, am not excellent at coding layouts, and if you find a fault in my tutorial i would be pleased if you emailed me about it, but these codes work on all of my layouts as you have probably seen many times before. This also only covers how to do one frame but you can copy and paste the code and repeat the process.
Requirements for this Tutorial : Mspaint, and notepad. These come standard with every computer, at least so i think anyway.
1. Open up notepade by going : Start >> Programs >> Accessories >> Notepad. Then copy and paste this code :
<LINK REL=stylesheet HREF="css.html" TYPE="text/css">
<title>Your site name </title>
<div style="position: absolute; top:0; left: 0">
<img src="thelayoutsname.gif">
<iframe FRAMEBORDER="0" BORDER=0 width="the width of the frame"
height="height of the frame" src="your page name"
name="menu" style="position:absolute; left: how far left; top:how far down" scrolling=yes marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=auto style="FILTER: chroma(color=#ff0000)" allowtransparency="true"></IFRAME>
</html>
2. Open up mspaint by going : Start >> Programs >> Accessories >> Paint. Then create a square with your mouse (looks like this ) where you want the frame to be , don't let go of your mouse but also (with the keyboard) press printshotscreen which looks like "Prt Scr" and can be found near the "F12" key.
3. Then go back to mspaint again and press CTRL+V (paste) and there at the bottom of the screen should be a number on the bottom corner we want the two numbers on the left first of all. On notepad It should say something like 721, 68 or something along those lines. Here is where it is in the code : name="menu" style="position:absolute; left: how far left; top:how far down" . Delete the "how far left" and instead put the number on the left there in my case it would be "721" and where it says "how far down" delete that and put the right number in my case also it would be "68".
4. Then go back to mspaint and check the two numbers at the bottom, but on the right this time.... it should be something like 340 x 157 .... just alter the numbers on this bit of the code :
<iframe FRAMEBORDER="0" BORDER=0 width="the width of the frame" height="height of the frame"
</html>
to what is on your layout, the same rules apply as last time the number on the left is the width, the number on the right the height" . *See the image above on the right hand-side*
5. All you have to do now is change the the layout name .gif to your layouts name and what you have saved it as in my opinion saving it as a ".gif" is the best but it's up to you. You will also need to change "your site's name" to your site's name obviously, your site's name this will appear on the top of the screen, most people also put the layout's version, e.g (but with no spaces): < title > *~*DollieDreams*~*~*. Vs 1.2 : Pastel Passion*~* < /title >
There you Go! You have finished coding your layout! I can now do it with no tutorial or any help whatsoever, and i haven't done it for very long at all so i'm sure you can, too. If you have had any problems at all email me and i will help you as best as i can. <33 Amber.