Jump to Main Content

Creating a frame

Adding content to left & right panel

Open both left_frame.html and right_frame.html in a text editor.

Inside left_frame.html add the following code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD  HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"  content="text/html; charset=iso-8859-1">
</head>
<body>
<h3>Left Side Navigation</h3>
<p><a href="http://www.yahoo.com" target="right">Yahoo!</p>
<p><a href="right_frame.html" target="right">Main Content</p>
</body>
</html>

Anchor tags— target attribute

Remember, we gave our right panel a name of right, which is used above. When we load our frameset, click the Yahoo link and Yahoo’s home page will load into the right panel. It doesn’t matter whether you link to another website or to a web page in your website, you must use a target attribute with the appropriate value.

Next, copy the following into right_frame.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD  HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"  content="text/html; charset=iso-8859-1">
</head>
<body>
<h3>Ryan's Page</h3>
<p>Lorem ipsum dolor sit amet,  consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu.  Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac  habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis.  Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet  pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate  lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per  conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros,  semper a, tempor et, rutrum et, tortor.</p>
<p>IMAGE HERE PROBABLY</p>
</body>
</html>

Save your file and preview the results.

Frame loading left and right panels

Here’s how it works

Let’s summarize how this works: when you load frame.html in your browser, it reads your frameset tag. The frameset tag determines whether to display the frameset in columns or rows. Then, it looks for the HTML files which make up the frame, in our case, left_frame.html and right_frame.html and requests these from your server. The frameset then loads these files into one frame. The following illustration depicts this concept:

Visual explanation of frameset loading

We can see the final result below:

Frameset loaded

Difference between frameset and frames

Framesets are considered a container or parent file which contains one or more frames. Frames are the individual HTML files that are loaded into the browser.

Site Maintenance

This can become a very time consuming and tedious process. Each new file you create, you must make sure you link properly in left_side.html so that the file loads into right_content.html. Also, understand you can add any HTML element you want to left or right frame. The only difference is how you create the frameset page and how we link to the right frame.

Resizing Issue

If we position our mouse in the middle sidebar:

Frameset resize issue

If we drag the sidebar to the left or right it would move. There is a simple fix, modify your frameset tag:

<frameset cols="180, *">
<frame src="left_side.html" name="left" noresize>
<frame src="main_content.html" name="main">
</frameset>

Save your changes and preview the results.

Resize fix

Summary

In this article you created a frame layout. You also learned a bit about:

  • Using a text editor to create the frameset
  • How frame work
  • Targeting links to one specific frame
  • A resizing issue regarding frames and a solution
  • A browser anomaly regarding Internet Explorer, along with two solutions

Take the knowledge gained here and create any frame of your imagination!

If you have questions, contact me.

top of page