Frames
Frames are used to organize websites and offer additional navigational aids. Frames share the same layout look as tables.
- Allow the viewer to see more than one page at a time, without cluttering up the screen. Each page displays in its own window.
- Used for navigation instead of menu bars or tables so a table of contents can be "linked" to a window of detailed information.
- Display banners that must remain stationary while other parts of thewebpage change
- load pages faster that are part of a layout - banner / contents / data pages
One of the biggest drawbacks is maintaining frames. You need to know exactly how each HTML page will be loaded. As you add and remove pages, you will need to remember just which frame files show up where and where the linked documents from a particular page should show up.
Other concerns with frames include:
- viewers can't bookmark individual pages within a frame
- often require lots of clicks to get back to the main page
- problems with screen resolutions and font sizes
- search engines have a problem "indexing" framed pages
- secure servers handling online ordering can't display the "key" icon for Netscape on framed pages
- printing problems
Frames could be called 'windowpanes'. Each pane displays different information. You decide how many panes your window will have, size of each, borders, and if scroll bars should be included or not. Each frame contains its own webpage and theoretically can be viewed independently.
Unlike other HTML pages, FRAMES require a separate HTML page to setup the FRAMES. On this page, the <body> tag is replaced by the <frameset> tag. This page is called the FRAMESET page. Thus, this controlling HTML page's sole purpose is to give the instructions on how the framed page will be divided up. The frameset is made up of a HTML page for each individual frame in the layout design.
That is all it does - divide up windows. In doing this, the frameset specifies how to divide up the windows, but the key concept to remember is whenever you want to do some dividing - use <frameset>.
Some information displays better vertically and some displays better horizontally. Frames will display information either in rows (horizontally), vertically (columns) or a combination of both.
A common frames configuration is to have a stationary banner frame across the top of your page with a dynamic frame down the left side that lists the table of contents for your 'frame page'. The main area of the screen may be a contents frame, data that changes whenever the viewer clicks on a new topic in the table of contents.
Return to the Top
Prior to coding:
- Sketch out the page layout. Remember, a frames page is actually a combination of several other HTML pages.
- Determine the specifics of what the "page" will look like: size of each frames and if the frames should be in rows (horizontal) or columns (vertical) or a combination.
- Determine which type of frames will be utilized: dynamic frames, stationary banner frames, and/or contents frames.
- Determine what webpage(s) the viewer will see first when they access your site
- Determine what information will be displayed in frames and what information will not be displayed in frames.
- Create all the webpages that will be linked together.
Return to the Top
Frames Practice
Create the pages. Save each to the same folder. Example:
<html>
<head><title>Creating Frames Example Banner</title></head>
<body>
<p>Example Page for Frame #1 - banner for top of page</p>
</body>
</html>
Save this as frame1_banner.htm
<html>
<head><title>Creating Frames Example Links Page</title></head>
<body>
<p>Example Page for Frame #2 - links for series of pages</p>
<p>Copy into this page all of the links that you have on the original nonframes version of your page.</p>
<p>To make an orderly arrangement of these links, include each link as a separate item in list or separate each line with BR.</p>
<p>Modify each link to target it into the display "main information" frame.</p>
<ul>
<li><a href="http://frame3_display.htm" >Homepage</a></li>
<li><a href="http:// frame4_display.htm">Information</a></li>
<li><a href="http://www.dcccd.edu">DCCCD</a></li>
</ul>
</body>
</html>
Save this as frame2_links.htm
<html>
<head><title>Creating Frames Example Homepage</title></head>
<body>
<p>Example Page for Frame #3 -<br>
First page of information that will have a link from the table of contents</p>
<p>This is also your "home page"</p>
<p>Copy into this page an original nonframes home page. </p>
</body>
</html>
Save this as frame3_display.htm
<html>
<head><title>Creating Frames Example Information Page</title></head>
<body>
<p>Example Page for Frame #4 - <br>
second page of information that will link to table of contents</p>
<p>Copy into this page an original nonframes home page. </p>
</body>
</html>
Save this as frame4_display.htm
Result: a folder that contains 4 complete standalone html pages.
Return to the Top
Making your Master Page…
<html>
<head><title>Creating Frames Example Master Frameset Page</title></head>
<body>
</body>
</html>
NOW...Remove the <body> tags! The FRAMESET page doesn't use them...
<html>
<head><title>Creating Frames Example Master Frameset Page</title></head>
</html>
...it uses <frameset> tags instead.
<html>
<head><title>Creating Frames Example Master Frameset Page</title></head>
<frameset>
</frameset>
</html>
Save the frameset template. Save it in your folder (with all the other pages) as frameset_page.htm
Remember: You must have a closing </frameset> for each opening <frameset>!
If you try to open it with your browser now it will be blank. Why? All you have said so far is "this is my Master Frameset Page".
Return to the Top
Creating Frames in Columns
This is the first column. This is the second column.
Tell the browser to split the main window into 2 columns, each occupying 50% of the window:
<html>
<head><title>Creating Frames Example Master Frameset Page</title></head>
<frameset cols="50%,50%">
</frameset>
</html>
The <frameset> tag does all the dividing into columns.
<frameset cols=". . .">
- tells the browser how many columns to create and how much of the screen to allocate to each column
- Specify as a percentage - 50% is the width of the first column
- Percentages allow flexibility for various size screens
- Specify as number of pixels - 50 pixels
- Specify * instead of a number.
- Provides the frame with * whatever space is leftover.
- You can use more than one variable (*) at a time.
Our example is still blank, but we have one more thing to do before our 'system is operational'. We must tell the browser what to put in each frame.
<html>
<head><title>Creating Frames Example Master Frameset Page</title></head>
</html>
<frameset cols="50%,50%">
<frame src="frame2_links.htm " name="links">
<frame src="frame3_display.htm " name="homepage">
</frameset>
</html>
<frame src=". . ." name=". . ." >
- SRC identifies URL for the page that will be initially displayed in this frame when the viewer first opens to the frameset.
- NAME identifies the frame. These must be very unique and not repeated elsewhere! The name is used to TARGETs the page's location within the frameset. More on TARGETS later…
- For each row, there must be a matching <frame src="..." NAME="...">
You now have a fully functional framed page!
Return to the Top
Other Options…
<html>
<head><title>Creating Frames Example Master Page</title></head>
<frameset cols="30,*">
<frame src="frame2_links.htm " name="links">
<frame src="frame3_display.htm " name="homepage">
</frameset>
</html>
30 = width of the first column
* = provides this frame with whatever space is leftover
Return to the Top
More than Two Columns…
Can we divide it into more than 2 pieces? Yes, just make sure that you specify a page for each section ("frame") or the browser's going to get confused.
<html><head><title>Creating Frames Example Master Page </title></head>
<frameset cols="30%,35%,35%">
<frame src="frame2_links.htm" name="links">
<frame src="frame3_display.htm " name="homepage">
<frame src="frame4_display.htm " name="information">
</frameset>
</html>
We can make frames all different sizes. Just make sure your arithmetic is correct or the browser will come up with its own interpretation!
We can specify sizes for two frames and the leftover space will go to the third frame:
<html>
<head><title>Sample Frames</title></head>
<frameset cols="30,*,40% ">
<frame src="buttons.htm" name="buttons">
<frame src="openingpage.htm" name="openpage">
<frame src="additional_information.htm" name="additional">
</frameset>
</html>
30 pixels wide whatever space is left over 40% of the width of the display area
The first frame The second frame The third frame
We can have more than one leftover frame and specify a size relationship between them:
<html>
<head><title> Sample Frames </title></head>
<frameset cols="30,*,2*">
<frame src="buttons.htm" name="buttons">
<frame src="openingpage.htm" name="openpage">
<frame src="additional_information.htm" name="additional">
</frameset>
The browser displays everything in order. The first <FRAME> is displayed according to the first size attribute in the <frameset> tag (50 for frame1) and the second frame is displayed with the second size attribute (* for frame2) and the third frame is displayed with the third size attribute (2* for frame3).
Translated this says:
1. Make 3 frames.
2. Make the first 50 pixels wide.
3. The rest divide between frames 2 and 3 but make frame 3 twice as big as frame 2.
4. To divide the remaining space up unevenly, add a number to the * (2*). Thus, 2/3 of the remaining space will go to the frame marked (2*) and the last 1/3 will go to the frame marked with just a plain *.
Return to the Top
Creating Frames in Rows
<html>
<head><title>Sample Frames</title></head>
<frameset rows="65,*">
<frame src="banner.htm" name="banner">
<frame src="home.htm" name="photos">
</frameset>
</html>
<html>
<head><title>Sample Frames</title></head>
<frameset rows="30%,15%,*">
<frame src="banner.htm" name="banner">
<frame src="links.htm" name="links">
<frame src="home.htm" name="photos">
</frameset>
</html>
<frameset rows=". . .">
- 65 or 30% = height of the first row
- * = provides this frame with whatever space is leftover
- 60 or 35% = height of the second row
- can be written as number of pixels, percentage (%), or variable (*)
<frame src=". . ." name=". . ." >
- SRC identifies URL for the page that will be initially displayed in this frame when the viewer first opens to the frameset.
- NAME identifies the frame. These must be very unique and not repeated elsewhere! The name is used to TARGETs the page's location within the frameset. More on TARGETS later…
- For each row, there must be a matching <frame src="..."name="...">
Return to the Top
Frames of Different Sizes Combining Rows & Columns…
Just as tables can be nested, framesets can also be nested to allow for combinations of rows and columns.
One common frame configuration, as displayed above, has the screen divided into two columns, with the left column spanning the length of the page (for links) and the right column divided into two rows: one for the banner and the lower frame for the contents.
<html>
<head><title>Sample Frames</title></head>
<frameset cols="55,*">
<frame src="links.htm" name="links">
<frameeset rows="25%,*">
<frame src="banner.htm" name="banner">
<frame src="homepage.htm" name="information">
</frameset>
</frameset>
</html>
Another common frame configuration is to have one row spanning the width of the screen and the second row divided into two columns. This look is achieved by inserting a frameset in the second row - creating the nested frames.
Return to the Top
LINKING with Targets
Linking in framed pages can get a little complicated, depending on how many frames you have and where you want the links displayed.
Whenever a link is clicked in the List of Links, we would like the page to show up on the Home Page side of the frameset.
STEP #1: Let's go back to our master frameset and ADD the NAME of each page. This provides the browser with directions as to where to replace a page with another page when the user clicks via a link.
Master Page Coding
<html>
<head><title> Creating Frames Example Master Frameset Page </title></head>
<frameset rows="55, *">
put the banner in the first row, this is stationary
<frame src=" frame1_banner.htm " name="banner">
now we will do some nested frames
<frameset cols="70%,*">
now come the content pages, with the home page displaying
<frame src=" frame3_display.htm " name="homepage" >
<frame src=" frame4_display.htm " name="information">
now we will add the hyperlinks page
<frame src=" frame2_links.htm " name="links">
</frameset>
</frameset>
</html>
STEP #2: Remember the "name" tag inside the frameset? The browser uses this name tag to determine where to load the new HTML page. To complete the process, the link uses the attribute TARGET to tell the browser that any link on the links pages should open a page in the "homepage" frame.
If you do not provide a TARGET tag, any files that you link to will be automatically loaded into the frame that the user is clicking in. Proceed with caution! This will certainly confuse the browser and your user!
To make an outside link load into a full browser window, change the TARGET to _top. (Note: in lower case... very important!)
<html>
<head><title>Creating Frames Example Links</title></head>
<body>
<p>Example Page for Frame #3 - <BR>
table of contents for series of pages</p>
<p>Copy into this page all of the links that you have on the original non-frames version of your page.</p>
<p>To make an orderly arrangement of these links, include each link as a separate item in list or
separate each line with BR.</p>
<p>Modify each link to target it into the display "main information" frame.</p>
<ul>
<li><a href="http://frame3_display.htm" target="homepage" >Homepage</a></li>
<li><a href="http:// frame4_display.htm" target="homepage">Information</a></li>
<li><a href="http://www.dcccd.edu" target="_top">DCCCD</a></li>
</ul>
</body>
</html>
Magic target tag options:
- _top - opens a link in the full browser window without frames. Good way of resetting the browser if you link to any other outside website.
- _blank - opens a link in a new browser window (with the old window still open too)
- _self - opens the page in the same frame (Same as doing nothing)
- _parent - opens a link in the immediate (parent) frameset of a nested frame
You will use these options for links off of your own pages most of the time.
These are the only targets that can begin with something other than an alpha-numeric character. In addition, any target beginning with an underscore_ that is not one of the target options may behave unpredictably.
NOTE: _new will open a link in a new window. So will _nancy, _library… Any TARGET that is not defined somewhere will usually result in a new window opening up.
Return to the Top
|
