How to create banner ads that use the IFRAME tag using FrontPage

Article translations Article translations
Article ID: 272246 - View products that this article applies to.
This article was previously published under Q272246
Expand all | Collapse all

On This Page

SUMMARY

The IFRAME tag is defined in the Hypertext Markup Language (HTML) 4.0 specification by the World Wide Web Consortium. This tag allows Web authors to insert a frame in the middle of a Web page. This article explains how to use this tag to create alternative "banner advertisements" that work with Microsoft Internet Explorer. Microsoft provides programming examples for illustration only, without warranty either expressed or implied. This includes, but is not limited to, the implied warranties of merchantability or fitness for a particular purpose. This article assumes that you are familiar with the programming language that is being demonstrated and with the tools that are used to create and to debug procedures. Microsoft support engineers can help explain the functionality of a particular procedure, but they will not modify these examples to provide added functionality or construct procedures to meet your specific requirements. The following steps demonstrate how to create a series of Web pages to create banner advertisements.

Example Pages

Important Note

For each example page, create a new page in FrontPage and then switch to HTML view to insert the HTML and cascading style sheet (CSS) code described in each step.
  1. First, create the parent Web page that contains the IFRAME that loads the advertisements, and also create the style sheet that all the ad pages share.
    1. Save the following HTML code as "IFrameBannerAds.htm":
      <html>
      <head>
      <title>IFrame Banner Ads</title>
      <style>
      body { font-family: Arial, Helvetica; background-color:rgb(0,0,0); 
      color:rgb(255,255,255) }
      </style>
      </head>
      <body>
      <iframe src="ad_1.htm" width="400" height="100" align="center" 
      frameborder="0" marginwidth="0" marginheight="0" scrolling="no">
      Your browser does not support the IFRAME tag.
      </iframe>
      <h1 align="center">Welcome to My Web Site!</h1>
      </body>
      </html>
      						
    2. Save the following CSS code as "ad_style.css":
      a:link { color: rgb(0,102,153); }
      a:visited { color: rgb(0,153,102); } 
      a:active { color: rgb(0,102,102); }
      body { font-family: Arial, Helvetica; background-color: rgb(204,204,153); 
      color: rgb(0,51,51); }
      						
  2. Next, create the individual advertisement pages. (This example uses just three pages.) Each advertisement page uses the style sheet from step 1, and uses "client pull" to load the next page in the series. In addition, the advertisement pages use random, Dynamic HTML (DHTML) transition effects when they change to another page.
    1. Save the following HTML code as "ad_1.htm":
      <html>
      <head>
      <title>This is Advertisement 1</title>
      <link rel="stylesheet" type="text/css" href="ad_style.css">
      <meta http-equiv="refresh" content="5;URL=ad_2.htm">
      <meta http-equiv="Page-Exit" content="revealTrans(Duration=1.0,Transition=23)">
      </head>
      <body>
      <p align="center"><a target="_blank" href="http://www.microsoft.com">
      <img border="0" src="http://www.microsoft.com/library/toolbar/images/mslogo.gif"><br>
      Click here to visit Microsoft's web site!</a></p>
      </body>
      </html>
      						
    2. Save the following HTML code as "ad_2.htm":
      <html>
      <head>
      <title>This is Advertisement 2</title>
      <link rel="stylesheet" type="text/css" href="ad_style.css">
      <meta http-equiv="refresh" content="5;URL=ad_3.htm">
      <meta http-equiv="Page-Exit" content="revealTrans(Duration=1.0,Transition=23)">
      </head>
      <body>
      <p align="center"><a target="_blank" href="http://msdn.microsoft.com">
      <img border="0" src="http://msdn.microsoft.com/msdn-online/shared/graphics/banners/home-banner.gif"><br>
      Click here to visit the MSDN web site!</a></p>
      </body>
      </html>
      						
    3. Save the following HTML code as "ad_3.htm":
      <html>
      <head>
      <title>This is Advertisement 3</title>
      <link rel="stylesheet" type="text/css" href="ad_style.css">
      <meta http-equiv="refresh" content="5;URL=ad_1.htm">
      <meta http-equiv="Page-Exit" content="revealTrans(Duration=1.0,Transition=23)">
      </head>
      <body>
      <p align="center"><a target="_blank" href="http://www.msn.com">
      <img border="0" src="http://msimg.com/w/logo_bf2.gif"><br>
      Click here to visit the MSN web site!</a></p>
      </body>
      </html>
      						
When you browse the "IFrameBannerAds.htm" page with Internet Explorer, you see the IFRAME tag populated with the first advertisement page, followed shortly by each additional advertisement in the series.


REFERENCES

For more information about the technologies discussed in this article, please see the following W3C Web page:
HTML 4.0 Specification on the "The World Wide Web Consortium" Web site
Or, click the article numbers below to view the articles in the Microsoft Knowledge Base:
196471 How to use client pull in FrontPage Web documents
175721 Page Transition not available on frames page

Properties

Article ID: 272246 - Last Review: January 29, 2007 - Revision: 3.2
APPLIES TO
  • Microsoft Office FrontPage 2003
  • Microsoft FrontPage 2002 Standard Edition
  • Microsoft FrontPage 2000 Standard Edition
  • Microsoft Internet Explorer 6.0
  • Microsoft Internet Explorer 5.0
  • Microsoft Internet Explorer 5.0
  • Microsoft Internet Explorer 5.0
  • Microsoft Internet Explorer 5.0
  • Microsoft Internet Explorer 5.0
Keywords: 
kbhowtomaster KB272246

Give Feedback

 

Contact us for more help

Contact us for more help
Connect with Answer Desk for expert help.
Get more support from smallbusiness.support.microsoft.com