In this tutorial I will be explaining how to position an Iframe in a layout.
Requirements:
You Must have Paint Shop Pro 7 and knowledge of this programme.
Ability to understand html
Patience and Time to read through this lesson.
step One:
Save the image above into a folder on your computer because this is the image we will be using to make an iframe for.
step Two:
Open the image in PSP (paint shop pro), you should see a status bar below.
On the bottom-left you should see something similar to this(ignore the numbers you see):
On the bottom-right you should see:
The bottom-left is what we will be using to measure the exact position of the iframe, to do this we will use the crop tool .
Stepthree:
Now lets go back to the image. Using the crop tool start from the top left of the frame to the bottom right of the frame like the image below.
Now hold your mouse in that postion without lifting a finger do a print screen that button can be found next to F12 on your computer. Paste the screen print you did by right clicking and choosing "paste as new image". Now you should have a image similar to the one I have below.
If you can't see it properly zoom in by 1, it should be nice and clear now. At this point you should have released your fingers from your mousey lol. The reason for not realeasing is so that you could get a screen print of the coordinates on the bottom left.
Step Four:
See how I have circled the area to the bottom-left of the screen. that is where the measurements for your iframe is.
Heres what my coords are:
Your Iframe sizes may not be the same thats alright.
I have underlined the area in red which is what the width and the height of my Iframe is
mine is: Width 281 Height 192 so thats the size of my iframe sorted.
Step Five:
Now we need to position the Iframe in the right place. Look at the coords I have above now see where it says "85" that is how far up top my iframe will go and "10" means how far to the left my Iframe will be.
Ok now write down your coords as follows in notepad on your computer or on paper. Keep in mind your coords will be different in size depending on your cropping the following are mine
Width=281
Height=192
Top=85
Left=10
Step Six:
Now we need a code for our iframe right?
Copy and Paste the code in the textarea below into notepad
You will see the exact code for my Iframe layout, now replace all my coordinates with yours.
In the code you will see "iframetest.gif" that is the name of the main layout image
You will also notice this in your code: <iframe src="main.html" name="main" width="281" height="192" frameborder=0></iframe>
Where it says main.html that is the page that will open in the iframe you can change that to whatever html page you wish to open there.
Where it says name="main" that is the target name, so if you would like to target a link to the iframe you would put: <a href="http://www.yourdomain.com/link.html" target="main">Link here</a>
Your either really confused at this point or getting there right? Don't worry my first time was'nt so good either but after lots of practice I got the hang of it.
Now save this page as iframetest.html
Upload it to your website along with the iframetest.gif image. Do a preview and you should see something like this Click Here.
Finished!!.
I'm not a qualified html doctor. I didn't study html classes either. I learned all this by myself. I only try to help in the best and easiest way I know how. So don't complain if this tutorial doesn't work for you. It works for me....
.
