|
Frames Guide |
|
|
by Craig Walker |
What are frames? Frames give you the power to divide your web page into multiple, independant acting, web pages. This tutorial is a framed page. The stationary menu on the left is actually a separate web page that I have assigned to the frame on the left side.
Click on the images below to see a real page in the configuration shown and the code used to make it.
Each frame has data in it so you can see the scroll bars appear as needed. Not all frames will need the scroll bars, only the ones whose data exceeds the size of the frame. That is also why I made all the code tables 500 pixels wide. You will see some that create horzontal scroll bars and some that do not.
I included a border on Style 1. Click on Style 1 and resize the border by placing the cursor on it and when it turns into the double arrow I-Beam thing, click and drag it left and right. Pretty cool, huh? Of course you may or may not want your viewers doing that and those are some choices you can make. Read on.
Here are some of the common frame configurations. You can see the possibilities are endless, but the practicality ends shortly after 3 or 4 frames, for real data viewing.
|
|
|
|||
|
|
|
|||
|
|
|
These frames were made using the percent sizing method. Substitute absolute pixel values were necessary for your needs. By the way, in my browser, if I left-click on the frame images above while holding the shift button on the keyboard, I can save the htm file to my computer. That's one way to copy the code for your personal use. Another is to bring up the example frame page, highlight and copy the code, then paste into your text editor.
Frames Tags Explained:
HTML frames code consists of 3 basic tags
|
<HTML> <HEAD><TITLE> Framed Page </TITLE></HEAD> <FRAMESET COLS="158,*">
<FRAME SRC="yellow.htm"> </FRAMESET> </HTML> |
(asterisk) * = wildcard, use whatever is left over after the specific sizes are assigned
Note that the standard html code is used to open and close the code document. The FRAMESET tags take the place of the BODY tags normally found in that position. The FRAMESET tags can be used multiple times, as you will see, to nest framesets for configurations with rows and columns, like Style 7 for example.
Once we start a frame set we need to decide if we want to create rows or columns. We set this parameter in the opening FRAMESET tag.
<FRAMESET COLS="158,*">
Column width can be set as an absolute pixel value or as a percentage of the page or frame width. Unlike a table cell, the data can exceed the size of the frame.
(asterisk) * = wildcard, use whatever is left over after the specific sizes are assigned
The FRAMESET example above, creates a 2 column framed page (Style 1) where the first column is 158 pixels wide and the second column fills the remaining width of the page. The menu frame of this tutorial is 158 pixels wide, just to give you an idea of how much that is. I used an absolute pixel value for my left frame of this tutorial instead of a percent value because my menu items need that much room to prevent a horizontal scroll bar for smaller resolution viewing. The lesson pages are flexible, my menu is not.
Using the * wildcard for the second column allows the second column to take up all of the remaining width on the page.
<FRAMESET ROWS="158,*">
Row height can be set as an absolute pixel value or as a percentage of the page or frame height.
(asterisk) * = wildcard, use whatever is left over after the specific sizes are assigned
The FRAMESET example above, creates a 2 row framed page (Style 4) where the first row is 158 pixels high and the second row takes up the remaining space on the page.
Any reasonable multiple of rows or columns can be specified like this.
<FRAMESET ROWS="158,67,250,*"> or <FRAMESET COLS="50, 150,*,2*">
The 3 column code above creates a page with 50 & 150 pixel columns and two wildcard columns. The wildcard column with 2* size will be twice the size of the other wildcard column. For an 800 pixel width screen, the columns would be 200, 200, & 400 pixels.
<FRAMESET COLS="158,*">
<FRAME SRC="yellow.htm">
<FRAME SRC="green.htm">
</FRAMESET>
Using the FRAME SRC code above, our yellow.htm document will be loaded in the first column (Style 1). I hope the data is flexible or narrow because the viewing area is set to 158 pixels wide. Had it been ROWS="158,*" instead, the first row would contain the yellow.htm document (Style 4).
The green.htm document would be loaded in the second column filling up the rest of the page width.
Graphics can also be loaded as a FRAME SRC object as well.
<FRAME SRC="pictures/sobohome.jpg"> would load the sobohome.jpg image, from the pictures directory, into the designated frame.
<FRAMESET COLS="158,*">
<FRAME SRC="yellow.htm" NAME="wilbur">
<FRAME SRC="green.htm" NAME="frame2">
</FRAMESET>
You can link from a frame without a name. In other words, you can have a link in the first frame that will bring the linked object into the first frame, just like a normal page, without a designated frame name. But if you want to link from the first frame and have the page or object open in the second frame, you have to have a target name to send it to. The link needs to know where to send it. That is why we give the frame a name.
The name could be any alphanumeric combination. You cannot start your name with a dash or any other non-alphanumeric digit and no blank spaces in the name. To tell the truth, I don't know if spaces are allowed or not, but to keep maximum compatibility, use a dash or underscore instead.
|
Some acceptible names:
|
Some unacceptible names:
|
Using the FRAMESET code above, if we placed a link to the purple.htm page on the green.htm page, and wanted it to open in the left side frame, it would look like this.
<A HREF="purple.htm" TARGET="wilbur">
Do not get confused here. Just because we opened a new page in "wilbur", the frame name remains "wilbur". Once you name it "wilbur", it will always be "wilbur". Pages may come or go but the frame remains and will always be "wilbur" unless you change the FRAME NAME.
Speaking of links, there are a few link TARGET options you should be aware of. These can also apply to regular pages as well as framed pages. Note the use of the leading _ (underscore). Use it or lose it. Also note these command options are lower case only.
Extremely Important! One of the things that can really turn off your viewers is to link to a page and have it cramp in your frame. You should always use the "_top" & "_blank" TARGET options whenever linking to other websites. You can design your own content to fit your frames but other web designers have their own layouts and your viewers deserve to see them as planned.
Cramped links is one of those things people hate about frames. Nobody complains about intelligently executed frame pages though.
<BASE TARGET="framename"> You can use a BASE TARGET to set a default target for all links on the page. The menu in the left frame is a good example of this. Each menu item should open up in the right side frame named "buildweb". Instead of setting each link individually to link to buildweb, I set the base target to buildweb. All links, unless told otherwise, will link to the frame named "buildweb".
The "No Frames" link is an example of a link I set to TARGET="_blank". The local designation has priority over the base designation.
I place this tag right under the HEAD tags on my code page to set the BASE TARGET.
<BASE TARGET="buildweb">
FRAMEBORDER="NO" is used to turn off the border on a selected FRAMESET(s), when it works. The FRAMEBORDER="NO" option is set within the FRAMESET tag. When I tried it, it turned off the border but replaced it with a flat line the same size as the border. Try it if you like.
Some browsers will create a small border or line between frames by default, like the line from the NOBORDER experiment. Getting rid of that border or small line between frames can be a tough situation.
So what's the solution? Since all browsers seem to treat these things just different enough, it is almost necessary to use every possible combination known to HTML to set the border value to zero. Within the FRAMESET tag and the FRAME SRC tag you need to set the following parameters.
<FRAMESET ROWS="158,*" BORDER="0" FRAMEBORDER="0" SPACING="0" FRAMESPACING="0">
<FRAME SRC="mypage.htm" NAME="aframe" BORDER="0" FRAMEBORDER="0" SPACING="0" FRAMESPACING="0">
For this tutorial I set BORDER="0" and FRAMEBORDER="0" but I still get a border on my computer at work using MSIE. I do all this on my play computer at home using Netscape, but I reference it on MSIE at home also and there is no border here on MSIE. I may have to set the whole gamut of values for my frames too.
NORESIZE placed in the FRAME tag will prevent your viewers from resizing your frames. You can resize a frame with a border by placing the cursor on it until it creates the double arrow I-beam thing, left click and drag. Do not worry about your page, it will all go back to normal when they close or reload it. Other are not affected by someone resizing your frames, so I say, "If they want to, let 'em."
<FRAMESET COLS="100,*" BORDER="20" FRAMEBORDER="20">
<FRAME SRC="sobohome.jpg" MARGINWIDTH="1" MARGINHEIGHT="1">
<FRAME SRC="blue.htm" >
</FRAMESET>
<FRAME SRC="black.htm" NAME="james">
</FRAMESET>
The code above will create a 3 frame page with red borders 20 pixels wide. Like everything else, your results may vary depending on your viewer's browser. See the Color Chart for the color code options.
There is also a default border aound each frame, whether you can see it or not. The default border width is 6 pixels.
Let's add a graphics image to a frame and have it fill the frame, no more, no less. A perfect fit, well as close as possible.
We have a picture, "sobohome.jpg", and we want to put it in a frame so it will always be visible.
"sobohome.jpg" = 100 x 100 pixels
<FRAMESET ROWS="100,*" BORDER="0" FRAMEBORDER="0">
<FRAMESET COLS="100,*" BORDER="0" FRAMEBORDER="0">
<FRAME SRC="red.htm" MARGINWIDTH="1" MARGINHEIGHT="1">
<FRAME SRC="blue.htm" >
</FRAMESET>
<FRAME SRC="black.htm" NAME="james">
</FRAMESET>
The code above creates a 3 frame page with a small corner frame for our picture. Notice the minimum margin and the ROW and COLUMN sizes, 100 x 100. It should be the same size as the picture, right? Check out the frame page and click the Sobo link to view the picture. Go There
Looked good, HUH?
NOPE! There is still the minimum margin of 1 pixel on each side of the picture. So we need to add 2 pixels to the ROW and COLUMN sizes, 102 x 102 pixels. That should do it. Check It Out
That looked better?
No Way? Oh yeah. Theres that minimum border thing. The default border is 6 pixels on each side, left, right, top, and bottom. Frame sizes are actually measured center to center on the borders. Since the border is 6 pixels in this case, we need to add 1/2 the border size to each side, which in this case is 3 pixels x 2 sides (or top and bottom). If we add the 6 border pixels and the 2 minimum margin pixels to the picture size we come up with a frame size of 108 x 108 pixels. In other words, for a default border width, whether you can see it or not, just add 8 pixels to your object size to calculate the appropriate frame size.
<FRAMESET ROWS="108,*" BORDER="0" FRAMEBORDER="0">
<FRAMESET COLS="108,*" BORDER="0" FRAMEBORDER="0">
<FRAME SRC="red.htm" MARGINWIDTH="1" MARGINHEIGHT="1">
<FRAME SRC="blue.htm" >
</FRAMESET>
<FRAME SRC="black.htm" NAME="james">
</FRAMESET>
This is the new code. Click the Sobo link.Check It Out
Now, that's what we had in mind. By the way, remember the BORDERCOLOR example page? Since the BORDER size was set at 20, I had to add 22 pixels to the picture size to come up with a 122 pixel frame size. Worked out well.
SCROLLING="NO" is used to prevent a scroll bar from being created in a frame. Think about that though. Do you really want to prevent someone from accessing your data that you worked so hard to display? It's there if you need it. Place the SCROLLING="NO" option in the FRAME tag. You can also force a scroll bar by using the SCROLLING="YES" option. The last SCROLLING option is "AUTO" which is also the default, so you do not really need to write it in.
|
|
by Craig Walker |
