Lesson 7 - iFrames

Inline or "floating" frames are an implementation of frames which allow new pages to be opened within another page. They may be placed anywhere on the page and there may be more than one. The <iframe> tag has several properties that must be set. The src property assigns an html file that is to be shown when the page is displayed. To change the contents dynamically the name property must be set because that becomes the target when a link is used.

I am going to create a page that will have a list of movie clips that, when selected, will play in the iframe. To create an iframe I go to the file menu and select Insert>HTML>Frames>IFrame.

Next, I go to the Code view and click next to the iframe, within the tag, and then hit the spacebar to bring up the list of properties associated with iframes.

I select the src property and set it to an image that will be shown when the page is first brought up. I don't want to load a video clip because it takes takes longer to load the page. Next, I set the name that will be used as the target by the links. I set a width and height that is larger than any of the clips and I set the allowtransparency so that the background color of the body will show through thereby blending in the iframe. This is essential for IE.

I create the links and select the pages that have the embedded video code and assign the target to the name of the iframe.

<body>
<div id="container">
  <p>&nbsp;</p>
  <h1>Enjoy the Clips...</h1>
  <br />
  <ul>
    <li><a href="SNLskit.html" target="ifr">Tina Fey as Sarah Palin SNL</a></li>
    <li><a href="MumCake.html" target="ifr">Mum arriving with cake</a></li>
    <li><a href="SNLPerot.html" target="ifr">Perot dumps Stockdale SNL</a></li>
    <li><a href="WhosOnFirst.html" target="ifr">Who's on first? Abbott & Costello</a></li>
  </ul>
  <div style="clear:none; text-align:center;">
    <iframe src="enjoyMoviesStill.html" name="ifr" width="550" height="450" 
            align="middle" scrolling="auto" frameborder="0" allowtransparency="true"

    </iframe>
  </div>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
</body>
</html>

Lesson 10 - iFrames