• FrontPage Index
• Related Topics:

Sometimes lines of code can be very long! Where I have had to break a line of code to fit it on the page I have used the symbol to indicate that the line below is a continuation and that the code should be written as a single line

<Blah blah blah 
blah>

should be written:

<Blah blah blah blah>

The Inline Frame

This is a really simple tool, being nothing more than an HTML tag - <IFRAME>. Unfortunately, it isn't recognized by Netscape versions earlier than Netscape 7 but it works fine in Internet Explorer so I'm going to use it and hope the Browser Wars don't last much longer.

Here's one of my holiday pictures...

It's a composite of six other pictures stitched together in Paint Shop Pro to make a panorama. The picture shows the stunning Cirque de Navacelles in the Languedoc region of southern France. The picture would look even better if I could show it at full size - so why don't I do that? It's because of Green's 9th Rule of Web Design: "Don't make people scroll horizontally!"

If I enlarged this image it wouldn't fit on the screen. The page would grow to fit the picture and the text would flow to fit the page. But there's a trick that lets you scroll just the image without compromising the design of your page... the Inline Frame. 

Here is the same image inside a Inline Frame. You may have come across text frames in HTML forms. The Inline Frame works pretty much the same way except it can be used anywhere on the page. It doesn't have to be associated with a form. You can use it to control the display size of an image, or a section of text (see the example below).

As with a regular image, you can wrap text around it. You can opt to show borders or not, and scrollbars will appear if needed unless you say you don't want them. So, let's see how it's done...

FrontPage 2002 users will find that they have Inline Frames on the menu (at last!). I have included a FrontPage 2002 Inline Frames Tutorial further down the page.

Using the <IFRAME> Tag

The <IFRAME> tag is used with various attributes to enclose a link to a file. This file could be a picture or something else, such as an HTML page or a *.TXT file. Here's the code I used to display the picture above...

<IFRAME frameBorder=0 height=166 width=175 hspace=10 marginHeight=0 
 marginWidth=1 align="left" src="../images/cirque.jpg"></IFRAME>

Just for the hell of it, here's another image...

And here is the same image in a Inline Frame...

This time I centered the frame on the page. Here's the code...

<p align="center">
<IFRAME frameBorder=0 height=66 width=75 marginHeight=0 marginWidth=1 
 src="../images/psptut02banner.jpg"></IFRAME>

The next frame contains a link to another web page. It shows a vertical scroll bar but not a horizontal one, because the page contains only text. Text will wrap to the width of the frame so a scroll bar isn't needed. I also gave the frame a border.

 

Here's the code for this frame...

<p align="center">
<IFRAME frameBorder=1 height=100 width=50% marginHeight=0 marginWidth=1 
 src="lorem.htm">[Netscape users should click <a href="lorem.htm">
 here</a> to see what they are missing]</IFRAME>

You have probably noticed the the HTML for a Inline Frame consists of two tags, the opening <IFRAME> tag and the closing </IFRAME> tag, but until now I've not put anything between them. The details of the frame and its contents are all defined by the attributes within the opening tag, so why the closing one? Remember that older browsers don't recognize Inline Frames. Have a look at the last piece of code. I've put a message between the tags - it happens to contain a link to the page being displayed in the frame. You will also notice that if you can see the frame you can't see the message. Conversely, if you can't see the frame you see the message instead. The Inline Frame allows you to put a message in the code for the benefit of users who can't see Inline Frames.

Tips for using Inline Frames

• Netscape can't see Inline Frames so the visitor sees nothing. Make sure you give your visitor an alternative, such as a link to the original file. Put this between the <IFRAME> and </IFRAME> tage so it is hidden from users who can see Inline Frames.
• You can't use the alt attribute to specify "alternative text" for an image in a Inline Frame (shame!).
• When defining the height of the frame, remember to add 16 pixels for the height of the horizontal scrollbar. Otherwise an unwanted vertical scrollbar will appear.
• Even FrontPage 2000 hasn't heard of the <IFRAME> tag so you'll have to add the code manually. Internet Explorer, which FrontPage uses to preview pages does recognize it so you'll have to switch to Preview or (better) Preview in Browser to see the result of your work. If you are working in FrontPage's Normal (WYSIWYG) view and have the Show All button switched on you will see these icons to indicate the presence of unrecognized code (otherwise you'll see nothing)...

Creating Inline Frames with FrontPage 2002

Microsoft has finally recognised the existence of Inline Frames and included a tool for their creation in FrontPage 2002. If you haven't read the rest of this page I suggest you do so anyway - you can add manual tweaks to the code for greater control over your Inline Frames than the FrontPage tool gives you.

Step 1: Insert the Frame
	First, prepare a suitable page or image to go inside your Inline Frame. Place your cursor at the position on your web page where you want your Inline Frame to appear. Choose Insert > Inline Frame. This creates an empty Inline Frame on the page...
Step 2: Fill the Frame What are you going to put in your frame? Frames can display images or other pages.  If you want to display a web page, but don't have one yet, you can create one now by clicking the New Page button on the frame. FrontPage creates a blank page for you and you can begin editing it right away inside the frame. When you save the page containing the frame, you will be prompted to save your new page (the one inside the frame) too. If you have a page already prepared, or if you want your Inline Frame to display an image, click the Set Initial Page... button. This opens the Insert Hyperlink dialog. Find the page or image you want to display and click OK. If you chose to display a page, you will see it straight away. If you chose to display an image the frame shows only the path to the file... To see what your picture is going to look like in a browser, switch to Preview where the image is displayed correctly...
Step 3: Re-Size the Frame Return to Normal view. Select the frame so that you can see the black dots around its edge. If your frame contains an image, simply click on the frame to do this. If your frame contains a page this isn't so easy as clicking on the page just places your cursor on that page. Clicking on the scroll bar doesn't help either! You will have to click on the extreme edge of the frame to select it. Now you can drag the dots to change the size and shape of the frame. Step 4: Customize the Frame With the frame selected, right-click and choose Inline Frame Properties... (or press [CTRL]+[ENTER]) to display the Inline Frame Properties dialog. This lets you set almost all the attributes described in the preceding section.