Have you ever dreamed of having IFrames for your website, but have never figured out
how to get them? Well, here's where you can!
.. What Are IFrames? ..
IFrames are very simple, even more simple than regular Frames.
I'm sure you've probably seen IFrames on many, many website, but if you would like a real-life example, just go visit 3BlondMice. But anyways, below is a very simple image of an iframe:
And there's your frames! Now the beauty of iframes is that you can make the iframe however big, long and transparent you want it - and best of all, you can specify exactly where on your page you want it. I love IFrames for all those reasons, but also because if you have your navigation on the page with the iframe in it, then to update/change the layout of your website all you have to do is just change that one page. Ahh, revel in the beauty.
.. Getting IFrames ..
There's not really that much involved in getting frames for your site. Just follow these
steps:
1) Make a new page. Name it INDEX. (NOTE: You can switch the names around, but the bold letters will indicate that I'm talking about the pages.)
2) Here's why you just did step #1:
The pages in the pictures going from the top down are: INDEX - HOME
The bright pink stands for the page.
3) Now you'll need to paste this into the INDEX page. (NOTE: You'll need to delete EVERYTHING that was one that page before, and paste this in it's place.)
4) Make sure that your HOME.html and INDEX.html links match what you named your pages.
5) In the code above, I've also included some extra codes you might appreciate/want. I've included a code where you can specify where you would like a large, singular background image to appear, as well as a table containing Menu links. If you don't want either of these codes, feel free to delete them.
6) To change the size/position of anything on your INDEX page, just change the numbers you see in the code. It's pretty self-explainatory, but if you have problems, feel free to ask me.
7) Just FYI, the above code uses DIV layers, which give you specific control of where your IFrame, Menu table or Background Image appears on your INDEX page. It is the DIV layers that give your new IFrame cross-browser compatibility (allowing your website to appear the same on all web browsers, except in Firefox there will be a bottom horizontal scrollbar).
5) To look at your new frames, visit your new page (the INDEX page)
6) To edit the Menu part of your website, just edit the MENU table in your INDEX page.
7) To edit the Homepage part of your website, do the same. (Just edit the HOME page)
.. Targeting Links ..
I have Targeted all the links in the above code to work properly, but if you would like a better understanding of how targeting works, just read below.
THE PROBLEM: Ok, so you've made some links on the Menu part of your INDEX page. But when you visit them, the page that was suppossed to be in the IFrame part of your page, appears in the INDEX part instead.
What you do is you type: Target="IFrameMain" . So now when you click on the links, the page your visiting should be on the IFrame part of your website. Why this name? If you look in your code, you will see that in the IFrame code tag, it says something like name="IFrameMain". This is the name of your IFrame. I have named it IFrameMain, but you can name it whatever you would like, as long as you make sure to change the names in the Targeted Links tags as well!
1) Ok, you know what do do, but where do you put the code? You type the Target="IFrameMain" into the MENU table part of your INDEX page. Your link will look something like this when your editing it:
<![CDATA[ <a href="http://www.whatever.com/what.html"> ]]>
The Target="IFrameMain" goes in between the end "'s and the >. So it will now look something like this:
<![CDATA[ <a href="http://www.whatever.com/what.html" Target="IFrameMain"> ]]>
2) Congrats! Now you have IFrames! Hope this helped you! And if you have any questions, just email me!
