Atryeu Designs ~ A resource center for Web/Graphics Design, Computers and the Internet

We have now worked with the Frameset code, but what about the Frame code? Here is where you will set the default pages to load for your frames when a visitor loads the site. There are also a few settings here you can use to customize the appearance a little bit.

<frameset cols="150,*">
<frame src="frame1.html">
<frame src="frame2.html">
</frameset>

The above will show a page with 2 frames setup in columns.

We have two Frame tags within our code currently. The only thing set within them is an SRC value that points to the files "frame1.html" and "frame2.html". This is a very important part of the code. If you do not have the SRC property along with a file name in there, your frame will not work properly. You can use a full link to the file if you prefer, however just the path to the file will work fine as well.

<frameset cols="150,*">
<frame src="frame1.html" name="nav">
<frame src="frame2.html" name="content">
</frameset>

The above will show a page with 2 frames setup in columns.

In this next code shown above, a Name property has been added into the Frame tags. This also is a very important part of doing Frames, especially if you plan on loading links into one of the frames within your site. For example, your left frame contains you site links and the right frame will contain your site content. When a visitor clicks on a link in the left frame, you want the content to load in the right frame. To do this, your frames MUST have a name, and you also need to make sure that your links are setup to load in the correct frame. For example, you click on a link called Home located in your left frame and it needs to load your home page into the right frame. You would use a link setup similar to the one below:

<a href="home.html" target="content">

The above creates a link that will open the page in a frame called "content" or if no frame by that name is found, it will open the page in a new window.

All of your links you create for one frame to be loaded in another need to be setup similar to the above. If no target is set for the links, they will open inside of the frame they were clicked in which can cause problems for the visitor trying to view your site correctly.

<frameset cols="150,*">
<frame src="frame1.html" marginheight="5" marginwidth="5">
<frame src="frame2.html" marginheight="10" marginwidth="5">
</frameset>

The above will show a page with 2 frames setup in columns and provide margins within the frames.

The above code will create a margin within your frames around the content being loaded. This will sometimes help align your content so it looks more organized and nicer. The margin values are pixels so small numbers may not be very noticeable.

<frameset cols="150,*">
<frame src="frame1.html" scrolling="no" noresize>
<frame src="frame2.html">
</frameset>

The above will show a page with 2 frames setup in columns and will set the first frame to not show a scrollbar or allow to be resized.

With the above settings, the left frame will never have a scrollbar visible, even if the content stretches across or below the height/width of the frame. It is also set so the visitor cannot resize the frame by using the mouse to drag it out further and increase it's width. Since the "noresize" part of the code should be obvious, I will skip over that and mention the scrolling.

With the "scrolling" set to "no", there will never be a scrollbar present within that frame. If it were set to "yes" then a scrollbar would be visible even if there is not enough content to stretch out the page within the frame. You can also set this to "auto" if you choose, however there is really no need since that is actually considered to be the default setting. Setting it to "auto" though will only show a scrollbar if a visitor needs to scroll up, down or over. If all of the content fits perfectly in the frame and there is no need to use a scrollbar, then none will be visible.

Unless you make sure to set your frames so they can be loaded just fine in a small screen resolution, I personally would not turn the scrolling or resize off. A lot of people still use small screen resolutions. If the page cannot be safely viewed in the old 640 pixel resolution, I would be sure to allow the visitor to resize the frame and allow the scrollbar to be visible if needed.

The NoFrames Code

You now have a site setup to use frames. So, what about the visitors that come to your website and use a browser that does not support frames? There are two options for you here.

You could setup an entrance/gateway page that contains a link to take a visitor to the Frames version of the page and another link to take a visitor to a non-frame version of the page that would contain all of your site links still. You could even setup this page using tables so you could get it to look almost exactly like your frames page.

Or, you can use the NoFrames code. The code is setup on your Frameset page and it can be set to tell the visitor their browser does not support frames, or you could even setup code similar to the first option but it would all be done without having to create your entrance page or another separate file to contain the extra code. Let me show you an example:

<frameset>
<frame src="frame1.html">
<frame src="frame2.html">
</frameset>
<noframe>
Your browser does not support Frames
</noframe>
The NoFrame code is placed underneath your Frameset codes but before the closing HTML code.

Any text or code you place within the NoFrame tags will only be shown if your visitor's browser does not support frames. In the example above, I told the visitor that their browser does not support frames. You could dress the text up so it is a different font type, size, color or against a background if you like. You could even setup an entire page's worth of content with your site links or whatever you like instead. You CAN use the Body tag within the NoFrame code if you choose to. You could also add Style or Script tags if you like. Just make sure you close the NoFrame tag after you finish and remember that you will not be able to see this code work unless your browser does not support frames. If you wish to see how your code looks after you complete it, you will need to copy and paste anything between the NoFrame tags into a new web page file and preview it that way.

Finishing Up

After your Frameset code has been finished, you will need to create your pages you specified within the Frame codes. In the examples above, that would be the "frame1.html" and "frame2.html" pages. Make sure if you set a width on any of your frames that you stick to that width when you create the pages for them! If your frame is set to 150 pixels in width and you create a page that will load within that frame that contains graphics larger than 150 pixels in width, the site will not look correct when it is viewed.

If you use CSS with your websites, you will need to either use an external CSS file and link it on each of your pages, or enter the code on every single one of your pages so everything shows up correctly.

If you would like your Frame site to look much more advanced, more organized and more decorative you might look into using Inline Frames (also called IFrames) instead.