Frames were intoduced by Netscape, but will work fine with Internet Explorer. IFRAMES were introduced by Microsoft for Internet Explorer 3+ but will not work with older versions of Netscape (Netscape 6 supports IFRAMES but not all of the attributes) and are limited in the way that they work with MSNTV.
Note to MSNTV Users: IFRAMES will display on your web pages but the problem is that you can not confine the web page to be displayed inside the IFRAME with the width and height. This is due to the fact that MSNTV can not display the needed scrollbars to scroll though the displayed web page in the IFRAME.
IFRAMES work very similar to "frames" in that you "TARGET" your links to the "NAME" of the IFRAME, just like you would when using traditional "frames".
The "I" in IFRAMES stands for "inline", what this means is you can build a separate web page (or link to another web page on the internet) and set that web page via IFRAMES within your web page.
Below is a sample of an IFRAME within a web page. If you click the links above the IFRAME you will load separate test web pages into the IFRAME.
An important thing to remember is the width and height of the IFRAME itself will determine how much of the web page you will be displaying inside the IFRAME. I created my test web pages so they fit within the IFRAME but as you will see when you load the "Test Link For Page On The Internet" into the IFRAME, you will have scrollbars to use to view the entire web page. The width and height of the IFRAME is up to you, whatever you feel you would like to display on your web site is your choice.
Here is the html code for the sample IFRAME shown in this lesson.
<IFRAME SRC="http://www.draac.com/iframe-sample.html" TITLE="Sample IFRAME" SCROLLING="auto" NAME="sample" WIDTH="500" HEIGHT="150" ALIGN="center" FRAMEBORDER="yes">
</IFRAME>
Here is the html code for one of the sample IFRAME links shown in this lesson. Note the "TARGET" in this code and the "NAME" given in the above IFRAME code. The "TARGET" must point to the "NAME" of the IFRAME to load the web page into that IFRAME.
<A HREF="http://www.draac.com/iframe-sample1.html" TARGET="sample">Test Sample Web Page Number 1</a>
Here is a list of some of the attributes for IFRAMES, some we have used in this lesson, others we have not.
Note: "auto" stands for automatic.
It will only display the scrollbars when they are needed.
For a more complete list of IFRAME attributes Click Here.
You can set as many IFRAMES within a web page as you would like (don't go overboard with this). Just remember to give each IFRAME it's own unique "NAME" and then "TARGET" your links to the "NAME" of the IFRAME that you would like the web page to be displayed in.
You can also apply many of the CSS STYLE codes to IFRAMES. If you know CSS, then give those a try sometime. Here is a cool one, add a this style code (style="border:15px ridge #ff0000") your your IFRAME and it will have a great looking border.
<IFRAME SRC="http://www.draac.com/iframe-sample.html" TITLE="Sample IFRAME" SCROLLING="auto" NAME="sample" WIDTH="500" HEIGHT="150" ALIGN="center" FRAMEBORDER="no" style="border:15px ridge #ff0000">
</IFRAME>
For other CSS borders and style codes visit Easy CSS Tricks.
New It is possible to set an IFRAME on top of an image. I have done this at Draac.Com with the "PC Tool Box" that can be found on The Board here at Draac.com.
This is created by using tables. You create a simple table and use the image you want to set the IFRAME into as the background image of the table cell (<TD>), then place the IFRAME into that table cell.
Here is the image I used for the "PC Tool Box", ( Click Here To View The Image). You will see that I left a "note" on that image to Netscape 4+ users where I will be placing the IFRAME. This is because Netscape 4+ does not display IFRAMES, Netscape 6+ does somewhat support IFRAMES, but not all that well.
Along with my image I have also created a small web page that will be set into my IFRAME. To view this small web page Click Here. So together with my image, a small web page and tables, I created a "Tool Box" which is an IFRAME set on top of an image.
Below you will see my "PC Tool Box" and below that you will find the simple Html table coding used to make the "PC Tool Box". This is very easy to create and you can use any image that you would like.
Note: You will see in the coding for this lesson that I used a few breaks (<br>). This was needed to "tweak" the positioning of the IFRAME to where I wanted it set on top of the image. You may need to "tweak" the position of your IFRAME one way or the other to get the IFRAME to sit on top of your image just right.
|
|
