Dan Fergus Design > Student Resources > Syllabus > iFrames

Des•301 Advanced Web Design

Exercise: iFrames

Once upon a time frames were all the rage in web design. Frames allow you to display multiple html pages in the same browser window. Typically one document would contain the navigation, and a second would contain changing content. However, frames have a number of drawbacks, and they have largely fallen out of favor.

A variation on frames that still enjoys a fair amount of popularity is the iframe. The "i" stands for "in-line," for unlike traditional frame sets, the frame containing a new html document is embedded right into the midst of another document, creating a window effect. This makes iframes great for photo albums and portfolios.

Procedure

  1. Create a new folder called "iframesExercise" (or something similar) in your root folder (note, if you've already done the frameset exercise, you can use the same root folder).
  2. Create three separate pages called red.html, green.html and blue.html. Give each the appropriate background color (for more detailed instructions, see the frameset exercise). Note that if you made a red, blue and green page for the aforementioned frameset exercise, you can use those pages again.
  3. Now create a new html file and save it as "mainFramePage.html". Create an unordered list with links to the three color pages:

    4. <ul>
    <li><a href="red.html">Red Page</a></li>
    <li><a href="blue.html">Blue Page</a></li>
    <li><a href="green.html">Green Page</a></li>

    </ul>

  4. Elsewhere on the page (below or next to the list) create an iframe: add the following code into below the list:

    5. <iframe name="pageGoesHere" width="500" height="340" frameborder="0">
    </iframe>

  5. If you preview the main page now and press a link, the color page will load into the place of the main page. To get the color pages to load into the frame we need to add targets to the links:

    6. <ul>
    <li><a href="red.html" target="pageGoesHere">Red Page</a></li>
    <li><a href="blue.html" target="pageGoesHere">Blue Page</a></li>
    <li><a href="green.html" target="pageGoesHere">Green Page</a></li>

    </ul>

  6. Try it now.

Course Outline

Syllabus

Student Resources