|Atryeu Designs » Web Design » Tutorials & Guides » Frames Part 2|
The Frame Code
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.
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.
<frame src="frame1.html" name="nav">
<frame src="frame2.html" name="content">
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.
<frame src="frame1.html" marginheight="5" marginwidth="5">
<frame src="frame2.html" marginheight="10" marginwidth="5">
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.
<frame src="frame1.html" scrolling="no" noresize>
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
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:
Your browser does not support Frames
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.
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)