Next I would like you to take a look at iframe.html. So let's double-click on that to open it up. Now frames are I guess they sort of have gone out of popularity. People aren't using them too much any more. But people are using something called an iframe, which is sort of a window inside your window, and we have an object here in the frames portion of the objects palette that represents an iframe. It's full name is actually Inline frame. Now we are going to take that and drag it right into our page here. Now notice I had given you some instructions about what size you should make it. So I am going to actually go over and get my Inspector Palette and bring it out here for a second. Okay. And the instruction say, that we want to make this iframe 320 pixels wide by 220 pixels high. So here are the height and width attributes. So let's just go ahead, and I am going to select this and replace it with 320. Then I will tab over to the next input field, and make this 220. And I will tab out of it, and then we have got it, so we move this back out of the way, and here we have got our iframe. I am going to scroll up a bit so we can see it more clearly. The next step is to define what page is it actually going to show inside of this iframe.
So let me grab the top of my page and move it out of the way a bit so I can see the contents of my website, and I have got a page here called iframe.contents and that's the one I want to link up to the iframe itself here. And I can do that quite easily by either using the Inspector Palette, and using the Fetch URL tool, or by simply grabbing this, and dragging it on top of the iframe. Now it gives me a little preview of what that's going to look like, but in order to get a better idea of how it appears, let's actually go look at it in the preview mode. So I'll move this back, and click preview, and here we have it. I am going to scroll up a bit so you can see. Hello, I'm the contents of the iframe. Isn't that neat? And you can scroll up and down. A little window within a window, that's an iframe.
Comments