Warning: include(/home/.lurky/jenni/star-girl.org/skins/cookiecheck.php) [function.include]: failed to open stream: No such file or directory in /home/jenni/star-girl.org/pages/tutorials/website/advanced/iframes.php on line 1
Warning: include() [function.include]: Failed opening '/home/.lurky/jenni/star-girl.org/skins/cookiecheck.php' for inclusion (include_path='.:/usr/local/lib/php:/usr/local/php5/lib/pear') in /home/jenni/star-girl.org/pages/tutorials/website/advanced/iframes.php on line 1
Warning: include() [function.include]: Filename cannot be empty in /home/jenni/star-girl.org/pages/tutorials/website/advanced/iframes.php on line 2
Warning: include() [function.include]: Failed opening '' for inclusion (include_path='.:/usr/local/lib/php:/usr/local/php5/lib/pear') in /home/jenni/star-girl.org/pages/tutorials/website/advanced/iframes.php on line 2
I-frames/coding layouts
1. First of all open up the layout you want to make an i-frame on. Basically, all you need is a main picture, just add some sort of square for an i-frame and navigation words/text/whatever. If you don't know what I mean, click here. That's a good example of a layout you can make an i-frame of. The content will show up in the grey-black square. Make sure you have a part of your pic coloured lighter or darker (the i-frame part)...this helps you to see the text and define the page.
2. Now add this code to a page called layout.html or something similar:
3. Now you need to change the file names and the # signs. So, first of all change the width=# to the width of your i-frame, and also change the height. Remember to delete the '#'. If you aren't sure what the width and height of your i-frame are, crop the background out of your image like this (or open up your background image if you've already saved it):
4. Now look at the bottom toolbar in Paint or something, and the first number written on the right should be the width of your image, and the second the height.
5. Okay, change the src=" blog.html" to the right URL, yours might be "main.html" for example, or if you're using GM, "http://your-site.com/gm/?" or something.
6. Change the "the-image-you-want-to-make-an-iframe-of.gif" to your actual, main layout image name. Mine would be kitten.gif for example.
7. The name=IFRAME part you don't have to change unless you have more than one i-frame on the page - for example you might have a menu that's an i-frame and your pages show up in a different i-frame. If you're using more than one i-frame change this in every i-frame code to say IFRAME2, 3, 4 etc.
8. The next part to change is the positioning numbers. If you aren't sure about how to do this click here.
9. Go to your blog.html page (or whatever you called the main page in step 5), and open it up. Put this code into the page:
10. Change the body background="your-bg.gif" to the URL of your background image. If you don't have a background image (i.e., something like the background I showed you in step 3), then copy and paste your main image into a graphics program, crop the background out (the grey/black square you should have) and save as bg.gif or something.
Now view your layout.html and everything should be set up!
Troubleshooting
It's hard getting the hang of i-frames the first time, but don't give up! If you're really struggling, you can ask me for help. Below I've included some popular problems that people come to me with:
I've completed the tutorial but my images won't show up! What have I done wrong?
Just make sure you're uploaded your images to your web site. A lot of people forget this. If you've already uploaded the images, check the file paths you wrote in the layout.html page to make sure you spelt everything right.
I can't get my positioning of the i-frame right?
If your positioning isn't exactly right, keep messing with the left= and top= numbers, and preview your page until you get it spot on. It will look really weird if it's not exactly right because your background won't line up, so it's very important to get this step right!
When I click a link, it doesn't open in the i-frame I want it to, but in the same place?
To make your link open in the right place, put target="IFRAME" in your link code, or copy this code:
If you called your i-frame name 'IFRAME2' or something, then put IFRAME2 instead of IFRAME.
Warning: include() [function.include]: Filename cannot be empty in /home/jenni/star-girl.org/pages/tutorials/website/advanced/iframes.php on line 42
Warning: include() [function.include]: Failed opening '' for inclusion (include_path='.:/usr/local/lib/php:/usr/local/php5/lib/pear') in /home/jenni/star-girl.org/pages/tutorials/website/advanced/iframes.php on line 42