| Click here to bookmark this site! | Home | Contact | About | Site Map |
 |
|
Quick Menu
|
22. Web Page FramesYou likely have seen web pages that use frames. You would have seen them on web site pages and possibly not even realized. Frames make the page you are viewing up out of up to 2, 3 or even more separate HTML pages all placed into frames and are completely independent of each other to give the appearance of 1 whole page. The advantage is clear for web sites that contain navigation links to many other web pages. This allows control of the site in the left frame with the navigation and is always visible and the content to be displayed in the right frame. Hyperlinks have special uses within framed web pages. Sometimes a hyperlink in one frame will replace the content in that frame with new content. Other times a hyperlink will load new content in another frame. And you can have links that will completely replace all of the frames with a new page. This is actually the same kind of link "targeting" we learned in lesson 21. Click to see a brief EXAMPLE of how frames work. You can have your frames set up in many different ways. |
|
||||||||||||
|
Site Stats
|
WHAT ARE THE DISADVANTAGES OF FRAMES WHEN SHOUD I USE FRAMES? FRAME BASICS  Each of the sub-divided areas you see in the diagrams above will be associated with its own separate HTML file that defines what goes into that particular box. Therefore, your first step should be to sketch out how you want the page to look like after it's been divided up and how much relative space each area needs. Looking at the sketches above, example 1 is made of 2 columns and example 2 contains 2 rows. Example 3 can be seen as two rows, with the second row containing two columns. Example 6 can be seen as three rows, where the middle row has two columns. And so is Example 5 except that first row is the one with two columns. And Example 7!!! OK here goes, it starts as three Rows, The first row is then split into 2 columns, and the second columns is the split into 2 rows. Then the second row is split into 2 columns as well, the first column is split into 2 rows the second columns is left as a whole.. The third row is left as is. If you would like to view what the source code for this would look like then CLICK HERE and if you want to view the page then CLICK HERE. So each collection of rows and columns makes up an HTML frame set and the HTML "blueprint" document for the framed page can have one or more frame sets. The HTML format is slightly different from the ones we've created so far-- it lacks a set of <body>...</body> tags. When creating frames you must remember that there are no body tags in the document, If you put them in your document will not render properly. This make sense from what we learned way back in lesson 1 since none of the frame set definitions actually specify the content that appears on the web page (normally everything inside the <body>...</body> tags,) but rather the structure of how they are arranged. Below is a generalized format for a "blueprint" HTML document: <html>
<head>
<title>Title of this Whole Page</title>
</head>
<frameset rows/cols="X,Y,...Z">
<frame src="frame_source1.html">
<frame src="frame_source2.html">
:
:
<frame src="frame_sourceN.html">
</frameset>
<noframes>
This is what someone would see who does not have a web
browser that can display frames.
</noframes>
</html>
So each of the frame set tags defines either a set of rows or columns (either <framset rows=...> or <frameset cols=...>). The numeric values of X, Y, and Z indicate the amount of screen area each row/column will occupy, either in a percentage of the browser window size, or an absolute number of pixels. The number of items in this list defines the number of rows or columns. For each row/column specified, this dimension is associated with the HTML document specified in the subsequent list of <frame src=...> tags. The most challenging part of designing a framed web site from scratch is developing the layout structure of your main document. Now Remember, the numbers that you provide in the <frameset...> tag, indicate the number of and the dimensions of a set of rows or columns within your page. You can use either percentages (i.e. ROWS=10%, 30%, 60%) or absolute numbers of screen pixels (i.e. COLS=100, 300, 80, 200). The choice of this depends on whether the design requires a particular frame to always be the same size (use absolute pixels) or if it can scale to the proportions of the viewer's browser window (use percentages). This is how we might write up Example 1 <html>
<head>
<title>A Two Row Framed Page</title>
</head>
<frameset cols="15%,85%">
<frame src="frame_source1.html">
<frame src="frame_source2.html">
</frameset>
<noframes>
This is what someone would see who does not have a web
browser that can display frames
</noframes>
</html>
You can easily modify this document to create the layout of example 2 by changing cols= to rows=. In either of these two cases, if the viewer shrinks or expands their web browser window, the areas of the frames will adjust according to the percentages of space provided. If you wanted to fix the frame to an absolute width, say in example 2 to have the top row to always be 100 pixels high, you would change the tag to read: <frameset rows="100,*"
Ahoy!! The "*" or "wildcard" value for the dimension tells the web browser to use the remaining space that is left for the bottom row. Now let's look at a more complex frame document, the one that would define example 7:
<html>
<head><title></title></head>
<!-- Sets up the initial 3 rows -->
<frameset rows="100,*,100">
<!--Row 1 - Splits the row into 2 coloumns -->
<frameset cols="25%,75%">
<frame src="a.htm" name="framea">
<frameset rows="50%,50%">
<frame src="b.htm" name="frameb">
<frame src="c.htm" name="framec"">
</frameset>
</frameset>
<!-- Row 2 Splits into 2 columns -->
<frameset cols="50%,50%">
<frameset rows="50%,50%">
<frame src="d.htm" name="framed">
<frame src="e.htm" name="framee">
</frameset>
<frame src="f.htm" name="framef">
</frameset>
<!-- Row 3 Stays as is -->
<frame src="g.htm" name="frameg">
</frameset>
<noframes>
<body>
<p align="center">If you can read this
message your browser does not support frames.</p>
</body>
</noframes>
</html>
This web page will require 8 different HTML files to display, one blueprint document with the HTML code above plus 7 more HTML documents that make up the content as defined by the <frame src...> tags. Carefully compare the diagram with the "nesting" of the multiple <frameset...> tags. Yes, it gets complicated! And... You will learn even more things you can do with the HTML code for frames as you work through the examples below. So for just an experiment I'm going to show you how to cut you site up into frames. You don't have to cut up the site you've been working on. You can DOWNLOAD a second copy to alter and practice on.
The top frame will contain our heading to our web site along with the image of the widow maker. The two bottom frames, the frame to the left will contain our navigation. And the right frame will contain all our sites content.
CHECK YOUR WORK A FEW MORE FRAME OPTIONS
<frameset border="N"
<frameset frameborder="N"
<frameset bordercolor="#xxxxxx"
Each attribute has a different function in the <frameset tag changing between netscape and internet explorer. The BORDERCOLOR attribute changes and sets the border color of your frames. INDEPENDANT PRACTICE Top of page | Previous Lesson| Lessons Index | Next Lesson |
